Архив за Ноябрь 2006 года

CSS3 селекторы :first-child и :last-child

02:57, 24-ое Ноября 2006, Автор: Q-Zma, Рубрики: HTML/CSS

Пролог

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

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

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

 

css3-selectors-illustration-01.gif

Факты

  • Единственный браузер, который более или менее нормально поддерживает оба этих селектора — 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 только в третьей, и сразу становится понятно, почему первый реализован в опере прямее :-).

Перейти к началу страницыПостоянная ссылка Комментарии (5) »

Невероятное совпадение

08:24, 22-ое Ноября 2006, Автор: Q-Zma, Рубрики: Без рубрики

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

К моему удивлению, я обнаружил, что у "афтара" сегодня день рождения. 22 ноября, 44 года.

Всех благ вам, Виктор! Не зря вы приходили ко мне во сне пару лет назад :-).

Перейти к началу страницыПостоянная ссылка Комментарии (4) »

Умри, о ctrl+c/ctrl+v-ющий текст куда ни попадя, умри же!

02:35, 21-ое Ноября 2006, Автор: Q-Zma, Рубрики: Без рубрики

Разговор зашёл о песне, хорошей старой доброй песне, старого доброго индейца Фёдора Чистякова…

И надо же, нашёлся среди участников разговора тот, кто о такой песенке не слыхивал…

Добрая душа просветила серость, вставив полные слова песни c оптимистичным названием «Говнорок» с офсайта в пост и поплатилась: неделя бана за матершину, вот так-то…

Перейти к началу страницыПостоянная ссылка Комментарии (4) »


ноутбуки acer. LCD.: магазин Fotomag; Курсы. Курсы менеджер персонала; dating service