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- , -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 1 1 серебряный знак 6 6 бронзовых знаков
Когда изобретают новое CSS-свойство, то обычно сперва реализуют его с вендорными префиксами типа -webkit , тестируют, и если всё хорошо, то в новых версиях префикс убирают и всё работает без него. Следовательно, наличие или отсутствие префиксов зависит от того, насколько старые браузеры вы хотите поддерживать
4 фев 2019 в 19:49
Хм, то есть если я делаю проект, допустим, чисто для себя. (а пользуюсь я Chrom’ом), то webkit, o,ms и остальные префиксы использовать необязательно?
5 фев 2019 в 10:37
Если без префиксов всё работает, то необязательно. Но вот например -webkit-appearance работает только с префиксом
Интересные -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.
Вендорные префиксы
Специальная запись CSS-свойств на этапе эксперимента.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
- Кратко
- Кто такие вендоры?
- Префиксы
- Где нужны префиксы?
- Директивы
- Псевдоклассы
- Значения свойств
- Селекторы
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Вендорные префиксы — это приставки перед свойствами, селекторами, функциями или другими сущностями в CSS, позволяющие браузерам внедрять экспериментальные фичи до того, как они полностью стандартизированы и готовы для использования. Когда префикс отбрасывается — это знак, что всё готово.
Кто такие вендоры?
Скопировать ссылку «Кто такие вендоры?» Скопировано
Чтобы понять, что такое вендорные префиксы и зачем они нужны, надо немного разобраться с тем, как и кто разрабатывает CSS.
CSS — это одна из трёх основных мощных технологий, на которых строится веб. Его используют в своей работе тысячи разработчиков. А результат — стили сайта — видят миллионы пользователей.
Чтобы CSS во всём мире был единым, над его развитием работает так называемая Рабочая группа CSS (CSS Working Group), или коротко CSSWG. Они собирают потребности разработчиков сайтов и описывают возможности CSS в новых модулях. Получившийся документ называется спецификацией. В ней содержится описание того, как новое свойство должно работать.
Дальше наступает этап внедрения в браузеры. Каждый браузер разрабатывает отдельная компания, отдельные команды разработки. Когда в черновиках спецификации появляется новая CSS-фича, разработчики браузера начинают её реализовывать. Поскольку в спецификации не всегда описаны конкретные технические решения (черновик на то и черновик, что может меняться), то каждая команда разработки может делать это чуть иначе и принципы работы фичи вполне могут меняться со временем. До момента, пока не стабилизируется спецификация или пока не будут написаны все тесты, фича может работать в тестовом режиме, с вендорным префиксом.
Каждый браузер — это отдельный вендор (от англ. vendor — продавец) услуг просмотра сайтов, интернета. Отсюда и слово «вендорный». Буквально это означает, что существуют некие отдельные префиксы — они же приставки — которые работают в конкретном браузере — вендоре.
Префиксы
Скопировать ссылку «Префиксы» Скопировано
Основные браузеры используют следующие префиксы:
- -webkit — — Safari, Chrome, Opera 15+ и другие браузеры на основе движка WebKit или Blink.
- -moz — — Firefox и браузеры на движке Gecko.
- -o — — Opera 12 и раньше, на движке Presto.
- -ms — — Internet Explorer и старый Microsoft Edge 12–18.
Где нужны префиксы?
Скопировать ссылку «Где нужны префиксы?» Скопировано
В CSS существует много разных сущностей: селекторы и псевдоэлементы, свойства и их значения, функции, директивы. В процессе внедрения любой новой фичи используются вендорные префиксы.
Директивы
Скопировать ссылку «Директивы» Скопировано
Самый частый случай, когда вам может пригодиться вендорный префикс для директивы — @keyframes :
@-webkit-keyframes animation 0% 100% > @keyframes animation 0% 100% >
@-webkit-keyframes animation 0% left: 0; > 100% left: 100%; > > @keyframes animation 0% left: 0; > 100% left: 100%; > >
Написать директивы @ — webkit — keyframes и @keyframes через запятую, чтобы не дублировать их содержимое, не получится.
Псевдоклассы
Скопировать ссылку «Псевдоклассы» Скопировано
В последнее время в CSS появляется много новых очень мощных псевдоклассов. Например, стилизовать плейсхолдер в поле ввода можно при помощи такого кода:
input::-webkit-input-placeholder color: #BADA55;> input:-moz-placeholder color: #BADA55;> input::-moz-placeholder color: #BADA55;> input:-ms-input-placeholder color: #BADA55;> input::-ms-input-placeholder color: #BADA55;> input::placeholder color: #BADA55;>
input::-webkit-input-placeholder color: #BADA55; > input:-moz-placeholder color: #BADA55; > input::-moz-placeholder color: #BADA55; > input:-ms-input-placeholder color: #BADA55; > input::-ms-input-placeholder color: #BADA55; > input::placeholder color: #BADA55; >
Как и в случае с директивами, префиксы в псевдоэлементах тоже приводят к дублированию кода: если перечислить всё через запятую, браузеры вас не поймут.
Значения свойств
Скопировать ссылку «Значения свойств» Скопировано
Бывает и так, что свойство старое, а вот значение для него новое, экспериментальное. В данный момент таким новым значением является функция image — set ( ) для свойства background — image :
div background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-2x.png') 2x); background-image: image-set('image.png' 1x, 'image-2x.png' 2x);>
div background-image: url('image.png'); background-image: -webkit-image-set(url('image.png') 1x, url('image-2x.png') 2x); background-image: image-set('image.png' 1x, 'image-2x.png' 2x); >
Сначала браузер прочитает свойство background — image со значением url ( ) , которое он точно понимает. Потом увидит такое же свойство с другим значением, и если он его поймёт, то забудет первое свойство и применит второе. Это называется фолбэк.
Но браузер на этом не остановится и пойдёт дальше: если он поддерживает значение без префикса, то он предпочтёт его — ведь оно последнее. Поэтому порядок следования свойств с префиксами в значениях тоже важен: сначала идут значения с префиксами, потом — без, чтобы браузеры выбрали последний, максимально современный вариант.
Селекторы
Скопировать ссылку «Селекторы» Скопировано
Случается так, что в процессе внедрения фича меняется. Изначально планировалось, что функция выбора нескольких селекторов будет называться :any ( ) , потом :match ( ) , а в итоге пришли к :is ( ) . Чтобы селектор сработал везде, даже в старых браузерах, где функция называлась иначе, нужна будет такая запись:
:-moz-any(header, footer) a:hover color: red;> :-webkit-any(header, footer) a:hover color: red;> :matches(header, footer) a:hover color: red;> :is(header, footer) a:hover color: red;>
:-moz-any(header, footer) a:hover color: red; > :-webkit-any(header, footer) a:hover color: red; > :matches(header, footer) a:hover color: red; > :is(header, footer) a:hover color: red; >
В примере выше мы задаём красный цвет для ссылок при наведении курсора при условии, что эти ссылки находятся внутри или .
Как всё запомнить?
Скопировать ссылку «Как всё запомнить?» Скопировано
Скорее всего, вы сейчас думаете, а как же запомнить, где какие префиксы нужно писать, и для каких свойств они действительно нужны, а какие поддерживаются и без них.
Самый простой способ проверить поддержку свойства — найти его на сайте Can I use. Там, в том числе, написано, какие префиксы для каких браузеров нужны.
Но чаще всего разработчики не пишут префиксы руками, а используют инструменты автоматизации. Самым популярным из них на сегодня является Автопрефиксер. Вы можете попробовать его онлайн: вставляете ваш CSS, указываете, какие браузеры должны поддерживаться, и получаете код с проставленными префиксами там, где это нужно.
Порядок важен
Скопировать ссылку «Порядок важен» Скопировано
Очень важно указывать сущности (свойства, селекторы, директивы и так далее) с вендорными префиксами выше, чем без префиксов:
div -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;>
div -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >
Это нужно для того, чтобы браузер использовал самую последнюю стабильную реализацию. Если браузер уже поддерживает фичу без префиксов, то применится последнее из перечисленных. А если нет, то сработает подходящая запись из кода выше.