Некоторые персонажи в комментариях к записи на схожую тему в одном блоге сетовали на то, что не могут найти в гуглояндексе «универсальное решение для реализации динамической ширины блока с минимальным и максимальным значением». Что ж, попробуем его туда добавить :). Сие есть не что иное как: min-width и max-width для Internet Explorer версий <= 6 (поскольку тварь последней модификации уже понимает эти свойства).

С тем, что dynamic properties (фирменная фича MS, используется для динамических расчётов значений CSS свойств элемента) зло, не могу согласиться. С их помощью можно научить ослика ходить более прямо, путём пририсовывания ему костыликов, причём замаскированных таким образом, что их наличие никак не сказывается на качестве рендерения страницы в других браузерах, а так же на драгоценной, так всеми желаемой, валидности. Именно эту фичу MS мы и будем использовать вкупе с ещё одной фирменной фичей, что звучно сonditional сomments зовётся.

(далее...)

Очень часто приходится использовать поплавки, при этом ещё чаще возникает необходимость обрамления их родительским элементом. В соответствии со спецификацией HTML, блок, вмещающий в себя поплавки, их не обрамляет. Стандартным решением этой проблемы является добавление невидимого элемента после поплавков с установкой свойства clear, однако, это нарушает семантику кода, добавляется какой-то никому нафиг не нужный элемент, который не несёт никакой смысловой нагрузки. Ну и мать его так, не нужен он нам больше. Совсем:

ul.menu {
	display:block;
	list-style:none;
	margin:0;
	padding:0;
}
ul.menu li {
	float:left;
	width:25%;
	text-align:center;
}
ul.menu:after {
	/* для «нормальных» браузеров */
	content:".";
	display:block;
	height:0px;
	font-size:0px;
	line-height:0px;
	overflow:hidden;
	clear:both;
	visibility:hidden;
}
ul.menu {
	height:1%;
}
html>/**/body ul.menu {
	height:auto !important;
}

<ul class="menu">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</ul>

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

Пролог

Всем, кто более или менее имеет отношение к HTML- и XHTML-вёрстке, наверняка известно, что такое CSS-селекторы. В процессе выполнения некоторых задач я столкнулся, как и все, кто относит себя к указанной выше группе, с проблемами совместимости. Пенять на производителей браузеров в случае с селекторами :first-child и :last-child, очевидно, смысла нет, поскольку эти селекторы из стандарта третьей версии, который на данный момент имеет статус чернового варианта. Однако, мы всё же можем использовать их в повседневной деятельности, но потребуются кое-какие финты ушами.

Пример использования

Чаще всего я использую эти селекторы для отображения горизонтальных меню с разделителями с помощью списков, для того, чтобы полностью отделить описание структуры от стиля отображения:

Факты

• Единственный браузер, который более или менее нормально поддерживает оба этих селектора — Mozilla Firefox (однако и в этом прекрасном, мною горячо любимом и активно используемом, браузере есть некоторые бока);
• В браузерах Opera с 7 по 9 версий картина немного отличается от огненного лиса, :first-child реализован намного «прямее» чем :last-child (что, кстати, довольно странно, какая нахрен разница, казалось бы, селекторы-антонимы, механизм для выяснения является ли элемент первым потомком или последним практически один и тот же).
• Про всем известный и самый распространённый браузер я скромно промолчу, матом ругаться не хочется :-) (подробности об этом ниже).

Mozilla Firefox

Ошибки в реализации

• Неправильная интерпретация селекторов при условии наличия анонимного бокса непосредственно перед первым либо после последнего дочернего элемента.
• Если перед первым дочерним элементом либо после последнего элемента с помощью JavaScript был добавлен ещё один элемент, то браузер так же неправильно определяет первый и последний дочерние элементы.

Opera

Ошибки в реализации

• С селектором :first-child картина аналогичная браузеру Mozilla Firefox.
• Селектор же :last-child реализован через, ивините уж за просторечие, жопу. Чтобы добиться универсальности лучше всего использовать по максимуму возможности селектора :first-child.

Internet Explorer

Ошибки в реализации

• Реализация полностью отсуствует однако ошибки есть, но не в реализации, а в генетическом коде разработчиков этого чудовища ;-).

Универсальное горизонтальное меню с разделителями

Данный пример не претендует на полную универсальность, однако функциональность его была проверена в браузерах Mozilla Firefox 1.0.8, 1.5.0.8, 2.0, Opera 7.54, 8.52, 9.02, Internet Explorer 5.5, 6.

XHTML код (файл test.html)

В виду того, что CSS код для «нормальных» браузеров и для Internet Explorer радикально отличаются, а также по причине того, что CSS код для Internet Explorer не является валидным, рекомендуется использовать альтернативный CSS файл, подключаемый после CSS файла для «нормальных» браузеров с помощью conditional comments.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <title>Untitled Document</title>
        <link
            href="test.css"
            rel="stylesheet"
            type="text/css"
        />
        <!--[if IE]>
            <link
                href="test-ie.css"
                rel="stylesheet"
                type="text/css"
            />
        <![endif]-->
    </head>
    <body>
        <ul class="nav">
            <li>
                <a href="javascript:void(0)">First item</a>
            </li>
            <li>
                <a href="javascript:void(0)">Second item</a>
            </li>
            <li>
                <a href="javascript:void(0)">Third item</a>
            </li>
        </ul>
    </body>
</html>

CSS код для «нормальных» браузеров (файл test.css)

.nav
{
    list-style:none;
    display:block;
    /*
        свойство overflow имеет такое значение
        для того, чтобы элемент UL вмещал в себя
        поплавки и автоматически увеличивал свои
        размеры, это не влияет на IE
    */
    overflow:hidden;
    border:1px solid blue;
    width:500px;
    margin:0;
    padding:0;
}
.nav li
{
    float:left;
    padding:0 10px;
    border-left:1px solid blue;
    margin:10px 0;
}
.nav li:first-child
{
    border:none;
}

CSS костыли для Internet Explorer (файл test-ie.css)

.nav
{
    /*
        этот финт ушами выполняет ту же функцию, что и
        overflow: hidden; в CSS файле для нормальных
        браузеров, по сути это эмуляция CSS селектора
        :after, в конец списка добавляется невидимый
        элемент высотой в один пиксель, благодаря чему
        элемент UL вмещает в себя поплавки и обрамляет их
    */
    behavior:expression
    (
        !this.after
        ?
        this.after = this.innerHTML =
            this.innerHTML + '<li class="cleaner">.</li>'
        :
        ''
    );
}
.nav li
{
    /*
        а вот этот финт, кстати, является как раз эмуляцией
        селектора :first-child
    */
    border-left:expression
    (
        (this == this.parentNode.firstChild)
        ?
        ('none')
        :
        ('1px solid blue')
    );
    /*
        уменьшаем нижний внешний отступ элементов списка
        на один пиксель, поскольку мы добавили невидимый
        элемент с такой высотой
    */
    margin-bottom:9px;
}
/*
    это стиль невидимого элемента, который
    мы добавили к списку (см. выше)
*/
.nav li.cleaner
{
    clear:left;
    height:1px;
    line-height:1px;
    font-size:1px;
    overflow:hidden;
    visibility:hidden;
    margin:0;
    padding:0;
}

Эпилог

Вот, собственно, и всё, что я хотел рассказать по этому поводу. Надеюсь кому-то это поможет, ибо я, честно говоря, перед тем как всё это узнать потратил немало времени на изучение мегабайтов блогов и разнообразных доков, естественно, данная микростатья не освещает и одного процента того, что я узнал, копаясь в пучинах интернета. Отдельное спасибо хочется сказать Владимиру Токмакову и тебе, уважаемый читатель, если ты, конечно, дочитал до конца ;-).

Update (26.04.2007)

Как оказалось, я немного лажанулся, селектор :first-child присутствует во второй версии стандарта CSS, а :last-child только в третьей, и сразу становится понятно, почему первый реализован в опере прямее :-).

Столкнулся недавно с некоторыми интересными багами в IE.

Всем наверно известно насколько несовершенна и глючна модель CSS-позиционирования IE, но описания этих багов я вроде бы нигде не встречал, хотя целенаправленно таковые и не искал :-).

Вложенное относительное позиционирование

В макете, который я делал, были вложенные блоки с position:relative;, согласно логике блок спозиционированный асолютно (position:absolute;) должен позиционироваться относительно ближайшего родителя, который имеет position:relative;, однако IE почему-то такой логике не следует, а позиционирует блок относительно самого первого родителя, который имеет position:relative;. Побороть этот глюк я так и не смог :-(.

Ускользающие ссылки

Ссылки в абсолютно спозиционированных блоках, фоном которых является загруженное в CSS фильтром AlphaImageLoader PNG-изображение с альфа каналом, кликнуть практически невозможно, потому что они мистическим образом исчезают :-). Этот глюк тоже побороть не удалось.

Постскриптум

Кстати, я немного обновил шапочку, зимой навеяло что-то...

И ещё: никого не раздражают мои приземлённые посты на главной странице раджаки? А то я выпадаю немного из общего формата со своими рабочими записками, и мне кажется, что кому-то они могут показаться неинтересными и никчемными. Если есть таковые, кому это не нравится, то я могу из общей ленты свой блог убрать, я понимаю, что формат не тот ;-).

Update

Как оказалось глюк с исчезающими ссылками можно решить как и большинство проблем с помощью присваивания инлайн-блокам ссылок position:relative;. Вот так то, такой вот он загадочный всеми обожаемый и мне ненавистный Internet Explorer...