войные классы и IE6
Одними из самых приятных селекторов в CSS могли бы стать множественные классы. Стилизация в зависимости от цепочки классов, прописанных одному элементу могла бы быть очень заманчивой, однако, как всегда, всё портит IE6.
Собственно, сразу к делу. Вот пример применения нескольких классов. В нормальных браузерах первые две строчки будут иметь зелёный фон, тогда как IE6 — красный. Это возникает за счёт того, что:
-
При использовании цепочки классов, например
.class1.class2 {…}IE6 совершенно игнорирует все классы, кроме последнего в селекторе. Соответственно — это можно видеть в первом примере — IE6 не обращает внимания на несуществующий класс в селекторе. -
IE6 не просто не обращает внимания на эти классы, он их не добавляет к свойству каскада селектора: более весомый в теории селектор — в IE6 таким не является.
Таким образом, может создаться впечатление, что в IE6 селектор срабатывает как надо: например, имея .class1 {…} .class1.class2 {…} и проверяя меняется ли поведение блока при добавлении второго класса, — в IE6 второй селектор будет перекрывать первый только потому, что он идёт вторым.
Как вывод: нельзя пользоваться такими селекторами и, в случае необходимости, лучше создать дополнительную обёртку, в которой уже продублировать все классы изначального элемента, после чего в селекторе указывать классы через пробел. К сожалению, для тройных и четверных цепочек придётся создавать новые и новые обёртки, так что лучшим выходом будет отказ от использования соединения классов.
Однако, иногда полезно определять для всей страницы какой-то класс, на котором потом будет основываться дальшейшая вёрстка. Часто таким образом для BODY прописывают множество классов. Но если необходимо применять стили сообразно двум или трём классам, действующим одновременно, имеет смысл создать один-два обрамляющих дива для всей страницы и продублировать классы в них. Это немного увеличит размер HTML, но сократит CSS, кроме того, сделает работу с каскадными таблицами стилей удобнее.
Вы можете прокомментировать эту статью в Мастодоне.
Опубликовано с метками: #Practical #CSS #Bugs #Outdated