Как правильно использовать свойство css `content`?
Ли CSS content свойство нарушает правило контента и разделения, потому что CSS для презентации не генерировать контент?
Каковы другие хорошие использования CSS content имущество? Я видел это только в clearfix хаки.
11 ответов
Не нарушает ли свойство css "content" правило содержимого и разделения, потому что css предназначен для представления, а не для создания содержимого?
Хорошая точка зрения. Я бы сказал, что так и есть, если он используется для реальных данных.
Страница с причудливым режимом контента показывает ограничения довольно хорошо. В настоящее время вы не можете добавлять какой-либо стилизованный контент - он будет работать с небольшим количеством браузеров. Вы можете добавить только символьные данные.
Автор этой причудливой моды высказывает интересное мнение:
Я чувствую, что мы не должны использовать декларацию контента вообще. Он добавляет контент на страницу, а CSS предназначен для добавления презентации на страницу, а не контента. Поэтому я считаю, что вы должны использовать JavaScript, если вы хотите динамически генерировать контент. CSS - неподходящий инструмент для этой работы.
Я согласен с этим в целом, но иногда могут быть случаи, когда вы не хотите полагаться на JavaScript для выполнения этой работы. Пример запятой, показанный Мартином, - это случай, когда я нахожу использование content оправдано (хотя я лично чувствую себя лучше, если запятые уже будут поступать со стороны сервера - это то, что я лично придерживаюсь).
Также имейте в виду, что добавление запятых и кавычек через content свойство может выглядеть плохо, когда ваш контент просматривается из другого места - например, на странице результатов поиска.
Я бы сказал, используйте его только экономно, если вам это действительно нужно.
Одно популярное место, которое это показывает, находится в теме по умолчанию WordPress
.entry ul li:before, #sidebar ul ul li:before {
content:"» ";
}
Он может быть использован в таблицах стилей печати, чтобы показать URL для ссылок, например:
p a:after {
content: " (" attr(href) ")";
}
Некоторая ссылка (http://www.somesite.com)
Это хорошо для структурированного контента. Я написал несколько тестовых примеров для следующих правил CSS для печати в W3C, и мне показалось, что мне нравится помещать "главу" и тому подобное в определенные элементы, особенно в сочетании со счетчиками. Упрощенный пример будет что-то вроде:
li.chapter:before {content: "Chapter" counter(chapter) ": ";}
Ничего из того, что связано с печатью, и это все информация о презентации. Если вы не хотите, чтобы вашим главам предшествовало слово "Глава", уберите его из CSS. Контроль над этим в таблице стилей означает, что ваша версия для печати может иметь заголовки глав, отличные от вашей экранной версии, и ваш мобильный телефон снова может отличаться, не имея необходимости знать устройство просмотра внутри логики вашего приложения.
Я часто использую теги:before и:after для форматирования цитат с помощью какого-то стилизованного блока цитат. Это может быть быстрый и простой способ получить стилизованные элементы, из которых вы могли бы создать изображения.
blockquote:before, blockquote:after {
content: '"';
}
Я думаю, что это нормально, потому что это не нарушает правила разделения контента и стиля. Мне кажется, что если это часть дизайна страницы, а не контента, то, вероятно, это нормально для контента:
Я использую его для отображения Accesskey в меню панели администратора
.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }
CSS это презентационные данные. Любой контент, который связан только с презентацией, подходит для CSS-файла. Например, предположим, что я хочу поставить « а также « вокруг моего <h1> теги; это чисто презентационно. Вы могли бы сделать это с :before а также :after селекторы.
Следует также отметить, что content также может отображать изображения:
content: url('my/image.png');
Я хотел бы добавить, что я хотел бы рассмотреть вопрос об использовании content свойство переопределять уже существующий контент крайне плохая практика.
Один интересный вариант использования, хотя, возможно, и не рекомендуется, это заполнитель текста на contenteditables.
[contenteditable]:empty:after
{
color: #aaa;
content: 'Enter some text';
}
Как сказал 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, но я считаю его экспериментальным и не тестировал его на других устройствах. Вот полный пример:
Я просто хочу добавить к тому, что уже было сказано.
С помощью каскадных таблиц стилей вы можете применять стили ко многим типам документов.
Обычный вариант использования - применение CSS к HTML-страницам. В этом случае общая идея заключается в использовании content собственность только в эстетических целях.
Другой вариант использования - вместо этого применить CSS к документам XML. В этом случае документ обычно не содержит элементов для структуры страницы (div, h1 и т. Д.). Итак, в этом сценарии, используя content Свойство CSS чаще, вы можете лучше определить страницу и отношения между элементами и данными.
Например, вы можете добавить абзац описания перед таблицей или добавить адрес электронной почты после имени человека. Обратите внимание, что на страницах HTML эти элементы структуры страницы должны быть частью самого документа HTML, хотя они обычно опускаются в документе XML, и поэтому их можно добавить с помощью content CSS свойство
Одним из интересных вариантов использования была бы локализация пользовательского интерфейса.