5 советов по XHTML/CSS-вёрстке

Опубликовано:

В рамках своеобразной эстафеты, открытой Никитой Селецким и переданной мне Александром Исаковым (UGgallery), публикую 5 небольших практических рекомендаций, касающихся XHTML/CSS-вёрстки и в данном блоге ранее не озвученных.

  1. При ограничении максимальной ширины макета полезно задавать max-width в единицах em (к минимальной ширине это не относится, она обычно задаётся в пикселах). Это позволяет сделать более-менее постоянной длину строки текста в символах по достижении максимальной ширины даже при изменении размера шрифта средствами браузера. Для IE6, не поддерживающего max-width, имеет смысл ограничиться JavaScript-эмуляцией только минимальной ширины макета.

  2. Для элементов в области контента — главным образом, абзацев — полезно задавать только нижнее поле (margin) (например, 1em), верхнее поле при этом обнулив. Это позволяет избежать проблем с кроссбраузерным отображением обтекаемых элементов (в частности, изображений) в том, что касается визуального совпадения верхних кромок текста абзаца и элемента, им обтекаемого.

  3. Чтобы внушить IE5/5.5, что он поддерживает свойство padding для строчных элементов, достаточно включить для соответствующего строчного элемента свойство hasLayout, например, при помощи такого правила:

    * HTML #mnu A {height: 1px; }

    Если, конечно, браузеры линейки IE5.x (суммарная доля которых в рунете, согласно статистике, составляет в настоящий момент менее процента) для вас по-прежнему имеют какое-то значение.

  4. Правила, специфичные для IE5/6, но не нужные для IE7, нередко имеет смысл прятать при помощи условных комментариев в отдельный css-файл, чтобы страница загружалась быстрее не только в нормальных браузерах, но даже в IE7, которому, как ни крути, скоро будет принадлежать основная доля среди браузеров. Более того, такой подход потенциально позволяет избавиться от хаков вовсе (в подавляющем большинстве случаев специфичные для IE5 и IE6 правила можно без проблем объединить) — это может быть полезным, в частности, при динамической генерации таблиц стилей на серверной стороне.

  5. Если для вёрстки макета принципиально необходимо поменять элементы местами таким образом, что реализовать это средствами CSS невозможно либо корректность отображения страницы при этом начинает сильно зависеть от размера шрифта или количества текста в соответствующих блоках, лучше прибегнуть к JavaScript и просто переместить соответствующие элементы в нужные позиции DOM-дерева сразу после окончания загрузки HTML-документа. При этом для редких случаев отключения JavaScript, когда блоки переставлены не будут, можно просто предусмотреть дополнительный приемлемый вариант оформления. Например, поменять порядок следования двух абзацев можно следующим образом:

    <p id="first">первый абзац</p>
    <p id="second">второй абзац</p>
    <script type="text/javascript">
    var a = document.getElementById('first');
    var b = document.getElementById('second');
    a.parentNode.insertBefore(b, a);
    </script>

Выделять кого-то конкретного для продолжения эстафеты не буду, но если вы понимаете и используете преимущества веб-стандартов, обладаете действительным опытом в веб-разработке и вам есть что сказать — милости прошу.