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


277

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

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

Обновить

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

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

Обновление 2

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

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


1
По сути, ваш последний вопрос: «Можно ли сказать, что IE должен отрисовывать вещи, которые он не был запрограммирован на рендеринг?», А ответ - нет
Гарет

Механизм рендеринга в Firefox называется gecko. т.е. использует собственный прайетический двигатель.
troelskn

@ Гарет ... спасибо. это именно то, что я надеялся НЕ услышать :) В этом случае я надеюсь, что IE скоро станет совместимым ... и что люди перестанут использовать IE6!
Христо

6
Посетите css3pie.com, чтобы узнать о некоторых функциях webkit, добавленных в IE через CSS.
Kenoyer130

WebKit - самый плохой движок рендеринга HTML, без исключения. Не плохо означает плохо, процитирую NWA, но плохо означает хорошо.
Дагг Наббит

Ответы:


168

Обновление: очевидно, 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?

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


.. спасибо за обращение к моему обновлению. Так что, если IE не поддерживает WebKit, и я знаю, что он не поддерживает -moz-свойства ... как я могу заставить IE принимать стили CSS3?
Христо

@ Христо: в зависимости от того, какой стиль вам нужен.
Kennytm

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

3
должно быть обновлено. Разработчики Chrome разветвили webkit, и опера больше не использует presto
Ричард

1
EdgeHTML теперь также снят с производства.
DreamTeK

115

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

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

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

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

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


2
.. это отличная информация! Так будут ли разные движки рендеринга игнорировать эти префиксы? т.е. Would Firefox игнорировать -msie, -o, -webkit; Would Webkit игнорировать -moz, -o, -msie; и т.д...?
Христо

1
@ Христо Да, он не распознает ни одного из них как действительный CSS, поэтому он игнорирует их
JKirchartz

2
JKirchartz правильно. Другие браузеры будут игнорировать css-префикс друг друга.
Джерон

2
И этот WebKit, к которому движется Opera, - это разновидность Chromium, которая сама превращается в Blink.
BoltClock

41

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

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

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


2
Так можно -webkit-ли использовать его как Firefox для расширенного рендеринга функций CSS3?
Христо

1
Нет, Firefox использует движок рендеринга Gecko
Gareth

2
@Hristo - Firefox использует некоторые похожие свойства, но они называются -moz(для mozilla), он будет игнорировать -webkitроли при разборе стилей :)
Ник Крейвер

35

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

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


1
Посетите ссылку выше, ее информативный и окончательный кульминационный момент является веселым.
Арун Прасад ES

10

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


9

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

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

Обновить

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


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

Да. В лучшем случае это было временное решение. 8 лет, пришло время, чтобы IE уступил место соответствующим браузерам.
edgerunner

Microsoft хочет, чтобы IE ушел. Он поставляется с Windows 10 для обратной совместимости.
RJ Dunnill

8

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

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

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

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

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


7

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

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


5

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


5

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

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


4

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


3

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


1

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


1

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.