Pull to refresh

Разметка независимыми элементами

Reading time 3 min
Views 3.4K
Развивая идею вёрстки независимыми блоками мы постепенно придём к вёрстке независимыми модулями, а пока остановимся подробней на сабже…

Но сперва небольшое терминологическое отступление.

Вёрстка страницы — процесс расположения элементов на странице в соответствии с дизайном.

Вёрстка бывает:
  • Табличная. Страница представляет из себя одну большую таблицу с мелкими ячейками. Каждый элемент занимает несколько смежных ячеек образующих прямоугольную, не пересекающуюся с остальными, область.
  • Блочная. Страница делится на крупные блоки, те на более мелкие, и так далее до нужной степени детализации.
  • Слоёная. Элементы позиционируются абсолютно, независимо от расположения остальных элементов.
Разметка текста — обогащение текста специальными машиночитаемыми условными обозначениями.

Разметка бывает:
  • Визуальная. Рекомендации по визуальному представлению информации.
  • Функциональная. Правила взаимодействия элемента с пользователем.
  • Семантическая. Декларация значения элемента в контексте приложения.
Семантика — смысловое значение языковой конструкции, набор скрывающихся за ней свойств.

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

Какова семантика, например, элементов пользовательского профиля? С точки зрения приложения, это: имя, фамилия, возраст и тд. С точки же зрения html — это просто абстрактные блоки текста. А что такое таблица в контексте приложения? Ничто! Это не более чем форма представления данных.

Если мы хотим представить наши данные в виде списка — мы используем ul или dl, а если в виде таблицы — table. При этом смысл самих данных не меняется — меняется лишь их проекция на html. Употребляя те или иные тэги из html для разметки данных приложения мы фактически указываем не то, что «профиль пользователя является списком определений», а то, что «профиль пользователя можно показывать также как и список определений». Именно поэтому одним и тем же dl по спецификации html4 размечаются как собственно списки определений, так и, казалось бы не имеющие никакого к ним отношения, диалоги.

Так что первым делом введём несколько дополнительных пространств имён:

<html<br>    xmlns="http://www.w3.org/1999/xhtml"<br>    xmlns:v="http://example.org/mark-up/visual"<br>    xmlns:c="http://example.org/mark-up/control"<br>    xmlns:s="http://example.org/mark-up/semantic"<br>    >

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

<a href="?topic:css-packaging"><br>    <h1><br>        <s:topic-title>Организация пакетов с помощью css-suki</s:topic-title><br>    </h1><br></a>

Тут «s:topic-title» обозначает семантику, «a» — поведение, а «h1» — визуальную роль. Или, говоря простым языком, тут мы выводим название топика, оформляя его как заголовок первого уровня и наделяя функциональностью ссылки. Как правило подходит очерёдность вложенности функционал-визуализация-семантика, но могут быть и исключения.

На функциональные html-элементы (a, button, form..) лучше не вешать дополнительной визуализации, дабы не плодить себе проблемы из-за смешивания функциональной и визуальной разметок в одном тэге. Лучше непосредственно в функциональные элементы вкладывать визуальные — это даёт большую гибкость разработке.

В селекторах двоеточие надо экранировать. Вот так:

s\:user {<br>    font-weight: bold;<br>    font-style: italic;<br>    text-decoration: underline;<br>    }

Бонусом от использования собственных тэгов является возможность дополнительно задавать модификаторы классами:

c\:popup-root.opened\=true c\:popup-pane {<br>    display: block;<br>    }

Это будет работать даже в ИЕ6, в отличие от задания пересечения классов ".b-popup.s-opened" (! между ними нет пробела). В качестве className удобно использовать формат hiqus c пробелом и знаком равенства в качестве разделителей, как в примере разметки гитарных аккордов.
Tags:
Hubs:
-4
Comments 34
Comments Comments 34

Articles