логотип PurpleSchool
логотип PurpleSchool

Функция attr в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

Функция attr() в CSS позволяет использовать значения атрибутов HTML-элементов для стилизации и отображения на веб-странице. Это может быть полезно для отображения дополнительных данных, таких как значения атрибутов data-*, заголовки, ссылки и многое другое. В данной статье мы подробно рассмотрим, как использовать функцию attr(), какие атрибуты можно сделать видимыми и приведем практические примеры.

Основные понятия

Что такое функция attr()?

Функция attr() в CSS используется для получения значения атрибута HTML-элемента и его вставки в содержимое элемента или в свойства стилей. Синтаксис функции выглядит следующим образом:

element::before {
    content: attr(attribute-name);
}

Применение функции attr()

Функция attr() чаще всего используется с псевдоэлементами ::before и ::after для вставки содержимого до или после элемента.

Примеры использования

Отображение значения атрибута

Рассмотрим пример, где мы отображаем значение атрибута data-info у элемента:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr()</title>
    <style>
        .info::before {
            content: attr(data-info);
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="info" data-info="Дополнительная информация">Основной контент</div>
</body>
</html>

В этом примере значение атрибута data-info отображается перед основным контентом элемента div.

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

Вы можете использовать функцию attr() для отображения значения атрибута title:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr() с title</title>
    <style>
        .tooltip::after {
            content: attr(title);
            display: block;
            margin-top: 10px;
            font-style: italic;
            color: gray;
        }
    </style>
</head>
<body>
    <p class="tooltip" title="Подсказка">Наведите курсор на этот текст, чтобы увидеть подсказку.</p>
</body>
</html>

Здесь значение атрибута title отображается после текста элемента p.

Добавление единиц измерения

Вы также можете использовать attr() для добавления единиц измерения к числовым значениям:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример attr() с единицами измерения</title>
    <style>
        .measurement::after {
            content: attr(data-value) " " attr(data-unit);
        }
    </style>
</head>
<body>
    <p class="measurement" data-value="50" data-unit="кг">Вес:</p>
</body>
</html>

В этом примере значение атрибутов data-value и data-unit объединяются для отображения измерения веса.

Поддержка браузеров

Поддержка функции attr() в CSS может варьироваться в различных браузерах. На момент написания данной статьи функция attr() поддерживается большинством современных браузеров, включая:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge

Пример совместимости с браузерами

/* Общий стиль */
.element::before {
    content: attr(data-info);
    display: block;
    font-weight: bold;
}

Ограничения функции attr()

Важно отметить, что функция attr() в CSS имеет некоторые ограничения:

  1. Только для псевдоэлементов ::before и ::after: На данный момент функция attr() может использоваться только с псевдоэлементами ::before и ::after для вставки содержимого. Она не может быть использована напрямую для изменения стилей элемента.
  2. Статичность значений: Значения атрибутов, полученные с помощью attr(), не будут обновляться динамически, если атрибут изменится после первоначальной загрузки страницы. Для динамического обновления требуется JavaScript.
  3. Ограниченное количество атрибутов: Не все атрибуты могут быть использованы с attr(). Например, некоторые специальные атрибуты могут не поддерживаться.

Заключение

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

Стрелочка влевоФункция calc в CSS. Полное руководство с примерами

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний