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

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

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

Обновить

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

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

Обновление 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, а строка пользовательского агента была полным беспорядком, и почти бесполезны, и все притворялись, что все остальные, и смятение изобиловало.

-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)

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

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

Обновить

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

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

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

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

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

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

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

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

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

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

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

Распространенная проблема, с которой я столкнулся как дизайнера веб-сайтов, заключается в том, что многие люди используют 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, но по большей части этот метод работает хорошо для меня и многих других.

Несмотря на то, что это старый пост, существует также другой метод рендеринга для более старых версий 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>

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

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

IE → Trident (прекращено) ,