Эта
статья была впервые опубликована осенью 2005, а уже весной 2006
потребовала корректив в соответствии с нынешним состоянием технологий.
Пусть это будет для вас ещё одним напоминанием о том, что в компьютерных
технологиях всё постоянно меняется и обновляется.
Пожалуйста, не становитесь динозаврами, а то вымрете!
Среди нас водятся мамонты, мастодонты,
бронтозавры и трилобиты. Они научились кодировать HTML в середине 1990‑х
и с тех пор ни разу не обновляли свои знания. Им не приходит в голову,
что за это время в Интернете, мягко говоря, многое изменилось. Код,
который они пишут, можно выставлять в музее среди граммофонов и
арифмометров.
Особенно печально, что пример этих
мастодонтов дурно влияет на начинающих разработчиков. Новичок видит, как
кодирует «большой дядя», и считает, что так и надо. Он не догадывается,
что «большой дядя» отстал от жизни на десяток лет, а то и
больше.
Какая польза от кодирования
«по‑новому»?
Кому будет лучше от того, чтобы не
кодировать «по‑старому», а кодировать «по‑новому»? Прежде всего —
вам самим. Если вы используете современные методы
написания кода — вы тратите меньше времени на работу. Ваш код получается
меньше по объёму. Его легче отлаживать и редактировать впоследствии. В
конце концов, он элегантнее смотрится в текстовом
редакторе.
Конечно, между старыми и новыми
технологиями нет ярко выраженной границы. Технологии постоянно
обновляются, развиваются, приходят на смену друг другу. Бывают методы,
которые для одних задач можно считать прогрессивными, а для других —
устаревшими. Но в этой статье идёт речь о таких замшелых методах,
которые уже ни с какой точки зрения нельзя рассматривать всерьёз, и
которые встречаются на современных сайтах только по малограмотности
разработчиков.
Большинство примеров «старого стиля»,
которые здесь представлены, и десять лет назад уже были устаревающими и
не рекомендовались к употреблению. В основном это случаи, когда вместо
громоздких и неэффективных конструкций HTML можно использовать
CSS.
Вымершие элементы и
атрибуты
Многие элементы и атрибуты, которые были в
прежних редакциях языка HTML, теперь вовсе отменены или отнесены к
нежелательным (deprecated). Их не рекомендуется
использовать не потому, что за их употребление расстреливают, а потому
что задачи, которые раньше решались с их помощью, теперь решаются на
порядок проще и удобнее средствами CSS.
Вот
элементы HTML, которые потеряли всякий
практический смысл:
b basefont big
center font hr
i s small
strike tt u
Их,
конечно, можно использовать, и они будут работать. Но это всё равно что
в наше время прослушивать музыку с помощью патефона или кипятить воду
на примусе. В самом деле, если дать вам хорошую, исправную керосиновую
лампу — вы будете ею пользоваться в обычных условиях? Вряд ли. А почему,
можете объяснить? Вот по этой же причине не следует употреблять
вымершие элементы HTML.
То же самое относится к
антикварным атрибутам
HTML:
align alink background bgcolor border
cellpadding cellspacing color faceheight
hspace marginheight marginwidth nowrap start
target valign vlink vspace width
Посмотрите
на эти элементы и атрибуты в последний раз и забудьте их на всю
оставшуюся жизнь.
Отклонения от
стандарта
Помимо вымерших элементов и атрибутов,
доисторические кодировщики любили пользоваться конструкциями, которых
вообще отродясь не было в стандарте HTML. Это атрибуты вроде
topmargin и
leftmargin, а также элементы
bgsound,
marquee,
nobr,
embed и некоторые
другие.
Ну, с
bgsound и
marquee всё понятно — это
любимые игрушки совсем уж малолетних разработчиков, которые вряд ли
будут читать эту статью (потому что ещё не умеют). Вы — люди взрослые,
поэтому, надеюсь, читать дальше про эти элементы вам было бы не более
интересно, чем про черепашек‑ниндзя.
Элемент
nobr — немножко другое дело.
В отличие от вышеупомянутых свистулек и скакалок, он не причиняет
пользователям прямого вреда. Но и смысла в нём никакого нет и никогда не
было. Неразрывные участки можно устраивать, обходясь стандартными
средствами HTML и CSS. Подробнее про это можно прочесть в учебнике
Наконец, что
касается элемента
embed… Какие же сопли и
вопли устраивают ветхозаветные кодировщики по его поводу! «Ах, ироды
окаянные! — кричат они хором и поодиночке.— Что же вы, бусурманы,
удумали — отбирать у нас
embed! Да у нас же
без него Flash работать не будет!» Как дети малые…
Ну
разуйте глаза, старцы анахоретные! Вот вам Flash, внедрённый без
всякого
embed:
Некоторые старцы помоложе, которым
embed не грозит, всё‑таки
выдвигают аргументы в пользу других конструкций, не согласующихся со
стандартами. Мол, стандарты — дело хорошее, но нам нужно ориентироваться
на реально существующие браузеры; а чтобы страница нормально
отображалась в разных браузерах, иногда имеет смысл отступать от
стандартов.
Это вполне разумный довод… но он имел
отношение к действительности лет семь назад. Ну, возможно, шесть. А
сейчас никакие браузеры не мешают разрабатывать код, соответствующий
стандартам.
Гиперссылка на определённый
элемент
Чтобы сделать гиперссылку, ведущую на
определённый участок документа HTML, когда‑то этот участок заключали в
элемент a с
атрибутом
name:
<h3><a
name="p01">Какая польза от
кодирования
«по-новому»?</a></h3>
Сейчас
элемент a не нужен в том месте, куда ведёт
ссылка. Достаточно присвоить атрибут id уже
имеющемуся элементу (в данном случае —
h3):
<h3
id="p01">Какая
польза от кодирования
«по-новому»?</h3>
Сама
гиперссылка, ведущая на этот элемент, выглядит
по‑прежнему:
<a
href="#p01">Какая польза от кодирования
«по-новому»?</a>
Кстати, в
следующих редакциях HTML атрибут href можно
будет присвоить любому элементу, превратив этот элемент в гиперссылку.
Пока это — дело будущего, но готовьтесь к тому, что через несколько лет
ваш любимый элемент a тоже
устареет.
Цвета
гиперссылок
Древние кодировщики указывали для
элемента body атрибуты
link,
vlink и некоторые другие,
например:
<body link="#663300"
vlink="#996666" ... >
Это означало:
«отображать непосещённые ссылки коричневым цветом, а посещённые —
серо‑вишнёвым». Сейчас все эти цвета лучше задавать в
CSS:
a:link
{color:#630;} bra:visited
{color:#966;}
Современный способ имеет
неоспоримые преимущества перед старинным:
В CSS можно сделать так, чтобы посещённые и
непосещённые ссылки различались не только цветом текста, но и любыми
другими свойствами: цветом фона, характером подчёркивания, обрамлением,
шрифтом и т. д. Атрибуты старинного HTML позволяли управлять только
цветом текста, и ничем больше.
Если вы хотите
средствами HTML добиться одинакового оформления ссылок на нескольких или
на всех страницах сайта, то
атрибутыlink,
vlink и им подобные
требуется писать в коде каждой страницы. А
инструкции CSS пишутся один раз в общем файле CSS и
действуют сразу на все страницы, к которым подключен этот
файл.
Можно ещё заметить, что в CSS
существует псевдокласс :hover, вовсе не имеющий
аналогов в старинном HTML. С его помощью можно сделать «подсветку»
гиперссылок и другие эффекты, возникающие при наведении указателя мыши.
Например, «подсветка» графического логотипа в верхней части этой
страницы выполнена средствами CSS.
Отступы
по краям страницы
По умолчанию браузеры оставляют
небольшое пустое пространство между содержанием веб‑страницы и границей
окна. Если требовалось убрать это пространство, в былые времена писали
так:
Вместо всех
этих монструозных атрибутов можно написать в CSS коротко и
ясно:
*
{margin:0;padding:0;}
Между прочим, эта
простая инструкция даёт нам больше, чем устранение отступов по краям
страницы. Она устраняет вообще все отступы
элементов, кроме тех, которые вы специально задали в том же CSS. Это
гарантирует, что на странице не появится никаких несанкционированных
пустых пространств.
Я привык записывать эту
«волшебную» инструкцию в начале каждого своего файла CSS и убедился, что
она существенно облегчает кодирование. Кстати, приведённые выше
допотопные атрибуты marginwidth,
topmargin и прочие, кроме всего, не
соответствуют стандартам.
Таблицы: рамки,
отступы, выравнивание
Таблицы в современных
графических браузерах по умолчанию отображаются без рамок, а между
соседними ячейками остаётся небольшой зазор. Чтобы появились рамки и
исчезли зазоры, первобытные кодировщики писали
так:
В современном CSS для устранения
зазоров между ячейками следует использовать
свойствоborder‑collapse:
table{border-collapse:collapse;}
Это
значительно сокращает код: по‑старому приходилось записывать атрибут
cellspacing в
каждой таблице, а сейчас можно один
раз задать
border‑collapse, и это
подействует сразу на все таблицы на всех страницах
вашего сайта.
Для создания рамок следует применять
свойство border,
например:
td{border:1px solid
#000;}
CSS позволяет делать с рамками то,
что было невозможно в антикварном HTML:
В HTML рамка может быть только сплошной линией. В
CSS можно задать и другие стили,
например:double — двойная
линия, dashed — пунктирная,
outset —
выпуклая.
В HTML рамка, если она есть, одинакова со
всех четырёх сторон элемента. В CSS можно задать не только такую рамку,
но и рамку только с одной стороны, с любых двух или трёх сторон, причём
рамки с разных сторон могут быть разными по толщине, стилю и
цвету.
Для вертикального выравнивания в
ячейках таблицы когда‑то применялся атрибут
valign:
<td
valign="top"> ...
</td>
Это, конечно, тихий
ужас. Только представьте: в среднестатистической таблице пара десятков
ячеек, и в каждой надо записывать такой атрибут.
Положительно, этим могут заниматься только люди, у которых очень много
лишнего времени. Те, кто дорожит своим временем и здравым смыслом,
используют свойство
vertical‑align в
CSS:
td {vertical-align:
top;}
Что
дальше?
Все новые методы кодирования, о которых здесь
рассказывается, через несколько лет тоже устареют. И в будущих
редакциях этой статьи они окажутся среди примеров антикварного кода.
Следите за изменениями.
Не за горами время, когда мы
сможем спокойно пользоваться
свойствами display:table; и
min/max-width/height. Даже
самый популярный браузер в обозримом будущем начнёт поддерживать
векторную графику SVG и браузерную навигацию, а может, и MathML. А там,
глядишь, недалеко до XHTML 2.0 и CSS 3. Возможно, сейчас кажется, что
это — технологии далёкого будущего. Но если не иметь их в виду — в один
прекрасный день вы обнаружите, что «далёкое будущее» уже давно
наступило, а вы стоите в кунсткамере среди
динозавров.