Развивая идею вёрстки независимыми блоками мы постепенно придём к вёрстке независимыми модулями, а пока остановимся подробней на сабже…
Но сперва небольшое терминологическое отступление.
Вёрстка страницы — процесс расположения элементов на странице в соответствии с дизайном.
Вёрстка бывает:
Разметка бывает:
В зависимости от целей разметки, могут использоваться различные термины подчёркивающие различные наборы свойств. Так, например, в контексте техники колесо представляет из себя диск с шиной; в контексте физики — упругое тело предназначенное для уменьшения силы трения; в контексте геометрии — соприкасающиеся цилиндр и тор.
Какова семантика, например, элементов пользовательского профиля? С точки зрения приложения, это: имя, фамилия, возраст и тд. С точки же зрения html — это просто абстрактные блоки текста. А что такое таблица в контексте приложения? Ничто! Это не более чем форма представления данных.
Если мы хотим представить наши данные в виде списка — мы используем ul или dl, а если в виде таблицы — table. При этом смысл самих данных не меняется — меняется лишь их проекция на html. Употребляя те или иные тэги из html для разметки данных приложения мы фактически указываем не то, что «профиль пользователя является списком определений», а то, что «профиль пользователя можно показывать также как и список определений». Именно поэтому одним и тем же dl по спецификации html4 размечаются как собственно списки определений, так и, казалось бы не имеющие никакого к ним отношения, диалоги.
Так что первым делом введём несколько дополнительных пространств имён:
Одно служит для чисто визуальных целей, другое — чисто функциональных, а третее — для вывода структуры данных. На семантические элементы могут накладываться стили и функциональность, но только в случае, когда нужна унификация на всём проекте. Например, когда требуется создать устойчивую связь между именем пользователя и красной первой буквой, как на ярушке. В то же время, зачастую семантика никак не связана с визуализацией и должна быть вынесена в отдельный элемент. Показательный пример:
Тут «s:topic-title» обозначает семантику, «a» — поведение, а «h1» — визуальную роль. Или, говоря простым языком, тут мы выводим название топика, оформляя его как заголовок первого уровня и наделяя функциональностью ссылки. Как правило подходит очерёдность вложенности функционал-визуализация-семантика, но могут быть и исключения.
На функциональные html-элементы (a, button, form..) лучше не вешать дополнительной визуализации, дабы не плодить себе проблемы из-за смешивания функциональной и визуальной разметок в одном тэге. Лучше непосредственно в функциональные элементы вкладывать визуальные — это даёт большую гибкость разработке.
В селекторах двоеточие надо экранировать. Вот так:
Бонусом от использования собственных тэгов является возможность дополнительно задавать модификаторы классами:
Это будет работать даже в ИЕ6, в отличие от задания пересечения классов ".b-popup.s-opened" (! между ними нет пробела). В качестве className удобно использовать формат hiqus c пробелом и знаком равенства в качестве разделителей, как в примере разметки гитарных аккордов.
Но сперва небольшое терминологическое отступление.
Вёрстка страницы — процесс расположения элементов на странице в соответствии с дизайном.
Вёрстка бывает:
- Табличная. Страница представляет из себя одну большую таблицу с мелкими ячейками. Каждый элемент занимает несколько смежных ячеек образующих прямоугольную, не пересекающуюся с остальными, область.
- Блочная. Страница делится на крупные блоки, те на более мелкие, и так далее до нужной степени детализации.
- Слоёная. Элементы позиционируются абсолютно, независимо от расположения остальных элементов.
Разметка бывает:
- Визуальная. Рекомендации по визуальному представлению информации.
- Функциональная. Правила взаимодействия элемента с пользователем.
- Семантическая. Декларация значения элемента в контексте приложения.
В зависимости от целей разметки, могут использоваться различные термины подчёркивающие различные наборы свойств. Так, например, в контексте техники колесо представляет из себя диск с шиной; в контексте физики — упругое тело предназначенное для уменьшения силы трения; в контексте геометрии — соприкасающиеся цилиндр и тор.
Какова семантика, например, элементов пользовательского профиля? С точки зрения приложения, это: имя, фамилия, возраст и тд. С точки же зрения 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 пробелом и знаком равенства в качестве разделителей, как в примере разметки гитарных аккордов.