Веб-анатомия по воскресеньям с Артемием Ломовым № 23
Эпистолярный жанр
Участь подавляющего большинства посланий, отправляемых по электронной почте, прямо скажем, незавидна. Это, как правило, нечто такое сиюминутное: получили, прочитали и забыли. А то и удалили навсегда. (Думаю, не очень-то много наберется на белом свете педантов вроде меня, старательно коллекционирующего всю электронную переписку с 98-го года. Так, на всякий случай. Для архива.)
Меж тем, избранные сообщения достойны-таки сохранения. И даже обнародования. Не зря ведь сохраняют для потомков личную переписку классиков — в любом более-менее репрезентативном собрании сочинений какого бы то ни было писателя можно найти фрагменты его писем и дневников, а некоторые издательства выпускают даже специальные серии книг, посвященные переписке и только ей одной.
Я, конечно, нисколько не претендую на лавры классиков. Но откладываю, тем не менее, в особую папочку некоторые свои эпистолярные творения, которые при удобном случае вполне могли бы составить основу каких бы то ни было статей, заметок или, возьмем шире, книг воспоминаний. (А почему бы и нет, собственно? На пенсии, если доживу, ведь надо будет чем-то заниматься?..)
На минувшей неделе у меня состоялся один такой весьма показательный почтовый диалог с… ну, в общем, с одним человеком, имя коего я называть пока не буду (до тех пор, пока не получу на то его собственного согласия). Человек этот имеет за плечами богатый опыт создания разного рода веб-проектов и сейчас преподает в одном широко известном учебном центре.
Разговор наш начался с отзыва на мою колонку «Свобода выбора или выбор свободы?» И это, однозначно, подарок судьбы. Если б этого диалога не было на самом деле, его обязательно нужно было бы придумать.
Позвольте мне привести избранные фрагменты (с небольшой правкой исключительно литературного свойства), в которых причудливым узором переплетаются и сугубо профессиональные споры, и разноцветные грани жизни.
* * *
Автор отзыва. Вы пишете: «Технология CSS2 сегодня уже обкатана достаточно хорошо — распространенные ныне браузеры не чинят ей особых преград. Конечно, некоторые трудности с совместимостью остаются, но преодоление их — сущая безделица по сравнению с тем почти сказочным колдовством, которое требовалось для обеспечения более-менее константного внешнего вида сколько-либо сложной веб-страницы в IE и Netscape третьих и четвертых версий всего лишь пяток лет тому назад. Уж поверьте.»
Так вот, во-первых, на третьи и четвертые версии мне наплевать, уж поверьте и Вы тоже. А во-вторых, я не поверю, потому как реальных примеров не видел ни разу. Все примеры только показывают трудности «нового» подхода. Причем трудности имеются не с «совместимостью», а с самой версткой. Когда нужно сделать действительно табличный дизайн страницы, то ничего проще, чем использование обычных таблиц, вы все равно не придумаете — количество информации, нужное для описания дизайна, все равно постоянно. А где Вы его будете задавать — в разметке или в стилях, в значительной степени все равно. Более того, мне удобнее, когда эта информация в разметке, а не в стиле. Кстати, стили также ни фига не более гибкие (несмотря на кучу обратных высказываний), потому что CSS не позволяет менять структуру документа. Если вот этот блок в разметке вложен вон в том — он там и останется, как ни меняй стили.
Артемий Ломов. Во-первых, я говорил про то, что было 5 лет назад — полагаю, тогда вам было не наплевать. Во-вторых, плевать или не плевать — ваше право. Мне же хочется, чтобы мои сайты можно было просмотреть в любом браузере — даже в первых версиях, пусть и без оформления.
Далее, реальных примеров чего именно вы не видели ни разу? CSS-верстки? В той колонке, которую Вы цитируете, кажется, были ссылки…
А «действительно табличный дизайн страницы» — просто великолепно сказано. Поймите же, что «действительно табличного дизайна» у страницы быть не может, ибо таблица — структура логической организации информации. Представлять в виде огромной ячейки таблицы контент, не имеющий табличной структуры — логический абсурд. Мне очень жаль, что многие кодеры до сих пор, подобно Вам, плюют на логику и жертвуют внутренней структурой документа во имя его внешнего вида.
И уж конечно, Вы совершенно зря утверждаете, что в значительной мере все равно, где задается описание дизайна — в разметке или в стилях. С точки зрения принципа разделения содержания и представления — отнюдь не все равно. А то, что Вам удобнее определять эту информацию в разметке, говорит только о том, что привычка — вторая натура. Впрочем, я уже повторяюсь…
Наконец, я совершенно ничего не понял про гибкость. Объясните мне, зачем CSS должен позволять менять структуру документа? Логическая структура задается HTML-разметкой. CSS же отвечает лишь только за визуальное представление уже готовой структуры… На этом зиждется самая сущность CSS и концепции разделения контента и представления.
Автор отзыва. Действительно, плевать или не плевать — это мое мнение. Но я не одинок в нем.
Что касается приведенных Вами примеров CSS-верстки, то это бессмысленные ссылки. Все тоже самое делается таблицами ничуть не сложнее. Разница чисто вкусовая. Трудности и проблемы — и там, и тут. Разве что разные. Гибкость оформления все равно ограничена структурой разметки, которую поменять стилями нельзя. Я ни разу не видел реальных преимуществ от рассматриваемого подхода.
О «табличном дизайне». Да как хотите назовите, но если страница выглядит, как таблица и ведет себя, как таблица (например, при изменении размеров экрана) — ее можно и нужно верстать как таблицу. Если нужно сделать что-то типа colspan/rowspan — то хоть тресни, а никакое ухищрение не сделает верстку принципиально проще, чем можно сделать таблицами. Везде будет тоже самое, только в профиль.
Так что страница тоже может быть организована как таблица. То, что это визуальная организация — для меня лично мало что меняет. Кто сказал, что контент (например мой) не имеет табличной структуры? Для меня критерий тут — простота изготовления сайтов и их сопровождения. А на абсурды — плевать еще раз.
Когда разметка легко читается, и когда, глядя на HTML, я вижу, что тут будет таблица — это упрощает сопровождение такого кода. А когда надо еще глядеть в стили, и когда в коде одни ничего не значащие <div>’ы — наоборот, только усложняет. А при наших, например, объемах JSP (Java Server Pages? — А. Л.) — это уже очень важно, чтобы код читал любой разработчик. Ради чего нужен принцип разделения? Я так понимаю, именно для того, чтобы допустить раздельное изменение того и другого. Так вот, не получается из этого ни фига! Все примеры, что я видел — только игрушки.
И дело здесь не в привычке. Это работа в команде.
Кроме того, с каких это пор разметка в виде <table><thead><tr><th>… нарушает «принцип разделения содержания и представления»? Не применяейте атрибуты типа width да align — и будет вам полное разделение.
И вообще-то я уже давно не кодер. Я уж, скорее, преподаватель в этой области…
Артемий Ломов. Что Вы не одиноки — это точно. Более того, вас таких порядка 90%. ;-)
И мои скромные усилия направлены на то, чтобы хоть чуточку исправить сию вопиющую несправедливость, показать реальные преимущества верстки при помощи блочной модели CSS перед версткой с использованием отживающих свой век технологий…
Бессмысленные ссылки? Ну, не скажите. Как бы Вы сверстали без помощи CSS вот этот сайт: www.creativepro.ru? В частности, как бы Вы реализовали пунктирные линии? Сделали бы кучу пустых ячеек с фоновыми GIF’ами, имитирующими пунктиры? Ну-ну. А меню навигации с «перекатывающимися» кнопками как бы сделали? При помощи JavaScript? Понимаю-понимаю, мне тоже в свое время приходилось заниматься примерно тем же самым (см. www.belaya-dacha.ru — тенями справа я вообще гордился, особенно по той причине, что они правильно показывались в IE4, NN4 и Opera 5). Но сколько будет весить Ваш код? И какова будет его логическая стройность?..
Вот еще партия ссылок, если угодно. Особливо на западные сайты, фигурирующие в том обзоре, рекомендую поглядеть. Быть может, эта подборка не покажется Вам столь уж бессмысленной?
Про трудности и проблемы… Ну, чтобы совсем без проблем — такого в жизни не бывает. Это, наверное, только в раю. Хотя не пробовал, врать не буду.
Но все трудности CSS-верстки, как мне кажется, упираются сейчас в основном в IE5 — все новые браузеры работают с блочной моделью… не сказать, что бы великолепно, но довольно приемлемо. А IE5 все-таки отомрет когда-нибудь. Сейчас его доля — менее 20%, хотя совсем недавно приближалась к половине. Время все лечит.
И скажите мне, наконец, ради всего сущего, зачем все-таки менять разметку стилями? Как ни бьюсь, не могу я понять высокий смысл этих Ваших идей. Стили — они на то и созданы, чтобы разграничить логическую разметку и оформление, отделить мух от котлет…
О преимуществах CSS-верстки, которых Вы не видите в упор (уж простите). Вот, скажем, два HTML-файла: каждый из них реализует прямоугольную область, залитую синим цветом, с двойной рамкой. Первый сверстан «классическим» табличным способом, второй — при помощи CSS. При этом первый весит в два раза больше, чем второй. Это при том, что в первом нет элемента <!DOCTYPE>, а во втором — есть. Значимые части этих примеров отличаются вообще в три с лишним раза. Конечно, это специально придуманный частный случай, но и в общем случае разница будет заметной — не столь разительной, быть может, но заметной явно!
Малый объем кода уже не считается за преимущество?
А логическая стройность кода — это уже тоже не преимущество?! Попробуйте в первом примере сходу найти, где начинается контент, не пользуясь контекстным поиском… Это не Вы, часом, ратовали за простоту поддержки?
Очевидность «табличного дизайна» — это стереотип, сложившийся за годы верстки таблицами. Конечно, если 10 лет верстать сайты таблицами — Вам они где угодно будут мерещиться. Мебель в комнате тоже будете расставлять, задумываясь о colspan и rowspan. Но страница веб-сайта — это НЕ таблица, а набор прямоугольных функциональных областей, так или иначе спозиционированных друг относительно друга. Спросите у верстальщиков бумажных изданий: полоса газеты или журнала — это таблица?
CSS2 тем и хорош, что позволяет представить контент просто в виде прямоугольных областей, так или иначе разбросанных по пространству страницы. Не заставляя нас думать ни о каких суррогатных моделях вроде таблиц и прочей нечисти, к которым мы долгое время прибегали «на безрыбье».
Покажите мне, какой контент Вы имеете в виду. Таблица — это вот что:
Длина волны, нм |
Спектральный цвет |
380…450 |
фиолетовый |
450…480 |
синий |
480…510 |
голубой |
510…570 |
зеленый |
570…590 |
желтый |
590…620 |
оранжевый |
620…760 |
красный |
А когда у Вас полсотни абзацев текста с картинками запихнуто в одну большую табличную ячейку — это, извините, НЕ таблица.
И, я не ослышался? Вы серьезно настаиваете на том, что куча вложенных тегов <table><tr><td> проще одного <div>’а?..
Кстати, <div>’ы сии отнюдь не «ничего не значащие» — ведь вы ж пишете: <div id="header">, <div id="menu"> и т. д. Как мне кажется, здесь как раз все гораздо прозрачнее и понятнее, нежели в <td> десятого уровня вложенности…
Что до логических абсурдов, то плевать на них лично Вы можете сколько угодно, но вот, скажем, поисковым системам на них не плевать. Они, видите ли, лучше переваривают чистый код с минимальным количеством тегов и уж тем более безо всяких там пустых табличных ячеек с кучей бессодержательных неразрывных пробелов или графических распорок. Или у Вас столь уникальный контент, что ничего подобного нигде днем с огнем не сыщешь?..
О работе в команде. Сдается мне, вопрос верстки шаблонов страниц во всей группе разработчиков по-настоящему должен волновать только непосредственного исполнителя этой самой верстки. Пресловутого кодера, то бишь. Если этот вопрос сильно заботит всех остальных участников команды, значит, команда сия вряд ли работает эффективно, и в консерватории нужно что-то подправить.
Кстати, про кодера… Не хватало нам только съехать на бестолковые условности. Когда Вы кодируете HTML — вы кодер. Когда едете в метро — пассажир метро. Когда сидите за рулем автомобиля — водитель оного. Я, знаете ли, не привык судить о людях по записям в трудовой книжке. И беседую с личностью, а не с должностью.
Мало ли чем я еще в жизни занимаюсь? Между прочим, мы с Вами коллеги, если уж на то пошло. Я тоже вполне себе активно преподаю (в МГГИИ для студентов с ограниченными физическими возможностями, для которых «удобство интерфейса» — это не пустой звук, в Университете Натальи Нестеровой и еще в рамках программы IATP). Но, в отличие от Вас, своих студентов и слушателей я сразу же агитирую за CSS, ибо совершенно очевидно, что за этой технологией — будущее. А вот Вашим слушателям, если, конечно же, Вы до сих пор обучаете их верстке таблицами, хочется посочувствовать, ибо через несколько лет они попросту не найдут себе применения.
И вот, кстати, как раз сегодня мы со студентами четвертого курса тем и занимались, что раздельно изменяли «то и другое». Легким движением руки поменяв в единственном файле стилей описания для блоков header, menu, main и footer, мы получили совершенно другое оформление всех страниц сайта, не внося никаких изменений в них.
Игрушки, говорите? А что, на Ваш взгляд, не игрушки? Наифундаментальнейший 108-й параграф «Ководства» читали? ;-)
Конечно, разграничение контента и представления можно реализовать и другими средствами — к примеру, при помощи SSI, «движков» там разных и прочих динамических наворотов, порождающих львиную долю нагрузки на сервер по сравнению со статикой. Но скажите мне, почему я должен платить за хостинг дороже, чем он того стоит?.. Тот факт, что Ваша компания может себе это позволить — не аргумент.
P. S. А то, что Вы ставите атрибуты width и align вне закона, уже обнадеживает… ;-)
* * *
Как мне кажется, весьма оригинальная (и по стилю, и по содержанию) получилась у нас сегодняшняя колонка. Так или иначе, нужно было сделать небольшой перерыв в скучном академизировании относительно факторов, влияющих на скорость загрузки страниц, и, по-моему, мне удалось найти вполне подходящий повод для такой вот «разрядки». Кстати, свое обещание относительно темы сегодняшней колонки я не так уж и сильно нарушил — наши примеры кода, демонстрирующие разницу в объеме, тому подтверждение.
И еще. Не подумайте, что мне хотелось как-либо дискредитировать, обидеть или «уколоть» автора отзыва, ведь я даже не указываю здесь его имени. (Я дважды переспрашивал, можно ли опубликовать наш диалог, но не получил в результате ни явного возражения, ни явного разрешения.) Напротив, мне показалось, что наша дискуссия была весьма полезной в том плане, что она совершенно типична в нынешней ситуации, сложившейся в веб-разработке.
И пусть даже каждый останется в итоге при своем мнении, сами по себе эти мнения будут, полагаю, очень интересны отечественному сообществу веб-девелоперов. Более того, я не строю иллюзий, что все читатели согласятся именно с моей точкой зрения, а не с позицией моего собеседника. Но в любом случае наша переписка (напомню, мой оппонент — профессионал, инсайдер отрасли) заставляет о многом задуматься, а это, на мой взгляд, самое главное.
31.10.2004
Теги: CSS
HTML
блочная верстка
веб-стандарты
|