Что такое хорошее использование свойства 'содержания' CSS?

CSS это презентационные данные. Любой контент, который связан только с презентацией, подходит для CSS-файла. Например, предположим, что я хочу поместить « и » вокруг моих <h1> тегов; это чисто презентационно. Вы можете сделать это с помощью селекторов :before и :after.

Следует также отметить, что content также может отображать изображения:

content: url('my/image.png');

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

Один интересный вариант использования, хотя, возможно, и не рекомендуется, это заполнитель текста на contenteditables.

[contenteditable]:empty:after
{
    color: #aaa;
    content: 'Enter some text';
}

Я просто хочу добавить к тому, что уже было сказано.

С помощью каскадных таблиц стилей вы можете применять стили ко многим типам документов.

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

Другой вариант использования - вместо этого применить CSS к документам XML. В этом случае документ обычно не содержит элементов для структуры страницы (div, h1 и т. Д.). Таким образом, в этом сценарии, используя более часто CSS-свойство content, вы можете лучше определить страницу и отношения между элементами и данными.

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

Я использую его для отображения ключа доступа в меню панели администратора

.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }

Один популярное место, где это появляется, - это тема WordPress по умолчанию

.entry ul li:before, #sidebar ul ul li:before {
    content:"» ";
}

Это хорошо для структурированного контента. Я написал несколько тестовых примеров для следующих правил CSS печати W3C, и тот, который мне показался крутым, заключался в том, что я мог помещать «Chapter» и тому подобное в определенные элементы, особенно в сочетании со счетчиками .Простым примером может быть что-то вроде:

li.chapter:before {content: "Chapter" counter(chapter) ": ";}

Ничего из этого не предназначено для печати, и это вся информация для презентации. Если вы не хотите, чтобы вашим главам предшествовало слово «Chapter», удалите его из CSS. Управление этим в таблице стилей означает, что ваша версия для печати может иметь заголовки глав, отличные от вашей экранной версии, ваш мобильный телефон может снова отличаться, без необходимости иметь какие-либо сведения об устройстве зрителя внутри логики вашего приложения.

Одним из интересных случаев использования является локализация пользовательского интерфейса.

Обычно его используют с тегами: before и: after для форматирования цитат с помощью какого-то стилизованного блока цитат. Это может быть быстрый и простой способ добавить стилизованные элементы, из которых в противном случае вы бы создавали изображения.

blockquote:before, blockquote:after {
    content: '"';
}

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