Стоит поговорить о том, как свойство content передаётся с помощью экранных читалок. Согласно спецификации W3C, content предназначен для озвучивания.
Свойство content применяется к речи, и сгенерированное содержимое должно быть обработано для речевого вывода.
Хорошо, звучит неплохо. Но давайте подробнее рассмотрим, что происходит в тех или иных ситуациях.
Если вы используете ::before или ::after для декоративных целей, а для content установлено значение '' (пустая строка), то экранные читалки не будут его произносить. Это нормально!
div::after {
/* Экранная читалка ничего не говорит */
content: '';
}
Экранные читалки читают текст, размещённый внутри content. Так было не всегда, но теперь это так… если только вы все ещё не поддерживаете IE11 (извините). Разные люди делились результатами тестирования различных комбинаций браузера и читалки здесь, здесь и здесь. Последний вариант поначалу выглядит плохо, пока вы не поймёте, что все сбои происходят с IE11 и Firefox 29 (выпущен в 2014 году).
div::after {
/* Экранная читалка говорит «Привет» */
content: 'Привет';
}
Помните, что эмодзи и символы считаются текстом. Экранные читалки будут их распознавать, что может быть хорошо, но может быть и неудобно, если вы используете их в качестве украшения.
div::after {
/* Экранная читалка говорит «yellow five pointed star» */
content: '⭐';
}
div::after {
/* Экранная читалка говорит «clockwise open circle arrow» */
content: '↻';
}
Экранные читалки могут распознавать изображения внутри content. В моих тестах VoiceOver выдавал «image» в Firefox и Safari и «unlabelled image» в Chrome.
div::after {
/* Экранная читалка говорит что-то вроде «image» или «unlabelled image» */
content: url(image.png);
}
Если изображение не декоративное, то наше положение плохо. У нас есть значимое изображение, которое передаётся только как «image».
Если изображение декоративное, то те, кто используют экранную читалку, возможно, не упускают ничего важного, но они об этом не знают! Они услышат «image» и зададутся вопросом, что они упускают.
Хорошей новостью является то, что вы можете указать для свойства content альтернативный текст. Это даёт нам возможность сообщать экранным читалкам, что объявлять, аналогично работе атрибута alt в <img>.
div::after {
/* Экранная читалка говорит «наггетсы» */
content: url(chicken-nugget.png) / 'наггетсы';
}
div::after {
/* Экранная читалка ничего не говорит */
content: url(decorative-image.png) / '';
}
Это также работает и с текстом, поэтому мы можем указать экранным читалкам, как объявлять декоративные эмодзи и символы.
div::after {
/* Экранная читалка ничего не говорит */
content: '⭐' / '';
}
div::after {
/* Экранная читалка говорит «обновить» */
content: '↻' / 'обновить';
}
Плохая новость заключается в том, что Firefox и Safari не поддерживают альтернативный текст для content. Более того, в этих браузерах символ / полностью аннулирует content. Вы можете обойти эту проблему, объявив content дважды. Порядок важен!
div::after {
content: '⭐'; /* Firefox и Safari будут использовать это */
content: '⭐' / ''; /* Другие браузеры будут использовать это */
}
Вы также должны знать, что текст в content нельзя выделить, а по изображению в content нельзя щёлкнуть правой кнопкой мыши для вызова контекстного меню. Это не так важно для мелких или декоративных элементов, но я бы подумал, прежде чем помещать в content длинный текст или важные изображения.
Проделки
Иногда людям просто хочется проявить творческий подход в CSS. Это весело! Одна из особенно популярных игр — смотреть, как много можно сделать с помощью одного элемента. ::before и ::after очень часто приходят здесь на помощь, поскольку наличие этих дополнительных псевдоэлементов открывает широкие возможности.
- В галерее Линна Фишера A Single Div есть несколько впечатляющих примеров. Проверьте CSS и вы увидите множество псевдоэлементов ::before и ::after.
- Single Div Pure CSS Flags Дханиша Гаджара — это коллекция из 113 флагов мира, многие из которых нарисованы с помощью псевдоэлементов ::before и ::after.
- А ещё есть 700+ CSS Icons Астрита Малсия. Присмотритесь к иконке повнимательнее, и вы поймёте, о чём идёт речь.
Эти вещи не всегда практичны, но это не имеет значения. Главное — получить немного творческого удовольствия и попутно научиться новым трюкам.
До свидания!
С псевдоэлементами ::before и ::after и свойством content можно сделать очень многое. Я думаю, это действительно здорово, что можно иметь минимальную разметку — чаще всего один HTML-тег, а затем просто запускать CSS и делать все эти удивительные вещи.
Надеюсь, в этом руководстве мы рассмотрели достаточно информации, чтобы дать вам представление о возможностях (и ограничениях!) псевдоэлементов ::before и ::after и вызвать к ним интерес.
Спасибо за прочтение!