Недавно я рассуждал, почему миксины и скины могут изменить способ написания html в ближайшем будущем. Эта статья — вторая и последняя часть в небольшом мини-серии о том, как css может улучшить наши html-шаблоны. Вместо того, чтобы смотреть на радость, которую могут принести препроцессоры css, на этот раз мы углубимся в реальную спецификацию css3. Наша цель? Свойство порядковой группы, принадлежащее (все еще экспериментальной) спецификации flex-box. Это маленькое чудо, которое в конечном итоге станет ценным активом в нашем поиске многократно используемого HTML.
flex-box и порядковая группа
Вместо того, чтобы объяснять весь модуль flex-box, я просто сделаю ссылку на довольно обширный обзор Smashing Magazine . Он расскажет вам все, что вам нужно знать о flex-box и ordinal-group. Краткая версия выглядит следующим образом: ordinal-group позволяет визуально переупорядочить структурные элементы, которые находятся на одном уровне домена и сгруппированы под тем же (непосредственным) родителем. По сути, мы можем использовать css для визуальной перестановки дочерних узлов, не касаясь их. Чтобы увидеть это в действии, Джордан Мур сделал очень хорошую порядковой-группу демо (изменения размера на мобильное разрешение) .
Я хотел бы сделать одну дополнительную заметку, прежде чем продолжить. Пример порядковой группы в статье SM не совсем представительный. Хотя вы действительно можете использовать это свойство для перетаскивания прикрепленных записей в начало списка, не только вы столкнетесь с проблемами при представлении страниц, но и с этим решением есть более фундаментальные проблемы. Липкие посты на самом деле принадлежат началу списка, потому что люди должны их сначала прочитать. То же самое относится и к людям, использующим вспомогательные технологии, поэтому структурно они принадлежат спереди, использование порядковой группы только для отображения не приведет к ее снижению, и на самом деле это плохая практика.
Хотя все еще существуют очевидные ограничения на использование порядковой группы (она не работает с dom-узлами, расположенными в разных частях html), она исправляет очень распространенный недостаток требований к дизайну / css, который преследовал html в течение многих лет. Все это связано с порядком исходного кода по сравнению с порядком отображения, поэтому давайте выясним, что может сделать для нас порядковая группа.
Потому что это выглядит лучше с изображением над заголовком …
Вы знаете, как некоторые дизайны требуют, чтобы вы поместили элемент над заголовком, который там не принадлежит, говоря структурно? Изображение товара в сетке товара или дата / автор публикации в новостной статье. Дизайнеры любят брать такие элементы и размещать их над заголовком типа контента. Честно говоря, мне, как html-парню, все равно, я просто ставлю заголовок первым и передаю трудные биты парню css (привет, отступы и позиция: абсолютный), но есть ситуации, когда даже это невозможно.
/* html */
<article class="product">:
<header>
<h1> ... </h1>
<div class="image"><img src="..." alt="..." /></div>
</header>
</article>
/* css */
.product header {display:box; box-orient:horizontal;}
.product header h1 {box-ordinal-group:2; box-flex:1;}
.product header .image {box-ordinal-group:1; box-flex:1;}
Несмотря на то, что это немного многословно, приведенный выше код позволяет нам сохранять логическую структуру html, в то время как CSS уверяет нас, что контейнер изображения будет отображаться над заголовком. Реальная заставка, поскольку переменное содержимое часто нарушает трюк padding / pos: abs. С этим методом, имеющимся в нашем распоряжении, подобные проблемы, наконец, уйдут в прошлое (по крайней мере, когда это позволит поддержка браузера) Действительно огромная помощь, если вы хотите написать непротиворечивый и многократно используемый HTML-код.
Один негативный аспект порядковой группы состоит в том, что она работает только на dom-узлах, которые находятся на одном уровне. Это может побудить людей отказаться от структурных контейнеров в пользу большей гибкости CSS. В конце концов, чем больше элементов находится на одном и том же уровне, тем больше вы можете играть с визуальным порядком. Хотя это и понятно, на самом деле это ловушка, которая может серьезно ухудшить качество html и не должна быть положительно рекламирована или одобрена.
К сожалению, нет поддержки float для элементов flexbox
Еще одно повторяющееся требование к дизайну заключается в размещении блока контента справа от встроенного текущего контента. Чтобы использовать очень простой пример: просто подумайте о float: right image в начале текстового раздела. Ситуация усложняется, когда текстовый раздел нуждается в заголовке слева от плавающего блока. Единственный способ сделать это — поместить изображение первым в источнике (перед заголовком), а заголовок и содержимое вокруг него — вторым. Другое типичное требование в такой ситуации состоит в том, что, когда плавающий блок отсутствует, содержимое перезапускается, чтобы заполнить пробел, оставленный плавающим блоком. (Для более глубокого взгляда на эту проблему, проверьте мою статью о головной боли макета контента .)
Это отстой, потому что вы действительно не хотите помещать изображение перед заголовком. Это имеет смысл с точки зрения CSS, но для человека, который заботится о логической структуре, он близок к совершению смертного греха. Порядковая группа могла бы обеспечить решение здесь, к сожалению, float и порядковая группа не слишком хорошо смешиваются. Всякий раз, когда плавание установлено, свойство display элемента возвращается к блокированию, и вся магия исчезает.
Вывод
Существует определенная возможность использования порядковой группы, если она используется разумно и целенаправленно. Как всегда, есть много места для злоупотреблений и неправильного толкования. Ordinal-group — это свойство, которое позволяет нам поддерживать согласованную структуру html, в то время как представление элементов может отличаться способами, которые были возможны только при изменении фактического порядка исходного кода. Убедитесь, что вы всегда начинаете с правильной и логичной HTML-структуры, а затем переключаетесь на порядковую группу для изменения визуального отображения.