Что такое WebKit и как он связан с CSS?

Question

Совсем недавно я видел вопросы с тегом "webkit". Такие вопросы обычно являются веб-вопросами, касающимися CSS, jQuery, макетов, проблем совместимости между браузерами и т. Д.

Так что же это за "webkit" и как он связан с CSS? Я также заметил много -webkit-... свойства в исходном коде для различных сайтов. Эти два связаны?

Обновить

Итак, из ответов на данный момент... WebKit - это движок рендеринга веб-браузера HTML/CSS для Safari/Chrome. Существуют ли такие движки для IE/Opera/Firefox и каковы различия, плюсы и минусы использования одного над другим? Могу ли я использовать функции WebKit в Firefox, например?

Главный вопрос... Поддерживается ли WebKit в IE?

Обновление 2

Все основные браузеры используют разные механизмы рендеринга. Я думаю, что это большая причина, почему так много кросс-браузерных проблем совместимости!

Итак, есть ли какой-то проект или переход к стандартному движку рендеринга, который будут использовать ВСЕ браузеры? Сможет ли HTML5 положить конец проблемам кросс-браузерной совместимости?

Answer 1

Обновление: очевидно, WebKit - это движок рендеринга веб-браузера HTML/CSS для Safari/Chrome. Существуют ли такие движки для IE/Opera/Firefox и каковы различия, плюсы и минусы использования одного над другим? Могу ли я использовать функции WebKit в Firefox, например?

Каждый браузер поддерживается механизмом рендеринга для рисования веб-страницы HTML/CSS.

• IE → Трайдент (Прекращено)
• Edge → EdgeHTML (очистительная вилка Trident)
• Firefox → Геккон
• Опера → Престо (больше не использует Presto с февраля 2013 года, рассмотрим Opera = Chrome в настоящее время)
• Safari → WebKit
• Chrome → Blink (форк WebKit).

См. Сравнение движков веб-браузера для списка сравнений в разных областях.

Главный вопрос... поддерживается ли WebKit IE?

Не изначально.

Answer 2

Дополнение к тому, что @KennyTM сказал:

• IE
  • Двигатель: Трайдент
  • CSS-префикс: -ms
• край
  • Двигатель: EdgeHTML → Blink³
  • CSS-префикс: -ms
• Fire Fox
  • Двигатель: Gecko
  • CSS-префикс: -moz
• опера
  • Двигатель: Presto → Blink¹
  • CSS-префикс: -o (Presto) и -webkit (Мигает)
• Сафари
  • Двигатель: WebKit
  • CSS-префикс: -webkit
• Хром
  • Двигатель: WebKit → Blink²
  • CSS-префикс: -webkit

¹⁾ 12 февраля 2013 года Opera (версия 15+) объявляет о своем переходе от собственного движка Presto к WebKit с именем Blink.

²⁾ 3 апреля 2013 года Google (Chrome версии 28+) объявляет, что собирается использовать движок Blink на основе WebKit.

³⁾ 6 декабря 2018 года Microsoft (предварительная сборка готова в начале 2019 года) объявляет, что собирается использовать движок Blink на основе WebKit.

Answer 3

Webkit - это движок рендеринга в веб-браузерах, используемый Safari и Chrome (среди прочего, но они являются популярными).

-webkit Префикс в селекторах CSS - это свойства, которые должен обрабатывать только этот движок, очень похожие на -moz свойства. Многие из нас надеются, что это уйдет, например -webkit-border-radius будет заменен стандартным border-radius и вам не понадобится несколько правил для одной и той же вещи для нескольких браузеров. Это на самом деле результат "предварительных спецификаций", которые не должны мешать стандартной версии, когда она появляется.

Для вашего обновления:... нет, это на самом деле не связано с IE, IE по крайней мере до 9 использует другой механизм рендеринга, называемый Trident.

Answer 4

На это ответили и приняли, но если кто-то все еще задается вопросом, почему вещи сегодня немного испорчены, вам придется прочитать это:

http://webaim.org/blog/user-agent-string-history/

Это дает хорошее представление о том, как эволюционировали gecko, webkit и другие основные движки рендеринга и что привело к текущему состоянию испорченных строк пользовательского агента.

Цитирование последнего абзаца для целей TL;DR:

А затем Google создал Chrome, а Chrome использовал Webkit, и он был похож на Safari, и хотел, чтобы страницы создавались для Safari, и поэтому притворялся Safari. Таким образом, Chrome использовал WebKit и притворялся Safari, а WebKit выдавал себя за KHTML, а KHTML выдавал себя за Gecko, а все браузеры притворялись Mozilla, и Chrome называл себя Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13Строка агента пользователя была полной неразберихой и почти бесполезной, и все притворялись кем-то другим, и путаницы было предостаточно.

Answer 5

-webkit- просто группа, в которую вписываются браузеры Chrome, Safari, Opera и iOS. Все они имеют общего предка, поэтому часто их возможности / ограничения (когда дело доходит до запуска CSS и Javascript) ограничены группой.

Разработчик разместит -webkit- за ним следует код, означающий, что код будет работать только в браузерах Chrome, Safari, Opera и iOS. Вот полный список:

-webkit- (Chrome, Safari, более новые версии Opera, почти все браузеры iOS (включая Firefox для iOS); в основном, любой браузер на основе WebKit)

-moz- (Fire Fox)

-o- (Старый, pre-WebKit, версии Opera)

-ms- (Internet Explorer и Microsoft Edge)

Answer 6

Главный вопрос... Поддерживается ли WebKit в IE?

Вид. Проверьте Chrome Frame, это плагин для Internet Explorer, который заставляет его использовать движок Webkit. Единственная странность в том, что вы должны убедить своих посетителей установить плагин.

Обновить

Chrome Frame больше не поддерживается и не поддерживается...

Answer 7

WebKit - это механизм верстки, позволяющий веб-браузерам отображать веб-страницы. Движок WebKit предоставляет набор классов для отображения веб-контента в окнах и реализует функции браузера, такие как переход по ссылкам при нажатии пользователем, управление обратным списком и управление историей недавно посещенных страниц.

Изначально WebKit был создан как форк KHTML как движок для Apple Safari; он переносим на многие другие вычислительные платформы. Он также используется в браузере Google Chrome.

Компоненты WebKit и JavaScriptCore доступны в рамках Стандартной общедоступной лицензии GNU, а остальная часть WebKit доступна в соответствии с лицензией в стиле BSD.

Источник Википедия

Для получения дополнительной информации о макетах двигателей вы можете посмотреть здесь

Answer 8

Webkit - это механизм рендеринга HTML, используемый Chrome и Safari.

Он поддерживает ряд пользовательских свойств CSS с префиксом -webkit-,

Answer 9

Webkit - это механизм рендеринга html/css, используемый в браузере Safari от Apple и в Google Chrome. Префиксы css values ​​с -webkit- специфичны для webkit, обычно это CSS3 или другие нестандартизированные функции.

Чтобы ответить на обновление 2, w3c - это орган, который пытается стандартизировать эти вещи, они пишут правила, а затем программисты пишут свой механизм рендеринга, чтобы интерпретировать эти правила. Таким образом, в сущности, w3c говорит, что DIV должны работать "таким образом", тогда создатель движка использует это правило для написания своего кода, любые ошибки или неправильные интерпретации правил вызывают проблемы совместимости.

Answer 10

Webkit - это движок рендеринга, используемый в популярных браузерах Safari и Chrome, а также в других.

Answer 11

Распространенная проблема, с которой я столкнулся как дизайнера веб-сайтов, заключается в том, что многие люди используют IE6+. Обычно нет ничего сложного, за исключением того, что в CSS я должен добавить синтаксис множественного рендеринга для анализа каждого запроса для каждого браузера. Было бы очень хорошо, если бы была универсальная настройка рендеринга для CSS, которую IE может читать так же легко, как Chrome/FF/Opera и webkit. Проблема с IE заключается в том, что если я НЕ использую ВСЕ правильные стили CSS и рендеринг, то мои сайты выглядят и работают отлично, используя все браузеры, кроме IE. Это может сделать для несчастной, несгибаемого клиента IE.

Пример таков: допустим, мне нужна серая граница размером 1 пиксель с радиусом границы 10%. Для Chrome и других я использую свойство webkit. Теперь для IE я должен добавить отдельные стили CSS, используя простые старые значения CSS "border: 1px solid #E5E5E5" и "border-radius: 10%". Положительный результат не всегда гарантирован для всех версий браузера IE, но по большей части этот метод работает хорошо для меня и многих других.

Answer 12

Несмотря на то, что это старый пост, существует также другой метод рендеринга для более старых версий Internet Explorer. -webkit, будучи приставкой CSS Vendor, вы также можете загрузить несколько приложений JS и разместить их в нижней части заголовка HTML.

Попробуйте использовать Modernizr, HTML5 Shiv и Respond.js. Это удивительные IE-совместимые скрипты полизаполнения, использующие полифилы, и другие ресурсы, которые помогут лучше отображать элементы HTML5 в IE9 и ниже.

Чтобы использовать эти полифилы, просто добавьте HTML-булеву логику для их размещения, ЕСЛИ браузер меньше, чем желаемая версия IE. Пример кода:

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

Answer 13

Webkit - это движок рендеринга, используемый в популярных браузерах Safari и Chrome, а также в других. Каждый браузер поддерживается движком рендеринга для рисования веб-страницы HTML/CSS.

IE → Trident (больше не поддерживается) Edge → EdgeHTML (ветвь очистки Trident) Firefox → Gecko Opera → Presto (больше не использует Presto с февраля 2013 года, рассмотрим Opera = Chrome в настоящее время) Safari → WebKit Chrome → Blink (ветвь WebKit),

Answer 14

Хорошая документация о WebEngines особенно webKit и его разработчики вы можете прочитать по адресу: WebKit