CSS 4: что новенького?

    Необходимо немедленно оговориться, что опубликованный 29-ого сентября документ носит название «Селекторы уровня 4» (Selectors Level 4). Является ли это черновой спецификацией CSS 4? Понять пока что трудно, хотя некоторые уже успели обозвать документ таким именем.

    Сразу же может возникнуть вопрос: а что, разве CSS 3 закончен, зачем так «гнать»? Напомним, что процесс утверждения новых спецификаций изменился со времен CSS 2.1: вместо единого стандарта третья версия представляет из себя набор документов, называемых модулями. Каждый развивается независимо от второй версии с сохранением обратной совместимости, а затем утверждается в качестве рекомендации. Обычно модули не опираются друг на друга, хотя у некоторых есть зависимости, например, у модулей селекторов и пространства имен.

    Таким образом работа над четвертой версией стандарта может идти параллельно с развитием третьей версии.

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



    Спецификация селекторов уровня 4 уже имеет значительное количество отличий от уровня 3. Поскольку это лишь первый набросок, конечный результат, носящий статус рекомендации для реализации в браузерах, скорее всего будет значительно отличаться.

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

    Псевдоэлементы



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

    Псевдоклассы



    Были добавлены псевдоклассы состояния пользовательского интерфейса из модуля «CSS 3: базовый пользовательский интерфейс». Их значения описывают состояния элементов графического интерфейса: флажок или его отсутствие у чекбокса, обязательность ввода или же нет, :read-write и :read-only — детали, необходимые для конфигурации форм ввода в HTML5. Видимо, было решено собрать в одном модуле всё по селекторам кроме псевдоэлементов.

    Изменения в существующих селекторах



    В CSS 3 псевдокласс отрицания :not может применяться только к простым селекторам: псевдоклассам, тегам, идентификаторам, классам и селекторам параметров. Псевдоэлементы и комбинации такие как ul li или ul>li не поддерживались, а псевдокласс отрицания нельзя было вложить :not(:not(...)) в самого себя.

    Перечисленные ограничения куда слабее в CSS 4: псевдокласс отрицания теперь можно применять к списку селекторов, к сложным селекторам. Псевдоэлементы и вложенные отрицания всё еще запрещены.

    Новые псевдоклассы


    Есть несколько новых элементов, созданных на основе пожеланий веб-мастеров и наработок создателей браузеров.

    Псевдокласс совпадения :matches()


    :matches() очень похож на мозилловский псевдокласс :moz-any(). Его применение оправдано при необходимости выбрать большое число похожих селекторов. К примеру, вместо li a:link, li a:hover, li a:visited, li a:focus достаточно будет указать li a:matches(:link, :hover, :visited). Комплексные селекторы, вложения и использование :not запрещены.

    Псевдокласс направленности :dir


    Названный псевдокласс позволяет выбрать элемент на основе направления текста. Перечислены значения rtl (справа налево; это арабский язык и иврит) и ltr (слева направо). Другие значения не недействительны, но и их действия не заданы, что в будущем позволит добавлять новые значения (наверное, это будут сверху вниз и снизу вверх).

    Новые псевдоклассы гиперссылок


    Псевдокласс :any-link() указывает на ссылки вне зависимости от их посещенности. Единожды посещенная ссылка (псевдокласс :link) более непосещенной не считается, поэтому и понадобился ввод подобного элемента, могущего пригодиться при необходимости задания единого стиля обоих состояний. Элемент имеет пометку о возможности выбора лучшего имени.

    Псевдокласс локальной ссылки


    :local-link указывает на локальные ссылки. При использовании просто :local-link без выражения в круглых скобках он укажет на элемент, который указывает на текущую страницу, то есть на точно соответствующий УРЛ документа без якоря фрагмента. Число в скобках укажет на число совпадающих элементов в УРЛ, например, у документа по ссылке www.example.com/foo/bar/baz a:local-link(0) укажет на ссылки на тот же домен www.example.com, a:local-link(1) — на домен и первый сегмент в УРЛ www.example.com/foo, a:local-link(2) — на домен и два первых сегмента в УРЛ www.example.com/foo/bar.

    Временн́ые псевдоклассы


    Появились три псевдокласса, зависящих от времени: :past, :current и :future, связанные с зависящим от времени воспроизведением или полосой времени, то есть со средствами речевого воспроизведения HTML-документов. Соответственно, :current укажет на обрабатываемый элемент, что дает возможность выделить воспроизводимый сейчас фрагмент, :past укажет на элементы, уже обработанные в прошлом, а :future выделит элементы, которые будут обработаны в будущем. У :current есть версия, которая принимает значения в скобках.

    Новые псевдоклассы деревьев элементов


    В документе описаны два новых подобных псевдокласса: :nth-match и :nth-last-match, входные значения которых совпадают с :nth-child и :nth-last-child: те же выражения an+b, а также ключевые слова или строка селектора, которая позволяет выбрать подмножество результатов. Из спецификации понять задумку не так легко, как на примере. Предположим, что существует селектор button:nth-match(even of .active). Он в отличие от button:nth-child(even) сначала определит подмножество элементов с классом active, а уже потом отделит четные элементы.

    Псевдоклассы структуры таблицы


    Это :column(), :nth-column() и :nth-last-column. В HTML клетки перечисляются подряд и разделяются тэгом tr, а отношение клетки к колонке подразумевается порядком перечисления. Поэтому, чтобы задать стиль клетки на основе принадлежности её к колонке, вводится псевдокласс :column, который может применяться к одному или нескольким селекторам. Следующий пример из черновика задаст желтый цвет клеток C, E и D:

    :column(col.selected) { background: yellow; }
    
    <table>
      <col span="2">
      <col class="selected">
      <tr><td>A <td>B <td>C
      <tr><td span="2">D <td>E
      <tr><td>F <td span="2">G
    </table>


    Черновые :nth-column() и :nth-last-column принимают аргументы так же, как уже существующие :nth-child или :nth-last-child, а то есть числовые значения, выражения вида an+b, значения even и odd. К примеру, :nth-column(odd) выберет все ячейки, принадлежащие нечетным колонкам.

    Селектор предка или объектный селектор



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

    Свойства CSS всегда применялись к последнему элементу в списке: ul li.selected укажет на элементы в списке, обладающие классом selected. Но нет никакой возможности задать стиль целого списка, основываясь на свойствах вложенных в него элементов.

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

    Предположим, возникла необходимость задать стиль списка, в котором есть элемент с классом selected. Объектный селектор легко позволит сделать это:

    $ul li.selected {
    background: white;
    }


    Таков текущий черновик документа «Селекторы уровня 4», состояние которого может и будет претерпевать значительные изменения, а понять весь смысл отдельных фрагментов пока ещё затруднительно.

    Подготовлено на основе публикаций Девида Стори, члена рабочей группы W3C, и Скотта Гилбертсона, автора для сайта Webmonkey.com.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 39

      +2
      Интересно, есть продвижения, но до уровня compass/sass всё равно как до марса на скейте.
        +1
        Зато вижу шаг вперёд к уровню селекторов jQuery: объектный селектор аналогичен псевдоклассу :has() из jQuery.
          0
          Как же надоели новости с привкусом jQuery во всех областях веб-разработки.
            +1
            А мне вот, кажется, что они заигрываются и декларативный язык стилей CSS медленно но верно пытается стать еще одним скриптовым языком программирования, а это опять повышает энтропию. Продлив этот вектор, можно уже предположить ошибки интерпретации/компиляции CSS…

            Я совершенно серьезно. Когда я начинаю видеть в CSS математические выражения, логические операнды, я начинаю понимать, что это избыточность технологий и фрактализация велосипедов.

            Если на секунду задуматься, что CSS, по сути расширение HTML, с целью разделения статической части оформления от более динамического (сменяемого на каждой странице) + профит от «шкурок».

            Но когда мы видим в CSS логические выражения и операнды (типа :not), то с таким же успехом можно спросить, а почему им не быть в чистом HTML? Уверен там тоже найдется 100500 способов применения.
            На что мне ответят, что гибких вещей мы достигаем просто генерируя html, любым клиентским или серверным методом: от XSLT, JS до любых CGI-скрптов на стороне сервера. Ок, а чем этот подход отличается для CSS?
            Да ничем.

            Может стоит остановиться на мгновение и задуматься над тем, что хватит плодить энтропию в стандартах?

            Я предлагаю, собрать в кучу все что было наработано за эти годы: html5,css3,js,xslt, websockets, и т.п… и объеденить это в одном стандарте.

            Очевидно же, что лучший вектор для браузеров, это стать больше похожим на X-Server — только появится еще адресная строка и вкладки. А что? Оно к этому и идет. Быстро, асинхронно, кучу вещей рендерится на клиенте.
            Дак зачем так долго идти к тому, что в итоге этим и станет?

              0
              Я бы даже сказал, что Google Chrome это и делает.
              Хром даже уже обогняет по «толстости» клиента, потому что уже научился исполнять внешний бинарный код
              в своем защищенном окружении.
              0
              Тут Мицголу идея! :) Может, тебе гипертекстовый векторный фидонет проапгрейдить до вида X-серверов/клиентов? Ведь все уже фактически готово, надо только выбросить API X-сервера или оконной системы в виде JS/HTML прокладки для разработчиков, чтобы они могли на скриптовых/декларативных языках сайты делать.

              И да, назвать это Web 3.0 (!) Чур, я первый придумал термин «Web 3.0» и что он означает :')
                0
                  0
                  :) Эх опоздал… ну тогда пусть будет имплементация Web 3.1 следующего характера.

                  Сегодня я изобрел Web 3.0 :)
                  Вот суть:
                  1. Берем за основу идею X-Window.
                  2. Добавляем адресную строку, и вкладки.
                  3. Для сложного API XServer'a делаем прокладку
                  из JS/HTML чтобы веб-разработчики легко писали «сайты web3.0».
                  4. Профит!

                  Имеем:
                  .Более высокую скорость передачи данныз, за счет более легковесного бинарного трафика между XServer/Client
                  .Асинхронность — вебсокеты на борту по сути.
                  .Платформонезависимость (реализации XServer сейчас есть везде и на винде тоже)
                  . 2D, 3D, видео — полный фарш, (звук вроде в процессе)
                  . Это не Flash :)
                  .Переносимость интерфейсов через абстракцию оконных менеджеров — ваш «сайт 3.0» будет приятно отображаться и на Android и на Gnome и на KDE и под Windows. Что-то будет наследовано, что-то переопредеолено — это уже на воле разработчика.

                    0
                    P.S.: Обрамить «Сегодня я изобрел» тегом irony
              +8
              Что-то вы путаете мух с котлетами. Покажите, как средствами одного лишь SASS/Compass дотсигнуть результата хотя бы одного из нововведений, перечисленных в статье?

              Без дополнительных плюшек в HTML-коде или скриптов все равно не обойдетесь. А потому CSS и развивается, чтобы самые популярные плюшки были зафиксированы ввиде простого языка и не отнимали ценное время у разработчика.

              А SASS — просто макроязык, упрощающий написание и чтение кода, который не может абсолютного ничего из того, чего не может сам CSS.
                –1
                Вполне естественно, что Compass и SASS по большому счёту не могут ничего из того, чего не может CSS, ведь они по большому счёту удобные макросы и обёртки, ведь в итоге всё это транслируется в понимаемый браузером CSS, с этим никто не спорит.

                Речь о том, что тот сахар, который ими добавляется, на данный момент несёт не меньше пользы, чем изменения, описанные в данной статье.
                  0
                  Как вообще можно сравнивать эти вещи
                    +1
                    Эти вещи занимаются одним и тем же — упрощают написание стилей. Одни — прокладка к рулю, и их поддержку будут обеспечивать браузеры, а вторые — работают на того, кто у руля, упрощая ему жизнь. Так и сравниваем.
                +2
                Сомнительно, что хоть когда-либо, будут предприняты попытки добавить в CSS наследование правил, математику чисел и цвета, миксины и пр. Это весьма существенные изменения, на которые, ИМХО, w3 никогда не «даст добро» :)
                  +2
                  Ну математика чисел имеет место быть в виде calc() — www.w3.org/TR/css3-values/#calc.
                    0
                    Круто, что сказать. Я правильно понял — там можно писать так?
                    border-width: 0 2px;
                    width: calc(100% - 4px);
                    Такого нельзя достигнуть при помощи SASS, разве что LESS «на лету».
                      +1
                      Совершенно точно и, что радует, это уже доступно в некоторых браузерах ( caniuse.com/#search=calc ), включая IE9.
                    0
                    А как насчет этих новшеств? :)
                      +1
                      Интересно, весьма интересно. Странновато как-то, в SASS всё таки получше синтаксис (например, зачем @this), но и с этим было бы весьма вкусно. Полагаю, что шанс того, что за этим подтянется Opera && FF достаточно велик (если затея взлетит, конечно), а вот насчёт IE — серьёзные сомнения :)
                  +2
                  Было бы здорово, если бы добавили вложенные селекторы. Единожды попробовав уже трудно отказаться от, например, Less.
                    0
                    ИМХО, главное в LESS — это mixins. Вот от этого — сложно отказаться, они собственно и помогают обеспечить современный фитиш под названием «семантическая верстка».
                    А вложенные селекторы — это так… Экономия на символах.
                      +2
                      Для меня вложенные селекторы — это не только экономия на символах, но и визуально более простой код, который пишется в несколько раз быстрее.
                    +11
                    > Сразу же может возникнуть вопрос: а что, разве CSS 3 закончен, зачем так «гнать»?

                    Теоретически такой вопрос конечно может возникнуть, но практически каждый день терзает другой: «Какого $%#@я все так медленно развивается?».
                      +1
                      Так то оно так, но статистика не то что бы утешительная: далеко не все пользователи пользуются браузерами с поддержкой css 3, а тут черновики 4й версии… Получается люди отстают от прогресса :)
                        +2
                        Я могу ошибаться, но кажется, обновляемость браузеров за последние годы все-таки ускорилась, то есть цикл жизни конкретной версии браузера заметно уменьшился. Это не может не радовать. Так что остается надежда, что по прошествии нескольких лет (не 15-20, как смеялись раньшь, обсуждая HTML5 и CSS3) пользователи будут приучены к постоянным обновлениям, либо обновления будут устанавливаться полностью автоматически, как это делается, например, в Chrome.
                          0
                          IE конечно же не относится к этим браузерам.
                            +1
                            В том числе увеличивается частота выхода новых версий IE, и люди с включенным автообновлением в Windows 7+ потихоньку-помаленьку все-таки будут поспевать за прогрессом.
                              0
                              Эх, мечты, мечты…
                        +1
                        а меня такой: «Какого $%#@я все так медленно рендерится?»
                        в результате чего вместо теней и прозрачности приходится применять border-image c альфаканалом
                        0
                        Если IE7 еще жив, то далеко нам еще до CSS4
                          –3
                          Ах же. Не успели в одном напортачить лезем в болото дальше…
                            +8
                            Когда я стану дедом, то буду рассказывать внукам как верстал под IE, на голом CSS. А внуки мои будут думать, что старче совсем из ума выжил, на старости то лет.
                              –2
                              Что-то пока список новшеств по сравнению с css3 не радует…
                                0
                                > Селектор предка или объектный селектор
                                Мега фича наравне с calc. Как же мне её не хватало.
                                  0
                                  Первое, что бросается в глаза — спецификация не содержит псевдоэлементов. По всей видимости в будущем они будут описаны в других модулях.


                                  Уже описаны в одном из черновиков CSS3:
                                  www.w3.org/TR/css3-content/
                                    +1
                                    Вот не пойму зачем делать из CSS язык программирования? Что в этом хорошего? Сделали бы лучше человеческое вертикальное выравнивание для любых элементов, а не только строчных, и высоту 100% без указания высоты родителю.
                                      0
                                      Я бы хотел псевдокласс :current для ссылок. То есть, если href в ссылке равен текущему адресу страницы, то можно было бы применить стили к ссылке. Полезно для всякого рода менюшечек.
                                        +1
                                        Посмотрите выше: то, что вы предлагаете, уже добавлено в черновик под именем :local-link.
                                          0
                                          Точно, спасибо. Как я это не заметил — не понимаю.

                                      Only users with full accounts can post comments. Log in, please.