Ars Longa, Vita Brevis » CSS

WebKit и псевдокласс :empty

Vladimir — Thu, 22 Oct 2009 19:10:00 +0000

До полноценной поддержки CSS 3 всеми браузерами еще далеко?

Вчера, благодаря своему читателю, я обнаружил в WebKit очень интересную ошибку: оказывается, что он не понимает псевдокласс :empty (из CSS 3).

Проверяется очень легко:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:empty and WebKit</title>
<style type="text/css">.test:empty { display: none; }</style>
</head>
<body>
<div class="test">
Verus amicus amore, more, ore, re cognoscitur
</div>
</body>
</html>

Так страница отображается в Google Chrome (и Safari):

А так — в FireFox:

Что характерно, Konqueror отображает страницу так же, как и FireFox, так что ошибка, по-видимому, специфична для WebKit.

Тестовая страница.

При использовании материалов блога наличие активной не закрытой от индексирования ссылки на источник обязательно.

Основные источники неправильной разметки в WordPress

Vladimir — Mon, 07 Jul 2008 02:50:08 +0000

Исправляем неправильную разметку в WordPress

В статье "Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, , CSS" рассказывается о четырёх основных источниках неправильной разметки в WordPress:

JavaScript;

Глобальные CSS, размещаемые в заголовке документа;

Flash;

Несуществующий по стандартам тег <noindex>, придуманный Яндексом

Естественно, после прочтения статьи я решил проверить свой, как я полагал, валидный, блог. В том-то и дело, что только плагал: нашёлся пятый источник неправильной разметки. Где бы Вы думали? В самом WordPress, в функции wpautop().

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

Content not to be indexed

Во-первых, это решает проблему невалидного (X)HTML. Во-вторых, не надо было бы заботиться о том, где можно и где нельзя размещать тэг — вырезал регэкспом такой вот комментарий от начала и до конца и получил контент, который можно индексировать. Эх… Ладно, забыли.

Теперь по списку.
JavaScript. Решение простое: весь JavaScript заключаем в секцию CDATA. Например, так:

И не забываем, что атрибут type — обязательный. Решение выше, что называется, для любителей поизвращаться: помимо всего прочего, оно прячет JavaScript от антикварных браузеров, которые вообще не понимают тэг script. Если поддержка таких браузеров не нужна, то код можно значительно упростить:

А вот такое решение я не рекомендую:

Причина простая: если мы планируем отдавать XHTML так, как это требует W3C (с MIME-типом application/xhtml+xml), то любой нормальный браузер воспримет HTML-комментарий как элемент, вложенный в script, и, как следствие, проигнорирует скрипт полностью (в XHTML парсер не знает о том, что существуют скрипты, таблицы стилей и прочие вещи).

С CSS всё аналогично. Метод для любителей поизвращаться:

И более простой метод:

Да, у тэга style атрибут type тоже является обязательным.
Все браузеры, появившиеся после 2000 года понимают форму "без извращений", поэтому, наверное, имеет смысл использовать именно её. И еще небольшое замечание по поводу CDATA. По большому счету, секция CDATA нужна только тогда, когда контент содержит символы, которые могут быть интерпретированы как разметка XML, а именно: < и &. То есть в большинстве случаев, стили внутри тэга style помещать в CDATA особо не нужно.

Третий пункт — Flash. Здесь поможет Flash Satay. На нём подробно останавливаться не буду, лишь замечу, что правильный способ записи такого монстра:

выглядит так:

Достоинства и недостатки метода подробно описаны в оригинале, нет смысла на них останавливаться здесь.

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

Переходим к пятому пункту, ради которого, собственно говоря, данная статья и писалась Как я уже сказал, во многих случаях в неправильной разметке виноват WordPress. Конкретно — функция wpautop(). Я всегда считал, что глобально менять разметку HTML, использую регулярные выражения — глупо, ибо в общем случае это работать не будет.

Допустим, Вы привыкли использовать хорошо структурированый код. Тогда вполне вероятно, что Вы можете написать нечто подобное (в целях упрощения восприятия я сократил код):

<div>
<strong>Test</strong>
<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

Дальнейшие рассуждения исходят из предположения, что Вы не пользуетесь WYSIWYG-редактором. Например, из-за того, что приходится вставлять разметку, которую TinyMCE никак не переваривает (исправляет её под себя), я им вообще не пользуюсь, предпочитая обыкновенный HTML-редактор без наворотов.

В этом случае функция wpautop() преобразует его следующим образом:

Добавление символов перевода строки:

<div><strong>Test</strong>

<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>

</div>
Добавление параграфов куда можно и куда нельзя:

<p><div><strong>Test</strong></p>
<p><div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div></p>
<p></div></p>
Финальная очистка:

<div><strong>Test</strong></p>
<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

Как видим, остается лишний закрывающий тэг p. Кстати, если написать так (строчный и блочный элементы на одной строке):

<div>
<strong>Test</strong><div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

то разметка будет нормальной.

В общем случае, ошибка вылезает при такой разметке:

>
>>
>>
>

Править все статьи — абсолютно не метод русского программиста Проще автоматизировать.
Открываем файл wp-includes/formatting.php:

function wpautop($pee, $br = 1) {
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|
\s*
|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!( . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, ') !== false ) {
$pee = preg_replace('|\s*]*)>\s*|', "$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*\s*|', '', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
$pee = preg_replace('/\n?(.+?)(?:\n\s*\n|\z)/s', "
$1
\n", $pee); // make paragraphs, including one at the end
$pee = preg_replace('|
\s*?
|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!
([^<]+)\s*?(]*>)!', "
$1
$2", $pee);
$pee = preg_replace( '|
|', "$1
", $pee );
$pee = preg_replace('!
\s*( . $allblocks . '[^>]*>)\s*
!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|
(|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|
]*)>|i', "$1>
", $pee);
$pee = str_replace('
', '
', $pee);
$pee = preg_replace('!
\s*( . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!( . $allblocks . '[^>]*>)\s*
!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "", $matches[0]);'), $pee);
$pee = preg_replace('|(?)\s*\n|', "
\n", $pee); // optionally make line breaks
$pee = str_replace('', "\n", $pee);
}
$pee = preg_replace('!( . $allblocks . '[^>]*>)\s*
!', "$1", $pee);
$pee = preg_replace('!
(\s*]*>)!', '$1', $pee);
if (strpos($pee, ') !== false)
$pee = preg_replace_callback('!()(.*?)<\/pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n
$|", '
', $pee );
$pee = preg_replace('/
\s*?(' . get_shortcode_regex() . ')\s*<\/p>/s', '$1', $pee); // don't auto-p wrap shortcodes that stand alone
return $pee;
}

После строки 77 вставляем:

$pee = preg_replace("/
\\s*(<{$allblocks}.*?)<\\/p>/ism", '$1', $pee);

Эта строка кода убирает параграф вокруг открывающего тэга блочного элемента. Такой простой вот трюк (я на него убил минут 30 отладки) решает проблему с форматированием.

Но, как оказалось, это еще не всё. Второй случай более редкий:

Что характерно, перед открывающим

должен стоять по крайней мере пробел (редактор WordPress его добавляет, так что условие вполне выполнимое).
Так выглядит результат работы неизменённого wpautop():

А так — исправленного:

В исправленном варианте на одну ошибку меньше Но всё равно нужно исправлять.

Здесь лечение более сложное: во-первых, нужно добавить одну функцию:

function wpautop_replace_callback($matches)
{
if ('

' == $matches[2]) {
return '

' . $matches[1] . $matches[2];
}

return $matches[1] . $matches[2];
}

и в функцию wpautop() под строку

$pee = str_replace('

', '

', $pee);

добавить

$pee = preg_replace_callback("/

(.*?)(<\\/{$allblocks}>)/s", 'wpautop_replace_callback', $pee);

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

<div><ins>
whatever
</ins></div>

По традиции, патч в формате unified diff, который исправляет проблему:

--- formatting.php.original 2008-04-25 03:46:17.000000000 +0300
+++ formatting.php 2008-07-07 05:44:52.000000000 +0300
@@ -59,6 +59,15 @@
return $text;
}

+function wpautop_replace_callback($matches)
+{
+ if ('

' == $matches[2]) {
+ return '

' . $matches[1] . $matches[2];
+ }
+
+ return $matches[1] . $matches[2];
+}
+
function wpautop($pee, $br = 1) {
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|
\s*
|', "\n\n", $pee);
@@ -75,11 +84,13 @@
$pee = preg_replace('/\n?(.+?)(?:\n\s*\n|\z)/s', "

\n", $pee); // make paragraphs, including one at the end
$pee = preg_replace('|

\s*?

|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!

([^<]+)\s*?((?:div|address|form)[^>]*>)!', "

$2", $pee);
+ $pee = preg_replace("/

\\s*(<{$allblocks}.*?)<\\/p>/ism", '$1', $pee);
$pee = preg_replace( '|

|', "$1

", $pee );
$pee = preg_replace('!

\s*([^>]*>)\s*

!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|

()

|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|

([^>]*)>|i', "

", $pee);
$pee = str_replace('

', '

', $pee);
+ $pee = preg_replace_callback("/

(.*?)(<\\/{$allblocks}>)/s", 'wpautop_replace_callback', $pee);
$pee = preg_replace('!

\s*([^>]*>)!', "$1", $pee);
$pee = preg_replace('!([^>]*>)\s*

!', "$1", $pee);
if ($br) {

Кросс-браузерный резиновый трёхколоночный макет в высоту окна

Vladimir — Sun, 29 Jun 2008 20:49:24 +0000

Кросс-браузерное решение для резинового макета с одинаковой высотой колонок и стопроцентной высотой

Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.

Требования к макету:

кросс-браузерность (куда без неё);
минимальная высота: 100% (полное окно, независимо от высоты контента);
минимум кода;
все три колонки должны быть одинаковой высоты;
никакого JavaScript.

Минимум кода означает минимум разметки:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Three Column Liquid Layout</title>
</head>
<body>
<div id="header">Header</div>
<div id="container">
<div id="content" class="column">
<p>Sed eleifend, sapien vel mollis euismod, sem velit semper ante...</p>
</div>

<div id="left" class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sollicitudin dolor nec nunc iaculis tincidunt...</p>
</div>

<div id="right" class="column">
<p>Phasellus sollicitudin. Fusce ut tellus. Vivamus dapibus. Cras eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et...</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

So far so good, как любит говорить один мой коллега. Теперь переходим к разметке.

Начнём с общих определений:

html {
background: #800000;
}

html, body {
margin: 0;
padding: 0;
border: 0;
}

body {
font: 14px/120% Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 90%;
margin: 0 auto;
}

Теперь переходим к 100% высоте. Помним, что Konqueror/KHTML имеет свою точку зрения по поводу того, кто задаёт скроллинг; также не забываем про IE6, который не понимает min-height

html {
overflow: auto;
}

html:not(:nth-child(1)) {
overflow: visible; /* KHTML сам нарисует скроллинг, не будем ему мешать */
}

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}

#container {
height: auto !important;
height: 100%; /* для IE6 */
min-height: 100%;
}

* html #container { overflow: visible; }

Для IE6 мы должны задать overflow: visible, в противном случае контент будет нещадно обрезаться.

Задаем заголовок и подвал:

#header {
height: 3em;
background: red;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
left: 0;
}

.column {
padding-top: 3em !important; /* компенсация высоты заголовка */
}

#footer {
height: 3em;
color: #FFF;
background: green;
position: relative;
z-index: 1000;
margin-top: -3em;
width: 100%;
}

Заголовок позиционируем абсолютно, так как контейнер #container имеет как минимум стопроцентную высоту: задать высоту 100%-3em будет проблематично. Поэтому, считая, что высота заголовка нам известна (а так обычно всегда), мы просто помещаем заголовок "на территорию" контейнера, а высота заголовка будет компенсирована верхним отступом у колонок. Даже если нам придётся задать фоновый рисунок у #container, мы можем компенсировать высоту заголовка путём использования background-position.

Аналогично (только хуже ) с футером: его нужно поднять вверх на всю его высоту (отсюда относительное позиционирование и z-index) — как и в случае с заголовком, для поддержания стопроцентной высоты необходимо, чтобы он располагался "на территории" контейнера.

Теперь переходим к трём колонкам:

#container {
padding-left: 220px;
padding-right: 200px;
overflow: hidden;
float: left; /* IE 5.01 */
float/**/: none;
background: lime;
position: relative;
}

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 1000em !important;
margin-bottom: -997em !important; /* компенсация высоты футера */
}

#left {
width: 220px;
background: url(images/tile-2.jpg) repeat;
margin-left: -100%;
right: 220px;
}

* html #left { /* У IE6 всё не как у людей */
left: 200px;
}

#right {
width: 200px;
background: url(images/tile-3.jpg) repeat;
margin-right: -100%;
}

#content {
width: 100%;
background: url(images/tile-1.jpg) repeat;
}

Теперь идут хаки. По слухам, в IE/Mac вышеприведённая техника для создания колонок одинаковой высоты не работает. Вернее, он работает, но страницу разносит по высоте (добавляется невидимый padding). Мне-то всё равно, но так как исправить просто (в смысле, сделать колонки разной высоты), то почему бы и нет:

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 3em; /* компенсация высоты футера */
}

/* Прячем от IE/Mac \*/
#left, #right, #content {
padding-bottom: 1000em !important;
margin-bottom: -997em !important;
}
/**/

Переходим к Опере. Старые версии (7.0-7.2) не обрезают колонки по высоте. На помощь приходит EasyClearing:

#container:after {
content: 'EasyClearing';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#container { display: inline-block; }
/*\*/
#container { display: block; }
/**/

Но, как это обычно бывает в жизни, исправил одну ошибку — вылезла другая: EasyClearing портит разметку в IE 5.01. По счастью, это легко лечится путём добавления float: left контейнеру #container:

#container {
float: left; /* IE 5.01 */
float/**/: none;
}

Тем не менее, мы исправили не все глюки в Опере. Для Opera 8, у которой есть свои глюки в обработке overflow: hidden, нам придётся убрать margin-bottom/padding-bottom с самих колонок и применить их элементу внутри колонок. Либо так:

@media all and (min-width: 0px) {
#left, #right, #content {
margin-bottom: 0 !important;
padding-bottom: 3em !important; /* Компенсация высоты футера */
}

#left:before, #right:before, #content:before {
content: 'EasyClearing';
display: block;
background: inherit;
padding-top: 1000em !important;
margin-bottom: -1000em !important;
height: 0;
}
}

Тестовая страница.

Пять звёздочек без JavaScript

Vladimir — Fri, 30 May 2008 19:26:35 +0000

Кросс-браузерный вариант реализации механизма рейтинга без использования JavaScript

Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS.

Решение Вадима основано на использовании CSS rollovers, плавающих элементах и z-index и выглядит очень красиво. Особенно меня впечатлило то, что его решение будет работать с выключенной загрузкой изображений и отключенным CSS. Весьма приятно, ибо о usability отечественные разработчики задумываются далеко не всегда.

Среди недостатков отмечу следующие:

При использовании IE6 с выключенным JavaScript вся красота перестаёт работать (оффтопик: не могу понять, по каким причинам народ до сих пор сидит на IE6?)
Некоторое неудобство при изменении шкалы: например, если изменить код так, чтобы можно было учитывать полбалла, то помимо ширин придется менять и z-index каждого элемента a. Хотя, в принципе, это мелочь.

Полгода назад я какое-то работал над проектом myfolio.com, там тоже применялось пятизвёздочное голосование (правда, принцип несколько другой). Считая, что тот подход тоже имеет право жить , привожу его здесь.

Разметка очень проста:

Про условные комментарии вокруг элемента ul можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript".

Из особенностей — нумерация идёт в обратном порядке (это связано отказом от float и z-index, ибо код в myfolio был гораздо сложнее и с z-index возникали некоторые проблемы в IE6).

Теперь самое интересное: стили:

.vote, .vote li.rated, .vote li a:hover {
background: url(stars.gif) no-repeat 0 0;
}

/* Небольшая особенность: если задавать цвет, то картинка не должна быть прозрачной.
Задание цвета используется для тех, кто выключил загрузку изображений в настройках браузера.
В этом случае пользователь увидит нечто наподобие progress bar (но это всё же лучше, чем ничего).
*/
.vote li.rated, .vote li a:hover {
background-color: red;
}

.vote {
background-position: 0 -14px;
}

.vote:hover li, .ievote:hover li {
background: none;
}

.vote {
width: 80px;
overflow: hidden;
position: relative;
}

.vote, .vote li, .vote li a {
height: 14px;
display: block;
}

.vote li {
position: absolute;
}

.vote, .vote li {
left: 0;
top: 0;
list-style: none;
margin: 0;
padding: 0;
}

.vote li a {
overflow: hidden;
text-indent: -100px;
outline: 0;
}

/* Задаем ширину каждого балла; каждый последующий балл включает в себя предыдущий*/
.vote li.one { width: 7px; }
.vote li.two { width: 16px; }
.vote li.three { width: 23px; }
.vote li.four { width: 32px; }
.vote li.five { width: 39px; }
.vote li.six { width: 48px; }
.vote li.seven { width: 55px; }
.vote li.eight { width: 64px; }
.vote li.nine { width: 71px; }
.vote li.ten { width: 80px; }

/* Для IE6 */
.ievote {
text-decoration: none !important;
}

Наконец, страница с рабочим примером.

Достоинства метода:

Метод кросс-браузерный, работает даже при отключенной загрузке изображений и выключенном CSS;
Превосходно работает даже при отключённом JavaScript (в том числе, и в IE6);
Благодаря использованию CSS rollover достаточно всего лишь одного HTTP-запроса (в отличие от реализаций, где используются списки с элементами img).

Еще одно красивое решение от site-creator.info.

Проблема с плавающими элементами в FireFox и IE6/7

Vladimir — Tue, 20 May 2008 10:06:28 +0000

Прав ли FireFox?

При решении одной задачи с вертикальным выравниванием и плавающими элементами внутри ячейки таблицы, натолкнулся на одну очень интересную особенность браузеров, построенных на движке Gecko, а также Internet Exploret 6 и 7: плавающие элементы конфликтуют со статическими инлайновыми или псевдо-инлайновыми элементами.

Например:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floating and FireFox</title>
</head>
<body>
<div style="height: 100px; width: 100%; background: red;">
<span>Text</span>
<div style="width: 100px; height: 100%; float: left; background: yellow;">Float</div>
</div>
</body>
</html>

В FireFox, IE6 и IE7 это будет выглядеть примерно так:

А так — в Opera, Konqueror, Safari или IE8:

Если следовать спецификации CSS 2.1,

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.

Можно, конечно, попробовать возразить, опираясь на следующий параграф:

If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Но на мой взгляд, это не очень убедительно: — inline-элемент и поэтому не может растягиваться на всю длину контейнера. Если мы поменяем направление float с left на right, то заметим, что такое поведение сохранится:

Тестовая страница.

Всё-таки FireFox здесь неправ… Обидно, что даже IE8 правильно рисует…

Лечение: поменять span и div местами. Либо задать span ширину и отправить в плавание.

Аккордеон на CSS без использования JavaScript

Vladimir — Mon, 14 Apr 2008 18:17:49 +0000

Простой аккордеон без использования JavaScript

В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML).

IE6 потребуется несколько иная разметка, чем нормальным браузерам (об этом можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript"), поэтому я сразу привожу разметку, которая подойдёт для всех браузеров (за основу взята разметка из статьи "парочка аккордеонов"):

<ul id="accordion">
<li>
<a href="#">Item 1</a>

<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>

</li>

<li class="active">
<a href="#">Item 2</a>

<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>

</li>

<li>
<a href="#">Item 3</a>

<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>

</li>

<li>
<a href="#">Item 4</a>

<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>

</li>
</ul>

Теперь CSS для нормальных браузеров:

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

/* Update 11-May-2008: в IE7 эта конструкция не работает
#accordion > li:not([class="active"]) ul {
display: none;
}
/**/
/* Для максимальной совместимости с IE7 используем следующие
два правила (их теоретически можно было сделать видимыми только
для IE7, но смысла загромождать код нет :-) ). Легко заметить, что
эти два правила есть инверсия предыдущего закомментированного правила */
#accordion > li[class="active"] ul {
display: block;
}

#accordion > li ul {
display: none;
}

#accordion > li:hover ul {
display: block;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Не забудем про IE6:

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

/* IE7 не понимает last-child */
*:first-child+html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

* html #accordion li table {
display: none;
}

* html #accordion li.active table {
display: block;
}

* html #accordion li a:hover {
position: static;
}

/* Спасибо Ивану Маркееву (http://markeev.labwr.ru) за замеченную опечатку */
* html #accordion li a:hover table {
display: block;
}

Рабочий пример.

Парочка аккордеонов

Vladimir — Sun, 13 Apr 2008 18:19:53 +0000

Несколько вариантов реализации меню-аккордеона с использованием библиотеки Prototype

Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь

Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой.

Представляю два решения:

Подменю сворачивается/разворачивается по щелчку, элементы меню не зависят друг от друга;
Подменю сворачивается/разворачивается по щелчку, при этом не может быть более одного развёрнутого подменю.

При выключенном JavaScript оба аккордеона трансформируются в двухуровневый список.

Поехали. Будем использовать следующую разметку:

<ul id="accordion">
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>
</li>

<li class="active">
<a href="#">Item 2</a>
<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>
</li>

<li>
<a href="#">Item 3</a>
<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>
</li>

<li>
<a href="#">Item 4</a>
<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>
</li>
</ul>

С разметкой всё просто: обычный двухуровневый список; предполагается, что меню Item2 активно (то есть должно быть развёрнуто).

Оформим аккордеон при помощи CSS:

Покажем уродство IE6, не понимающего CSS 2.1:

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

За использование пяти лишних правил я и не люблю IE6 (и это мы еще используем простую разметку).

Переходим к JavaScript. В данных примерах я использую библиотеки Prototype и Scriptaculous Effects (всё очень легко переводится на jQuery).
Вариант 1: независимые элементы меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
new Effect.toggle(ul.toggleClassName('collapsed').toggleClassName('expanded'), 'blind');
}
}
);

Рабочий пример для первого варианта.

Вариант 2: развёрнуто не более одного меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
if (ul.hasClassName('collapsed')) {
var c = $$('#accordion ul:not([class="collapsed"])')[0];
if (c) {
new Effect.BlindUp(c.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
new Effect.BlindDown(ul.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
);

Рабочий пример для второго варианта.

Всё очень просто!

Размещение блока неизвестного размера в центре страницы при помощи CSS

Vladimir — Tue, 01 Apr 2008 06:43:33 +0000

Как разместить блок неизвестного размера точно в центре страницы

Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".

Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее

Статья, на которую я наткнулся — это перевод статьи Криса Койера (Chris Coyier) Quick CSS Trick: How To Center an Object Exactly In The Center. При этом высота и ширина центрируемого объекта в статье полагаются известными. Что ж, я ожидал чего-то большего.

Я сначала вкратце опишу идею Криса, потом расскажу, почему так не надо делать и затем покажу, что простого решения, удовлетворяющего всем требованиям, нет

Начнём. Пусть у нас имеется, например,

размерами 200×100 пикселей. Поступаем следующим образом:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* 50% высоты */
margin-left: -100px; /* 50% ширины */
height: 100px;
width: 200px;
}

Начнём с того, что IE6 position: fixed очень плохо понимает. Для него нужно добавить небольшой хак:

* html .centered {
position: absolute;
}

Теперь о минусах:

размеры блока должны быть известны;
при уменьшении окна так, чтобы оно перекрывало отцентрированный объект, скроллер хотя и появляется, но прокрутить отцентрированный объект не сможет (из-за position: fixed);
при уменьшении ширины окна можно дойти до такого размера, когда у объекта границы станут отрицательными.

Теперь о реализации центрирования в общем виде (считаем, что высота объекта нам неизвестна; ширина же должна быть известной, так как блочный элемент, не имеющий явно заданной ширины автоматически получает width: 100%). Решение основывается на идеях, представленных в следующих статьях:

Разметка:

<body>
<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere?
</div>
</div>
</div>
</body>

Прочитавшим статью "Вертикальное выравнивание без таблиц" должно быть ясно, откуда "растут ноги" у этой разметки.

Стили будут почти аналогичными приведённым в той статье, но с небольшими изменениями для IE.
Начнём со стилей для нормальных браузеров:

html {
overflow: auto;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#outer {
height: 100%; /* В этом случае нельзя использовать min-height. Для таблиц (элементов с display: table) мир устроен иначе */
display: table;
vertical-align: middle;
width: 600px; /* Если ширина не задана явно, будет 100% */
margin: 0 auto;
}

#middle {
display: table-row;
vertical-align: middle;
}

#inner {
display: table-cell;
vertical-align: middle;
}

Теперь стили для Ишака. Я бы поместил их в условный комментарий, например, так:

Вышеприведённый условный комментарий не должен работать для IE8, и это сделано специально: во-первых, IE8 поддерживает display: table, display: table-row и display: table-cell; во-вторых, будучи бетой, он не поддерживает vertical-align ни в каком виде. В общем, когда Microsoft выпустит полноценный браузер, тогда и будем думать

Стили для Internet Explorer:

* > html body { /* Выравниваем блок по центру для IE4-IE5.5 */
text-align: center;
}

#outer {
position: relative;
}

#middle {
top: 50%;
position: relative; /* Не используем абсолютное позиционирование, чтобы избежать проблем с прокруткой */
width: 100%;
}

#inner {
position: relative;
top: -50%;
}

Если посмотреть на то, что получилось, можно заметить, что это один из тех случаев, когда код работает корректно в IE6, но не в IE7 (последний будет показывать совершенно ненужный отступ снизу). Если вспомнить статью "Вертикальное выравнивание без таблиц"), то там мы ставили overflow: hidden элементу #outer, чтобы избежать подобного рода неприятностей в IE6/7. И, хотя в IE6 можно обойтись и без этого (перейдя от абсолютного позиционирования к относительному), с IE7 всё не так просто. В качестве быстрого исправления можно предложить такой вариант:

*:first-child+html #outer {
overflow-x: hidden;
}

Что характерно, будет работать хоть overflow-x, хоть overflow-y.

В результате получаем код, который работает нормально везде, кроме IE7: в IE7 при уменьшении размера окна по вертикали полоса прокрутки появляться не будет. Сделать нормальную прокрутку непосредственно для элемента #outer также представляется проблематичным — нижний отступ будет слишком большим. Поэтому остаётся одно решение — таблица. Причём можно сделать так, что таблицу будет видеть только IE7:

<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</div>
</div>

По большому счёту, это извращение — ибо проще всего использовать таблицу для всех браузеров. Но проще не значит лучше, ибо очень часто встречаются ситуации, когда заказчики требуют, чтобы вёрстка была семантической (а когда видят "незапланированную таблицу", начинают громко ругаться). Правда, в этом случае для IE7 семантика теряется, но, как заметил Максим Покровский, для него [IE], вообще, много чего теряется….

Итак, для комбинированного решения у нас получаются следующие стили для IE:

* > html body {
text-align: center;
}

* html #outer {
position: relative;
}

* html #middle {
top: 50%;
position: relative;
width: 100%;
overflow: auto;
}

* html #inner {
position: relative;
top: -50%;
overflow: auto;
}

*:first-child+html table.outer {
height: 100%;
width: 600px;
margin: 0 auto;
}

*:first-child+html table.outer tbody {
vertical-align: middle;
}

Результат можно посмотреть на этой странице.

Есть еще один вариант решения, но он полагается на использование JavaScript в IE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

html {
display: table;
overflow: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

.item {
margin: 0 auto;
width: 600px;
}
</style>

</head>
<body>
<div class="item">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</body>
</html>

Результат можно посмотреть здесь.

Подборка CSS-хаков для различных браузеров

Vladimir — Mon, 24 Mar 2008 21:50:52 +0000

Тонкая настройка CSS в различных браузерах

В Internet есть много статей, посвященных вопросу "to hack or not to hack". Я не хочу обсуждать этот "извечный вопрос", только замечу: что бы там ни говорили противники хаков, хаки весьма и весьма популярны (к счастью или сожалению). Я решил сделать небольшую подборку CSS-хаков для различных браузеров. По сути дела, эта статья является компиляцией очень многих источников.

CSS-хаки для Gecko

Gecko — движок для отображения web-страниц, используемый в браузерах на основе Mozilla: Firefox, Netscape, SeaMonkey, Flock, Songbird, Beonex, K-Meleon, Camino, Galeon, Epiphany, Kazehakase, Skipstone.

Gecko 0.6: Netscape 6.0;
Gecko 0.9.4: Netscape 6.2;
Gecko 0.9.7: Galeon 1.0.2;
Gecko 1.0.1: Netscape 7.0, Beonex 0.8.2;
Gecko 1.1: Skipstone 0.8.3;
Gecko 1.2b: FireFox 0.1;
Gecko 1.4.1: Epiphany 1.0.4
Gecko 1.5: K-Meleon 0.8.2;
Gecko 1.7.5: Netscape 8, Galeon 2.0, Kazehakase 0.2.8;
Gecko 1.7.13: FireFox 1.0.8;
Gecko 1.8.0: FireFox 1.5, SeaMonkey 1.0, Flock 0.7, Songbird 0.2, K-Meleon 1.02, Camino 1.0;
Gecko 1.8.1: FireFox 2.0, Netscape 9, SeaMonkey 1.1, Flock 1.0, K-Meleon 1.1, Camino 1.5.5, Epiphany 2.16, Skipstone 1.0.0;
Gecko 1.9b: FireFox 3.0b, SeaMonkey 2.0, Songbird 0.3.

Правила, которые понимает только Gecko/Netscape 4

Netscape 4

Данный хак известен как "Caio hack" (в честь Caio Chassot, его обнаружевшего).
Срабатывает в Opera 5 (Win и Mac)

/*/*/ /*/
something {}
/**/

Старые Gecko, точные версии неизвестны (работает для OmniWeb 5)

Есть подозрение, что работает только в Gecko 1.2

html*#id:not([lang*=""]) something {}

Старые Gecko, точные версии неизвестны (не работает для OmniWeb 5)

Есть подозрение, что работает только в Gecko 1.2
Не валидирующийся CSS

html:not([lang*=""])*#id something {}

Gecko 1.0+

html:not([xmlns*=""]) something {}

Gecko 1.0-1.8 включительно

Данный хак основан на том, что значения атрибутов id и class не чувствительны к регистру для этих версий Gecko.

html:not([xmlns*=""]) #id[id="ID"] something,
html:not([xmlns*=""]) .class[class="CLASS"] something {}

Gecko 1.8+

html:not([xmlns*=""]):not(:only-child) something {}

Gecko 1.9

Gecko 1.9 чувствителен к регистру для значений атрибутов id и class (что согласуется со спецификацией CSS).

html:not([xmlns*=""]) #id:not([id="ID"]) something,
html:not([xmlns*=""]) .class:not([class="CLASS"]) something {}

Фильтры для Gecko

Старые Gecko (1.0?), включая OmniWeb 5

html:/* */not([xmlns*=""]) something {}

OmniWeb 4 и Netscape 4

Netscape 4:

Netscape 4 понимает только media="screen", другие значения (или их комбинацию с screen) Netscape 4 понимать отказывается.

Netscape 4 принципиально не поддерживает @import:

@import url(style.css);

element#id {}

Netscape 4 (и IE8 beta1)

/*/*/
something {}
/**/

CSS-хаки для Trident

Trident — движок, используемый Internet Explorer for Windows, начиная с IE4.

Trident: IE4;
Trident II: IE5;
Trident III: IE5.5;
Trident IV: IE6;
Trident V: IE7;
Trident VI: IE8.

Правила, которые понимает только Trident

Trident I-II (IE4-5)

Также затрагивает IE5/Mac

* > html something {}

Trident I-IV (IE4-6)

/*\*/
* html something {}
/**/

Так получилось, что * html понимает и IE/Mac, поэтому когда нужно спрятать правило от IE/Mac, приходится использовать /*\*/ ... /**/. В случае, когда правило нужно применить ко всем IE, младше седьмого, можно просто использовать * html.

Есть альтернативный способ (не валидирующийся CSS; по непроверенным данным, затрагивает IE4-5/Mac):

something {
_property: value;
}

Trident II-V (IE5-7)

Не валидирующийся CSS

something {
*property: value;
}

Trident II (IE5)

В народе носит название "IE5/Win Bandpass Filter"

@media tty {
i { content: "\";/*" "*/}}; @import 'ie5.css'; {}{;}/*";}
}/**/

Trident III (IE5.5)

В народе носит название "IE5.5 Bandpass Filter"

@media tty {
i {content: "\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/**/

Trident II/III (IE5.x)

В народе носит название "Mid Pass Filter"

@media tty {
i {content: "\";/*" "*/}} @import 'ie5x.css' /*";}
}/**/

Trident IV (IE6)

Trident V (IE7)

*+html/*/* /**/ body something {}

Trident VI (IE8)

*:first-child+/**/html something {}

/*/ something {} /**/

head/*/+body/**/ something {}

Trident V-VI (IE7-8)

*:first-child+html something {}

something.class[className="class"] {}

Фильтры для Trident

Trident (IE4)

Также затрагивает IE4/Mac и Netscape 4

@import "styles.css"

Trident I-III (IE4-5.5)

Также затрагивает Netscape 4

something {
voice-family: "\"}\"";
voice-family: inherit;
property: value;
}

Trident V-VI (IE7-8)

something.class:not([className="class"]) {}

Trident VI (IE8)

html/*/* /**/ body something {}

CSS-хаки для Tasman

Tasman — движок для IE/Mac. Microsoft больше не поддерживает IE/Mac, поэтому данный браузер можно считать мёртвым.

Правила, которые понимает только Tasman

IE5

Известен в народе как "IE5 Mac Bandpass Filter".

/*\*//*/
something {}
/**/

По последним сведениям, хак срабатывает в IE8 beta1.

Фильтры для Tasman

IE4

Также затрагивает IE4/Win и Netscape 4

@import "styles.css"

IE5

/*\*/
something {}
/**/

CSS-хаки для Presto

Presto — движок, используемый в Opera 7+.

Opera 7.5-9.2x

@media all and (min-width:0px) {
html:lang(e) something {}
}

Opera 9-9.2x

@media all and (min-width:0px) {
html:lang(e) head~body something {}
}

Opera 9

html:first-child something {}

Opera 9+

@media all and (min-width:0px) {
head~body:lang(en) something {}
}

Opera 9.5+

@media all and (min-width:0px) {
:root head~body:lang(en) something {}
}

@media all and (min-width:0px) {
head~body:last-child something {}
}

Safari, WebKit, Shiira и OmniWeb

Safari 2-, KHTML, Shiira 1.22, Shiira 2 и OmniWeb 5/5.5

html[xmlns*=""] body:last-child something {}

body:last-child:not(:root:root) something {}

Safari 3

body:first-of-type something {}

WebKit

@media all and (min-width: 0px) {
body:not(:root:root) something {}
}

Список источников:

Поддержка CSS-селекторов различными браузерами

Оригинальная версия

	Trident	Tasman	Gecko	WebKit	KHTML	Presto	iCab
`*`	7.0	0	1.0	85	Yes	7.0	3.0
`E`	4.0	0	1.0	85	Yes	7.0	Yes
`E.class`	7.0	Buggy	1.0	85	Yes	7.0	Yes
`E#id`	4.0	0	1.0	85	Yes	7.0	Yes
`ns\|E`	No	No	1.0	No	Yes	8.0	No
`E F`	4.0	0	1.0	85	Yes	7.0	Yes
`E > F`	7.0	0	1.0	85	Yes	7.0	3.0
`E + F`	7.0	0	1.0	85	Yes	7.0	3.0
`E ~ F`	7.0	0.9	1.7	412	3.3.2	9.0	3.0
`E[attr]`	7.0	0.9	1.0	85	Yes	7.0	3.0
`E[attr="value"]`	7.0	0.9	1.0	Yes	Yes	7.0	3.0
`E[attr~="value"]`	7.0	0.9	1.0	Yes	Yes	7.0	3.0
`E[attr\|="value"]`	7.0	0.9	1.0	Yes	Yes	7.0	3.0
`E[attr^="value"]`	7.0	No	1.0	Yes	3.4	8.02	3.0
`E[attr$="value"]`	7.0	No	1.0	Yes	3.4	9.0	3.0
`E[attr*="value"]`	7.0	No	1.0	Yes	3.4	9.0	3.0
`E[ns\|attr]`	No	No	1.0	No	3.4	9.0	No
`E:link`	3.0	0	1.0	85	Yes	7.0	Yes
`E:visited`	3.0	0	1.0	85	Yes	7.0	Yes
`E:active`	Partial	0	1.0	85	Yes	7.0	Yes
`E:hover`	7.0	0.9	1.0	419.3	Yes	7.0	3.0
`E:focus`	No	0	1.0	Yes	Yes	7.0	Yes
`E:first-child`	7.0	0	1.0	85	Yes	7.0	3.0
`E:lang()`	No	0	1.2	522	3.4	7.5	3.0
`E:root`	No	0.1	1.0	85	3.4	9.5a	No
`E:first-of-type`	No	0.9	No	522	3.4	9.5a	No
`E:last-child`	No	0.9	1.0	Buggy	3.4	9.5a	No
`E:last-of-type`	No	0.9	No	Buggy	3.4	9.5a	No
`E:only-child`	No	0.9	1.8	Buggy	3.4	9.5a	No
`E:only-of-type`	No	0.9	No	Buggy	3.4	9.5a	No
`E:nth-child`	No	0.9	No	No	3.4	9.5a	No
`E:nth-last-child`	No	0.9	No	No	3.4	9.5a	No
`E:nth-of-type`	No	0.9	No	No	3.4	9.5a	No
`E:nth-last-of-type`	No	0.9	No	No	3.4	9.5a	No
`E:target`	No	0.9	1.3	Partial	3.4	9.5a	No
`E:empty`	No	0.9	1.8	412	3.4	9.5a	No
`E:not()`	No	0.9	1.0	85	3.4	9.5a	No
`E:enabled`	No	0.9	1.8	522	3.4	9.0	No
`E:disabled`	No	0.9	1.8	522	3.4	9.0	No
`E:checked`	No	No	1.0	522	3.4	9.0	No
`E:indeterminate`	No	0.9	No	No	No	No	No
`E:default`	No	No	1.9	No	No	9.0	No
`E:valid`	No	No	1.8	No	No	9.0	No
`E:invalid`	No	No	1.8	No	No	9.0	No
`E:in-range`	No	No	1.8	No	No	9.0	No
`E:out-of-range`	No	No	1.8	No	No	9.0	No
`E:required`	No	No	No	No	No	9.0	No
`E:optional`	No	No	No	No	No	9.0	No
`E:read-only`	No	No	Experimental	No	No	9.0	No
`E:read-write`	No	No	Experimental	No	No	9.0	No
`E:first-letter`	5.5	0	1.0	85	Yes	7.0	3.0
`E:first-line`	5.5	0	1.0	85	Yes	7.0	3.0
`E:before`	No	No	1.0	85	Yes	7.0	3.0
`E:after`	No	No	1.0	85	Yes	7.0	3.0
`E::before`	No	No	1.5	85	3.4	7.0	Yes
`E::after`	No	No	1.5	85	3.4	7.0	Yes
`E::first-letter`	No	0.9	1.5	85	3.4	7.0	Yes
`E::first-line`	No	0.9	1.5	85	3.4	7.0	Yes
`E::selection`	No	0.9	Experimental	412	3.4	No	No
`E::value`	No	No	No	No	No	No	No
`E::choices`	No	No	No	No	No	No	No
`E::repeat-item`	No	No	No	No	No	No	No
`E::repeat-index`	No	No	No	No	No	No	No

Кросс-браузерное всплывающее гибридное меню на CSS без использования JavaScript

Vladimir — Sun, 23 Mar 2008 04:33:58 +0000

Реализация кросс-браузерного горизонтального меню на чистом CSS 3 без использования JavaScript

Ранее я уже говорил о причинах, побудивших меня сделать меню на чистом CSS без использования JavaScript. Борясь с IE6, у меня получилась красивая версия вертикального меню — его реализация оказалась проще. Теперь обещанное горизонтальное меню.

Требования, которые я поставил:

Нельзя использовать JavaScript;
Полученный код (CSS и XHTML) должен успешно проходить валидацию.

Разметка для тестового примера была взята из этой статьи (которая и сподвигла меня на написание своего меню). В предыдущей статье код пришлось немного переработать (а всё из-за необходимости поддерживать IE6), и именно эту переработанную версию кода мы будем использовать.

<ul id="menu">
<li>
<a href="#">Renaissance</a>

<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>

</li>

<li>
<a href="#">Art Nouveau</a>

<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>

</li>

<li class="on">
<a href="#">Modern</a>

<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>

</li>

<li>
<a href="#">Postmodern</a>

<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>

</li>

<li>
<a href="#">Digital</a>

<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>

</li>
</ul>

Таблица стилей для браузеров, поддерживающих CSS 2.1:

#menu, #menu li, #menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu {
display: block;
width: 100%;
position: relative;
}

#menu li {
float: left;
height: 2em;
line-height: 2em;
}

#menu li a {
float: left;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
width: 100px;
}

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin-top: 1px;
width: 100%;
background: #FFF;
height: auto;
}

#menu li.on ul, #menu li:hover ul {
display: block;
z-index: 10;
}

#menu li:hover ul {
z-index: 100;
}

#menu li li a {
display: block;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

Презентационные стили:

#menu > li + li {
margin-left: -1px;
}

#menu li ul li + li {
margin-left: -1px;
}

#menu li a {
outline: 0;
text-decoration: none;
}

#menu li.on {
background: yellow;
}

#menu li:hover a, #menu li a:hover, #menu li a:hover a {
background: #EEE;
}

#menu li ul li:hover, #menu li ul li a:hover {
background: #EAFBFC;
}

Более детально это всё объяснено в предыдущей статье.

Теперь будем лечить IE6. У меня этот процесс занял несколько часов, но результат стоил того — оно работает!!!

* html #menu {
overflow-x: hidden; /* Скрыть побочный эффект следующего исправления */
}

* html #menu li ul {
display: block;
z-index: 1;
margin-top: 2px;
overflow: visible;
/* Это исправляет неверное определение ширины - абсолютное значение width: 100% без этих строк было бы равно ширине родительского */
padding-right: 1000em;
margin-right: -1000em;
}

* html #menu li.on a table,
* html #menu li a:hover table
{
visibility: visible;
}

* html #menu li.on a table ul {
z-index: -1; /* Ключевое исправление - без него меню правильно работать не будет. Предназначено для исправления последствий многочисленных багов в реализации z-index. Благодаря этому исправлению, все li a:hover table, находящиеся перед li.on table, будут нормально отображаться (не будут перекрываться li.on table) */
}

* html #menu li a:hover table ul {
z-index: 100;
}

* html #menu li a:hover {
position: static;
}

/* У таблицы теперь статическая позиция. Абсолютное/относительное позиционирование вносит ужасный бедлам в и без того глючную реализацию z-index в IE6. */
* html #menu table {
border-collapse: collapse;
visibility: hidden;
}

Замечания по реализации:

Из-за плохой поддержки z-index Ишаком возможны проблемы с border-top/bottom у крайних правых элементов меню;
Из-за того, что пришлось использовать overflow-x, CSS не валидируется в рамках спецификации CSS 2.1 (но проходит валидацию CSS 3).

Тестовая страница лежит здесь.