:hover, :focus, :active, или зачем указывать состояния элементам
CSS-псевдоклассы :hover , :focus и :active задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.
В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.
Основные состояния интерактивных элементов
:hover
Состояние :hover срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.
.link < color: #000000; >.link:hover
:focus
Состояние :focus срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab . Применяется состояния ко всем интерактивным элементам — , , , и элементам с tabindex .
Существует также состояние :focus-visible , которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.
.link < color: #000000; >.link:focus
:active
Состояние :active срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.
.link < color: #000000; >.link:active
Как состояния влияют на доступность сайта
Не все пользователи используют мышь, поэтому важно, чтобы по сайту можно было перемещаться при помощи клавиатуры или других альтернативных устройств.
Рекомендуется обязательно указывать состояния :hover , :focus и :active для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.
В формах обратной связи состояние :focus используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.
Когда состояния элементов различаются, пользователю легко понять, где ссылка, а где сейчас находится фокус. Ссылкам лучше указывать разные цвета для :hover и :active , чтобы пользователь мог отличить, какой элемент он выбрал.
Поэтому прописывать все состояния вместе не всегда хорошая идея:
.a:hover, .a:focus, .a:active
Кроме того, в разных браузерах и операционных системах отображение состояний может отличаться, поэтому такой код не будет работать идеально. Лучше полностью разделять состояния и каждому давать свою стилизацию.
.a:hover <> .a:focus <> .a:active <> Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.
Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.
Материалы по теме
- CSS-селекторы. Шпаргалка для новичков
- Как убрать подчёркивание ссылок
- Как сделать всплывающую подсказку
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
Что такое CSS?
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Как подключить CSS к HTML
Есть несколько способов использования CSS внутри HTML:
Внутренний CSS: внутри раздела HTML-документа, в теге :
Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :
Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.
Этот текст будет красного цвета.
Основы синтаксиса CSS
CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.
/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >Работа с цветом и фоном
Одни из самых основных свойств в CSS — это цвет и фон элементов.
color меняет цвет текста:
background-color меняет фоновый цвет элемента:
Типографика и шрифты
CSS позволяет нам контролировать шрифты на странице:
- font-family задаёт шрифт текста, даже если он нестандартный.
- font-size определяет размер текста.
- font-weight устанавливает жирность шрифта.
Блочная модель
Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .
Внутренние и внешние отступы одной картинкой:
Позиционирование и Flexbox
Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.
.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >Адаптивный дизайн
С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.
@media (max-width: 600px) < .container < flex-direction: column; >> Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде!
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023
Как перекрыть один элемент другим. CSS-свойство z-index
z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .
Синтаксис
.my-element
- 10 июля 2023
Состояние компонента
Метод setState() планирует изменение объекта состояния ( state ) компонента. Когда состояние меняется, компонент рендерится повторно.
Какая разница между state и props ?
props (намеренно сокращённо от англ. «properties» — свойства) и state — это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: props передаётся в компонент (служат как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).
Несколько полезных ресурсов для дальнейшего изучения, в каких случаях использовать props , а в каких — state :
- Props vs. State
- ReactJS: Props vs State
Почему setState даёт неверное значение?
В React как this.props , так и this.state представляют значения, которые уже были отрендерены, например, то, что видите на экране.
Вызовы setState являются асинхронными, поэтому не стоит рассчитывать, что this.state отобразит новое значение мгновенно после вызова setState . Необходимо добавить функцию, которая сработает только после обновления состояния, если нужно получить новое значение, основанное на текущем состоянии (ниже подробный пример).
Пример кода, который не будет работать так, как ожидаем:
incrementCount() // Примечание: это *не* сработает, как ожидалось. this.setState(count: this.state.count + 1>); > handleSomething() // Допустим, что `this.state.count` начинается с 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // Когда React делает последующий рендер компонента, `this.state.count` будет 1, хотя мы ожидаем 3. // Так происходит, потому что функция `incrementCount()` берёт своё значение из `this.state.count`, // но React не обновляет `this.state.count`, пока компонент не отрендерится снова. // Получается, что `incrementCount()` обращается к текущему значению `this.state.count`, а это 0 каждый раз, и добавляет 1. // Как исправить это — разберём ниже! >Далее перейдём к исправлению указанной проблемы.
Как обновить состояние значениями, которые зависят от текущего состояния?
Нужно добавить функцию вместо объекта к setState , которая будет срабатывать только на самой последней версии состояния (пример ниже).
В чём разница между добавлением объекта или функции к setState ?
Добавление функции даёт вам доступ к текущему состоянию внутри самой функции. Так как setState вызовы «сгруппированы», это помогает связать изменения и гарантирует, что они будут выполняться друг за другом, а не конфликтовать.
incrementCount() this.setState((state) => // Важно: используем `state` вместо `this.state` при обновлении. return count: state.count + 1> >); > handleSomething() // Возьмём снова для примера, что `this.state.count` начинается с 0. this.incrementCount(); this.incrementCount(); this.incrementCount(); // Если посмотреть на значение `this.state.count` сейчас, это будет по-прежнему 0. // Но когда React отрендерит компонент снова, будет уже 3. >Когда setState работает асинхронно?
В настоящее время setState работает асинхронно внутри обработчиков событий.
Это даёт гарантию, например, когда Родитель и Ребёнок вызывают setState во время клика, Ребёнок не будет рендериться дважды. Вместо этого React «откладывает» обновление состояния в самый конец событий в браузере. Это помогает сильно повысить производительность больших приложений.
Но не стоит полностью полагаться на такое поведение. В будущих версиях React будет использовать отложенные обновления состояния по умолчанию не только в обработчиках событий.
Почему React не обновляет this.state синхронно?
Как говорилось ранее, React намеренно «ждёт» пока все компоненты вызовут setState() в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.
Вы можете задаваться вопросом: почему React не может просто сразу обновить this.state без повторного рендеринга?
На это есть две причины:
- Это нарушит логику работы props и state , а значит станет причиной многих багов, которые будет сложно исправить.
- Это сделало бы невозможным реализацию некоторых возможностей, над которыми мы сейчас работаем.
Этот GitHub-комментарий рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.
Стоит ли использовать такие библиотеки, как Redux или MobX?
Но вообще будет здорово сначала изучить React, прежде чем переходить к библиотекам. Можно создать готовое рабочее приложение, используя только React.
Отрисовка по условию
В React вы можете создавать отдельные компоненты, которые инкапсулируют нужное вам поведение. Затем вы можете отрисовать только некоторые из них, в зависимости от состояния вашего приложения.
Условная отрисовка в React работает так же, как условия работы в JavaScript. Используйте JavaScript-операторы, например if или тернарный оператор, чтобы создать элементы, представляющие текущее состояние, и пусть React обновит пользовательский интерфейс для соответствия им.
Рассмотрим эти два компонента:
function UserGreeting(props) return h1>С возвращением!h1>; > function GuestGreeting(props) return h1>Пожалуйста, зарегистрируйтесь.h1>; >Мы создадим компонент Greeting , который отрисовывает любой из этих компонентов в зависимости от того, вошел ли пользователь в систему:
function Greeting(props) const isLoggedIn = props.isLoggedIn; if (isLoggedIn) return UserGreeting />; > return GuestGreeting />; > ReactDOM.render( // Попробуйте изменить на isLoggedIn=: Greeting isLoggedIn=false> />, document.getElementById('root') );Этот пример отрисовывает другое приветствие в зависимости от значения свойства isLoggedIn .
Вы можете использовать переменные для хранения элементов. Это может помочь вам по условию отрисовать часть компонента, в то время как остальная часть вывода не изменится.
Рассмотрим эти два новых компонента, представляющих кнопки для выхода и авторизации:
function LoginButton(props) return ( button onClick=props.onClick>> Авторизация button> ); > function LogoutButton(props) return ( button onClick=props.onClick>> Выход button> ); >В приведённом ниже примере мы создадим компонент с состоянием с именем LoginControl .
Он будет отрисовывать либо или в зависимости от текущего состояния. Он также отрисует из предыдущего примера:
class LoginControl extends React.Component constructor(props) super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = isLoggedIn: false>; > handleLoginClick() this.setState(isLoggedIn: true>); > handleLogoutClick() this.setState(isLoggedIn: false>); > render() const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) button = LogoutButton onClick=this.handleLogoutClick> />; > else button = LoginButton onClick=this.handleLoginClick> />; > return ( div> Greeting isLoggedIn=isLoggedIn> /> button> div> ); > > ReactDOM.render( LoginControl />, document.getElementById('root') );Хотя объявление переменной и использование оператора if — прекрасный способ по условию отрисовать компонент, иногда возможно вы захотите использовать более короткий синтаксис. В JSX существует несколько способов встроенных условий, описанных ниже.
Встроенный оператор if с логическим оператором &&
Вы можете вставлять любые выражения в JSX, обертывая их фигурными фигурными скобками. Это включает в себя логический JavaScript-оператор && . Это может быть удобно для условного включения элемента:
Вы можете вставлять любые выражения в JSX, обёртывания их фигурными скобками. Это включает логический JavaScript-оператор && . Это может быть удобно для условной отрисовки элемента:
function Mailbox(props) const unreadMessages = props.unreadMessages; return ( div> h1>Привет!h1> unreadMessages.length > 0 && h2> У вас unreadMessages.length> непрочитанных сообщений. h2> > div> ); > const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( Mailbox unreadMessages=messages> />, document.getElementById('root') );Это работает, потому что в JavaScript true && expression всегда вычисляется в expression , а false && expression всегда вычисляется в false .
Поэтому, если условие равно true , элемент справа после && появится в выводе. Если оно false , React игнорирует и пропускает его.
Встроенный оператор if-else с тернарным оператором
Другой метод встроенной условной отрисовки элементов — использование условного оператора в JavaScript условие ? true : false .
В приведённом ниже примере мы используем его для условной отрисовки небольшого блока текста.
render() const isLoggedIn = this.state.isLoggedIn; return ( div> Пользователь b>isLoggedIn ? 'в данный момент' : 'не'>b> авторизован. div> ); >Он также может использоваться для больших выражений, хотя из-за этого менее очевидно, что происходит:
render() const isLoggedIn = this.state.isLoggedIn; return ( div> isLoggedIn ? ( LogoutButton onClick=this.handleLogoutClick> /> ) : ( LoginButton onClick=this.handleLoginClick> /> )> div> ); >Как и в JavaScript, вы можете выбрать подходящий стиль, основанный на том, что вы и ваша команда считаете более читабельным. Также помните, что всякий раз, когда условия становятся слишком сложными, возможно, самое время извлечь компонент.
Предотвращение отрисовки компонента
В редких случаях, возможно, вам потребуется скрыть компонент, даже если он был отрисован другим компонентом. Для этого возвращаем null вместо вывода отрисовки.
В приведённом ниже примере отрисовывается в зависимости от значения свойства с названием warn . Если значение этого свойства равно false , то компонент не отрисовывается:
function WarningBanner(props) if (!props.warn) return null; > return ( div className="warning"> Предупреждение! div> ); > class Page extends React.Component constructor(props) super(props); this.state = showWarning: true>; this.handleToggleClick = this.handleToggleClick.bind(this); > handleToggleClick() this.setState(state => ( showWarning: !state.showWarning >)); > render() return ( div> WarningBanner warn=this.state.showWarning> /> button onClick=this.handleToggleClick>> this.state.showWarning ? 'Скрыть' : 'Показать'> button> div> ); > > ReactDOM.render( Page />, document.getElementById('root') );Возврат null из метода компонента render не влияет на запуск методов жизненного цикла компонента. Например, componentDidUpdate по-прежнему будет вызываться.
Исчерпывающее руководство по псевдоэлементам и псевдоклассам в 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 перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.
a:link color: orange;
>
Его так же можно опустить и писать так:
a color: orange;
>
:visited
:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).
a:visited color: blue;
>
:hover
:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.
Этот ПК должен идти третьим в списке (после :visited).
a:hover color: orange;
>
:active
ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.
Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.
Этот ПК должен идти четвертым (после :hover).
a:active color: rebeccapurple;
>
:focus
ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.
a:focus color: green;
>
input:focus background: #eee;
>
Бонус: SASS миксины для ссылок
Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.
Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.
Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.
:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.
Обратите внимание, что эти миксины могут быть использованы для любого html-тега, не только для ссылок.
А вот и миксины:
@mixin links ($link, $visited, $hover, $active) & color: $link;
&:visited color: $visited;
>
&:hover color: $hover;
>
&:active, &:focus color: $active;
>
>
>
Применение:
a @include links(orange, blue, yellow, teal);
>
Компилируется в:
a color: orange;
>
a:visited color: blue;
>
a:hover color: yellow;
>
a:active, a:focus color: teal;
>