«Шестерка» метит в короли

За то время, что мы не виделись с вами, уважаемые читатели, по стране прогремело по меньшей мере пять праздников. Два государственных — День Победы и Первомай; один религиозно-бытовой — православная Пасха; и два профессиональных — День печати и День связи (которые ваш покорный слуга, опубликовавший с полсотни разнообразных работ во всяческих бумажных изданиях и приложивший так или иначе руку к самому прогрессивному коммуникационному средству — Интернету, был вправе отметить на вполне законных основаниях). Сегодня, кстати, тоже круглая дата — день 70-летнего юбилея московского метрополитена. И за него, родимый, мне тоже не грех поднять бокал.

Ближе к делу, однако… В минувший четверг, 12 мая, стукнуло ровно семь лет со дня утверждения спецификации CSS2 в качестве официальной рекомендации W3C. «А воз и ныне там», — почему-то упрямо вертится на языке…

Почему, впрочем, доподлинно известно. Доминирующий браузер — Internet Explorer 6.0 — хотя и позволяет нам использовать CSS-верстку, делает это, гм… неохотно, заставляя нас всячески ублажать его невообразимые капризы.

Читатели часто спрашивают меня, чем IE6 хуже Firefox’а или «Оперы». Будто бы сами не видят. Почитать о несовершенстве пользовательского интерфейса «Эксплорера» и об откровенных багах майкрософтовского браузера на ниве обработки HTML- и CSS-конструкций можно много где — ан нет, все равно спрашивают…

Я же на днях как раз заканчиваю один проект (о сущности коего расскажу несколько позже), в рамках которого мне довелось столкнуться с кое-какими темными сторонами характера IE6 и взять их себе на заметку. Разумеется, Америки я не открыл, да как-то и не собирался — но тем не менее мне показалось, что информацией этой есть смысл с читателями «Веб-анатомии…» поделиться. Что я, собственно, и делаю.

Итак…

Наш герой совершенно ни в какую не понимает следующих CSS-свойств (в алфавитном порядке): border-spacing, caption-side, empty-cell, max-height, max-width, min-height, min-width. Этот «расстрельный список», надо думать, гораздо шире — я перечислил только то, что поймал «по горячим следам».

IE6 не поддерживает фиксированного позиционирования блоков. Элементы, для которых свойство position принимает значение fixed, шестой «Эксплорер» рассматривает просто как блоки, принадлежащие нормальному потоку (position: static).

Флагманский браузер не ведает, что такое селекторы атрибутов, например, для него навеки останется загадкой правило навроде такого: input[type="text"] {border: solid 1px #c00}.

Не дружит IE6 и с псевдоклассами. Так, псевдокласса :first-child «Эксплорер» не понимает совсем, а динамические псевдоклассы :active, :focus и :hover умеет применять только к гиперссылкам и ни к каким другим элементам. Более того, сочетания псевдоклассов тоже не слишком-то благотворно влияют на психическое равновесие нашего распрекрасного браузера. Так, два следующих друг за другом правила наподобие таких:

a:link:hover {color: #369}
a:visited:hover {color: #666}

шестой «Эксплорер» норовит превратить в одно, совсем нам не интересное:

a:hover {color: #666}

IE6 полагает, что groove — это то же самое, что inset, а ridge — то же, что и outset (речь идет о значениях свойства border-style, определяющего тип рамки, окружающей тот или иной элемент). Если быть точнее, где-то на уровне подсознания шестой «Эксплорер» все-таки различает упомянутые пары ключевых слов, обозначая свою мудрость неподвластной уму простого смертного едва уловимой игрой цвета, но на типах рамок это, увы, никак не сказывается…

Если объем контента, содержащегося внутри блока, которому назначено свойство overflow со значением visible, превышает заданные линейные размеры этого блока, все нормальные браузеры в таком случае будут отображать содержимое подобного элемента за границами последнего. Но только не IE! «Эксплорер», наоборот, растянет линейные размеры блока до состояния их соответствия объему контента.

Наш герой не переваривает расширенный синтаксис директивы @import с указанием типа устройства вывода (например, конструкция вида @import url(pocketpc.css) handheld «Эксплорером» будет безжалостно проигнорирована).

Internet Explorer 6.0 не признает формат JPEG Progressive, отображая сохраненные в нем картинки наравне с файлами, представленными в формате JPEG Baseline, т. е. только после полной загрузки изображений. Впрочем, я повторяюсь.

«Качество поддержки» альфа-каналов в картинках формата PNG браузером от Microsoft — это уже притча во языцех, которую можно не обсуждать. Занятнее другое — случается, что браузер от Microsoft искажает цвета PNG-изображений с индексированной (т. е. жестко заданной!) палитрой. Это происходит, в частности, при сохранении PNG-файлов при помощи Photoshop CS или ImageReady CS, тогда как при отображении картинок, сохраненных, скажем, в ImageReady 1.0, такого эффекта не наблюдается. Означенные искажения незаметны, если картинка стоит особняком на контрастном фоне. Но когда речь заходит о точном совмещении цветов изображения и фона, фальшь становится видна невооруженным глазом. Firefox и Opera, ясное дело, показывают все картинки как положено, так что вина здесь вряд ли лежит на продуктах Adobe.

IE неведомо зачем отображает содержимое атрибутов alt, назначенных тегам <img>, в виде всплывающих подсказок даже в тех случаях, когда соответствующие изображения уже давно загружены. Но ведь для этих целей предусмотрен атрибут title…

Но ничего из описанного выше не повергает меня в шок по-настоящему, в отличие от следующего факта. Как известно, IE6 работает в режиме обратной совместимости с IE5 в том случае, если обрабатываемый документ не содержит корректного <!DOCTYPE...>. Так вот, шестой «Эксплорер» способен увидеть эту самую ссылку на определение типа документа только тогда, когда она начинает первую значащую строку кода. Если же элементу <!DOCTYPE...> предшествует объявление XML (вполне обычное для XHTML-документов — такое, например: <?xml version="1.0" encoding="windows-1251"?>), «Эксплорер» не учитывает «спрятанный» таким образом элемент <!DOCTYPE...>, будь он хоть трижды правильный, и переключается в режим обратной совместимости!

Обсуждать после этого всякие легко преодолимые баги наподобие «съезжающих» один под другой блоков при сужении окна; неконтролируемой верхней границы размещенного в нормальном потоке блока, следующего за парой «плавающих» элементов (спозиционированных при помощи свойства float), для которого, разумеется, по-человечески определено свойство clear со значением both; трудностей с выделением слов текста при абсолютном позиционировании блоков; игнорирования CSS-свойства width применительно к элементу <colgroup> и прочая, прочая — полагаю, не имеет смысла.

А теперь — информация к размышлению.

• Спецификация CSS2, как уже было сказано, была принята в качестве официальной рекомендации W3C 12 мая 1998 года — ровно семь лет и три дня тому назад.
• Microsoft Internet Explorer 6.0 был выпущен в 2001 году, т. е. тремя годами позже.
• Microsoft Corporation является участником Консорциума W3C.

Как вы полагаете, ждут ли нас качественные изменения после выхода IE7? (Вопрос, впрочем, можно считать риторическим…)