xCSS: придумываем свою спецификацию CSS. Часть 1

    image
    Моя предыдущая статья «Чего я ждал от HTML5 и CSS3» затронула достаточно щекотливую тему, но не ответила на вполне резонный вопрос, а что я предлагаю взамен. Поэтому мне в голову пришла идея сделать общественную спецификацию CSS, которая будет отражать современные тенденции развития web-технологий и требования к будущему функционалу. Я приглашаю всех поучаствовать в разработке нашей собственной версии спецификации. Если популярность ее будет достаточно высокой, ее могут принять все разработчики браузеров, а от этого выиграют и web-разработчики, и пользователи.

    Первый механизм, который я представляю вашему вниманию называется «направляющие»

    Направляющие


    Цель данного механизма — упростить управление позиционированием элементов относительно друг друга. Табличное представление данных не позволяет создавать потоковые структуры, когда неизвестно количество элементов в строке, и элементы нужно переносить на следующую строку при изменении ширины контейнера. Строчные блоки (inline-block) не позволяют формировать автоматически подстраиваемые по высоте или ширине блоки. Именно эти проблемы и будет решать механизм направляющих.

    Определение направляющих


    Направляющие являются блочными элементами нулевой высоты или ширины, в зависимости от типа: горизонтальные или вертикальные. Нельзя управлять ни шириной, ни высотой направляющих, они занимают всегда 100% от ширины или высоты элемента. Направляющие могут иметь margin, padding, border, background, что позволит создавать определенные стилистические приемы.

    Описание направляющих


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

    $rule1 { /* rule preferences */ }
    $rule2 { ... }


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

    rule-type

    Существуют два типа направляющих: горизонтальные (horizontal) и вертикальные (vertical). По умолчанию направляющие имеют тип horizontal
    Значения свойства: horizontal || vertical
    Значение по умолчанию: horizontal


    rule-repeat

    Это свойство управляет повторением направляющих. По умолчанию для направляющих отключен механизм повторения.

    Значения свойства: none || repeat
    Значение по умолчанию: none

    Механизм повторения необходим для того, чтобы автоматически формировать несколько направляющих с одинаковыми свойствами и идентификацией. Свойство repeat применяется только тогда, когда для горизонтального типа направляющих указан margin-top или margin-bottom или padding-top или padding-bottom, а для вертикальных направляющих, соответственно margin-left или margin-right или padding-left или padding-right.

    Количество горизонтальных направляющих рассчитывается по формуле
    kh = containerHeight / ( ruleMarginTop + rulePaddingTop + rulePaddingBottom + ruleMarginBottom)

    Количество вертикальных направляющих рассчитывается по формуле
    kv = containerWidth / ( ruleMarginLeft + rulePaddingLeft + rulePaddingRight + ruleMarginRight)

    Пример использования
    $myRule {
    rule-type: vertical;
    rule-repeat: repeat;
    margin-right: 10px;
    margin-left: 20px;
    padding-right: 50px;
    }

    image

    rule

    Для использования направляющих в некотором блоке используется директива rule

    Значения свойства: $ruleID[ $ruleID]
    Значение по умолчанию: none

    Можно использовать одну или две переменные с направляющими разного типа. При использовании двух одинаковых типов направляющих данная директива не применяется.

    Использование направляющих


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

    snap-to

    Значения свойства: [top($ruleID)] [bottom($ruleID)] [left($ruleID)] [right($ruleID)] || [top] [bottom] [left] [right] || none
    Значение по умолчанию: none

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

    Прилипание к краю аналогично поведению элемента с position: relative.

    Я специально опущу более детальное поведение, так как это займет не одну страницу текста, и перейду к примерам

    Примеры использования

    Типичная задача — галлерея. Я знаю, что можно использовать inline-block, но добавив еще одну горизонтальную направляющую можно сделать аналог таблицы, что не получится сделать обычными средствами.
    $rule1 { margin-top: 200px; rule-repeat: repeat; }
    #gallery { rule: $rule1; }
    #gallery div { snap-to: bottom }

    <div id=«gallery»>
    <div/><div/><div/><div/><div/>…
    </div>

    image

    Форма, у которой лейблы выровнены с формами по направляющей
    $rule1 { margin-left; 150px; rule-type: vertical; }
    #form { rule: $rule1; }
    #form label { snap-to: right }
    #form span { snap-to: left }

    <div id=«form»>
    <div><label>Label1</label><span><input /></span></div>
    <div><label>Label2</label><span><input /></span></div>
    <div><label>Label3</label><span><input /><input /><input /></span></div>
    </div>

    image

    Трехколоночный макет можно сделать вот так:
    $rule1 { margin-bottom; 100%; rule-repeat: repeat; }
    #wrapper { rule: $rule1; }
    #wrapper > div { snap-to: top($rule1) bottom($rule1) }


    Заключение


    У направляющих есть множество «белых пятен» в поведении, которые нужно исследовать, моделировать и изучать. Особенно это касается взаимоотношений прилипших элементов и обычного потока, прилипших и плавающих элементов, как должны себя вести элементы, если они прилипают к левому и нижнему краю сетки направляющих и так далее. Однако одно очевидно, что данный механизм не сильно изменяет уже действующие правила CSS2.1, а только дополняет их. Реализация направляющих, по моему мнению, гораздо более проста для разработчиков браузеров, чем реализация тех же темплейтов отображения в CSS3, а возможностей и динамики в моем способе больше.

    Жду вашей критики, замечаний, дополнений.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +12
      Предлагаю создать блог «web-antistandards» и продолжать выдумывать велосипеды там.
      • НЛО прилетело и опубликовало эту надпись здесь
          –1
          Да, визуально похоже. Но как закрасить одну колонку грида нужным цветом? Как сделать выравнивание элементов, как в примере с формой?
          +6
          Вам, я так понимаю, в соседнюю палату с автором HTML 6.8.3. Санитары!
            –7
            А что вы полезного сделали за свою жизнь?
              +2
              Не мешал разработке стандартов своими сомнительными идеями, например.
                +1
                И в итоге мы получили нечто, что малоприменимо в реальной жизни. Не мешайте дальше.
                  +3
                  Это — вам. И потом не говорите, что не знали:

                  CSS3: будущее механизмов раскладки
                  web-standards.ru/events/wsd-spb-2010/#layout
                  webstandardsdays.ru/2010/06/26/pres/layout/
                    –2
                    И что это должно мне дать?
                      +2
                      Понимание того, что ваши наработки — это велосипед.
                        –2
                        Есть разные велосипеды. Одни с квадратными колесами, вторые с заостренной палкой вместо седла, третьи с тремя асинхронными педалями. Так вот мне не хочется ездить на этих велосипедах, мне нужен удобный и простой инструмент.
                +5
                Где-то я уже видел этот симптом… А, вот он:
                lurkmore.ru/Сперва_Добейся
                  –2
                  Задача этого топика была в том, чтобы понять, есть ли люди, которым интересно творить что-то свое, а не использовать чужое. Жаль, что не многие это понимают.
              0
              при всем уважении, два недеделаных стандарта все же хуже, чем один
                0
                Один можно доделать. Это в наших силах. И тогда один доделанный стандарт будет лучше чем один недоделанный. :)
                0
                Безотносительно к моему мнению о статье: расписанная система очень напоминает систему якорей в QML. Это достаточно интересная система позиционирования, которая, быть может, придёт на смену сложившейся системе CSS.
                  0
                  Занятно. Я пока не вижу ответ на один вопрос, а что будет, если будет поток элементов, и их придется выравнивать не только по левому краю, а и по верху при переносе на следующую строку.
                  0
                  опять заминусовали годную статью, придурки =_="

                  примеры не убедительны. визуальный ритм — это конечно хорошо, но механизм направляющих тут слабо подходит. всё это реализуется через inline-block и display:table гораздо проще. добавить к этому константы и будет совсем шоколадно. формулы — офигенно. инварианты — вообще супер.
                  касательно формул и констант, у меня есть статья, если интересно: habrahabr.ru/blogs/css/92878/
                    0
                    Знаю, что примеры не убедительны.

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

                    Чем больше я развиваю логику направляющих, тем сильнее они мне начинают нравиться.

                    Рад, что у меня есть хоть один собеседник.
                      0
                      почему не имеет смысла?
                        0
                        Потому что эта тема мало кому интересна.
                          0
                          а сколько не хватает заинтересованных лиц?
                            0
                            Хотя бы еще парочку :)
                              0
                              ща виртуалов наделаю…

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

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