Ars Longa, Vita Brevis » IE6

Пять звёздочек без 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 ширину и отправить в плавание.

IEPNGFix и Google Maps

Vladimir — Wed, 09 Apr 2008 00:10:12 +0000

Как подружить IEPNGFix и Google Maps

Помогая по работе одному (одной) дизайнеру, я столкнулся с проблемой: страница с Google Maps отображалась нормально в нормальных (извиняюсь за каламбур) браузерах, но выглядела очень плохо в IE6 (в том плане, что вместо карты отображался серый фон и все элементы управления исчезли). К сожалению, объявлять IE6 мёртвым пока еще рано, чтобы просто проигнорировать этот баг.

Путем недолгих экспериментов было установлено, что виной всему IEPNGFix. Если полезть разбираться в код Google Maps (удачи!), то будет видно, что Google Maps реализует свой метод для борьбы с непониманием прозрачности PNG в IE6. Так получается, что метод Google конфликтует с IEPNGFix.

Конечно, самый простой метод — это убрать IEPNGFix и заменить PNG-файлы GIF-файлами. Но, во-первых, это не всегда возможно, а во-вторых, просто не наш метод. К счастью, решение лежит на поверхности и является довольно простым.

Предположим, что карта Google отображается в

. Тогда для исправления последствий использования IEPNGFix нам нужно добавить следующую строку в CSS:

#map, #map * { behavior: none; }

Вот и всё!

Google Adsense и XHTML

Vladimir — Wed, 02 Apr 2008 18:50:36 +0000

Как заставить Adsense работать на XHTML-страницах

Не секрет, что Adsense для вставки рекламы использует . Не секрет, что для вставки этого используется самый простой метод — document.write(). Какими же проблемами это грозит? Частично отвечая на вопрос, почему это не работает для XHTML-документов?

Сразу оговорюсь, что не работает это не для всех документов, а только для тех, которые, как и полагается XHTML-документам, выдаются с Content-Type: application/xhtml+xml.

Итак, для "настоящих XHTML-документов" возникает две проблемы:

document.write() не работает;
В XHTML 1.1/XHTML 1.0 Strict элемента нет.

Основной является первая проблема. Тем не менее, даже если заменить document.write другой конструкцией (document.createElement()/document.createElementNS() + node.appendChild() или аналогичной), то в результате получим невалидный XHTML-код (который может не отображаться в валидирующих браузерах — я слышал, что это свойственно Konqueror).

Как же с этим бороться? Как уже было сказано, в современных версиях XHTML элемента нет. Но есть другой, не менее известный элемент — . Теоретически можно сохранить скрипт Google AdSense локально, изменить его, научив использовать document.createElement()/document.createElementNS() и вместо . Вот только имеет ли это смысл?

Идём дальше. Как уже было сказано выше, источник проблем здесь — специфический Content-Type (или, если смотреть глубже, кривые руки разработчиков Google — кому какой вариант нравится больше). То есть если страница будет выдаваться как, например, text/html, то AdSense будет работать. А если это соединить с , то получим готовое решение.

Выглядеть это будет так: на странице, на которой должны быть объявления, вместо кода Google Adsense помещаем следующий код:

Сама же страница adsense.html будет выглядеть следующим образом:

<html>
<head>
<title>Google Adsense - Disable Me in Adblock :-)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; border: 0; }
</style>
</head>
<body>
<script type="text/javascript">//
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</body>
</html>

Разумеется, следует использовать свои параметры AdSense.

Если сервер настроен выдавать статические .html-страницы с Content-Type: application/xhtml+xml (или любым другим, кроме text/html), то это, разумеется, надо поправить (как именно — зависит от сервера). Например, для Apache это может выглядеть следующим образом (предполагается, что эти строки будут добавлены в файл .htaccess, находящийся в том же каталоге, что и adsense.html):

<Files adsense.html>
ForceType text/html
Files>

Update: мне всё же интересно, будут ли объявления в этом случае контекстно-зависимыми? Ведь по большому счету, referer'ом скрипта http://pagead2.googlesyndication.com/pagead/show_ads.js будет страница adsense.html, а не та, на которой эта реклама должна отображаться… И проверить из-за проблем с аккаунтом не могу

Update: Stu Nicholls нашел еще одну скрытую ошибку: дело в том, что при нажатии на ссылку в рекламном блоке, Internet Explorer откроет её не в главном окне (как это должно быть), а внутри тэга .

Stu Nicholls предлагает следующее решение проблемы: использовать условные комментарии для того, чтобы не использовать в IE (в любом случае, IE пока не понимает application/xhtml+xml, так что использование небольшого хака для IE не будет критичным). Я немного изменил предложенный код так, чтобы IE вообще не видел тэг (нечто подобное было сделано в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript")

Размещение блока неизвестного размера в центре страницы при помощи 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 без использования 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).

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

Кросс-браузерное одноуровневое вертикальное меню без JavaScript

Vladimir — Sun, 23 Mar 2008 01:45:46 +0000

Создание вертикального кросс-браузерного меню без использования JavaScript — чистый CSS!

Так случилось, что срочно понадобилось сделать горизонтальное меню, причем для проекта, который нужно было сдавать вчера Естественно, самому писать не было времени, нужно было взять что-то готовое. Я недавно прочитал статью «Всплывающее гибридное меню на CSS», поэтому взял код именно оттуда. Но не в этом дело. У подавляющего большинства меню камнем преткновения становится IE6 — а всё из-за того, что он понимает :hover только для тэга <a>. Когда-то у меня был заказчик, требовавший, чтобы всё одинаково работало с выключенным JavaScript'ом; вспомнив его, я решил попробовать сделать меню, работающее безо всякого JavaScript. Так получилось, что попутно я нашел еще один очень интересный глюк в IE6 (о нём далее), в борьбе с которым у меня получилось вертикальное меню.

Друг заметил, что смысла уродоваться не было, ибо есть whatever:hover, который применяется многими разработчиками. Для всех, кто такого же мнения, отмечу, что whatever:hover — это HTC-компонент, суть JavaScript, вследствие чего при выключенном JavaScript работать не будет. Помимо этого, whatever:hover не будет работать при динамическом построении меню. И еще его использование негативно сказывается на отклик IE при начальном рендеринге (в смысле, когда весь DOM уже загружен, и наступило время выполнять deferred-скрипты и грузить картинки).

Приступим.
Разметку я взял все из той же статьи, она (разметка) имеет следующий вид:

<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>
<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 {
height: 2em;
}

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

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

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

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

#menu li:hover ul {
display: block;
}

#menu li ul li {
float: none;
width: 100%;
}

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

Вся магия содержится в двух правилах:

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

#menu li:hover ul {
display: block;
}

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

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

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

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

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

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

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

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

Первые два правила позиционируют элементы списков так, чтобы border-right (border-bottom) предыдущего элемента совпадал с border-left (border-top) следующего.

Теперь переходим к IE6. В нём не работает второе магическое правило (#menu li:hover ul), так как IE6 воспринимает :hover только на элементах .

Первая мысль — закрывать для IE6 <a> не до списка, а после. Мысль хорошая, но просмотр дерева в IE Developer Toolbar показал, что IE как-то «криво» понимает код (в принципе, здесь Ишак прав: невалидный код каждый волен понимать так, как может). Следовательно, надо список «обернуть» во что-нибудь, но так, чтобы <a> нормально работал. И совершенно случайно я вспомнил один случай, когда разгребал одну ужасную табличную вёрстку (а уровень вложенности таблиц переваливал там за 16), и открытый тэг <a> превратил всю таблицу в сплошную гиперссылку. Чем чёрт не шутит, я решил попробовать.

Код стал таким:

<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>

Получилось! Ишак нормально распарсил код и сгенерировал нормальное дерево:

Теперь нужно немного поколдовать, чтобы заставить всё работать как надо.
Первое, что приходит в голову — это такие вот стили:

* html #menu li ul {
display: block;
}

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

* html #menu li a:hover table {
display: block;
}

* html #menu table {
position: absolute;
border-collapse: collapse;
top: 0;
left: -1px;
display: none;
}

Иными словами, мы всю магию перенесли на уровень выше (так как теперь у нас <ul> обёрнут <table>). Правило position: static в * html #menu li a:hover — это вуду, без этого не работает (как вариант, можно задать background с цветом, отличным от transparent).

И тут начинаются проблемы. Я, конечно, всегда подозревал, что IE написан очень криво, но чтобы так криво… После нескольких наведений на меню получается такая картина:

То есть таблицы как бы нет (display: none), но место в потоке она занимает, и при этом хотя текста дочерних элементов не видно, но border остался. Нет таблицы, и в то же время есть. Чудеса.

От таких чудес невольно опускаются руки. Потратив пару часов на эксперименты, я чудом нашел рабочую комбинацию: вместо display: none/block нужно использовать visibility: visible/hidden. Не знаю, почему, но оно работает. Но всё же мне интересно, что курили разработчики, писавшие Ишака?

Страница с рабочим кросс-браузерным меню находится здесь. Никакого JavaScript, только CSS!

Update: еще одна версия вертикального меню.

IE6/7: слишком широкие кнопки

Vladimir — Sun, 16 Mar 2008 08:57:51 +0000

Как исправить глюк IE6/7, связанный с расползанием кнопки с длинным текстом

Читая один замечательный блог, я наткнулся на заметку о том, что в IE6/7 кнопки c "длинным текстом" становятся очень длинными.

Я не удержался и проверил: действительно. Причем только в IE6 и IE7, в IE8 (на удивление) всё в порядке.

Тестовая разметка (взята из исходной статьи):

Результат (IE7):

В IE6 аналогично.

Первым делом я стал грешить на стили по умолчанию (например, padding, заданный в процентах от ширины). Поэтому решил проверить очень простым скриптом:

var b = document.getElementById('test');
var s = (b.currentStyle) ? b.currentStyle : b.ownerDocument.defaultView.getComputedStyle(b, '');
for (var prop in s) {
document.write('' + prop + ': ' + s[prop] + '
');
}

Увы… Зато, кому интересно, получились такие дефолтные стили в разных браузерах:

	FF2	IE6	IE7	IE8	Opera 9	Safari 3
background	rgb(212, 208, 200)	rgb(212, 208, 200)	rgb(212, 208, 200)	rgb(212, 208, 200)	transparent (???)	rgb(192, 192, 192)
border	2px outset rgb(212, 208, 200)	2px outset rgb(0, 0, 0)	2px outset rgb(0, 0, 0)	3px outset rgb(0, 0, 0)	2 both transparent (???)	0 none rgb(0, 0, 0)
display	inline	inline	inline	inline-block	inline	inline-block
font	normal normal 400 13.3333px/normal "MS Shell Dlg"	normal normal 400 10pt/normal "MS Shell Dlg"	normal normal 400 10pt/normal "MS Shell Dlg"	normal normal 400 10pt/normal Arial	normal normal normal relative/normal Arial	normal normal normal 11px/normal "Lucida Grande"
height	18px	auto	auto	auto	auto	18px
margin	0	auto	auto	auto	0	2px
overflow	visible	hidden	hidden	hidden	visible	visible
padding	0 6px	0	0	1px 8px	1px 8px	0 8px

Видим, что у всех браузеров, кроме IE, overflow установлено в visible. Хотя overflow не должно играть здесь никакой роли, интересно проверить, как IE себя поведёт при дефолтных стилях FireFox. Меняем разметку:

Сработало! Вот они, чудеса:

Я не берусь объяснять, почему такое вот исправление сработало. Как говорил классик,

Why is this happening? Don't ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected. The simple fact is it does happen.

Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты

Vladimir — Fri, 14 Mar 2008 07:33:32 +0000

IE8 Beta 1 не оправдывает своих ожиданий…

Не так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот опять оказалось, что с выходом IE8 Beta это было всё напрасно. Как и многие, я не рискнул устанавливать IE8 на основную машину, поэтому поставил на виртуальную. Затем зашёл на парочку сайтов, которые отображаются нормально во всех остальных браузерах… Я был потрясён и разочарован…

Возникает чувство, что Micro$oft называет свои alpha-релизы бетами. Они делали акцент на том, что MS IE8 проходит тест ACID2, так гордились этим… А оказалось, что всё как обычно: убрали один старый баг, внесли десяток новых.

Что меня шокировало больше всего: vertical-align больше не работает. Не работает и valign="middle" для элементов <td>. <br style="clear: both"/> не всегда работает. Ширина элемента вычисляется довольно криво (тем не менее, тест ACID2 проходится). IE8 поддерживает хаки для IE7. Например, этот код сработает и в IE7, и в IE8:

*:first-child+html p {
color: red;
}

Так вот Micro$oft исправил поддержку CSS. Кстати, интересно, почему тогда не срабатывает старый хак для IE6 (* html p)?

В соответствии со стандартами CSS:

The :first-child pseudo-class represents an element that is the first child of some other element.

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Таким образом, *:first-child+html будет читаться как «элемент html, предшествующий (любому) элементу, который является первым потомком неуказанного элемента». То есть это будет соответствовать такой вот структуре:

<div id="unknown_element">
<div id="first_child">*:first-child</div>
<div id="adjacent">
*:first-child+#adjacent
<div id="test">*:first-child+#adjacent #test</div>
</div>
</div>

Для удовлетворения любопытства:

#unknown_element { background: yellow; height: 100px; padding: 5px; }
#first_child { background: blue; height: 50px; }
#adjacent { background: red; height: 50px; }
#test { height: 40px; margin: 5px 0; background: white; }

Выглядеть должно так:

Теперь добавляем стиль и смотрим:

*:first-child+#adjacent #test { background: green; } /* аналог *:first-child+html #test */

Результат будет таким (что в нормальном браузере, что в IE7, что в IE8):

А теперь самое интересное: убираем предыдущий стиль и добавляем аналогичный хаку для IE6:

* #adjacent #test { background: lime; } /* аналог * html #test */

И выгядит точно также (с поправкой на цвет):

Внимание, вопрос: если оба хака сработали, то почему *:first-child+html срабатывает, а * html — нет? И не здесь ли кроется ответ, что в IE7 *:first-child+/**/html не работает, а в IE8 работает? Возникает такое чувство, что M$ разбирает CSS регулярными выражениями (убирает лишние пробелы, комментарии и т.п.), а затем теми же регулярными выражениями убирает хаки типа * html? Ведь по логике вещей должны срабатывать что один, что другой. И эксперимент показал, что на обычных элементах работает, а вот на html — нет. В IE8 усовершенствовали парсер, поэтому он убирает /**/ из селектора. А так как IE8 умеет эмулировать IE7, то и попадается он на те же самые приколы Ну не будет Micro$oft писать новый парсер

Но, исправляя старые ошибки, разработчики добавили новые. Например:

/*\*//*/
body { background: red !important; }
/**/

Этот хак использовался для задания стилей для IE/Mac. Но вот IE8 тоже теперь его понимает (возможно, благодаря жадному регэкспу, чистящему /* */ в селекторах).

И вот мне интересно: ACID2 проходится благодаря тому, что его структура известна? Интересно, а что будет, если заменить одни элементы другими? Или переставить стили местами? Сработает?

Что же, ждем следующую бету… Только бету, которая не будет альфой.

IE6, Sortable и whatever:hover

Vladimir — Wed, 16 Jan 2008 04:20:42 +0000

Как подружить whatever:hover и Scriptaculous

Работая над одним сайтом, столкнулся с одной проблемой: в IE6 при использовании whatever:hover для выпадающего меню, построенного чисто на CSS, и Scriptaculous (а именно, Sortable, причем для элемента, не имеющего никакого отношения к меню) возникало непонятное мерцание.

Страница, на которой проявляется мерцание (только IE6).
То, что «виноват» именно Scriptaculous, доказывается очень легко: в исходном тексте test.html комментируется строка, создающая Draggable:

var user_id = 5060;
var id = 'user_' + user_id;

if ($(id)) {
Sortable.create(
$(id),
{
}
);
}

Результат можно увидеть здесь — мерцание исчезло.

Путём долгих и нудных экспериментов были найдены строки, вызывающие такое поведение:

Таким образом, если мы уберём Event.observe(document, "mousemove", this.eventMouseMove), то мерцание исчезнет. Естественно, это не выход, так как весь код, который прямо или косвенно использует Draggables, перестанет работать.

Попытаемся решить проблему (лезть в чужой код ой как не хочется). Одно ясно: вызов Event.observe(document, "mousemove", this.eventMouseMove) придется закомментировать. Добавлять обработчик события придется при активации draggable (в функции Draggables.activate()), а убирать — в Draggables.deactivate() и Draggables.endDrag(). Возможно, хватит просто endDrag(), но ничего плохого не случится, если для подстраховки изменим оба метода.

Исходный код:

register: function(draggable) {
if(this.drags.length == 0) {
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
this.eventKeypress = this.keyPress.bindAsEventListener(this);

Event.observe(document, "mouseup", this.eventMouseUp);
Event.observe(document, "mousemove", this.eventMouseMove); //<-- нужно закомментировать
Event.observe(document, "keypress", this.eventKeypress);
}
this.drags.push(draggable);
},

activate: function(draggable) {
if(draggable.options.delay) {
this._timeout = setTimeout(function() {
Draggables._timeout = null;
window.focus(); //<-- здесь нужно повесить обработчик события
Draggables.activeDraggable = draggable;
}.bind(this), draggable.options.delay);
} else {
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
//<-- здесь нужно повесить обработчик события
this.activeDraggable = draggable;
}
},

deactivate: function() {
this.activeDraggable = null; //<-- здесь нужно убрать обработчик события
},

endDrag: function(event) {
if(this._timeout) {
clearTimeout(this._timeout);
this._timeout = null;
}
if(!this.activeDraggable) return;
this._lastPointer = null;
this.activeDraggable.endDrag(event);
this.activeDraggable = null; //<-- здесь нужно убрать обработчик события
},

Окончательный результат:

register: function(draggable) {
if(this.drags.length == 0) {
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
this.eventKeypress = this.keyPress.bindAsEventListener(this);

Event.observe(document, "mouseup", this.eventMouseUp);
Event.observe(document, "keypress", this.eventKeypress);
}
this.drags.push(draggable);
},

activate: function(draggable) {
if(draggable.options.delay) {
this._timeout = setTimeout(function() {
Draggables._timeout = null;
window.focus();
Event.observe(document, "mousemove", this.eventMouseMove);
Draggables.activeDraggable = draggable;
}.bind(this), draggable.options.delay);
} else {
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
if (draggable) {
Event.observe(document, "mousemove", this.eventMouseMove);
}
this.activeDraggable = draggable;
}
},

deactivate: function() {
this.activeDraggable = null;
Event.stopObserving(document, "mousemove", this.eventMouseMove);
},

endDrag: function(event) {
if(this._timeout) {
clearTimeout(this._timeout);
this._timeout = null;
}
if(!this.activeDraggable) return;
this._lastPointer = null;
this.activeDraggable.endDrag(event);
this.activeDraggable = null;
Event.stopObserving(document, "mousemove", this.eventMouseMove);
},

Всё работает!
Патч в формате unified diff.