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» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

• Красный прямоугольник — браузер, в котором данное свойство не реализовано;
• Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
• Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
• Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

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 12 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

WebKit

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Позиционирование элементов
• Как добавить иконку сайта в адресную строку браузера?
• Ссылки

Интересные -webkit CSS свойства

Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда.

И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство

-webkit-touch-callout

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

a.js-only

Это свойство полезно применять в тех случаях когда на ссылку повешен какой-либо JavaScript/AJAX.

-webkit-user-drag

Свойство указывает на то, что во время перетаскивания блока двигаться должен именно блок, а не содержимое внутри него.

/* ничего не перетаскивает */ .content p.noDrag < -webkit-user-drag: none; >/* перетаскивается весь элемент а не контент внутри */ .sidebar div.elDrag

-webkit-appearance

Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:

span.lookLikeRadio

Или как textarea:

span.lookLikeTextarea

Всего таких значений около 50. Весь список можно посмотреть тут.

-webkit-text-security

Оказывается, маску при вводе пароля можно изменять. Например, вместо кружков можно отображать квадраты.

input[type="password"]

-webkit-user-select

Определяет что пользователь может выбирать внутри элемента.

На этом все. Это был вольный перевод данной статьи.

UPD. Уточнение по свойству -webkit-touch-callout.