Главная страница » Элемент который не имеет состояния focus

Элемент который не имеет состояния focus

  • автор:

Исчерпывающее руководство по псевдоэлементам и псевдоклассам в CSS

Hola a todos! Всем привет! Будучи молодым веб-дизайнером я был вынужден учиться методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen или каких-то других замечательнх штук, доступных нам сегодня. Найти кого-то, кто мог бы показать фишки веба, особенно что касалось CSS, было невероятно полезно.

Теперь я немного оброс жирком опыта. И сегодня поделюсь с вами в очень дружелюбной, непринужденной и ненавязчивой манере всем, что касается псевдоклассов (ПК) и всевдоэлементов (ПЭ).

Если вы опытный веб-дизайнер или разработчик, то вы наверняка знаете и используете большую часть ПК и ПЭ, описанных в статье. Тем не менее, вы можете пробежаться по списку. Наверняка найдутся один или два пункта, о которых вы раньше не знали.

Перед тем как перейти к сути, и потому что это непосредственно относится к ПК и ПЭ, давайте начнем с основ: вы когда-нибудь задумывались что значит “псевдо”? Если так, то вот определение с Dictionary.com:

имя прилагательное

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

2. почти, приближенное, или пытающееся быть.

Статья с определением на русском языке (примечание переводчика)

Не вдаваясь в технические подробности определения, данного консорциумом W3C, в основе псевдокласса лежит фантомное состояние элемента или его специфичная характеристика, управляемая через CSS. Несколько распространенных примеров псевдоклассов :link, :hover, :active, :first-child и :nth-child. На самом деле их гораздо больше и мы рассмотрим их чуть позже.

Кроме того ПК всегда начинаются с двоеточия (:). Затем идет имя ПК и иногда значение в скобках. Знакомы с :nth-child?

Перейдем к псевдоэлементам. Они являются виртуальными элементами, которыми мы можем манипулировать как обычными html-элементами. Разница в том, что ПЭ не существуют в дереве документа или DOM. Это значит что мы не пишем ПЭ в html-разметке, а создаем их при помощи CSS.

Примеры ПЭ :after, :before и :first-letter. Мы вспомним о них ближе к концу этой статьи.

Одинарное или двойное двоеточие для ПЭ?

Короткий ответ — в большинстве случаев подойдут оба написания.

Двойное двоеточие (::) было представлено в CSS3 для дифференциации таких псевдоэлементов, как ::before и ::after от псевдоклассов, например :hover и :active. Двойное двоеточие поддерживают большинство браузеров, включая Internet Explorer (IE) 8 и ниже.

Хотя некоторые ПЭ, такие как ::backdrop, требуют только двойного двоеточия.

Лично я использую одинарное двоеточие, это делает мой CSS-код обратно совместимым со старыми браузерами. Конечно же я использую написание с двойным двоеточием для тех ПЭ, которые этого требуют.

Вы в праве использовать оба варианта. В этом вопросе действительно нет однозначно правильного или неправильного ответа.

Тем не менее спецификация на момент написания этой статьи рекомендует использовать именно одиночное двоеточие по упомянутой выше причине обратной совместимости:

Пожалуйста, обратите внимание что в CSS3 новый способ написания ПЭ предусматривает двойное двоеточие, например a::after <…>, для визуального отделения от ПК. Вы могли видеть такое написание в CSS. CSS3 тем не менее все еще поддерживает одиночное двоеточие ради обратной совместимости. И мы рекомендуем вам придерживаться подобного написания еще какое-то время.

В тексте этой статьи ПЭ, которые поддерживают как одинарное, так и двойное двоеточие будут показаны в обоих вариантах; ПЭ, требующие только двойного двоеточия, будут показаны как есть.

Когда (не) использовать CSS сгенерированное содержимое

Создание контента с помощью CSS достигается путем объединения свойства content и ПЭ :before или :after.

Этот “контент” может быть простым текстом или контейнером, которыми мы можем манипулировать при помощи CSS для отображения графических форм или декоративных элементов. Дальше я буду говорить о первом типе такого контента — тексте.

Сгенерированный контент не должен использоваться для важной информации или текста по следующим причинам:

  • Он не будет доступен для большинства программ чтения с экрана.
  • Его нельзя будет выделить.
  • Если контент содержит избыточную декоративную информацию, программы чтения с экрана, которые поддерживают CSS content, будут читать его вслух. Это будет убийственно для UX.

Используйте сгенерированный контент в декоративных целях или для не особо важной информации. Но убедитесь что он правильно распознается программами чтения с экрана. Перед использованием этого инструмента “думайте прогрессивно”.

На Smashing Magazine есть великолепная статья об использовании сгенерированного контента CSS.

Экспериментальные псевдоклассы и псевдоэлементы

ПК или ПЭ считаются экспериментальными пока их спецификация не стабильна или не является финальной. Синтаксис и поведение могут изменится по ходу пьесы.

Тем не менее мы можем использовать экспериментальные ПК и ПЭ уже сейчас при помощи вендорных префиксов. Чтобы это сделать обратитесь к Can I Use и уточните, для каких ПК и ПЭ префиксы необходимы. А затем воспользуйтесь одним из инструментов автоматической установки префиксов, например -prefix-free или Autoprefixer.

В этой статье вы увидите пометку “экспериментальный” рядом с такими ПК или именами ПЭ.

Псевдоклассы

Мы начнем обсуждение с псевдоклассов, имеющих отношение к определенным состояниям.

ПК состояний обычно вступают в игру, когда пользователь выполняет определенное действие. “Действие” в CSS может так же означать “отсутствие действия”, например в случае со ссылками, по которым еще не было переходов.

Давайте рассмотрим их по порядку.

:link это ПК, отвечающий за “нормальное” состояние ссылки и используется для выбора ссылок, которые еще не были посещены. Объявление :link перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.

Его так же можно опустить и писать так:

:visited

:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).

:hover

:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.

Этот ПК должен идти третьим в списке (после :visited).

:active

ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.

Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.

Этот ПК должен идти четвертым (после :hover).

:focus

ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.

Бонус: SASS миксины для ссылок

Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.

Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.

Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.

:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.

Обратите внимание, что эти миксины могут быть использованы для любого html-тега, не только для ссылок.

А вот и миксины:

Применение:

Компилируется в:

Структурные псевдоклассы нацелены на создание дополнительной информации в дереве документа или DOM и не могут быть представлены другими типами комбинаторов или селекторов.

:first-child

:first-child представляет первого ребенка родительского блока.
В примере ниже только первый элемент li будет с текстом оранжевого цвета.

HTML:

CSS:

:first-of-type

:first-of-type выбирает первый элемент указанного типа в родительском контейнере.

В следующем примере первый элемент li и первый span будут с текстом оранжевого цвета.

HTML:

CSS:

:last-child

:last-child ПК выбирает последнего ребенка в родительском элементе.

В примере последний элемент li будет с оранжевым цветом.

HTML:

CSS:

:last-of-type

:last-of-type выбирает последний элемент указанного типа в родительском контейнере.

В примере оранжевый текст будет только у последних элементов li и span.

HTML:

CSS:

ПК :not так же известен как негативный псевдокласс. Он принимает аргумент — обычно другой “селектор” — в круглых скобках. Аргументом на самом деле может быть другой псевдокласс.

Он может быть составным, но не может содержать еще один:not селектор.

В следующем примере :not ПК совпадает с элементом, не представленным аргументом.

HTML:

CSS:

В оранжевый окрасится весь текст, за исключением элемента li с классом .first-item:

Теперь мы попробуем составить в ряд два :not ПК. Все элементы будут с черным текстом и желтым фоном за исключением элементов li с классом .first-item и последнего элемента li в списке:

:nth-child

ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.

Этот ПК является одним из самых универсальных и мощных вCSS.

Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/even(четный).

В формулах типа an+b:

  • a является числом (именуется целым числом);
  • n это буква n (другими словами мы действительно пишем букву n в формуле);
  • + это оператор который может быть как плюсом (+) так и минусом (-);
  • b представляет собой целое число, как правило, но используется только там где необходим.

Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:

CSS:

Давайте выберем второго ребенка. В этом случае только “Beta” будет оранжевой:

Теперь выберем других детей, начиная со второго ребенка. И так, “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa” будут оранжевыми:

Выберем все четные дочерние элементы в списке:

Давайте выберем каждого второго ребенка начиная с шестого. “Zeta,” “Theta” и “Kappa” будут оранжевыми:

:nth-last-child

ПК :nth-last-child в основном работает так же как :nth-child за исключением того, что выбор элементов начинается с конца, а не с начала.

CSS:

Выбираем второго с конца ребенка. “Iota” будет оранжевой:

Теперь выбираем все другие дочерние элементы начиная со второго с конца. “Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:

Раскрасим все четные элементы начиная с конца:

Теперь раскрасим всех детей начиная с шестого с конца. “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:

:nth-of-type

:nth-of-type в целом работает так же как :nth-child, главным отличием является то, что он более специфичный поскольку мы обращаемся к определенному элементу и его отношениям к другим элементам, вложенным в родительский блок.

В следующем примере все вторые параграфы в любых родительских контейнерах будут оранжевыми:

HTML:

CSS:

:nth-last-of-type

:nth-last-of-type работает так же как :nth-of-type, разница в том, что отсчет начинается с конца.

Пример ниже мы начинаем отсчет снизу и все первые параграфы поменяют цвет текста на оранжевый:

HTML:

CSS:

Ресурсы

Обратитесь к этим двум ресурсам при работе с :nth ПК:

  • “CSS3 Structural Pseudo-Class Selector Tester,” Lea Verou
  • “:nth Tester,” CSS-Tricks

:only-child

ПК :only-child выбирает единственный дочерний элемент в родителе.

В примере первый элемент ul имеет единственного ребенка, которому будет назначен оранжевый цвет текста. Второй элемент ul содержит несколько детей. Таким образом на них не повлияет правило ПК :only-child.

HTML:

CSS:

:only-of-type

ПК :only-of-type нацелен на элемент, который не имеет братьев этого конкретного типа. Это похоже на :only-child за исключением того, что мы можем нацелится на конкретный элемент, сделав селектор более специфичным.

В примере первый ul имеет единственного ребенка, которому будет назначен оранжевый текст.

HTML:

CSS:

:target

:target ПК… что ж, он выбирает уникальный ID элемента и помещает его в URL.

Пример: статья с уникальным ID будет иметь желтый фон если URL страницы заканчивается на #target.

URL:

HTML:

CSS:

Совет: Вы можете использовать шорткат background: вместо background-color: — результат будет одинаковым.

Формы всегда были бичом веб-дизайна и разработки. При помощи ПК валидации мы можем сделать процесс заполнения формы более “гладким” и приятным в плане опыта пользователя.

Однако следует отметить, что хотя большинство ПК, перечисленных в этом разделе хороши для работы с элементами формы, некоторые из них могут использоваться так же и другими html-элементами.

Давайте проверим на деле!

:checked

ПК :checked управляет радио-кнопками, чекбоксами и элементами option, которые были выбраны.

Пример: когда чекбокс “активирован” (выбран) подпись становится выделенной, улучшая тем самым удобство использования.

:default

ПК :default нацелен на элемент по умолчанию в форме среди группы сходных элементов.

В случае, если вам нужно назначить кнопку по умолчанию в форме, но элемент не имеет класса, то вы можете воспользоваться псевдоклассом :default.

Обратите внимание, что кнопки “Reset” или “Clear” в формах сопровождаются серьезными проблемами с юзабилити. Используйте их только там, где без этого совершенно невозможно обойтись. В следующих статьях этот вопрос освещен более подробно:

  • “Reset and Cancel Buttons,” Nielsen Norman Group (2000)
  • “Killing the Cancel Button on Forms for Good,” UX Movement (2010)

:disabled

:disabled работает с элементами форм в их отключенном состоянии. “Задизейбленный” (отключенный) элемент не может быть выбран, с ним нельзя взаимодействовать или активировать его, он не может получить фокус.

Пример: поле ввода имени отключено, поэтому оно отображается прозрачным на 50%.

HTML:

CSS:

Совет: Использовать disabled=”disabled” в разметке не требуется. Вы получите тот же результат используя только логический атрибут dasabled. Однако стоит помнить, что использование disabled=”disabled” обязательно в XHTML.

:empty

ПК :empty нацелен на элементы, которые не содержат в себе контент любого рода. Если элемент содержит букву (текст), другой html-элемент или даже пробел, то этот элемент не считается пустым.

Вот определение “пустого” и “не пустого”:

  • Пустой
    Нет никакого содержимого или символов внутри элемента. Html-комментарий внутри элемента в данном случае не считается.
  • Не пустой
    Символы отображаются внутри элемента. Даже пробел считается.
  • верхний контейнер содержит текст, поэтому у него будет оранжевый фон;
  • во втором контейнере пробел, который считается контентом, поэтому он так же будет с оранжевым фоном;
  • в третьем контейнере ничего нет (он пуст), поэтому у него будет желтый фон;
  • и наконец последний контейнер содержит только html-комментарий (он так же пуст), поэтому и у него будет желтый фон.

HTML:

CSS:

:enabled

:enabled выбирает включенные (активные для взаимодействия) элементы. Все элементы формы активны по умолчанию — утверждение верно до тех пор, пока мы не используем disabled атрибут в разметке.

Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.

Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:

Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.

:in-range

:in-range выбирает элементы, которые имеют диапазон значений и значения, находящиеся в этом диапазоне.

Пример: элемент ввода поддерживает диапазон от 5 до 10. Значения в этом диапазоне активируют зеленую обводку.

HTML:

CSS:

:out-of-range

:out-of-range работает с элементами, которые имеют диапазон значений и значения которого выходят за пределы этого диапазона.

Пример: элемент ввода поддерживает диапазон значений от 1 до 12. Значения вне этого диапазона будут подсвечены оранжевой обводкой.

HTML:

CSS:

:indeterminate

:indeterminate ПК нацелен на элементы ввода (радио-кнопки и чекбоксы), которые не были выбраны или не выбраны при загрузке страницы.

Примером является ситуация когда страница загружается с группой радио-кнопок и среди них нет выбранного по умолчанию пункта или когда JavaScript установил флажок “неопределенное состояние”.

HTML:

CSS:

:valid

ПК :valid нацелен на элемент формы, который заполнен в соответствии с форматированием этого элемента.

Пример: поле ввода электронной почты заполнено в соответствии с установленным форматированием. Таким образом поле будет считаться валидным и будет отображаться с зеленой рамкой в 1px:

:invalid

ПК :invalid работает с элементами формы, чье форматирование не совпадает с требуемым.

Пример: когда в поле ввода электронной почты введены данные, не совпадающие с требуемым форматирование, значение будет считаться невалидным и у поля появится оранжевая обводка:

:optional

:optional предназначен для полей ввода, которые не являются обязательными. Другими словами до тех пор, пока поле не имеет атрибута required, оно будет подчиняться ПК :optional.

Пример: поле является опциональным (необязательным). У него нет атрибута required, поэтому текст будет серым.

HTML:

CSS:

:read-only

ПК :read-only нацелен на нередактируемый элемент. Поведение похоже на :disabled. Наличие атрибута в разметке поможет решить, какой из псевдоклассов следует использовать.

Он будет полезен, например, в формах, где нам нужно показать предварительно заполненную информацию, которая не может быть изменена. Но она необходима для отображения в элементе формы в качестве примера.

Пример: у элемента формы в html указан атрибут readonly. Поэтому для него сработают правила псевдокласса :read-only и текст будет серым.

HTML:

CSS:

:read-write

:read-write ПК выбирает элементы, которые могут быть отредактированы пользователем. Сработает так же как если бы у элемента был атрибут contenteditable в html.

Этот псевдокласс можно сочетать с :focus для улучшения UX в определенных ситуациях.

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

HTML:

CSS:

:required

:required работает с элементами, которые имеют атрибут required в html-разметке.

В дополнение к обычной “звездочке” (астериску — *) возле подписи к полю ввода, показывающей обязательность его заполнения, мы можем визуально выделить поле при помощи CSS. Фактически мы получаем лучшее из двух миров.

Пример: у поля есть атрибут required. Улучшаем UX, применяя определенный стиль, который дает сигнал, что поле обязательное.

HTML:

CSS:

:scope (эксперимент)

Псевдокласс :scope имеет наибольший смысл, когда он связан с html-атрибутом scoped у тега style.

Если атрибута scoped нет у тега style внутри страницы, то :scope будет применен к элементу html, который является дефолтным (по умолчанию) в таблице стилей.

Пример: html-блок имеет таблицу стилей с атрибутом scoped и поэтому весь текст внутри второго блока будет написан курсивом.

HTML and CSS:

Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не управляют никакими медиа-элементами, такими как изображения или видео.

:dir (эксперимент)

ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.

В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с вендорным префиксом -moz-dir()) поддерживает ПК :dir. Очень похоже, что скоро это изменится. Поэтому в примере показаны оба варианта — с префиксом и без.

Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.

Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.

HTML:

CSS:

Параграф ниже написан на английском (слева направо). Текст будет синим.

HTML:

CSS:

ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.

Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.

В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.

В разных ситуациях этот механизм может срабатывать правильно или неправильно. Поскольку есть различия между кавычками, которые ставятся автоматически при помощи внутренних механизмов браузера. Предпочтительно использование правила для кавычек в CSS.

Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:

Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):

Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :lang и css-свойства quotes.

Давайте определим стиль кавычек через CSS.

HTML:

CSS:

Давайте рассмотрим псевдоклассы с другими функциями.

:root ПК относится к самому высокому родительскому элементу в документе.

Практически во всех случаях :root будет относится к элементу html в документе. Однако он может обратится и к другому элементу, если он используется в другом языке разметки, например SVG или XML.

Давайте добавим сплошной фон для элемента html, самого высокого родительского элемента в документе:

Заметка: Мы можем добиться того же эффекта, если используем html в качестве селектора. Однако :root как класс имеет более высокую специфичность по сравнению с селектором (в данном случае html).

:fullscreen (эксперимент)

ПК :fullscreen выбирает элементы, которые отображаются в полноэкранном режиме.

Как не странно, он не предназначен для сценария, когда пользователь нажимает клавишу F11 для входа в полноэкранный режим браузера. Скорее всего он предназначен для работы с JavaScript Fullscreen API, который ориентирован на изображения, видео и игры, исполняемые в родительском контейнере.

Кстати говоря, вход в полноэкранный режим сопровождается сообщением в верхней части экрана, в котором говорится, что при нажатии клавиши Escape вы вернетесь в стандартный режим. Мы увидим сообщение если раскроем на весь экран видео на YouTube, например.

Если вы собираетесь использовать ПК :fullscreen, то помните, что браузеры стилизуют этим элементы очень по-разному. Кроме того, вы будете иметь дело с вендорными префиксами не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку screenfull.js от Hernan Rajchert, которая сглаживает большинство причуд браузеров.

Fullscreen API выходит за рамки данной статьи, но вот фрагмент кода, который будет работать в браузерах на основе WebKit и Blink.

HTML:

CSS:

Псевдоэлементы

Как уже упоминалось в начале этой статьи, псевдоэлементы — это виртуальные, которыми мы можем управлять как обычными html-элементами. Они не существуют в дереве документа или DOM, что означает, что мы создаем их через CSS и помещаем в HTML.

Кроме того, двойное двоеточие (::) и одно двоеточие (:) является лишь визуальным различием псевдоэлементов CSS 2.1 и CSS3. Вы можете использовать оба варианта написания.

::before/:before

Псевдоэлемент :before добавляет контент (текст или блок) перед другим html-элементом. И опять же, этот контент по факту не существует в DOM, но мы можем им управлять будто он есть. Обязательно должно быть объявлено CSS-свойство content.

Помните, что текст, добавленный через псевдоэлемент, не может быть выбран пользователем.

HTML:

CSS:

Итог будет таким:

Заметка: Видите пробел после слова “Hello ”? Да, пробелы тоже учитываются.

::after/:after

ПЭ :after используется для добавления контента (текста или блока) после другого html-элемента. И опять же, этот контент по факту не существует в DOM, но мы можем им управлять будто он есть. Обязательно должно быть объявлено CSS-свойство content.

Помните, что текст, добавленный через псевдоэлемент, не может быть выбран пользователем.

HTML:

CSS:

Итог будет следующим:

::backdrop (эксперимент)

ПЭ ::backdrop — это блок, который создается за полноэкранным элементом, но находится над всем прочим содержимым. Используется в комбинации с псевдоклассом :fullscreen чтобы изменить цвет фона в полноэкранном режиме. По умолчанию будет фон черного цвета.

Заметка: ПЭ ::backdrop требует двойного двоеточия (::). С одинарным двоеточием (:) не работает.

Давайте продолжим эксперимент с нашим псевдоклассом :fullscreen.

HTML:

CSS:

::first-letter/:first-letter

ПЭ :first-letter выбирает первую букву в строке текста.

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

Совет: Для текста, сгенерированного при помощи :before, выбор первой буквы так же доступен, не смотря на то, что его нет в DOM.

CSS:

::first-line/:first-line

ПЭ :first-line нацелен на первую строку элемента. Он работает только для блочных элементов, не для инлайновых (строчных).

При использовании в параграфе, например, только для первой строки будет применен стиль. CSS:

::selection

ПЭ ::selection нужен для стилизации текста, который был выделен пользователем.

Перед тем, как продолжить, примите во внимание, что браузеры на основе Gecko требуют префикс и ПЭ будет выглядеть как ::-moz-selection.

Заметка: Объединение в одном правиле записей с префиксом и без не сработает. Мы должны прописать оба правила отдельно.

CSS:

::placeholder (эксперимент)

::placeholder ПЭ стилизует текст-заглушку, который применяется к элементам формы через атрибут placeholder в html.

Запись в CSS так же может выглядеть как ::input-placeholder.

Заметка: Этот ПЭ не является частью стандарта, но весьма вероятно что это изменится в будущем. Используйте его с осторожностью.

В некоторых браузерах (IE 10 и Firefox до версии 18), ПЭ ::placeholder исполняется как псевдокласс. Во всех прочих браузерах как псевдоэлемент. Поэтому если у вас нет необходимости поддерживать старые версии Firefox или IE10, то запись будет выглядеть следующим образом.

HTML:

CSS:

Заключение

Уф! Это было что-то, правда?

CSS псевдоклассы и псевдоэлементы бывают действительно полезны, верно? Они предоставляют так много возможностей, которые могут сперва ошеломить, я уверен. Но это жизнь веб-дизайнера и разработчика.

Основательно протестируйте работу каждого из пунктов. Путь до хорошо реализованных ПК и ПЭ будет долгим.

Я надеюсь, что вы будете пользоваться этой обширной справочной статьей хотя бы столько же времени, сколько я потратил на ее написание. И не забудьте добавить ее в закладки!

:focus-visible

The :focus-visible pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that:

  1. Are in focus
  2. Need a visible indicator to show focus (more on this later)

:focus-visible is used similarly to :focus : to bring attention to the element that currently has the focus.

:focus-visible is part of the CSS4 Selectors working draft. Prior to adoption, Mozilla introduced the :-moz-focusring pseudo-class to bring the functionality to Firefox ahead of a formal specification.

Why do we need :focus-visible?

Doesn’t :focus do this already? Yes, but there are problems. The clearest illustration is a button that fires some JavaScript. Imagine an image carousel with buttons to swap between images. Let’s say you’ve added a tabindex to the buttons so they can be selected with a keyboard, but when you go to test the carousel with your mouse, you see this outline around your gorgeous button:

Outline added by the browser on :focus

Not that you would want to do this (for accessibility concerns), but how do you get rid of it? By setting the :focus pseudo-class:

Now your button looks great when it is in focus, but what happens when a user tabs to your button without a mouse but a keyboard instead? They can’t see where they’ve tabbed! That’s a problem because now there’s no way to tell which button is focused for keyboard actions:

One of these is focused, but you can’t see it!

Is there a way to remove the blue focus outline but still show a focus that’s more in line with the site design? Sure, you can have your cake and eat it too, thanks to :focus-visible !

:focus-visible only applies when you actually want a visual indicator to help the user see where the focus is. In other words, it can’t hide the outline like :focus can. (Well, it could by blending it into the design, but whatever.) The two have to be used together in that sense. Let’s add one to our button:

Now, when the keyboard is used to tab to the button, there will be a visual indication of the focus:

:focus-visible makes focus visible!

How do browsers determine when something is :focus-visible?

Browsers are given a bit of leeway to determine when this pseudo-selector should be applied to a given element using their own heuristics. First, let’s look at the CSS4 working draft, and then we’ll try to break it down. From the specifications:

  • If a user has expressed a preference (such as via a system preference or a browser setting) to always see a visible focus indicator, the user agent should honor this by having :focus-visible always match on the active element, regardless of any other factors. (Another option may be for the user agent to show its own focus indicator regardless of author styles.)
  • Any element which supports keyboard input (such as an input element, or any other element which may trigger a virtual keyboard to be shown on focus if a physical keyboard is not present) should always match :focus-visible when focused.
  • If the user interacts with the page via the keyboard, the currently focused element should match :focus-visible (i.e. keyboard usage may change whether this pseudo-class matches even if it doesn’t affect :focus).
  • If the user interacts with the page via a pointing device, such that the focus is moved to a new element which does not support user input, the newly focused element should not match :focus-visible.
  • If the active element matches :focus-visible, and a script causes focus to move elsewhere, the newly focused element should match :focus-visible.
  • Conversely, if the active element does not match :focus-visible, and a script causes focus to move elsewhere, the newly focused element should not match :focus-visible.

If that’s a little abstract, here’s an interpretation:

Situation Does :focus-visible apply?
The user says they always want the focus to be visible via a setting Yes
An element needs a keyboard to function (like text <inputs>) Yes
The user is navigating with a keyboard Yes
The user is navigating with a pointing device (like a mouse or finger on a touchscreen) No
A script causes focus to move from a :focus-visible element to another element Yes
A script causes focus to move from a non- :focus-visible element to another element No

It bears repeating: These are guidelines, and browsers will be able to make their own determination about what is selected by :focus-visible . We can expect that the obvious case of keyboard navigation will be handled in a predictable way, but the browsers have the ability to make the determination themselves, like any other feature.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

:focus

:focus CSS псевдо-класс представляет собой элемент (например, формы ввода) , который получил фокус. Обычно он запускается, когда пользователь щелкает или нажимает на элемент или выбирает его с помощью клавиатуры Tab key.

Try it

Примечание. Этот псевдокласс применяется только к самому сфокусированному элементу. Используйте :focus-within если вы хотите выбрать элемент, который содержит сфокусированный элемент.

Syntax

Examples

Result

Accessibility concerns

Убедитесь, что визуальный индикатор фокусировки виден людям с плохим зрением. Это также принесет пользу любому, кто использует экран в ярко освещенном месте (например, на солнце). WCAG 2.1 SC 1.4.11 Нетекстовый контраст требует, чтобы индикатор визуального фокуса был как минимум от 3 до 1.

  • Доступные визуальные индикаторы фокуса: уделите внимание вашему сайту! Советы по разработке полезных и полезных индикаторов фокуса

:focus

Никогда не удаляйте просто контур фокуса (видимый индикатор фокуса), не заменив его контуром фокуса, который будет соответствовать WCAG 2.1 SC 1.4.11 Нетекстовый контраст .

The difference between CSS focus and focus-visible pseudo-class

You can browse the Web using a mouse, keyboard and all sorts of assistive technology devices. Whichever input method you use, a clear indication of the current interactive element is crucial for a good user experience and accessibility. Default browsers stylesheets do a great job at it, but sometimes we want to be a little bit more sophisticated.

The CSS :focus and :focus-visible pseudo-classes allow us to customise the look of a focus indicator. The support for :focus-visible recently landed in Safari Technology Preview 138. We can expect it to be added in an upcoming stable release and make this feature available in all modern browsers.

CSS focus vs. focus-visible

As mentioned before, browsers, by default, do a great job to determine if an element should indicate focus based on the element type, user interaction, years of feedback, testing and studying user interaction. This state is usually indicated using the outline .

Adding the :focus pseudo-class to an element will make it show a focus specific styles and disregard browsers heuristics. The :focus-visible , in contrast, applies custom styling only if it would be shown natively. It’s a win-win situation, a nice custom look and years of research in one CSS property.

A classic example is a button element. How often do you want to see a focus ring after clicking on a button ? Rarely. How often do you want to see a focus indicator on a button when navigating a website using a keyboard? Almost always. There you go, :focus-visible and Bob’s your uncle!

CSS focus-visible is my new default

Am I going to replace the focus pseudo-class with focus-visible ? Fuck yeah! Maybe not today but eventually for sure! With this quick write-up, I hope I helped you understand the difference between these two pseudo-classes. Until next time, stay focused (pun intended) ��

Did you like it? Please share it with your friends or get me a beer coffee. Thanks!

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

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