На «Хабре» кто-то
в очередной раз кто-то наткнулся на статью полугодовой давности и понеслось — сделаны далекоидущие выводы.
Упомянутая статья за полгода не обновлялась (о чём говорит отсутствие упоминания об 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.
