Контакты RSS 2.0

Разделы Сайта:

Кубтеле - о компании
Инструменты SEO
FreeBSD
Администрирование
Centos администрирование
Windows администрирование
Программирование для web

Аккаунт

Популярное:

Материалы по web программированию › Как использовать псевдо-элементы :before и :after в CSS
Если Вы следите за веб дизайнерскими блогами, то вероятно заметили, что псевдо-элементам :before и :after уделяют маловато внимания. Этот урок для тех из Вас, кто видел какие-то прикольные штучки, сделанные с помощью псевдо-элементов, и хочет научиться этим техникам.
использование псевдо-элементов в CSS
Зачем нужны псевдо-элементы?

Псевдо-элементы нужны для создания одноименных элементов и вставки до или после содержимого, которое Вы указали.

Слово "псевдо" – транслитерация греческого слова, которое означает "ложь, лживый, ложный". Поэтому правильно называть их псевдо-элементами, потому как на самом деле они ничего не меняют в документе. Вернее, они вставляют в документ "элементы-призраки", которые видимы юзеру и стилизируемы в CSS.

Перед или после чего?

Содержимое, которое было вставлено будет дочерним по отношению к целевому элементу, но оно будет расположено "до" ("before") или “после” (“after”) любого другого содержимого в этом элементе. Чтобы продемонстрировать это, взгляните на следующий код, сначала HTML:
<p class="container ">Other content.</p>



А вот CSS код, который вставляет псевдо-элемент:
p.container {
   width: 222px;
   border: dotted 2px black;
   padding-top: 10px;
}

p.container:before {
   content: "#";
   border: dotted 2px black;
   padding: 3px;
   margin: 10px 10px 10px 10px;
}


В HTML всё, что Вы видите – это параграф с классом container и со словами “Other content” внутри. В CSS параграфу установлена ширина с некоторым отступом и видимой рамкой.

Далее идёт псевдо-элемент. В нашем случае, это символ хэша вставленный “до” (“before”) содержимого параграфа. Последующие css правила устанавливают ему рамку и отступы.

Вот результат просмотра в браузере:
Как использовать псевдо-элементы :before и :after в CSS
Внешний контейнер – это параграф. Рамка вокруг хэш-символа обозначает границы псевдо-элемента. Мы видим, что вместо того, чтобы быть вставленным “до” (“before”) параграфа, хэш-символ размещён перед “Other content” в параграфе.

Вставка нетекстового содержимого.

Вы можете значение свойства content пустым или вставить текстовое содержимое. Также у Вас есть две дополнительные опции того, что установить как значение свойства content.

Первое, Вы можете добавить URL, который указывает на картинку, также как Вы бы сделали, указывая фоновое изображение в CSS:
p.container:before {
   content: url(img.jpg);
}


Обратите внимание, что кавычки опущены. Если Вы обернёте URL в кавычки, то свойство станет строкой и вставит “url(img.jpg)” как содержимое, вставки изображения.

Также Вы можете использовать функцию вида attr(X). Вот пример:
a.class:after {
   content: attr(href);
}


Что делает функция attr()? Она берёт значение указанного атрибута и помещает его текстовое содержимое как псевдо-элемент.

Код выше сделает так, что значение href каждого элемента на странице c классом class будет размещено прямо после соответствующего элемента. Это может быть использовано при печати для видимости всех полных URLов после ссылок.

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

Запомните, что псевдо-элемент должен быть дочерним по отношению к элементу, к которому он применяется. Изображения являются пустыми элементами и не могут содержать дочерних элементов, так что с ними это не сработает. Тоже самое относится и к таким элементам как .

Поддержка псевдо-элементов браузерами.

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

Поддержка браузерами для псевдо-элементов :before и :after следующая:

- Google Chrome 2+,

- Mozilla Firefox 3.5+ (3.0 поддерживает частично),

- Safari 1.3+,

- Opera 9.2+,

- Internet Explorer 8+ (с несколькими багами),

- большинство мобильных браузеров.

Единственная реальная проблема – это IE6 и IE7, которые не поддерживаются.

Выводы.

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

Следует заметить, что firebug, имеет поддержку псевдо-элементов только с версии 1.8.

Этот урок охватывает все аспекты, которые могут понадобиться Вам для создания чего-то полезного, используя псевдо-элементы.
скачать dle 10.3фильмы бесплатно
Добавил: admin › 31-12-2014, 11:10
› 0 комментария › печатькатегория
Другие новости по теме
  • Функции в PHP
  • HTML и CSS для IPhone
  • Горячие клавиши Windows 8
  • Advanced CSS
  • Советы по использованию атрибута ALT для изображений

  • Кубтеле 350000, Россия, Краснодарский край, , город Краснодар,улица Айвазовского, д. 94, корп. А
    Продвижение сайтов,Регистрация доменов,Компьютерная системная интеграция
    8(861) 299-02-62, +7(903) 449-666-8