Css Content, Attr и Url в одном предложении - PullRequest
Новая
       32

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

19 голосов
/ 12 февраля 2012

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

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

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

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

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

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

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

Ответы [ 2 ]

17 голосов
/ 12 февраля 2012

Это не ошибка и не ошибка.В настоящее время поддерживается синтаксис (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 также не допускают этого.Возможно - если это обсуждалось - потому что большинство сценариев использования будет иметь мало общего с презентацией, а больше с реальным содержанием.

14 голосов
/ 22 февраля 2013

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

Здесь описано .

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

content: attr(id url);

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

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

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

...