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

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

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

обновление

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

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

обновление 2

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

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

14 ответов


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

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

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

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

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

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


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

  • IE
    • двигатель: Тризуб
    • модели CSS-префиксов: -ms
  • Edge
    • двигатель: EdgeHTML
    • модели CSS-префиксов: -ms
  • в Firefox
    • двигатель: Гекко
    • модели CSS-префиксов: -moz
  • Опера
    • двигатель: ПрестоБлинк1
    • модели CSS-префиксов: -o (Престо) и -webkit (мигает)
  • сафари
    • двигатель: WebKit
    • модели CSS-префикс: -webkit
  • хром
    • двигатель: WebKitБлинк2
    • модели CSS-префиксов: -webkit

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

2) В Апреле 3 2013 Google (Chrome версии 28+)объявляет они собираются использовать WebKit-based Блинк двигатель.


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

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

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


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

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 IE?

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

обновление

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


WebKit-это механизм компоновки, предназначенный для Разрешить веб-браузерам отображать web страницы. Движок WebKit обеспечивает набор классов для отображения веб-контента в windows и реализует браузер такие функции, как следующие ссылки, когда щелкните пользователем, управляя back-forward list и управление a история недавно посещенных страниц.

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

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

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

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


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

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


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


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

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


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


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


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

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

чтобы использовать эти поля, просто добавьте логику HTML boolean, чтобы разместить их, если браузер меньше, чем версия 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 (прекращено) Edge → EdgeHTML (очистка вилки трезубца) В Firefox → Геккон Opera → Presto (больше не использует Presto с февраля 2013 года, рассмотрим Opera = Chrome в настоящее время) Сафари → В WebKit Chrome → Blink (вилка WebKit).