Webkit css что это
Перейти к содержимому

Webkit css что это

  • автор:

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 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Кто такие вендоры?
  3. Префиксы
  4. Где нужны префиксы?
    1. Директивы
    2. Псевдоклассы
    3. Значения свойств
    4. Селекторы

    Обновлено 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; >      

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *