Итак, приступим! Первый выпуск рассылки по совсем не случайному совпадению посвящён моему собственному, недавно сделанному сайту, располагающемуся по адресу www.ieroglif.net ...

Тонкости CSS на примере сайта www.ieroglif.net

Эта работа знаменательна для меня ещё и тем, что здесь я впервые решил следовать принципу: сплошной CSS и никаких таблиц. В последнее время мне весьма нравится такой подход, который к тому же полностью соответствует современным веб-страндартам.

Значит так. Прежде всего, конечно же следует открыть упомянутый сайт и полюбоваться на него, для того, чтобы в общих чертах представлять о чём будет идти речь. Если же вы собираетесь вникнуть детально, то вам не обойтись без того, чтобы открыть файл стилей сайта.

Как видите, у сайта очень простая структура, состоящая из двух колонок - контента и меню. И всё это, соответственно, вложено внутрь основного блока фиксированной ширины. Проиллюстрирую для наглядности небольшой схемой:

Вроде бы основные очертания угадываются... Ну и хорошо. Больше ничего рисовать не буду, потому что лень. Буду объяснять на пальцах.

Суть описываемых проблем связана прежде всего с различиями в поддержке CSS основными браузерами. Впервые столкнувшись с этими проблемами, можно потратить довольно много времени и усилий на поиск их решения. Иногда применяются даже такие ухищрения, как написание отдельной таблицы стилей для каждого браузера... Думаю, что это уже излишество и в данном случае одной таблицы стилей будет вполне достаточно.

Примечание: для тестирования сайта использовались Internet Explorer 6 (ИЕ), Mozilla Firefox 1,5 (МФ) и Opera 8,5 (другие версии браузеров - более старые и менее распространенные я злостно проигнорировал, в чем честно признаюсь).

1. Размещение блока фиксированной ширины по центру.

Я немного сомневался, стоит ли упоминать этот пример, который, наверное и так всем хорошо известен. С другой стороны, я хорошо помню, как сам когда-то встал в тупик перед этой задачей. Потому что некому былововремя подсказать.

Итак, прежде всего нам необходим основной блок фиксированной ширины, расположенный по центру страницы. Вот это самое расположение блока по центру и может стать первой проблемой, особенно если вы успели основательно привыкнуть к таблицам. С таблицей всё просто и понятно - задаём ей, родимой, атрибут align="center" и получаем нужный результат - таблица встает строго по центру. С блоком ситуация другая: <div align="center"> выровняет по центру только внутреннее содержимое блока, а сам блок, если его размер меньше 100%, будет прилегать к левому краю окна браузера. Тот же самый результат получится и при использовании text-align: center.

Немного подумав, приходим к очевидному решению - задаем text-align: center для тега body. После чего, если мы пользовались ИЕ, какое-то время радуемся полученному результату… К сожалению, МФ не собирается разделять нашей радости и будет упорно оставлять блок у левого края страницы.

Поскольку МФ является признанным лидером в точности следования стандартам, в каждом подобном случае имеет смысл предположить, что именно он ведет себя наиболее адекватно, каким бы непривычным это поведение не казалось.

Но тогда должно быть предусмотрено и какое-то решение этой задачи. Решение действительно есть, причём совершенно неочевидное. Для выравнивания блока по центру нужно добавить в свойства CSS блока следующие строчки:

и МФ тут же поставит блок точно по центру страницы. Вот только не стоит после этого убирать text-align: center, из свойств тега body, потому что ИЕ в свою очередь понимает только такой подход и в упор не воспринимает фишку с маргинами.

2. Внутренний отступ: прибавлять или отнимать?

Теперь у нас есть основной блок, шириной, допустим 700рх, и у блока есть рамка. Разумеется, следовало бы сделать некоторый внутренний отступ для того, чтобы содержимое блока не упиралось прямо в его края, а то будет некрасиво. Вот тут-то и поджидает очередная засада... Проблема в том, что разные браузеры по разному считают ширину блока.

В ИЕ ширина будет считаться от внешнего края рамки до другого её внешнего края, т.е. в ширину блока включаются и рамка и внутренний отступ. А вот в МФ совсем по другому - от края до края содержимого, т.е. если заданы border и padding, их ширина будет прибавляться к ширине блока.

Понятно излагаю? Если у нас задана ширина (width:700px) и внутренний отступ (padding:10px), то в ИЕ мы получим блок шириной ровно 700 пикселей, что и требовалось, а в МФ - 720 (а если есть ещё и однопиксельная рамка, то ширина блока будет уже 722 px). Так что во избежание проблем лучше всего стараться избегать сочетания фиксированной ширины (высоты) и внутреннего отступа.

В некоторых случаях такая разница может быть незаметной, но у нас не тот случай, поскольку требуется, чтобы ширина блока в точности совпадала с шириной верхней картинки (предполагалось, что картинка будет располагаться над блоком). Здесь можно было бы сделать разную ширину блока для разных браузеров, методом описанным в последнем пункте, но я предпочёл просто отказаться от использования padding'а для основного блока, а вместо этого наделить margin'ом внутренние блоки, что дало такой же результат, одинаково отображающийся во всех браузерах.

По мне, так достаточно сложно привыкнуть к тому, что блок - это не то, что от рамки до рамки. Я вот уже давно знаю об этой особенности, тем не менее, нет-нет, да и всуну какому-нибудь блоку с фиксированной шириной, внутренний отступ. И при проверке хватаюсь за голову...

Тем не менее, на сайте есть блок, немного нарушающий это правило - блок верхнего горизонтального меню. У него есть высота (height: 22px), по высоте фоновой картинки, и есть верхний внутренний отступ (padding-top: 4px), для того чтобы сдвинуть строчку меню к центру по вертикали. Таким образом, в МФ высота этого блока на 4рх больше, чем в ИЕ. Но в данном случае этой разницы не заметно, потому что визуально размер блока определяется размером фонового рисунка, а он прилегает к верхнему краю блока (no-repeat top).

3. Проблема с margin’ом в плавающих блоках.

Внутри основного блока размещаем ещё два блока: один для контента, другой для меню (а также ссылок, кнопок, счётчиков и прочей дребедени). Для того, чтобы они стояли рядышком, сделаум блоки плавающими (float), а для того, чтобы они не стояли впритык друг к другу и к краям основного блока (о чём говорилось в предыдущем пункте), делаем им внешний отступ (margin:15px). Смотрим на результат и в очередной раз удивляемся - ИЕ с какого-то перепуга отображает отступы аж в два раза шире супротив необходимого. Никаких ошибок здесь нет - просто Эксплоеру присущ такой вот странный глюк, а для его преодоления рекомедуется добавить в свойства блока строчку display: inline

Как известно тем, кому это известно, свойство display: inline делает блок строковым этементом, как какой-нибудь span. В качестве средства избавляющего от упомянутого глюка, оно подходит идеально.

4. Ещё одна особенность плавающих блоков.

Вот мы уже заполнили блоки меню и контента неким содержимым и смотрим на результат. В ИЕ всё выглядит замечательно, но то что показывает МФ обескураживает. Куда подевался основной блок, с его фоном и рамкой? А он никуда не девался, просто высота его равна нулю. Вот так! Плевать он хотел на высоту вложенных в него блоков, если эти блоки плавающие и кроме них внутри ничего больше нет. Поэтому, чтобы основной блок знал, какой ему быть высоты, после внутренних плавающих блоков обязательно должно идти что-нибудь "нормальное". И лучше всего - со свойством clear: both; Свойство гласит, что данный элемент будет располагаться ниже всех плавающих блоков.

Хорошо, попробуем вставить что-нибудь. Допустим это будут нижний блок с копирайтами и тем-что-там-ещё-обычно-бывает. И мы задаём для этого блока следующие свойства:

Как вы понимаете, margin-top:15px - это для того, чтобы перед нижним блоком был некоторый отступ. Так вот, в данном случае, отступ будет только в ИЕ, а МФ его почему-то проигнорирует. Тогда попробуем поступить по-другому и перед нижним блоком вставим:

Такой вариант понравится МФ, но будет проигнорирван ИЕ.

Самое время биться головой о клаву, крича что-нибудь страшное и нецензурное.

В конечном итоге я остановился на не очень изящном, но радикальном варианте - вставил пустой разделительный блок:

который как бы проводил невидимую черту под плавающими блоками, а заодно сам выступал в роли некоторого пустого промежутка.

5. Маркеры: внутри или снаружи?

В качестве меню я решил использовать ненумерованный список. Вариант неплохой во всех отношениях, надо было только избавиться от слишком большого отступа с левого края, который у списков имеется по умолчанию. При margin-left: 0px; отступ исчезает весь, вместе с маркерами. Это не совсем то - маркеры хотелось бы оставить. Экспериментальным путем находим оптимальный размер - margin-left: 15px;

Проверяем результат в МФ и в очередной раз удивляемся: здесь отступ стал ещё больше. Для того, чтобы понять в чём дело я сделал для списка рамку, и тайное сразу стало явным. Если в ИЕ маркеры являются "маргиналами", т.е. находятся за рамкой, то в МФ маркеры и отступ расположены внутри рамки. В итоге, по умолчанию всё отображается идентично, а во всех прочих случаях следует быть весьма внимательным. И если нам необходим margin-left: 15px; то в комплекте с ним обязательно надо упомянуть padding-left 0;

6. Специально для Оперы.

Возможно у вас возникнет вопрос, почему я не разу не упомянул про Оперу. Нет, я регулярно и добросовестно тестировал сайт и в этом браузере, но как правило, если удавалось достигнуть одинаковой картинки в ИЕ и в МФ, то и в Опере после этого всё было нормально. Однако расслабляться не стоит - у этого браузера ещё могут быть припрятаны кое-какие уникальные особенности. При изготовлении сайта я наткнулся на одну из них. Как известно, для того, чтобы с помощью CSS убрать отступы от края окна браузера, достаточно указать BODY { margin: 0px; } И только Опере этого будет мало - отступ исчезнет лишь после того, как мы укажем еще и padding: 0px;

7. Небольшой глюк на закуску.

Глядя на почти готовый сайт я подумал о том, какой бы ещё простой, но выразительный штрих добавить в его оформление. И решил добавить полоски по бокам. Данный приём вряд ли можно назвать оригинальным, но согласитесь, выглядит он весьма неплохо. Для того, чтобы не пришлось добавлять какие-то дополнительные элементы в html, я решил сделать эти полоски как фон страницы. Итак, делаем гифовский рисунок, по ширине превосходящий ширину сайта, и с симметричными полосками по краям. Высотой же он может быть всего 1 пиксель. Задём ему выравнивание по середине и размножение по оси Y:

Мне пришлось несколько раз подгонять расположение полосок, для того, чтобы добиться их идеального отображения относительно сайта. Но повозиться пришлось не только с графическим файлом... Когда в МФ и Опере полоски наконец встали идеально, в ИЕ они оставались немного смещёнными. Эксплоер почему-то никак не мог правильно совместить расположенный по центру сайт и расположенный по центру фоновый рисунок. Проклиная упрямый браузер я испробовал несколько разных вариантов и в конце концов решил проблему добавив в свойства основного блока вот такую конструкцию:

Возможно это не очень изящный трюк, но он работает. Здесь для МФ и Оперы будет актуальным свойство position: static !important; - то есть блок остаётся стоять там где стоял. А вот ИЕ, который похоже вообще не понимает, что такое !important, будет руководствоваться нижним свойством. Для него этот блок будет относительно позиционированным и сдвинутым вправо на один пиксель.

Да, как видите, разница всего в один пиксель! Но и один пиксель иногда может иметь решающее значение.