Xpoint
   [напомнить пароль]

Новый баг IE: неправильно работают комбинированные селекторы классов и ID

2004-09-30 18:02:12 [обр] YuppY [досье]

В следующем примере он игнорирует второе правило:

<style>
#test.off {
    background: pink;
}
#test.on {
    background: palegreen;
}
</style>
<html>
  <div id="test" class="off" onClick="className = (className == 'off') ? 'on' : 'off'">&nbsp;</div>
</html>

То есть div должен менять свой цвет по клику, но он не становится зеленым в ie.

спустя 38 минут [обр] Алексей Севрюков aka Plus [досье]
YuppY[досье] А разве не this.className?
спустя 18 минут [обр] YuppY [досье]
Скрипт тут рабочий (this можно опускать) - проблема в css.
спустя 11 минут [обр] Владимир Палант [досье]
Скрипт тут вообще ни при чём, достаточно с самого начала поставить class="on" - стиль проигнорируется.
спустя 19 минут [обр] YuppY [досье]
Владимир Палант[досье]
Да, но тогда не будет понятно зачем тут вообще нужен #test.off :)
спустя 15 часов [обр] YuppY [досье]

Все еще интересней. Так второе правило срабатывает:

<style>
#test.first {
    background: green;
}
#test.second {
    color: red;
}
</style>
<html>
  <div id="test" class="first second">
    Этот текст должен быть красного цвета и на зеленом фоне.
  </div>
</html>

А так уже нет:

<style>
#test.first {
    background: palegreen;
}
#test.second {
    color: red;
}
</style>
<html>
  <div id="test" class="second">
    Этот текст должен быть красного цвета.
  </div>
</html>
спустя 27 минут [обр] YuppY [досье]
Кстати, в версиях 5.0 и 5.5 все работает как надо. Баг в 6.0.
спустя 3 часа 42 минуты [обр] Сергей Круглов [досье]
Работает
<style>
#test.first {
    background: palegreen;
}
</style>
<style>
#test.second {
    color: red;
}
</style>
спустя 26 дней [обр] Дмитрий Котеров [досье]
Так это... если стили подключаются из внешнего файла, то такой способ, очевидно, не проходит.
спустя 15 часов [обр] YuppY [досье]
Дмитрий Котеров[досье]
Угу... Я так и не смог это побороть, использую классы в стиле test-first и test-second без id.
спустя 4 часа 36 минут [обр] Дмитрий Котеров [досье]
Если выяснится, что id действительно должен быть уникальным во всем документе, тогда вообще на нем можно поставить крест. Ну кому это надо, спрашивается? А если я захочу 2 блока одинаковых на странице сделать - что мне, все стили менять, что ли? Получается, множественные стили - реальный выход.
спустя 14 минут [обр] Алексей В. Иванов [досье]
Понятное дело, что Id-уникальный для документа, но в CSS его несколько раз использовать никто не запрещал. Если подразумевается, что блоков должно быть несколько с одини свойствами, то Id, тут, конечно, неприменим.
спустя 24 минуты [обр] YuppY [досье]

Дмитрий Котеров[досье]
id стоит прописывать только если уверены что элемент не будет повторятся на странице, иначе - класс. Но если у этого элемента будет несколько классов, то можно будет повстречаться с другим багом IE...

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

спустя 43 минуты [обр] Илья Лебедев aka WingedFox [досье]
YuppY[досье]
Обойти это можно сделав один стиль для id и один для класса.
<style>
#test {
    background: pink;
}
#test.on {
    background: palegreen;
}
</style>
<html>
  <div id="test" onClick="className = (className == '') ? 'on' : ''">&nbsp;</div>
</html>
спустя 3 часа 3 минуты [обр] Дмитрий Котеров [досье]
id стоит прописывать только если уверены что элемент не будет повторятся на странице
Но извините, какой же программист может быть в этом уверен? Это уже и не программист тогда получится, а ясновидящий.
спустя 16 минут [обр] Дмитрий Попов [досье]
Мдя... А какой должен быть программист, чтобы узнав о существовании свойства ID, не задуматься - а не должен ли он быть действительно уникальным?
Каждому инструменту - своё место
спустя 2 минуты [обр] Алексей В. Иванов [досье]
Во ViewSource данного форума видно, что стили применяются ко многим id, что, IMHO, очень даже неплохо. И не надо быть явновидящим, что будет один copyright, одно searchBar и т.п.
спустя 3 часа 51 минуту [обр] Дмитрий Котеров [досье]

Неправда это. И копирайтов может быть два (хотя это и правда редкость), а что касается searchbar-а - так и подавно: можно его привести еще и в конце длинной страницы, так иногда делают.

id можно применять, похоже, только к стилям с абсолютным позиционированием. Вот они-то точно дублироваться не могут. Если же позиционирование не абсолютное, то использование id, выходит, немасштабируемо.

спустя 7 часов [обр] Андрей Новиков [досье]
Дмитрий Котеров[досье], немасштабируемо мыслишь. :) Если у тебя два searchbar, то один будет id="topSearchBar", а второй id="bottomSearchBar" и оба они будут class="searchBar". Потому как, когда тебе захочется верхний сдвинуть вправо, а нижний влево, нихрена ты со своими классами не сделаешь.
Ну а про "программиста и ID" я в другой теме высказался :) (а Попов тут). При всем нашем с ним к тебе уважении...
спустя 3 часа 45 минут [обр] Сергей Круглов [досье]
class="top searchbar" Гыгы ;)
спустя 21 минуту [обр] YuppY [досье]

Сергей Круглов[досье]
IE применит правило

.searchbar.top { ... }

ко всем class="searchbar whatever". Ссылка на тест в одном из предыдущих постов (Новый баг IE: неправильно работают комбинированные селекторы классов и ID (269087)).

спустя 9 минут [обр] Сергей Круглов [досье]
ээ... так тут ID вообще нету...
спустя 29 минут [обр] YuppY [досье]

Я имел ввиду:

class="top searchbar"

Вот пример: http://dean.edwards.name/IE7/compatibility/multiple-classes-bug.html

Суть его в том, что в IE стиль .top.searchbar { ... } применяется к class="foo searchbar" (порядок классов в селекторе имеет значение).

спустя 2 часа 50 минут [обр] Александр Лукьянов [досье]

Неужели лень два правила вместо одного написать (уже в другой теме писал об этом)?

/* вместо */
.searchbar.top { ... }
/* пишем */
.searchbar{ ... }
.top { ... }

Често говоря, мне сложно представить случай, когда .searchbar — это что-то одно, .top — другое, а .searchbar.top — совсем третье и все должны отображаться совсем по разному. Тогда уж проще три разных класса ввести.

спустя 1 час 30 минут [обр] Дмитрий Котеров [досье]

Александр Лукьянов[досье]
Неконцептуально. Ибо не факт, что потом где-то .top не будет задействован в совершенно другом смысле, нежели тут - шаблонов много, стилей тоже. А вот .searchBar.top и .title.top - это гарантировано разные вещи (здесь .searchBar и .title выступают как бы в роли пространств имен в ОО-языках).

А иначе мне бы пришлось вводить searchBarTop и titleTop, что совсем-совсем не круто.

YuppY[досье]

<style>
.searchbar.top { background: yellow }
</style>
<body>
<p class="searchbar top">Эта раскрашивается<p>
<p class="searchbar bottom">Эта нет<p>
</body>

Все работает, как надо. В чем проблема?

Андрей Новиков[досье]

Если у тебя два searchbar, то один будет id="topSearchBar", а второй id="bottomSearchBar" и оба они будут class="searchBar"
<div class="searchBar top">Искать в "О форуме": <input type="text"/></div>
<div class="searchBar top">Искать в "PHP": <input type="text"/></div>
<div class="searchBar top">Искать в "Perl": <input type="text"/></div>

Опаньки?

Z остаюсь при своем мнении: гарантировано единственным элементом может быть только тот, что позиционируетая абсолютно. Если же position: absolute (а также, наверное, координат) у элемента не указано, то давать ему ID - немасштабируемое решение, которое, во-первых, разрушает единообразие верстки, а во-вторых, чревато проблемами при неконтролируемом развитии проекта.

спустя 13 минут [обр] YuppY [досье]
Все работает, как надо. В чем проблема?
Это я сначала неправильно написал, но позже исправился - если в вашем примере поменять селектор на .top.searchbar, то и вы этот баг увидите. IE из .foo.bar видит только .bar, это известная проблема.
спустя 35 секунд [обр] Дмитрий Котеров [досье]

YuppY[досье]
А, извините. Да, Вы правы, баг.

Ну, тогда получается, что ни множественные стили, ни ID на крактике использовать не так уж и удобно (баги лезут). Остается единственный вариант - вложенные div-ы, каждому из которых назначен всего один стиль. Неудобно-то как...

спустя 40 минут [обр] Илья Лебедев aka WingedFox [досье]

Дмитрий Котеров[досье]

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

Позвольте с Вами не согласиться. 8*)
В терминах CSS верстки нужно делить селекторы на используемые для позиционирования и оформительские(модификаторы).

Для описания шаблона страницы желательно использовать селекторы по ID для того, чтобы быть уверенным в корректности разметки.
Например

 <body>
  <div id="container">
   <div id="header">
    <div id="pagehead"></div>
   </div>
   <div id="content">
     <div id="pagebody"></div>
   </div>
  </div>
  <div id="footer">
   <div id="foot"></div>
  </div>
 </body>
</html>

Здесь требуется чтобы стили для позиционирования были уникальными, дабы не могло возникнуть несколько идентичных элементов.

При оформлении статьи желательно иметь возможность гибко применять оформительские стили к элементам разметки.

<p>Обычный текст</p>
<p class="tip">Заметка</p>
<p>Еще немного текста</p>
<p class="tip">Заметка</p>

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

<h3>Заголовок</h3>
<h3><em class="important">Важный заголовок</em></h3>
<h3><em class="more important>Ещё более важный</em></h3>

Так что я полностью согласен с Дмитрий Попов[досье] -

каждому инструменту - свое место

Дмитрий Котеров[досье]

Неудобно-то как...

Вполне удобно.

div.article {
    margin-left: 5px;
}
div.article .lyric {
    background-color: #EEEEEE;
}
div.article .teapot {
    background-image: url(/i/teapot.gif);
}

Так стили будут доступны только внутри контейнера <div class="article> ... </div> и их можно будет применять сразу по несколько штук.

спустя 8 часов [обр] Дмитрий Котеров [досье]

Да понятно. Просто не хочется писать

<div class="incut"><div class="lyric">
текст лирического отступления
</div></div>
...
<div class="incut"><div class="teapot">
ликбез
</div></div>

в то время, когда должно было бы работать просто <div class="incut lyric">...</div>. Я это имел в виду.

Насчет id-разметки header-content-footer я еще согласен (фактически, там как раз и имеет место абсолютное позиционирование - header всегда вверху, а footer всегда внизу). А вот насчет pagehead - уже нет: может потом понадобиться привести название страницы и вверху, и внизу страницы (например, если оно выводится в виде одной строки с width=100% и другим цветом). Так что граница весьма зыбкая.

спустя 10 часов [обр] Илья Лебедев aka WingedFox [досье]

Дмитрий Котеров[досье]
Никто не мешает определить подклассы и использовать их совместно.
Стиль, приведенный в предыдущем сообщении, можно использовать так:
Добавим

div.article .incut {
    color: black;
}

И теперь:

<div class="article">
  Текст
  <div class="incut lyric">Текст лирического отступления</div>
  Ещё текст
  <div class="incut teapot">Ликбез</div>
</div>

Честно говоря, от стилей вида .class.subclass я не вижу особой пользы, потому как это выглядит так:
Применять стиль .subclass только к элементам с описанием .class
В реальности такое врядли может понадобиться.
Сомневаюсь что найдется сайт, где будет такое количество уникальных классов, чтобы не хватило внятных названий и понадобились бы подобные ограничения.

А вот насчет pagehead - уже нет:

pagehead возможно не слишком удачное название - это шапка страницы.

Вложенные классы там нужны только для того, чтобы было легче получить кросс-браузерную разметку.
Вот стили для этого шаблона:

html, body {
        height: 100%;
        width: 100%;
}
body {
        background-color: #FFFFFF;
        height: 100%;
        margin: 0;
        padding: 0;
}
#container {
        height: 100%;
        margin-bottom: -58px;
        min-height: 100%;
        min-width: 770px;
        position: relative;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 100%;
}
html>body #container {
        height: auto;
}
#content {
        background:#FFFFFF url(/images/sh.gif) repeat-x;
        margin-bottom: -36px;
        position:relative;
}
html>body #content {
        margin-bottom: -36px;
}
#pagebody {
        padding:26px 22px 0 22px;
        position:relative;
        text-align:justify;
        width: 770px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 726px;
}
html>body #pagebody {
        width:726px;
}
#footer {
        clear: both;
        float: left;
        height: 36px;
        overflow: visible;
        padding-top: 12px;
        position: relative;
        width:100%;
}
#footer #foot {
        background:url(/images/cr.gif) right no-repeat;
        background-color: #F2F2F2;
        color: #797979;
        height: 36px;
        font-size: 9pt;
        margin: 0 22px;
}
#header {
        background:#2782FF;
        height:76px;
        position:relative;
        width:100%;
}
#pagehead {
        background:url(/images/bg.jpg) no-repeat;
        height:76px;
        overflow:hidden;
        position:relative;
        width:770px;
}

Шаблон и стили порезаны, чтобы занимали меньше места.

Идея такова - этот шаблон держит подвал внизу страницы или документа.
Фон шапки и подвала занимает 100% ширины страницы, но не меньше 726пикселей дабы не возникали артефакты в виде отсутствия фона при наличии на странице горизонтальной прокрутки.
При этом весь контент должен иметь отступ в 22 пиксела от краёв экрана.
Т.е. стили здесь применяются именно к уникальным контейнерам.

Наиболее кросс-браузерное решение было получено вышеприведенным способом.
Вложенные блоки используются для упрощения описания разметки.
Рабочий вариант - http://clickatest.co.uk

Powered by POEM™ Engine Copyright © 2002-2005