Браузеры и стандарты: Ахиллес и черепаха

На «Хабре» кто-то в очередной раз кто-то наткнулся на статью полугодовой давности и понеслось — сделаны далекоидущие выводы.

Упомянутая статья за полгода не обновлялась (о чём говорит отсутствие упоминания об SVG в IE9), так что предпосылки неверные. Предпосылки неверные, но вывод, впрочем, правильный. В плане стандартов будущее крайне далеко.

Должен сказать, что любые тесты браузеров — это сферические кони в вакууме. Какие, нахрен, ACID3, какие SunSpider? «Опера» до сих пор не поддерживает CSS1! Ибо сказано:

The format of a percentage value is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed by a number (with or without a decimal point) immediately followed by ’%’.

CSS1, раздел 6.2, проценты могут быть указаны с десятичной точкой. Мне кажется, это означает, что я могу указать дробные проценты и всё будет хорошо. Во всех браузерах так и есть. Во всех, кроме «Оперы». Самая распоследняя «Опера» округлит их вниз.

CSS3-селекторы. Уже все основные браузеры хвастаются их поддержкой. На сайте CSS3.info есть даже специальный тест, на который часто ссылаются. Ну, хорошо «Хром» этот тест проходит. И начал проходить едва ли не раньше всех.

Если этот браузер заявляется поддержку селекторов CSS3, то для меня, как разработчика, это должно, видимо, означать, что работает и любая их комбинация, не так ли? Иначе, что толку от поддержки селекторов по одному в строке?

И вот реальная задача — делал я галереи на сайте без использования JavaScript, на голом CSS (спасибо селектору «:target», это самое крутое, что появилось в CSS за последние годы). Простая задача — если «:target» не указывает ни на один из тегов в текущей галерее, нужно указать, что выбрано первое изображение.

Да, пожалуйста (у меня первое изображение это последний элемент списка):

.gallery li:not(:target) ~ li:last-child a {
    background: #fff;
    color: #000;
}

.gallery li:target ~ li:last-child a {
    background: #aaa;
    background: rgba(170, 170, 170, 0.5);
    color: #fff;
}

Несложно же. «Опера» и «Файерфокс» чудесно с этим справляются, почему бы и нет, все селекторы им знакомы. Но это не работает в «Хроме» и «Сафари» (5-й «Сафари» я ещё не тестировал), точнее, это работает, но глючит — срабатывает только на следующем элементе, а не каждом. Чтобы исправить проблему, мне пришлось изобрести CSS hack для «Safari» и Chrome.

Так повсюду, в блоге IE авторы как-то показывали, что «border-radius» и «box-shadow» поддерживаются браузерами с глюками или имеют серьёзные различия в рендере. Всюду так — заявлена поддержка SVG1.1, но чего-то нехватает, Canvas, но текстом писать нельзя, тег VIDEO, но нельзя открывать на весь экран.

Конечно, тут ещё сказывается тот факт, что большинство этих спецификаций находятся в стадии черновика, вот реализовала «Опера» четыре года назад в браузере Server-sent Events, а черновик изменился и тег «event-source» теперь оказался не нужен.

В общем, к этим стандартам нам ещё всем идти и идти, много лет. Это основной вывод. А теперь другие мысли.

Селектор «:target» хоть и самое чудесное, но, в то же время, почти самое недодуманное в CSS за последние годы. Это уже ощутили мои читатели. Конечно, «:target» добавляет интерактива в CSS, но хотелось бы, чтобы этот интерактив не касался напрямую HTML, т. е. был какой-то флаг, указал его и страница не прокручивается к целевому тегу. Придётся переделать галерею на JavaScript.

Предыдущая моя заметка о conditional comments. Я уже когда-то говорил и ещё раз скажу — W3C делает большую ошибку, что не включает их в стандарт, причём на уровне и HTML, и CSS. W3C заявляет, что конечная цель — стандартное счастье у всех браузеров. Увы, в свете сказанного, туда идти ещё очень долго, учитывая все баги, недоделки, несделанное и просто ещё не дописанное самим W3C. А сейчас-то что делать? Как мне для «Сафари» и «Хрома» такой-то версии что-то выключить? Использовать CSS-хаки?

И ещё, как я уже писал W3C вряд ли когда-нибудь вообще остановится. Будут всё новые и новые стандарты, улучшения существующих. Это значит, что браузеры никогда не достигнут всего, что описано. И поэтому тоже нам нужны conditional comments.