• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Что такое WebKit и как все связано с CSS (WebKit - это движок рендеринга для браузера HTML и CSS)
Что такое WebKit и как все связано с CSS
Kosten
Дата: Суббота, 2019-04-13, 01:14 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


Слово 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 будет игнорироваться другими механизмами рендеринга в веб-браузере.
Прикрепления: 1976037.png(86.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Что такое WebKit и как все связано с CSS (WebKit - это движок рендеринга для браузера HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: