Хочу свой тэг!
24 июня 2009
То, что в документе возможно использовать любые свои тэги — штука известная, но, думаю, найдутся люди, которые о ней не знают.
Например, хочется нам разметить свою страничку вот так (я ни в коем случае не утверждаю, что стоит так делать):
<blog> <header>Это блог с занятной разметкой</header> <article> <header>Web Optimizer 0.5 «cheetah», RC3</header> <text>Вышел RC3 хорошей автоматической системы клиентской оптимизации. Неполный, но всё-равно довольно внушительный список изменений можно посмотреть на Хабре. В последней версии заявлена поддержка phpBB и Yii, что меня лично не может не радовать.</text> </article> </blog>
Разметили… получили кучу невнятного текста. Применим CSS:
blog, article, header, text { display: block; } blog { border: 1px solid #ccc; background: #eee; padding: 10px; margin: 10px; } article { border: 1px solid #ccc; background: #fff; padding: 10px; margin: 10px; } header { font-size: 200%; } text { line-height: 160%; }
Уже лучше. В браузерах, отличных от IE всё хорошо. Для IE добавим немного JS:
// Для IE: document.createElement('BLOG'); document.createElement('ARTICLE'); document.createElement('HEADER'); document.createElement('TEXT');
Естественно, лучше этот JS обрамить в Conditional Comment…
Комментарии RSS по email OK
Akella nedavno voplotil etu ideu v zhizn' na svoem bloge...
http://cssing.org.ua/2009/06/16/html5-wordpress/
Кстати очень удобно. Мы в одном проекте для внутреннего пользования так и сделали, что то типа:
Вот только интересно стало, как к этому отнесутся поисковые системы.
это уже xhtml, а для html правильнее использовать див с классом, а то всякие хаки имеют свойства отваливаться в зависимости от версий браузеров.
поисковикам пофигу див там или кастомный тэг...
свои теги в неймспейсе хтмл лучше не вводить. исключение - wbr, noindex и тп, которые по другому никак.
остальные лучше выносить в отдельный неймспейс.
подробнее тут
В данном контексте контейнеры содержат лишь информацию о их контенте, и никакой об их форматировании. С одной стороны это логично, т. к. соответствует концепции отделения разметки от её представления. С другой стороны у них должно быть что-то общее: так например все контейнеры верхнего уровня являются структурными блоками, и
<div>
в данном случае абсолютно уместен, как с точки зрения семантики, так и для связанного манипулирования всеми блоками верхнего уровня в css (body > div
).Я считаю что контейнеры собственного сочинения должны использоваться в тех случаях, когда им нет аналога в словаре языка разметки. Так например, меню и галереи верстаются списками, но различия в их форматировании бывают значительны, и было бы логичнее использовать различные теги, а не тривиальный
<ol>
с отключёнными маркерами.P. S. Ещё больше в xhtml 1.0 не хватает таких возможностей, как src и alt у любых элементов.
@Sam
У меня следующий вопрос по кастомным тегам: с каких-то древних времен у меня в голове отложилось, что в них нельзя вкладывать ничего нативно блочного (типа div, p, etc.). Сейчас проверил в Firebug-е (в FF3.0 и 3.6pre-a), в примере из статьи — всё отлично вкладывается. Вот и хочу уточнить -- это ограничение тихо убрали вообще в новых браузерах, или оно справедливо лишь для динамики (JS-овых операций с DOM), или я вообще всё напутал? И где бы про это прочитать? ;)
@Dr.Holerik
А зачем для любого эл-та src и alt? Для image replacement'а, что ли?
В принципе, функциональности src можно добиться через CSS (content:url(...)), правда, для элементов (а не псевдоэлементов) оно работает, AFAIK, только в Опере. Но зачем альтернативный текст для элемента уже с текстом?
В MSDN сказано, что по-хорошему надо использовать namespace. Если и есть бага — только для JS DOM и только в IE.
Кажется, разобрался. Действительно, вплоть до FF2 была такая проблема (нашел упоминание здесь), но в FF3 ее пофиксили ради будущей совместимости с HTML5 (https://bugzilla.mozilla.org/show_bug.cgi?id=311366).