CSS: 256 классов имеют больший приоритет, чем id

    Сегодня в зарубежных блогах появилась занятная новость о необычном поведении браузеров: на днях Chris Coyier, автор сайта css-tricks.com показал, как классу можно дать больший приоритет, чем id. Нужно всего лишь применить к объекту 256 классов!

    Почему это работает?


    В Firefox и Chrome исходный код, отображающий классы, хранится в 8-битных строках, соответственно 256 элементов выходят за пределы. В Опере 16-битные строки, поэтому потребуется 65536 классов.

    Точно так же можно 256 вложенных div'ов имеют больший приоритет, чем класс.
    Поделиться публикацией

    Похожие публикации

    Комментарии 47

      +41
      Мсье знает толк в извращениях.
      –8
      Причём у меня это работает только если эти 256 классов заданы одним блоком:
      .c000 /*...*/ .c255 {
        background: red;
      }
      


      Если хотя бы один класс из блока — уже не работает:
      .c000 /*...*/ .c254 {
        background: red;
      }
      
      .c255 {
        background: red;
      }
      


      Браузер: 21-й Хром
      • НЛО прилетело и опубликовало эту надпись здесь
          +1
          это вполне ожидаемое поведение
            +1
            В первом случае описывается класс c255, вложенный в множество других классов именно в определенной очередности, а во втором вы задали цвет любому элементу с классом с255, даже не вложенному в эти классы.
              0
              Спасибо за разъясненение. Я написал глупость :)

              Хотя всё равно остаётся вопрос: получается что к div-у вообще ни один из классов не применим, так как они определены в контекстном селекторе. Почему тогда это работает? Или в этом и кроется «магия»?
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  А это влияет? Разве тогда они не запятыми должны быть разделены?
                    +1
                    Понял, опять написал глупость :)
              0
              Это предназначалось комментатору на уровень выше.
            +21
            Значит, действительно, прав тот, у кого большинство голосов…
              0
              «Специально привезенные на программисты дописывали css..»
              –9
              … но нах@ра?
                –2
                нет, правда, приведите хоть один реальны пример использования
                  +4
                  Речь ведь не об использовании, а просто о том, что было сделано любопытное наблюдение…
                    +5
                    Возможны баги в автогенерированных CSS-ках. Возможно, именно так и нашли.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        я так полагаю, рассматривается случай, когда !important уже использован?
                        • НЛО прилетело и опубликовало эту надпись здесь
                    +8
                    Я видел эту новость на ycombinator.com
                    Полез в стандарт и нашел, что необязательно надо 256 различных классов. Можно использовать один и тот же.

                    .c000.c000.c000.c000.c000.c000... {
                       background: red;
                    }
                    
                      +4
                      кстати в IE9 тоже работает
                      +6
                      Действительно, это уже нормальный Fx+Webkit+ie хак:
                      <style>
                      #id {
                        background: blue;
                      }
                      .c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c {
                        background: red;
                      }
                      div {
                        height: 100px;
                        width: 100px
                      }</style>
                      ​<div id="id" class="c"><div>​
                      
                      И это работает.
                      Пример: codepen.io/anon/pen/yAbci
                        +25
                        Да это же CSS-хак для определения Оперы!
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +2
                            А что, раньше их не было что ли? Вот «Опера» 9.50+:
                            x:-o-prefocus, .opera {
                              background: red;
                            }
                            
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +4
                            CSS3:
                            9. Calculating a selector's specificity

                            Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.
                            • НЛО прилетело и опубликовало эту надпись здесь
                          +4
                          поезно
                            +1
                            полезно :)
                              +5
                              Уже в предвкушении новых адских конструкций…
                                +19
                                ВЕРСТКА ОПАСНОСТЕ!!!!!!111
                              +4
                              Напомнило прикол про лимит в 128 вложенных if. Программист жаловался, что компилятор игнорировал дальнейшие условия и пришлось использовать switch :)
                                0
                                А что за ЯП такой? И программист случайно не china-style?
                                0
                                Ба! Вот тебе и specificity :)
                                  –2
                                  кто-то пробовал c Оперой? У меня квадрат все время синий, может где-то ошибся.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +3
                                      ну так я и сделал 65536 классов для теста оперы, а квадрат все равно синий
                                        0
                                        Пересчитайте, может не хватает парочки? :)
                                    0
                                    А разве специфичность селекторов не рассчитывается в binary согласно www.w3.org/TR/CSS2/cascade.html#specificity?
                                    Один.класс == 0001
                                    Один #id == 0100

                                    256 классов == 0100
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Я когда читал спеку и книгу Мейера, увидев там 0001, 0010, 0100 и т.д — был уверен что расчёт идет в binary, ну это же настолько логично, что предполагается сразу! Тем более что подобные расчёты веса используются во многих других случаях и областях.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое