Tablezzzzz
Главная цель — отделить структуру от представления.
<div class="NwsAttr">
<div class="NwsLeft">
<div class="NwsSubj">
Статья о файлах справки
</div>
</div>
<div class="NwsRight">
<div class="NwsDate">
23 апреля 2004
</div>
</div>
</div>Если человек пишет такое и считает, что добился поставленной цели… Вы уж извините, что я прилюдно наезжаю на малоопытных людей, просто пример достаточно показателен. Показателен в том смысле, что сейчас модно выбегать на улицы с лозунгом «Без таблиц!», кричать о разделении структуры и представления, но вот слова «как» и, самое главное, «зачем», некоторые кодеры оставляют дома.
Логика (структура) — это XML (XHTML, если угодно). Не надо там гадить. Чем каша из div/span, id/class лучше таблиц? Хотите отделить логику от представления? Отделяйте:
<ul id="navigation">
<li><a href="#" title="Title">Link</a></li>
<li><a href="#" title="Title">Link</a></li>
<li><a href="#" title="Title">Link</a></li>
</ul>Мало? Недостаточно предоставленных элементов, хочется картинок, hover, content? Вешайте span’ы, пишите htc, если это необходимо, но не плодите совсем уж лишних сущностей и не доводите до абсурда (уже из другого источника):
<a href="#" title="Title">
<div class="navcont">
<div class="navimg">
<img src="img.jpg" ... />
</div>
<div class="navtxt">
<div class="header">Header</div>
<div>Text</div>
</div>
<br clear="all"/>
</div>
</a>XHTML — это не div’ы.
С другой стороны, сейчас нет CSS. CSS 2? Калека. И не в браузерах вопрос. Эта версия ущербна сама по себе, достаточно посмотреть хотя бы на «CSS3 Generated and Replaced Content Module». Поэтому и не хватает сейчас просто «голых» структур вроде UL [id]; приходится доставать костыли. Однако, когда я вижу как издеваются над этим калекой,
<div class="part">
<div class="part_div">
<h3 class="part_head"><span class="part_span">Header</span> text</h3>
<div class="part_para">
<div class="img_in_part_para"><img class="part_para_imgblock" ... /></div>
<p class="text">Text</p>
</div>
<div class="part_para"><p class="text">Text</p></div>
</div>
</div>мне хочется спросить лишь об одном: «У некоторых людей думалка работает или где?»
Да, верстать таблицами — это плохо. Да, разделять структуру и представление — это хорошо. Но (на данный момент) не всегда удаётся достигнуть желаемого, а когда это возможно, нужно приложить максимум усилий для того, чтобы не променять шило на чёрт-знает-что.
Categories: CSS, dHtml | comments: (5)
Комментарии
1. Vanav 25th May 2004 - 16:55
«Напишу-ка я гадость…» (q) Mash, «Thinking Woman».
Первый пример не очень показателен. Возьмем код комментария (структура та же, «a» заменен на «anc»):
<div class="CmntNote" id="last">
<div class="CmntAttr">
<div class="CmntLeft">
<span class="CmntName">Someone</span>
(<anc href="mailto:someone@mail.ru">someone@mail.ru</anc>)
</div>
<div class="CmntRight">
<span class="CmntDate">сегодня, 12:48</span>
<span class="CmntCommands">
<anc href="?cor=1" onclick="return openwin('?cor=1')">[Править]</anc>
<anc href="?delete=1">[Удалить]</anc>
</span>
</div>
</div>
<p>Sample comment</p>
</div>
О косности CSS и HTML здесь напоминает только .CmntLeft и .CmntRight. Остальное вполне может сойти за XHTML. Зачем? Для гибкости — ведь это просто структура. А вот представление (сокращено):
.CmntNote { margin: 2em 0 }
.CmntAttr { padding: 0 2em; border-bottom: 1px #ddd dashed }
.CmntName { font-weight: bold }
.CmntDate { font-size: 90% }
.CmntCommands { font-size: 80% }
.CmntLeft { float: left }
.CmntRight { text-align: right }
Это не полное отделение (нет классов для тела комментария и почты, частичная привязка к представлению — имя автора сверху, сообщение снизу), но вполне достаточное. Хотите больше? XML + XSL решают большинство проблем.
Да, селекторы CSS 2 (о поддержке селекторов), несколько сократили бы HTML код, но он не стал бы понятнее.
CSS 3 делает еще один шаг к отделению структуры от представления (наконец-то можно будет поменять местами имя автора и тело сообщения при помощи одного только CSS), но, боюсь, что в скором будущем он не будет реализован (а многое реализовать просто невозможно — посмотрите на CSS 2.1 и его Candidate Recommendation Exit Criteria).
Mash:
>> Первый пример не очень показателен.
Вполне показателен. Его автор имеет смутное представление о принципах наследования.
И такое — по всему коду красной нитью. Взять хотя бы приведённый вами пример: внутри div.CmntLeft находятся два элемента (span и a). Для чего понадобился класс «CmntName»?
Неужели div.CmntLeft span {font-weight:bold;} не работает?
>> Хотите больше? XML + XSL решают большинство проблем.
Хочу. На стороне клиента. Opera.
PS. Отключите CSS, а потом попробуйте объяснить мне, в каком месте я должен увидеть структуру (логику), которую вы пытаетесь от чего-то отделить.
2. Vanav 26th May 2004 - 00:49
>>Его автор имеет смутное представление о принципах наследования.
Возможно, он только учится и это его первая работа на HTML…
>> Неужели div.CmntLeft span {font-weight:bold;} не работает?
Согласен, здесь можно сократить, правда, потом вспоминать, что все-таки было в span, имя или адрес? В этом случае span будет играть чисто оформительскую роль.
>> Хочу. На стороне клиента. Opera.
Надо еще, чтобы Opera хотела. У них этого, часом, нет в Wish List?
>> Отключите CSS, а потом попробуйте объяснить мне, в каком месте я должен увидеть структуру (логику)
Когда мы отключаем CSS, используются встроенные стили для элементов HTML. Так, отбрасываем <table>, depricated… что остается?
<blockquote> с историческим отступом, <dl>/<dt>/<dd>, <ul>/<li>, <h1>, <sub>, <sup> и различные вариации на тему полужирного и курсива. Слишком мало для эффектного отображения структуры Note/Attr/Name/Date/Commands/…
А теперь посмотрите код 1-го комментария в любом XML-редакторе (или в том же IE). Там будет видна четкая структура:
> Note
>>> Attr
>>>>> Name /
>>>>> Mail /
>>>>> Date /
>>>>> Commands /
>>> /Attr
>>> Comment
>>> /Comment
> /Note
Для более простой структуры лучше, конечно, использовать <ul>/<li> с их предопределенными стилями, хотя и в случае с <div> документ вполне читаем. Если посмотреть с вашей точки зрения, то лучше сделать так:
<div class="comment">
<h6>
<strong>Name</strong>
<address>Mail<address>
<em>Date</em>
<small>Commands</small>
</h6>
<p>Comment 1</p>
</div>
Правда, потом (в CSS) выяснится, что <em> вовсе не курсивный и т.д. Что ж, тоже оригинально, и без CSS смотрится как «так и надо». А то все <div> и <span>…
Mash:
>> Возможно, он только учится и это его первая работа на HTML
Да, вполне возможно. Я снимаю шляпу и искренне радуюсь тому, что уже при создании первого сайта автор думает о структуре и представлении. Серьёзно.
>> В этом случае span будет играть чисто оформительскую роль.
Забавно. А div в этом случае какую роль играет? Вы действительно считаете, что присвоив div’у класс с более-менее осмысленным названием, мы можем говорить о разделении структуры и представления?
И зачем люди мучаются? Право, чудаки. Писали бы уж всё в дивах.
>> правда, потом вспоминать, что все-таки было в span
Лично у меня таких проблем нет. Семантика + комментарии в CSS + здоровая память.
>> Надо еще, чтобы Opera хотела.
Надо, и надо чтобы IE CSS2 хотел, и ещё много чего надо. Я уже написал о том, что некоторые вещи на данный момент, мягко говоря, плохо работают.
>> У них этого, часом, нет в Wish List?
Не знаю. my.opera.com/forums --> search.
>> А теперь посмотрите код 1-го комментария в любом XML-редакторе
У меня нет привычки просматривать web-страницы в XML-редакторах. Обычно я, как и многие другие, делаю это при помощи браузера.
>> хотя и в случае с <div> документ вполне читаем.
Помимо людей, документы читают роботы поисковых систем. Для них, например, заголовок всегда будет иметь больший вес и «смысл», нежели div.
>> Если посмотреть с вашей точки зрения, то лучше сделать так
Так действительно лучше. Люди продолжают спорить о том, как именно это должно выглядеть в каждом конкретном случае, но подход такой, да.
<ul>/<li> — это список. Это логика. Именно в этом и заключается причина того, почему следует отказываться от вёрстки таблицами. А что такое <div>? Какую смыловую нагрузку он несёт? Оформительский костыль.
Google: semantic + markup.
3. Mix 26th May 2004 - 09:24
А вот я хочу применить для навигационной панели не <ul>, а <menu>, ибо ИМХО это логичнее, но низнаю можно ли его в XHTML употреблять.
4. О.Б. 28th May 2004 - 01:05
DIV сам по себе последний элемент в структурной вёрстке. Заплатка, которую можно (не нужно) употреблять тогда, когда ни один другой элемент не подошёл.
То же и со SPAN'ом.
5. Vanav 28th May 2004 - 03:28
2 Mash:
Спасибо за напоминание о SimpleQuiz, я к ним в этом году еще не заглядывал.
<div> практически не несет семантическую нагрузку, да и вообще XHTML — не семантический язык. Единственное, что описывает <div> — это иерархию (структуру). Если необходима некая дополнительная семантическая окраска (а она желательна), то используют <ul>, <ol>, <dl> и т. п. Я считал, что в этом случае одной иерархии достаточно, ведь речь шла не о списке, но это вопрос спорный — у кого и вся страница один большой список с разделами-элементами.
Кстати, иерархию тоже можно представить в виде вложенных списков.
>> Помимо людей, документы читают роботы поисковых систем.
В данном случае имя и дата — не самое важное, если бы была тема сообщения, то ей прямая дорога в <hN>.
2 Mix:
<dir> и <menu> использовать не стоит, они были устаревшими еще в HTML 4.01. Изначально они должны были представлять текст в несколько колонок, но были официально отменены в пользу <ul>.
Входят в HTML 4.01 и XHTML 1.0 Transitional DTD (нет в Strict), не входят в XHTML 1.1.
Mash:
>> да и вообще XHTML — не семантический язык
Ладно, остановимся на том, что у нас разные взгляды на XHTML.
>> В данном случае имя и дата — не самое важное, если бы была тема сообщения, то ей прямая дорога в <hN>.
Про поисковые системы было сказано не в рамках какого-то конкретного случая.