Css Content, Attr и Url в том же предложении

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

Итак, я попробовал:

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

где attr(id) должен возвращать идентификатор изображения (буквенно-цифровой), который также является именем изображения.

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

Когда я просто использую только attr(id), без ссылки на url, он работает отлично. Он также работает, когда я заменяю attr(id) на реальное имя изображения.

После поиска в Интернете я не нашел ничего подходящего, так что я здесь. Это известная ошибка или просто моя ошибка?:)

Ответ 1

Это ни ошибка, ни ошибка. Поддерживаемый в настоящее время синтаксис (CSS2.1) для содержимого:

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

то есть:.

Литерал normal, none или inherit
Или любое количество этих последовательно:
- строка - "hello"
- a (константа) URI - url("image.jpg")
- счетчик - counter(section)
- атрибут - attr(id)
- open-quote, close-quote, no-open-quote, no-close-quote

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

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

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

Ответ 2

В соответствии с Рекомендацией кандидата W3C от 28 августа 2012 года существует синтаксис для указания типа, возвращаемого attr().

Здесь описывается .

Короче говоря, следующее будет работать:

content: attr(id url);

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

Во всяком случае, это все еще нигде не реализуется.

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