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

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

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

Update

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

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

Обновление 2

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

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

Ответы

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 5

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

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

Обновить

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

Ответ 6

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

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

WebKit WebCore и JavaScriptCore компоненты доступны в GNU Малая общедоступная лицензия и остальная часть WebKit доступна под Лицензия BSD-стиля.

Источник Wikipedia

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

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

-moz- (Firefox)

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

-ms- (Internet Explorer и Microsoft Edge)

Ответ 11

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

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

Ответ 12

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

Попробуйте использовать Modernizr, HTML5 Shiv и Respond.js. Это удивительные IE-совместимые сценарии polyfill, в которых используются полисы и другие ресурсы, которые помогут лучше отображать элементы 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>

Ответ 13

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

Ответ 14

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

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