Java, UX, HTML, CSS, WEB-design

Учимся использовать псевдоэлементы :after и :before в CSS

Краткое описание по статье Учимся использовать псевдоэлементы :after и :before в CSS

Название: Учимся использовать псевдоэлементы :after и :before в CSS . Краткое описание: ⭐ Луи Лазари . Дата публикации: 21.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


  • Луи Лазарис

  • 0 Комментарии

Учимся использовать псевдоэлементы :after и :before в CSS

  • 9 минут чтения

  • Кодирование, CSS, Методы, Основы

Краткое резюме ↬

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

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

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

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

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

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

  • Руководство по псевдоклассам и псевдоэлементам CSS
  • Приручение расширенных селекторов CSS
  • Семантический CSS с интеллектуальными селекторами
  • Специфика CSS: вещи, которые вы должны знать

Еще после прыжка! Продолжить чтение ниже ↓

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

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

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

Базовый синтаксис

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

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

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

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

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

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

Некоторые примечания к синтаксису

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

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

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

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

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

:before {
   content: "#";
}

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

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

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

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

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

снимок экрана

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

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

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

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

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

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

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

<p class="box">Other content.</p>

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

p.box {
   width: 300px;
   border: solid 1px white;
   padding: 20px;
}

p.box:before {
   content: "#";
   border: solid 1px white;
   padding: 2px;
   margin: 0 10px 0 0;
}

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

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

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

снимок экрана

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

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

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

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

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

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

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

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

Вот пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сокрушительная редакция
(кВт)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Учимся использовать псевдоэлементы :after и :before в CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»