Каковы преимущества использования свойства css `content`?

Ответ 1

Препятствует ли свойство css "content" нарушать правило содержания и разделения, потому что css предназначен для представления не для генерации контента?

Хорошая точка. Я бы сказал, что он делает, если он используется для фактических данных.

Страница quirksmode по содержанию показывает ограничения довольно хорошо. На данный момент вы не можете добавить какой-либо стилизованный контент - он будет работать со слишком небольшим количеством браузеров. Вы можете добавить только данные символа.

Автор quirksmode представляет интересное мнение:

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

Я согласен с этим в целом, но иногда могут быть случаи, когда вы не хотите полагаться на JavaScript для выполнения этой работы. Пример запятой, показанный Мартином, - это случай, когда я нахожу использование content оправданным (хотя мне лично было бы лучше, если бы запятые уже были отправлены с серверной стороны - это то, что я лично придерживался.)

Кроме того, имейте в виду, что добавление запятых и кавычек через свойство content может выглядеть плохо, когда ваш контент просматривается из другого места - например, на странице результатов поиска.

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

Ответ 2

Одно популярное место, которое это показывает, находится в теме по умолчанию WordPress

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

Ответ 3

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

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

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

Ответ 4

Его можно использовать в листах стилей печати, чтобы показывать URL-адреса для ссылок, например:

p a:after {
  content: " (" attr(href) ")";
}

Некоторая ссылка (http://www.somesite.com)

Ответ 5

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Как zneak сказал, также можно заменить изображения. Я считаю практичным заменять "контентные изображения" (а не "изображения ресурсов", которые должны выполняться с помощью изображений css) с вариантами более высокого разрешения на iPhone 4 и другими устройствами, которые имеют более одного реального пикселя для каждого виртуального пикселя.

Е. г:.

<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
@media all and (-webkit-min-device-pixel-ratio: 2) {
  /* e. g. iphone 4 */
  #people9 { content: url(//lorempixum.com/400/300/people/9/); }
}

Он работает, по крайней мере, на iPhone 4 и Android Nexus S, но я считаю его экспериментальным и не тестировал его на других устройствах. Вот полный пример:

https://gist.github.com/1206008

Ответ 10

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

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

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

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

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

Ответ 11

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