Веб-верстка сложна и интересна. Даже более того, она интересна зачастую именно тем, что необычна и непроста. Особенно, когда используется не просто уже устоявшийся и отработанный за многие годы набор правил, приложений и прочего, но когда каждый веб-проект предлагает поиск чего-то нового для самого веб-верстальщика. Разумеется, используя один и тот же набор свойств, селекторов CSS (а речь о них), можно вполне создавать самые разные проекты и дизайны. Но движения вперед как такового не будет. Произойдет некоторая стагнация развития собственных умений в веб-верстке и frontend разработке.
Возможно, пафосно звучит, но в реалии CSS-селекторы нужны и важны. И их так много, что частенько верстальщики отбирают себе только некоторые и ими вполне обходятся. Но мы решили детальнее рассмотреть некоторые весьма занятные (как нам кажется) CSS-селекторы. Кто-то о них, может быть, уже знает, кто-то – еще нет. Но в большом объеме возможностей всегда тянет найти что-то еще эдакое-разэтакое, интересненькое и, возможно, полезное.
Стоит отметить тот факт, что часть селекторов отлично поддерживается браузерами, часть – только последними версиями их. Детальнее мы разберем это по ходу материала.
Атрибуты и контент
CSS-селекторы атрибутов удобны в случае, если у вас есть конкретные значения и элементы, часть из которых имеет эти самые значения. Обратимся к примеру выбора фруктов, дабы было проще рассмотреть особенность кода. В данном случае можно увидеть выборку элементов по чекбоксам (type="checkbox") и применение стилей к связанным с ними меткам, которые задают свойство шрифта (жирный, курсивный) и цвет – синий. Затем меняем стиль одного из чекбоксов, присвоив ему имя chk2 и устанавливаем цвет – красный. При этом, что важно, все остальные элементы списка не изменили своего цвета и остались синими.
Кроме того, в данном примере работа велась исключительно с элементами формы, но селекторы атрибутов могут использоваться и вне форм. Также атрибут может быть самым разным, его просто нужно изначально проверить на существование, например, button[icon]. То есть, происходит поиск для всех элементов button, что имеют атрибут icon. И совершенно не имеет значения, какой именно атрибут: со значением или без. И вот как это может быть реализовано на примере разных ссылок.
Вторая и третья ссылки выделены оранжевым (желтым) цветом и имеют атрибут либо со значением, либо пустой (это не важно). Последняя розовая ссылка имеет атрибут fluffy. Здесь уже значения не важны, главное наличие для того, чтобы селектору a[fluffy] было с чем работать.
Как использовать на практике? Например, можно создать наборы изображений и оформить подсветку или выделение, анимацию, отрисовать рамочки и прочие украшательства для тех экземпляров, что не имеют атрибута alt. Из основ цифрового маркетинга известно, что это весьма важный параметр для хорошего SEO сайта, поэтому его, обычно, всегда прописывают. Таким нехитрым способом выше можно сделать выборку тех изображений, у которых атрибут не заполнен. И вот пример такого варианта использования с изображениями.
Если вы хотите сопоставить только отдельную часть значения атрибута, то есть некоторые очень полезные селекторы, такие как:
- [attr^=val] – атрибут (attr) начинается со значением val.
- [attr|=val] – атрибут обладает значением полностью соответствующим val или начинающимся с val- (именно с тире).
- [attr$=val] – атрибут заканчивается значением val.
- [attr*=val] – значение имеет место в любом месте атрибута.
- [attr~=val] – значение атрибута представляет собой множество слов, включающее в себя одно вхождение val и разделенных пробелами.
Очередной наглядный пример реализации с помощью изображений и ссылок, списков и прочего полезного. Что здесь интересного? Во втором примере значение [attr|=val] имеет еще и тире, на которое мы обращали внимание выше, что обычно используется для сопоставления языковых значений <p lang="en-us">.Сопоставления расширений файлов выполнено с применением A[attr$=val]. Дополнительно при использовании ::after можно создать фильтр для одинаковых значений. Следующий вариант атрибута показывает, как можно вывести соответствие по домену, вне зависимости от протокола или наличия субдомена.
Что важно еще знать? Все эти атрибуты имеют одну особенность: чувствительность к регистру. Но и её можно легко обойти. Достаточно добавить i перед закрывающей квадратной скобкой, что и даст возможность отключить данную чувствительность у совпадающих значений при выборке. Кроме того, на чувствительность обращают внимание все браузеры, кроме IE и Edge.
Селекторы для пользовательского интерфейса
Для работы с пользовательским интерфейсом тоже есть свои селекторы и некоторые интересности. Мы же обратим свой взор на формы и такие всем известные псевдо-классы, как: :checked, :disabled, :enabled. При необходимости добавить стиль к списку дел воспользуемся первым вариантом и получим пример ниже.
Это самый простой пример, который используют многие верстальщики и разработчики. Но наша задача найти иные селекторы или псевдо-классы, которые могут предложить чуть-чуть большее. И поэтому бросим взгляд на :default. Если имеется группа связанных элементов, он выбирает из неё один или не один элемент, что используется по умолчанию. Это аналогично тому, как реализовывается работа кнопки «Сброс» (ресет), неважно где. Просто смысл.
Кроме того, псевдо-классы могут использоваться при выборе значений ввода. Или когда происходит этап проверки введённых данных перед отправкой формы на соответствие правилам (номер телефона имеет +7 или нет, поле e-mail правильно заполнено: с @ или без). Для этого используют обычно: :required, :invalid, :optional, :valid.
Начните вводить e-mail. Вы увидите, как поле станет зеленого цвета. Это означает, что ввод правильный. Иногда во многих иных формах правильность заполнения определяется зелеными галочками рядом с полем ввода. Думаем, вы, читатели, сталкивались с подобным на просторах интернета. Другой момент в том, что рабочий адрес электронной почты всегда является обязательным и должен быть заполнен, поэтому соответствующее поле ввода нельзя оставлять пустым. И для этого была использована цепочка псевдо-классов :required:invalid.
Есть еще два занятных псевдо-класса. Особенность их в том, что они полезны, если элемент формы может работать с атрибутами max/min и значение находится в данных пределах или нет. Речь идет об: :out-of-range и :in-range. В примере ниже диапазон находится между 10 и 20, но поле имеет значение 8. Что не является «правильным», поэтому цвет красный. Попробуйте ввести 11 – цвет станет зеленым. Также здесь есть кнопка Сброс.
Подошла очередь и к таким возможностям CSS, как :placeholder-shown, :read-write и :ready-only. Что касается первого, то его задача отфильтровать те элементы, с которыми не было взаимодействия на уровне пользователя, соответственно информациях будет в нем всегда одна и та же (не изменённая). Есть особенность у такого селектора. Он не слишком хорошо поддерживается браузерами. Последние два – позволяют выделить объекты для редактирования или для чтения, для ввода. И, разумеется, что такие элементы могут быть чем угодно, не только текстовыми блоками. Наглядный пример это и демонстрирует.
Возвращаясь к контенту
Интерфейс рассмотрели, оформление элементов и фильтров (выборку) тоже. Посмотрим еще раз на контент, поскольку все же здесь, как ни странно, есть еще некоторые любопытные возможности для использования CSS-селекторов. Начнем снова с простого будничного. Обычно разработчики используют ::first-line, ::selection, ::first-letter, и работу их можно увидеть на примере оформления и выделения текста. Если подробнее, то первый и последний варианты нужны тогда, когда их применяют для блоков текста. Если применить тот же ::first-letter ко всем блокам из множества, то каждый абзац начнется с буквицы. В данном же случае буквицей оформлена только заглавная буква первого слова первого абзаца.
Экспериментальность и будущее CSS
Но существуют и еще некоторые интересные вариации по работе с текстом с помощью «сложного программирования CSS». Эти селекторы являются экспериментальными и на данный момент не поддерживаются браузерами (никакими). Но они есть в базе developer.mozilla MDN.
::marker – производит выборку всех маркеров списка, которые обычно содержат точку или порядковый номер.
::spelling-error – представляет собой текстовый сегмент, который помечается как неправильно написанный.
::placeholder – текстовой заполнитель для элементов формы, полей. Например, когда предлагается пользователю на сайте подписаться на рассылку, а в поле e-mail уже прописан некий адрес в качестве примера. Другие примеры на MDN.
А что еще?
Еще существует много экспериментальных селекторов. Но их мы не будем особо рассматривать, поскольку с практической точки зрения применить-то их нельзя, поэтому интереса на данный момент они не представляют, разве что для расширения кругозора (данный материал не об этом). Например, посмотрим на :dir(). Он поддерживается только в браузерах Firefox (настольный и мобильный). Что он может? Он работает с языковыми параметрами сайта и может производить выборку текста слева направо или наоборот, то есть rtl или ltr. Пример расположения текста представлен ниже.
Если обратиться к более поддерживаемому браузерами селектору, то посмотрим на :matches() или is() (на этом моменте еще остановимся подробнее). Поддерживается он не слишком хорошо, но уже лучше, чем dir(). Например, существует очень большой список. При использовании :matches()/is() такая «простыня» может превратиться в пару строчек. Для сжатия и упрощения кода CSS – отличный вариант!
Завершение
Мы рассмотрели только часть некоторых CSS-селекторов, которые не слишком часто употребляются веб-верстальщиками и разработчиками по разным причинам. Некоторые о них не знают, некоторые – не считают нужным знать. Использовать их или нет нашим читателям – решение личное. Но стоит отметить момент, касающийся тех селекторов, которые еще не поддерживаются браузерами. Все они являются новинками, свойственные новым правилам CSS Level 4 (от 21 ноября текущего года). И если внимательнее наблюдать за развитием новых правил, то :matches() переименовали в is().
В целом же, CSS интересен и дизайнерам и верстальщикам, поскольку позволяет создавать действительно современный и технологично продвинутый дизайн, анимацию, используя для этого один только CSS без фрагментов JS. Это удобно, практично и зачастую гораздо проще, чем создавать сложную анимацию отдельно или отрисовывать какие-то незначительные элементы, которые, к тому же, еще и размер файла будут иметь запредельный.
