Что такое WebKit и как он связан с CSS? - PullRequest
Новая
       111

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

234 голосов
/ 12 августа 2010

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

Обновление

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

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

Обновление 2

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

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

Ответы [ 14 ]

3 голосов
/ 15 ноября 2013

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

2 голосов
/ 15 марта 2015

Несмотря на то, что это старый пост, существует также другой метод рендеринга для более старых версий Internet Explorer. -webkit, будучи префиксом вендора CSS, вы также можете загрузить несколько 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>
0 голосов
/ 23 февраля 2018

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

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

0 голосов
/ 13 декабря 2013

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

Страница:
...