attr() в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340371c8b8b9051 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

CSS Attribute Selectors

Стили HTML-элементов с определенными атрибутами

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

Селектор CSS [атрибут]

Селектор [attribute] используется для выбора элементов с указанным атрибутом.

В следующем примере выбираются все элементы с целевым атрибутом:

Пример

CSS [attribute=»value»] Селектор

Селектор [attribute=»value»] используется для выбора элементов с указанным атрибутом и значением.

В следующем примере выбираются все элементы с целевым атрибутом = «_бланк»:

Пример

Селектор CSS [атрибут

=»value»] используется для выбора элементов со значением атрибута, содержащим указанное слово.

В следующем примере выбираются все элементы с атрибутом title, содержащим разделенный пробелами список слов, одним из которых является «цветок»:

Пример


=»flower»] <
border: 5px solid yellow;
>

Приведенный выше пример будет соответствовать элементам с названием = «цветок», название = «Летний цветок», и название = «цветок новый», но не название = «Мой-цветок» или название = «Цветы».

Селектор CSS [атрибут | = «значение»]

Селектор [attribute|=»value»] используется для выбора элементов с указанным атрибутом, начиная с заданного значения.

В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с «Top»:

Примечание: Значение должно быть целым словом, либо в одиночку, как класс = «Top», или за которым следует дефис (-), как класс = «Верхний текст»!

Пример

Селектор CSS [атрибут ^ = «value»]

Селектор [attribute^=»value»] используется для выбора элементов, значение атрибута которых начинается с заданного значения.

В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с «Top»:

Примечание: Значение не обязательно должно быть целым словом!

Пример

Селектор CSS [атрибут $ = «value»]

Селектор [attribute$=»value»] используется для выбора элементов, значение атрибута которых заканчивается заданным значением.

В следующем примере выбираются все элементы со значением атрибута Class, которое заканчивается на «Test»:

Примечание: Значение не обязательно должно быть целым словом!

Пример

Селектор CSS [атрибут * = «value»]

Селектор [attribute*=»value»] используется для выбора элементов, значение атрибута которых содержит указанное значение.

В следующем примере выбираются все элементы со значением атрибута Class, содержащим «Te»:

Примечание: Значение не обязательно должно быть целым словом!

Пример

Укладка форм


Селекторы атрибутов могут быть полезны для стилизации форм без класса или идентификатора:

Пример

input[type=»text»] <
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
>

input[type=»button»] <
width: 120px;
margin-left: 35px;
display: block;
>

Почему не срабатывает css-функция attr() на атрибуте с цветом?

Не срабатывает функция attr() для определения параметра background-color. Использую attr как с указанием типа, так и без. Строка data-word подхватывается. Подскажите, где ошибка?
https://codepen.io/anon/pen/NeqZbg

background-color: attr(data-color color);

  • Вопрос задан 12 дек. 2020
  • 52 просмотра

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

Attr() в CSS

Получает/устанавливает значение атрибутов выбранных элементов.

version added: 1.0 .attr( attributeName )

attributeName

Название атрибута, которое нужно получить.

version added: 1.0 .attr( attributeName, value )

attributeName

Устанавливает значение value атрибуту attributeName

version added: 1.0 .attr( attributes )

attributes

version added: 1.1 .attr( attributeName, function(index, attr) )


attributeName

Имя атрибута, которому нужно задать значение.

function(index, attr)

Атрибуту attributeName будет установлено значение, возвращенное функцией function. При вызове ей передаются параметры: index (позиция элемента в наборе) и value (текущее значение атрибута attributeName у элемента).

Илон Маск рекомендует:  Imagemagick или фотошоп для perl

Метод.attr() достаёт значение атрибута первого элемента, который ему встретится. Для того чтобы получить значение каждого из элементов, нужно воспользоваться такими конструкциями как .each() или .map().

Начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано. Для получения и выставления таких опций как checked, selected, или disabled используйте метод .prop().

Примеры

Пример: отобразить состояние элемента формы.

Пример: достать атрибут title первого элемента

Предположим, у нас есть следующее изображение:

Задаём один атрибут

Для задачи значения атрибуту, в качестве первого аргумента передаём имя, в качестве второго, значение:

Задаём сразу несколько атрибутов

Для смены и выставления значения сразу нескольких атрибутов, передадим простой JavaScript объект вида ключ:значение. Каждый ключ — это атрибут:

В этом случае имена атрибутов брать в кавычки не обязательно

Предупреждение: при работе с атрибутом ‘class’, его имя нужно взять в кавычки!

Заметка: jQuery не позволит изменить значение атрибута type элементов или , выкинет ошибку. Дело в том, что атрибут type не можут быть изменён в Internet Explorer.

Динамическое формирование значения атрибутов

С помощью функции, мы можем сформировать динамическое значение атрибута, используя уже существующие значения. К примеру, расширим существующее значение атрибута title:

Это может быть полезно для изменения атрибутов сразу большого числа элементов.

Примеры

Пример: Задаём атрибуты всем элементам на странице.

Пример: задаём id элементам div, в зависимости от их расположения на странице


Пример: Задаём значение атрибута src, в зависимости от значения атрибута title.

Связанные уроки:

Манипулирование атрибутами элементов в jQuery

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

CSS attr() Function

Get the value of an attribute with the CSS attr() function.

The CSS attr() function returns the value of an attribute of an element.

For example, you could use the attr() function to return and display the title attribute from an abbreviation. Like this:

Another potentially useful example is getting the text of a URL of a hyperlink:

As demonstrated here, you can add other text around the value (such as enclosing it in brackets, adding spaces, etc). You can also apply other styles to the generated content (such as making the text italic).

Printed Page Example

A common use of attr() is for displaying hyperlinks on the printed version of the page (i.e. when the user prints the page). This can be achieved by placing it inside the @media rule:

When the page is printed, each hyperlink element will have its full URL displayed next to the link text. If the URL is long, it will probably be displayed under the text link, as it will wrap to the next line.

Custom HTML5 Attributes

The attr() function also works on custom HTML5 data attributes. For example:

If the attr() references an attribute that’s not present, the empty string is returned, as shown in this example.

CSS3 Additions

CSS3 adds the ability to apply the attr() function against all properties (not just the content property), and to also return non-string values (such as numbers, colors, etc).

CSS3 also provides the option of using a fallback value — a value that will be used which is used if the named attribute is missing, or its value cannot be parsed into the given type or is invalid/out-of-range for the property.

The CSS3 syntax goes like this:

This basically means that you can provide an (optional) unit or type, and an (optional) fallback value.

So you could do something like this:

This example takes a value from a custom data attribute called data-size , adds em as the unit, and applies it to the height property. It also provides a fallback value of 20 which is used if the named attribute is missing or can’t be used.


However, as of this writing, the CSS3 syntax is not supported in any major browser. You can continue to use the CSS2 syntax (as per the previous examples).

The Browser Support chart below shows the browsers that currently support the CSS3 implementation of attr() .

Уроки з HTML і CSS: властивості content і attr

В CSS є властивість content , яку можна використовувати лише в псевдо-елементах :before і :after . Воно додає новий контент на сторінку, використовуючи селектор, який ви вкажете. Ось як це працює в CSS:

В HTML потрібного елементу призначається клас:

Результат вийде таким:

На перший погляд така конструкція може здатися складною. Навіщо вставляти текст через стилі, якщо ми можемо додати його безпосередньо в HTML? Хороше питання. Якщо перед вами стоїть завдання в верстці однієї невеликої сторінки без повторення елементів, то можна обійтися класичними властивостями.

В іншому випадку властивість content може бути дуже зручною. Припустімо, ви хочете оформити всі номери телефонів або адреси електронної пошти особливим префіксом або додати до них підпис. І якщо у вас таких елементів чимало, то на таку задачу у вас піде багато часу.

Якщо користуватися описаним властивістю, зміни вмісту перед і після потрібних елементів може бути дуже простим. Все що вам потрібно, це тільки поміняти один рядок в CSS, всі інші зміни браузер буде робити автоматично при завантаженні будь-яких сторінок з цими елементами.

Крім того, ви зможете наступного разу вирішити оформити всі номери телефонів за допомогою однакових ікон, це також можна буде зробити за пару хвилин, помінявши стилі в CSS.

Використання атрибутів

Разом з наперед заданими значеннями ми можемо використовувати у властивості content і атрибути елементів. Наприклад, у нас є посилання:

Илон Маск рекомендует:  Своя рассылка писем на PHP с использованием imap функций

Мы можем вывести перед ней её заголовок при помощи такого кода:

Ви можете використовувати будь-які атрибути елементів за допомогою конструкції attr(ім’я-атрибута) . Також можна користуватись data-* атрибутами, які не впливатимуть на іншу поведінку елемента (на відміну від того ж title , наприклад):

В CSS в такому випадку буде такий код:

Приклад: підказка на CSS

На CSS можна зробити підказку з красивим оформленням без використання скриптів і додаткових коштів, тобто ніяк не змінюючи навіть HTML. Ось приклад такого рішення:

В результаті при наведенні на посилання під нею з’явиться такий блок:

Приклад: нумерація елементів на CSS

Елементи списків, параграфи і взагалі будь-які елементи можна автоматично нумерувати за допомогою CSS. Досягти такого результату ми можемо за допомогою пари рядків у файлі стилів:

Attr() в CSS

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


attr()
Поддержка браузерами: IE 8+, Chrome 2+, Opera 9+, Safari 3.1+, Firefox 1+, Android 2.1+
Версия CSS: CSS 2.1, CSS3
Примечание:

Синтаксис

CSS2.1

где attribute-name — имя атрибута элемента HTML.
Возвращаемое значение является строкой.
В спецификации CSS2.1 функция attr() может использоваться только со свойством content .

CSS3

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

The CSS attr() function got nothin’ on custom properties

Easily manage projects with monday.com

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn’t know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.

That’s certainly interesting. You could use it for (rather inaccessible) tooltips, for example:

But you can’t put HTML in the attribute value, so those tooltips are limited to a string value, and couldn’t have a title, link, or anything like that inside them.

Here’s a better use case. There is an old print stylesheet chestnut where you use attr() to add the URL’s to links, so you can actually see what a link is linking to:

That’s clever. But what else? Could you pass a color down?

That’s not invalid, but it isn’t useful.

The value from attr() is a string. Even though that string is in the same format as a hex code, it won’t be used as a hex code.

Nor can you pass a URL that can actually be used in something like background-image() . Nor you can pass a unit like 3 , 20px or 4rem or 0.8vw .

CSS’s attr() function is only strings, and strings are only really useful as content , and content (being unselectable and somewhat inaccessible) isn’t particularly useful anyway. You can’t select the text of psuedo content, for example, nor search for it, making it rather inacessible.

You know what can pass any sort of value and is equally easy to implement as attributes?

CSS custom properties!

You can pop them right into the style attribute of any element. Now those values are available to that element:

We’re passing a string to CSS above, but also a color and length values. Those values are immediately usable as-is:

Here’s that demo with some fiddly «logic» (would need to be improved a lot to be actually useful) to allow variations:

This really isn’t any more accessible, for the record. If I were implementing tooltips for real, I’d probably read the heck out of this.


What about some other «good» use cases for attr()?

One that comes up a lot is responsive data tables. Imagine a table with headers along a top row and rows of data below:

Rows of data like that might become problematic on small screens (too wide). So in a reponsive data table, we might hide that top row, and show labels on a per-cell basis instead.

Where does that label come from? We could do.

That’s a pretty good use case. If we use some kinda of accessible hiding method for that

, it might even pass a11y muster.

But this same exact thing is doable with CSS custom properties.

Eric Bidelman pointed me to a method of using psueudo content to show an input’s value.

That feels a smidge dangerous to me since I didn’t think pseudo content was supposed to work on replaced elements like an . It’s probably a job for output, and the JavaScript would be essentially the same. You could use pseudo content with the additional element, but there’s really no need for that.

Exploiting the fact that psuedo content can’t be copied is also clever. For example, GitHub does code block line numbering with data-line-number=»» and ::before < content: attr(data-line-number); >.

Илон Маск рекомендует:  Работа с ftp протоколом на visual basic

Nobody likes selecting line numbers when they are trying to copy code! Good use here (probably even more flexible than CSS counters), but again, something that CSS custom properties could handle as well.

You could argue this is better because if you did want to use CSS counters, you could use that first value to kick things off and not need it on every line.

Same deal with typographic trickery involving duplicating text in CSS for stylistic reasons. Check out this cool demo by Mandy Michael using attr() . I’m sure you can imagine how —heading: «Fracture»; could do the trick there.

The CSS3 Values spec (in Candidate Recommendation) has a way to make attr() useful

I’m not sure it matters much, as I’d argue CSS custom properties are a near total replacement for attr() , but the spec does specifically cover this, presumably as an attempt to make it more useful.

The idea is to set the type of value as you grab it in CSS.

But as far as I can tell, no browser supports this.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.


Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340374fcd534e40 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Про CSS

Свойство content

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

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content . Достаточно такой строки:

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

Возможные значения свойства:

normal , none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

— текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, различные варианты буллетов.

Правда, тут появляется проблема лишних запросов к серверу.

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через content: url() ;
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов, например websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64 .

Вот так будет выглядеть код для иконки Instagram:

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

Подобным же образом можно вставлять SVG.

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

— счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.

counter-reset задает имя счетчика. counter-increment увеличивает значение заданного счетчика. content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr( ) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

open-quote , close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

no-open-quote , no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL