CSS атрибут селектор + потомок дает ошибку в Webkit?
Рассмотрим этот CSS:
[data-color="red"] h1 {
background-color:red;
}
[data-color="blue"] h1 {
background-color:blue;
}
И этот HTML:
<div data-color="red">
<h1>red</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
Теперь взгляните на следующую демонстрацию приведенного выше кода в Webkit и любом другом браузере:
http://jsfiddle.net/aUCkn/
Что странно, если вы поместите каждый h1 в одну строку, то есть:
<div data-color="red"><h1>red</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
Он работает и в Webkit:
http://jsfiddle.net/aUCkn/1/
Кто-нибудь знает откуда это? Я что-то не так делаю или Webkit ведет себя глупо?
4 ответа
Первый jsFiddle не работает в моем Chrome 12.0.742.112 (стабильный).
Тем не менее, он работает в моем Chrome 14.0.803.0 dev-m.
Итак, они уже знают и исправили ошибку. Вам просто нужно дождаться исправления, чтобы приземлиться в стабильном канале.
Я постараюсь найти ссылку на отчет об ошибке, если она существует.
Попробуйте добавить [_] {}
на ваш CSS (не важно где).
В действительности это может быть любое правило селектора атрибута без предложения-потомка, которое потенциально будет соответствовать атрибутным элементам, выбранным исходными селекторами, то есть: [data-color] {}
а также div[data-color] {}
исправит остальные, но a[data-color] {}
не исправит это.
Я протестировал его на опубликованной скрипке (http://jsfiddle.net/aUCkn/), и он работает для Safari (5.1.2).
Мой коллега и я нашли его после игры с множеством случайных идей для обходных путей.
При использовании Chrome (Webkit) я также получаю эту проблему, хотя, похоже, она отлично работает в Firefox и IE9. С Webkit определенно возникает проблема, что лишние пробелы вызывают проблемы.
--- ОБНОВИТЬ ---
Эта проблема исправлена в Chrome начиная с версии ~18, она по-прежнему остается проблемой в других браузерах на основе WebKit.
Что касается решения этой проблемы, ответ Майкла Мортона, приведенный выше, является лучшим здесь - он более гибкий и эффективный, чем мой. Я проголосовал за ответ Майкла и предлагаю вам его использовать.
Вот CSS-хак, который решает проблему: http://jsfiddle.net/aUCkn/101/
Вам просто нужно поставить * +
перед селектором. Теперь, прежде чем вы все схватите свои вилы и факелы за использование звездного селектора, помните, что это все влево, так что это не должно влиять на производительность каким-либо значимым образом;)
PS - Я также могу подтвердить, что эта ошибка затрагивает ВСЕ версии ВСЕХ браузеров WebKit на ВСЕХ платформах и устройствах - кроме Chrome 14+. Что за ужасная ошибка, теперь большинству браузеров WebKit нужно отозвать утверждение, что они поддерживают даже древнюю спецификацию CSS2.1. Вау, LOL.