Что такое использование свойства css `content`?

Question

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

Что такое хорошее использование css content? Я видел это только в clearfix хаках.

Answer 1

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

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

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

Автор Quirksmode проветривает интересное мнение:

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

alt text http://i41.tinypic.com/24e7xb6.png

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

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

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

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

Answer 9

Как и zneak said, также возможно заменить изображения. Я считаю практичным заменять «контентные изображения» (а не «изображения ресурсов», которые должны выполняться с помощью изображений 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

Answer 10

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

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

Некоторые связи (Http: //www.somesite .com)

Answer 11

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

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