WebKit
WebKit это фреймворк который показывает правильно отформатированные веб-страницы на основе их разметки. Apple Safari и большинство мобильных браузеров зависят от Webkit (Webkit это очень портативный и легко настраиваемый фреймворк).
WebKit начал жизнь как разветвление библиотек KDE’s KHTML и KJS, и с тех пор много частных лиц и компаний внесли свой вклад в его развитие (включая: KDE, Apple, Google, и Nokia).
WebKit это торговая марка Apple, а сам фреймворк раздаётся под BSD-образной лицензией. Однако, 2 важных компонента попадают под лицензию LGPL (en-US): это WebCore — визуальная библиотека и движок JavaScriptCore.
Читайте также
Технический справочник
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Какую функцию выполняет webkit в CSS?
Я знаю, что есть: -webkit- , -moz- , -o- , -ms- .
Также я знаю, для каких браузеров используются эти . (группы?)
Но вот если брать пример с -webkit , то что конкретно он делает в CSS? Пробовал удалять строчку с -webkik- и ничего не менялось.
Например, у меня есть background: -webkit-linear-gradient и background: linear-gradient
Удаляю тот, что с -webkit- ‘ом и ничего, собственно не происходит.
Прошу, объясните мне наконец-то, КАКУЮ же всё таки функцию выполняет -webkit- в CSS? Будет ли код корректно работать код без -webkit- ?
В каких случаях стоит использовать -webkit- ? P.S.
И да, растолкуйте всё на пальцах, ибо я. ну не опытный кароче 🙂
Отслеживать
задан 4 фев 2019 в 18:34
43 6 6 бронзовых знаков
Когда изобретают новое CSS-свойство, то обычно сперва реализуют его с вендорными префиксами типа -webkit , тестируют, и если всё хорошо, то в новых версиях префикс убирают и всё работает без него. Следовательно, наличие или отсутствие префиксов зависит от того, насколько старые браузеры вы хотите поддерживать
4 фев 2019 в 19:49
Хм, то есть если я делаю проект, допустим, чисто для себя. (а пользуюсь я Chrom’ом), то webkit, o,ms и остальные префиксы использовать необязательно?
5 фев 2019 в 10:37
Если без префиксов всё работает, то необязательно. Но вот например -webkit-appearance работает только с префиксом
Webkit css что это
Webkit Browser Engine
Чтобы понять актуальность, а это прежде всего важно иметь практические знания о механизмах веб-браузера. Это компонент браузера, который отвечает за визуализацию контента, где по этой причине это также упоминается как механизм веб-рендеринга.
Проще говоря механизм рендеринга — это компонент, который отвечает за то, что видно в браузере, где берет данные из HTML или PHP, форматирует их в соответствии с CSS или XSL и передает их браузеру пользователя.
Не все веб-браузеры используют один и тот же механизм рендеринга. Internet Explorer использует движок Trident, продукты Mozilla, такие, как Firefox, используют Gecko, Opera использует движок Presto, а движок WebKit используется браузерами Safari и Chrome.
Из-за различных движков рендеринга в веб-браузере иногда возникают проблемы перекрестной совместимости для макета контента. Другими словами, это контент, который возможно был разработан для Internet Explorer, может не отображаться так, как задумал дизайнер в другом браузере, таком как Mozilla Firefox.
Webkit в синтаксисе CSS3
Таким образом термин «webkit» также является частью синтаксиса CSS, используемого для визуализации контента для браузеров Safari и Chrome. Из-за отсутствия кросс-совместимости, код webkit, возможно, должен быть включен в CSS, чтобы гарантировать, что он будет отображаться так, как задумано в Chrome и Safari.
Актуальность webkit связана с CSS3, где с модулями CSS нового поколения, которые предоставляют такие функции, как эффекты перехода, макеты с несколькими столбцами и анимация. Хотя все браузеры могут отображать старые спецификации CSS в значительной степени в одинаковой степени, это не относится к новым модулям CSS3.
Например в коде CSS3 расположенном ниже зеленого квадрата, он расширяется по горизонтали в течение 2 секунд, когда на него наведена мышь.
div < width: 100px; height: 100px; background: green; /*Start transition effect*/ transition-property: width; transition-duration: 2s; >
div:hover < width: 300px; >
Чтобы тот же эффект перехода отображался в браузерах с использованием механизма WebKit, где код CSS будет следующим:
CSS — Префиксы браузеров
Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.
Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
- -webkit- : браузеры Chrome, Safari, Opera;
- -moz- : браузер Mozilla Firefox;
- -ms- : браузер Internet Explorer.
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причины появления префиксов
Причин для появления префиксов было достаточно много:
- Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
- Для решения проблем с кроссбраузерностью.
- Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Как использовать префиксы
Рассмотрим в качестве примере следующий код:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.
При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.
Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.
На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing .
Как проверить поддержку определенного свойства в браузере
Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.
Например: проверим, как реализовано свойство transform в браузерах.
На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
- Красный прямоугольник — браузер, в котором данное свойство не реализовано;
- Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
- Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
- Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.