1. Дальнейшее чтение на SmashingMag:
2. Основной синтаксис
3. Некоторые заметки о синтаксисе
4. Характеристики вставленного контента
5. После до чего?
6. Вставка нетекстового содержимого
7. Ужасная поддержка браузера
8. Псевдоэлементы не являются критическими
9. Пара напоминаний

Если вы следили за вкладками в различных блогах по веб-дизайну, вы, вероятно, заметили, что псевдоэлементам: before и: after уделялось довольно много внимания на этапе разработки интерфейса - и по уважительной причине , В частности, эксперименты одного блоггера, а именно лондонского разработчика Николаса Галлахера, дали в последнее время псевдоэлементам довольно мало информации. [Проверено ссылками февраль / 08/2017] «Элементы стиля»)] ( http://ww.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ Чтобы дополнить эту экспозицию (и воспользоваться растущей тенденцией), я собрал то, что, как я надеюсь, является довольно всеобъемлющим сокращением псевдоэлементов. Эта статья предназначена прежде всего для тех из вас, кто видел некоторые из классные вещи сделано с псевдоэлементами, но вы хотите узнать, что это за техника CSS, прежде чем попробовать ее самостоятельно.

Если вы следили за вкладками в различных блогах по веб-дизайну, вы, вероятно, заметили, что псевдоэлементам: before и: after уделялось довольно много внимания на этапе разработки интерфейса - и на то есть веская причина. В частности, эксперименты одного блоггера, а именно лондонского разработчика Николас Галлахер - дали немного псевдоэлементов в последнее время.

Николас Галлахер использовал псевдоэлементы для создания 84 графических иконок, созданных из семантического HTML.

Чтобы дополнить эту экспозицию (и воспользоваться растущей тенденцией), я собрал то, что, как я надеюсь, является довольно всеобъемлющим сокращением псевдоэлементов. Эта статья предназначена прежде всего для тех из вас, кто видел некоторые из классные вещи сделано с псевдоэлементами, но вы хотите узнать, что это за техника CSS, прежде чем попробовать ее самостоятельно.

Хотя спецификация CSS содержит другие псевдоэлементы Я сосредоточусь на: до и: после. Итак, для краткости, я скажу «псевдоэлементы», чтобы обозначить в целом эти две особенности.

Дальнейшее чтение на SmashingMag:

Что делает псевдоэлемент?

Псевдоэлемент делает именно то, что подразумевает слово. Он создает телефонный элемент и вставляет его до или после содержимого целевого элемента.

Слово «псевдо» является транслитерация из Греческое слово это в основном означает «ложь, обман, ложь». Итак, называть их псевдоэлементами уместно, потому что они на самом деле ничего не меняют в документе. Скорее, они вставляют похожие на призрака элементы, которые видны пользователю и могут быть стилизованы в CSS.

Основной синтаксис

Псевдоэлементы: before и: after очень легко кодировать (как и большинство CSS-свойств, которые не требуют тонны префиксов вендоров). Вот простой пример:

#example: before {content: "#"; } #example: after {content: "."; }

Об этом примере следует отметить две вещи. Сначала мы нацеливаемся на один и тот же элемент, используя #example: before и #example: after. Строго говоря, они являются псевдоэлементами в коде.

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

В этом примере элемент с примером id будет иметь хеш-символ, помещенный «перед» его содержимым, и точку (или полную остановку), помещенную «после» его содержимого.

Некоторые заметки о синтаксисе

Вы можете оставить свойство content пустым и просто обработать псевдоэлемент как поле без содержимого, например:

#example: before {content: ""; дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей; }

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

Вы, возможно, заметили, что вы также можете кодировать псевдоэлементы, используя синтаксис с двоеточием (:: before и :: after), который я обсуждалось раньше , Краткое объяснение состоит в том, что нет никакой разницы между двумя синтаксисами; это просто способ отличить псевдоэлементы (двойное двоеточие) от псевдоклассов (одиночное двоеточие) в CSS3.

Последний момент, касающийся синтаксиса. Технически, вы можете реализовать псевдоэлемент универсально, не ориентируясь ни на один элемент, например так:

: before {content: "#"; }

Хотя вышесказанное действительно, но это бесполезно. Код вставит символ хеша перед содержимым каждого элемента в DOM. Даже если вы удалите тег <body> и все его содержимое, вы все равно увидите на странице два хеш-символа: один в элементе <html> и один в теге <body>, который автоматически создается браузером.

Характеристики вставленного контента

Как уже упоминалось, вставленный контент не виден в источнике страницы. Это видно только в CSS.

Кроме того, вставленный элемент по умолчанию встроенный элемент (или, в терминах HTML5, в категории семантики текстового уровня). Таким образом, чтобы дать вставленному элементу высоту, отступы, поля и т. Д., Вам обычно придется явно определять его как элемент уровня блока.

Это приводит к краткому описанию того, как стилизовать псевдоэлементы. Посмотрите на этот рисунок из моего текстового редактора:

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

Также обратите внимание, что типичные правила наследования CSS применяются к вставленным элементам. Например, если к элементу <body> документа применяется стек шрифтов Helvetica, Arial, sans-serif, то псевдоэлемент наследует этот стек шрифтов так же, как и любой другой элемент.

Аналогично, псевдоэлементы не наследуют стили, которые не наследуются естественным образом от родительских элементов (таких как отступы и поля).

После до чего?

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

Внедренный контент будет дочерним по отношению к целевому элементу, но он будет помещен «до» или «после» любого другого контента в этом элементе.

Чтобы продемонстрировать это, посмотрите на следующий код. Во-первых, HTML:

<p class = "box"> Другое содержимое. </ p>

И вот CSS, который вставляет псевдоэлемент:

p.box {width: 300px; рамка: сплошная 1px белая; отступы: 20 пикселей; } p.box:before {content: "#"; рамка: сплошная 1px белая; обивка: 2px; поле: 0 10px 0 0; }

В HTML все, что вы увидите, - это абзац с классом блока со словами «Другой контент» внутри (то же самое, что вы увидели бы, если бы просмотрели исходный код на активной странице). В CSS абзацу задается заданная ширина, а также отступы и видимая граница.

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

Вот результат просмотра в браузере:

Внешняя коробка - это абзац. Граница вокруг символа хеша обозначает границу псевдоэлемента. Таким образом, вместо вставки «перед» абзаца псевдоэлемент помещается перед «прочим содержимым» в абзаце.

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

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

Во-первых, вы можете включить URL-адрес, указывающий на изображение, так же, как если бы вы включили фоновое изображение в CSS:

p: before {content: url (image.jpg); }

Обратите внимание, что цитаты отсутствуют. Если вы поместите ссылку на URL в кавычки, она станет буквальной строкой и вставит текст «url (image.jpg)» в качестве содержимого вместо вставки самого изображения.

Естественно, вы могли бы включить URI данных вместо ссылки на изображение, как вы можете с фоном CSS.

У вас также есть возможность включить функцию в виде attr (X). Эта функция, согласно спецификации , «Возвращает в виде строки значение атрибута X для субъекта селектора».

Вот пример:

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

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

Приведенный выше код приведет к тому, что значение href каждого элемента <a> на странице будет размещено сразу после каждого соответствующего элемента <a>. Это может быть использовано в таблица стилей печати включить полные URL-адреса рядом со всеми ссылками при печати документа.

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

Хотя возможность получить заголовок или альтернативный текст изображения и отобразить его на странице в качестве псевдоэлемента, было бы практично, это невозможно. Помните, что псевдоэлемент должен быть дочерним элементом элемента, к которому он применяется. Изображения, которые недействительным (или пустые) элементы, не имеют дочерних элементов, поэтому в этом случае это не сработает. То же самое относится и к другим пустым элементам, таким как <input>.

Ужасная поддержка браузера

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

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

• Chrome 2+,
• Firefox 3.5+ (3.0 имел частичную поддержку),
• Safari 1.3+,
• Опера 9.2+,
• IE8 + (с некоторыми незначительными ошибками),
• Практически все мобильные браузеры.

Единственная реальная проблема (не удивительно) - это IE6 и IE7, которые не поддерживают. Итак, если ваша аудитория находится в нише веб-разработки (или на другом рынке с низким числом IE), вы, вероятно, можете пойти дальше и свободно использовать псевдоэлементы.

Псевдоэлементы не являются критическими

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

Пара напоминаний

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

Еще одна вещь, которую нужно иметь в виду, это то, что инструменты разработчика, такие как Firebug не показывать контент, сгенерированный псевдоэлементами , Таким образом, при чрезмерном использовании псевдоэлементы могут стать причиной головной боли из-за ремонтопригодности и сделать процесс отладки намного более медленным.

Обновление. Как уже упоминалось в комментариях, вы можете использовать инструменты разработчика Chrome для просмотра стилей, связанных с псевдоэлементом, но этот элемент не будет отображаться в DOM. Также, Firebug добавляет поддержку псевдоэлементов в версии 1.8.

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

Похожие

Комментарии