| Kosten | Суббота, 13 Апреля 2019 | Сообщение 1 |
| Слово webkit стало более популярным в последнее время, когда речь заходит о CSS и веб-дизайне. Тем не менее, все еще существует некоторая путаница в отношении термина «webkit» с точки зрения того, что он означает, и как он используется при кодировании CSS. Webkit - это механизм рендеринга браузеров, используемый для браузеров Apple Safari и Google Chrome. Это также синтаксис CSS, который используемый для модулей CSS3.
Webkit Browser Engine
Чтобы понять актуальность, а это прежде всего важно иметь практические знания о механизмах веб-браузера. Это компонент браузера, который отвечает за визуализацию контента, где по этой причине это также упоминается как механизм веб-рендеринга.
Проще говоря механизм рендеринга — это компонент, который отвечает за то, что видно в браузере, где берет данные из HTML или PHP, форматирует их в соответствии с CSS или XSL и передает их браузеру пользователя.
Не все веб-браузеры используют один и тот же механизм рендеринга. Internet Explorer использует движок Trident, продукты Mozilla, такие, как Firefox, используют Gecko, Opera использует движок Presto, а движок WebKit используется браузерами Safari и Chrome.
Из-за различных движков рендеринга в веб-браузере иногда возникают проблемы перекрестной совместимости для макета контента. Другими словами, это контент, который возможно был разработан для Internet Explorer, может не отображаться так, как задумал дизайнер в другом браузере, таком как Mozilla Firefox.
Webkit в синтаксисе CSS3
Таким образом термин «webkit» также является частью синтаксиса CSS, используемого для визуализации контента для браузеров Safari и Chrome. Из-за отсутствия кросс-совместимости, код webkit, возможно, должен быть включен в CSS, чтобы гарантировать, что он будет отображаться так, как задумано в Chrome и Safari.
Актуальность webkit связана с CSS3, где с модулями CSS нового поколения, которые предоставляют такие функции, как эффекты перехода, макеты с несколькими столбцами и анимация. Хотя все браузеры могут отображать старые спецификации CSS в значительной степени в одинаковой степени, это не относится к новым модулям CSS3.
Например в коде CSS3 расположенном ниже зеленого квадрата, он расширяется по горизонтали в течение 2 секунд, когда на него наведена мышь.
Код div { width: 100px; height: 100px; background: green; /*Start transition effect*/ transition-property: width; transition-duration: 2s; }
div:hover { width: 300px; }
Чтобы тот же эффект перехода отображался в браузерах с использованием механизма WebKit, где код CSS будет следующим:
Код -webkit-transition-property: width; -webkit-transition-duration: 2s;
Код – webkit будет игнорироваться другими механизмами рендеринга в веб-браузере.
| | Страна: (RU) |
| |
