Моя предыдущая статья «Чего я ждал от 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;
}


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>

Форма, у которой лейблы выровнены с формами по направляющей

$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>

Трехколоночный макет можно сделать вот так:

$rule1 { margin-bottom; 100%; rule-repeat: repeat; }
#wrapper { rule: $rule1; }
#wrapper > div { snap-to: top($rule1) bottom($rule1) }

Заключение

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

Жду вашей критики, замечаний, дополнений.