Различные возможные варианты использования свойства «content:» в css2 / css3 - PullRequest
Новая
       29

Различные возможные варианты использования свойства «content:» в css2 / css3

7 голосов
/ 16 марта 2011

Я пытаюсь найти некоторую актуальную информацию о различных возможных применениях свойства content: в css, но нахожу материал только в древних подземельях сети, датирующихся 2004 годом, поэтому я подумал, что мне нужно спросить об этом еще раз в 2011 году: 

p:before {
content: url(dingdong.png);
}

p:before {
content: "some text ";
}

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

Как установить цвета маркеров в списках HTML UL / LI через CSS без использования каких-либо изображений или тегов span *

Только для того, чтобы выяснить, что могут возникнуть некоторые проблемы с фактическим кодированием содержимого:

li: before {content: "■"; } Как закодировать этот специальный символ как буллит в канцелярских принадлежностях электронной почты?

И вот мой конкретный вопрос: кроме url() и "text", есть ли другие возможности?
Большое спасибо за ваши предложения и идеи.

Ответы [ 3 ]

14 голосов
/ 16 марта 2011

О, слишком много, чтобы перечислить.Вот некоторые из наиболее распространенных случаев:

  • Специальная нумерация с функцией counter(), а также свойствами counter-reset и counter-increment

  • Чистый CSS clearfix с: 

    .foo:after {
    content: "";
    display: block;
    clear: both;
}

  • Отображение атрибутов, например, для печати URL-адресов гиперссылок в таблице стилей печати 

    a[href]:after {
    content: ' (' attr(href) ') ';
}

  • Добавить типографские орнаменты, которые не должны быть в HTML, потому что они презентационные.Например, в моем блоге я использовал его для орнаментов между сообщениями или ссылками на боковой панели.

  • Добавление значков к гиперссылкам в зависимости от того, куда они указывают,как 

    a[href^="http://twitter.com/"]:before {
    content: url('twitter-icon.png');
}

  • Добавление указателя для создания речевого пузыря только для CSS: 

    .bubble {
    position: relative;
    background: silver;
}

.bubble:after {
    content: "";
    border:10px solid transparent;
    border-top-color:silver;
    position: absolute;
    bottom:-20px
}

И многие, многие другие.

Только остерегайтесь: если что-то не является презентационным, это, вероятно, должно быть в вашем HTML.Пользователи не смогут выбирать сгенерированный CSS контент, а программы чтения с экрана будут его игнорировать.

1 голос
/ 16 марта 2011

Созданный контент не будет восприниматься программами чтения с экрана, поэтому остерегайтесь проблем с доступностью.
content очень полезен, но есть случаи, когда этот текст должен быть в HTML-коде, потому что он передает информацию и не толькодекоративный (немного похож на фоновые изображения в CSS против информативного img с непустым атрибутом alt)

  • : after и content могут использоваться как clearfix без дополнительного div
  • : before и: after приносят несколько фонов (до 3 с самим элементом) в браузеры, которые не понимают функцию CSS3.

РЕДАКТИРОВАТЬ: забыли о статье Эрика Мейера в A List Apartо печати атрибута href ссылок вместе с их текстом с помощью контента (за этим последовало улучшение JS , к вашему сведению)

1 голос
/ 16 марта 2011

Вы также можете использовать счетчик. Смотри http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

Вы также можете отобразить определенный атрибут выбранного элемента. Смотри http://jsfiddle.net/EcnM2/

Вы также можете добавлять или удалять открывающие и закрывающие кавычки.

Список свойств контента w3schools: http://www.w3schools.com/css/pr_gen_content.asp

...