Мини Чат
CSS content

CSS содержит свойство называемое - "content". Оно может применяться исключительно с псевдо элементами :after и :befor. Пишется аналогично псевдо селектору (с двоеточием), но называется псевдо элементом потому что в действительности не выберает какой либо элемент существующий на странице, а добавляет кое что новое на страницу. Вот так это выглядит:

CSS
.email-address:befor { content: "Email address:"; }

С этим CSS мы можем использовать такой HTML:

HTML

Отображение будет таким:

.Email address:chriscoyier@gmail.com

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

Эй! Это же содержание, не отображение!

Первое несоответствие выглядит в не прозрачности разделение - между - содержанием - и - отображением. Добавляя символьный текст в содержание страницы с помощью CSS кода, тем самым разрушаем барьер. Спецификация соблюдена и замысел реализован, что совсем не значит что не имеет смысла обсуждать это. Если у вас есть свое мнение о содержании CSS и его применении, поделись с ним в комментариях.

Я думаю это прекрасно и идеально подходит для CSS. Рассматривая ранее приведенный пример где мы упредили все элементы с классом "email-address" текстом "Email address:". Таков метод разработки, где для чистоты содержания,было решено что наличие перед емайл адресами данного текста, сделает содержание более понятным.Возможно при изменении размера сайта уменьшились размеры отведенные для отображения емайл адресов и решено вместо текста отобразить их с помощью пиктограмм. Это соотвествует назначению CSS, нет неоходимости менять HTML содержимое, все изменения выполняются исключительно в CSS.

Используем специальные символы.

При необходимости возможно использование специальных символов в CSS, звучить немного странно.Это выглядит как представление ASCII числа в виде символа. Эта таблица символов в помощь. Таким образом символу copyright @ соответствует © то есть ASCII число 169. Затем вводим число в Калькулятор который конвертирует в значение необходимое для CSS.

Здесь выборочно представлены несколько полезных:

\2018 - левая одиночная кавычка
\2019 - правая одиночная кавычка
\00A9 - Copyright
\2713 - "галочка"
\2192 - стрелочка вправо
\2190 - стрелочка влево

Примеры хитростей: Галочка напротив посещенных ссылок.

Отмечайте галочкой посещенные ссылки:

CSS
#main-content a:visited:before { content:"\2713"; }

Использование атрибутов.

Вы можете использовать атрибуты элементов, выбраных вами, в качестве содержания страницы. К примеру, атрибут ссылка title может быть использован:

HTML
<a title="A web design community." href="http://css-tricks.com">CSS-Tricks

Доступ к этому атрибуту из содержания выполняется примерно так:

CSS
a:before { content:attr(title) ": "; }

Любой атрибут может быть доступен так, формат attr(название аттрибута).Если вы хотите что-либо добавить в HTML только для дальнейшего использования из CSS, можно использовать новый data- префикс атрибута для HTML5.

Примеры хитростей: CSS3 tooltips

Tooltips для ссылок основан на атрибуте title:

CSS
a {
color: #900; text-decoration: none;
}

a:hover {
color: red; position: relative;
}

a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Теперь этот пример использует атрибут title, и другие примеры похожие на этот которые вы можете найти в сети, так же используют атрибут title. Однако, нужно отметить что браузеры имеют свои встроенные tooltip всплывающие подсказки. И когда это происходит, они появляются поверх, это выглядит довольно странно. Я пытался сделать скриншот, но у меня это не получилось по каким-то причинам. Способа подавить это нет, разве что не использовать атрибут title. HTML5 data- атрибут, опять же, может быть полезен.

Рассмотрим некоторые детали.

  • Firebug пока не может выделять псевдо элементы.
  • Веб инспектор в WebKit браузерах способен выделить их, но не отображает их свойства/значение. У WebKit,они должны заблокировать уровень который должен быть изменен. Firefox может менять строковые элементы/псевдо-элементы.
  • В FireFox 3.0, псевдо элементы не могут быть позиционированны абсолютно.
  • Они не могут быть перемещены или анимированны.

Примеры хитростей:Своеобразные всплывающие ссылки емайл адресов

У меня была идея, я хотел попробовать, вариант где вертикальный список имен и при наведении на них емайл адреса выезжали из под них. Для того чтобы HTML был как можно более чист, было бы неплохо использовать :after псевдо элемент и -webkit-transition для этого. Но вы не можете анимировать или перемещать псевдоэлементы

Используя :after/content метод я получил пример, работающий не так круто как мне бы хотелось. Применив теги <span> я реализовал идею, можно увидеть на демо странице.

Посмотреть Демо

Примеры хитростей: Отображение полных ссылки на печатной странице.

CSS
@media print {
#main-content a[href]:after { " (" attr(href) ") "; }
}

Поддержка браузеров/доступность.

Основная масса браузуров(Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, и Internet Explorer 8+) поддерживают CSS с использованием псевдо элементов :after/:before и в спецификациях они являются в статусе рекомендованных.

Рассматривая доступность, я на 100% не уверен в каком состоянии ситуация.Я пробовал с помощью VoiceOver Safari на своем Маке пример с всплывающим емайл адресом. Для максимальной доступности, мне кажется целью должно являтся чтение всего текста, включая добавленное CSS содержание. У меня с этим возникли проблемы, но это было сделано один раз и к тому же кое как. Я не силен в пользовании VoiceOver и был розачарован после неудачных попыток использовать его даже на самом начальном уровне. Если у кого либо есть какая либо дополнительная информация о доступности относительно CSS содержания, я уверен что мы с удовольствием узнали бы об этом.


Источник