Я помню времена, когда у нас не было ничего, кроме CSS2.1. Стандарт CSS3 казался несбыточной мечтой, открывающей дверь в мир простого кодинга и свободных вечеров, а IE6 был дьяволом, превращавшим нашу работу в сущий ад своими причудами и вольным отношением к стандартам. Как же мы были наивны.
В действительности, CSS3 был придуман не для сокращения css-кода, а для обеспечения большей гибкости. Раньше залить фон градиентом можно было только с помощью свойства background-image и, чтобы его изменить, приходилось каждый раз переделывать всю картинку. Перенос градиента в css позволил упростить этот процесс — достаточно изменить цвета в стиле, а браузер сам всё перерисует. Неплохо, да?
Я знаю, мы сейчас находимся в некотором переходном периоде, но когда Webkit и Firefox стали каждый по-своему поддерживать градиенты, моя жизнь стала совершенно несчастной. Как продвинутому разработчику, интересующемуся новыми технологиями, мне не терпится начать использовать CSS3, но заставить всё это работать в нескольких браузерах — чертовски затратно по времени и байтам. Вчера мне нужно было сделать простой градиент, и в результате я пришёл к такому коду:
С этим кодом градиент работает в FF 3.6+, Safari/Chrome и IE5.5+. Пользователи Оперы и ИЕ без фильтров его не увидят. В то же время, использование фонового изображения позволит без проблем отобразить градиент в любом браузере.
Проблема даже не в том, что синтаксис css3 немного длиннее, а в том, что он выглядит как кусок кода, которым можно стилизовать полсайта. И это только для градиента.
Изображение это изображение. Если опустить различие в цветовых профилях, оно показывается именно таким, каким было сделано, во всех браузерах. В css3-эффектах это не так — браузер поддерживает определённое свойство так, как сам считает нужным. Например, градиенты в Firefox хуже, чем в других браузерах, особенно это заметно на большой площади заливки, когда начинают появляться ужасные полосы.
Да, видимость артефактов зависит от внешних условий (настройки монитора и т.п.), но на моём домашнем компьютере разница между градиентами Safari и Firefox очень существенная. И это только единственный пример. В будущем, я уверен, постоянно будут выявляться новые различия в качестве рендеринга — проблема, которой не было при использовании изображений.
Другая слабая сторона css3 — анимация. Конечно, неплохо, что можно задать анимацию в css, но я ещё ни разу не видел ни одной плавно работающей реализации. Замена флэша открытыми стандартами — это хорошо, но пока не будет гарантирован соответствующий уровень качества, я лучше буду пользоваться флэшем. Css3-анимация крута, но с точки зрения качества это абсолютное дерьмо.
Несмотря на всё это, я не бросил экспериментировать с css3-градиентами. Сегодня начал работу над новым проектом и первая вещь, которую мне нужно было сделать, — это задать сложный фоновый градиент для сайта.
Мне потребовалось меньше минуты, чтобы всё заработало в Firefox и около часа, чтобы найти (простое?) решение для Webkit. После всех мучений я решил — больше никаких css3-градиентов. С меня хватит.
Вывод прост. В теории css3 выглядит замечательно, но на практике мы наблюдаем нечто совершенно иное. Надеюсь, «переходный период» продлится не слишком долго, и проблемы совместимости, подобные IE6, пропадут. Причина всех бед — открытость предварительных версий стандартов. Я бы рекомендовал браузерам поддерживать их в developer-версиях, но, боюсь, меня никто не послушает.
В сложившейся ситуации, мне кажется, проще отлаживать сайты под IE6 (с помощью IE6 CSS Fixer), чем писать работающий во всех браузерах css3-код. Эта удручающая мысль резко контрастирует с нашими мечтами, но что поделаешь, такова реальность.
Взрыв кода
В действительности, CSS3 был придуман не для сокращения css-кода, а для обеспечения большей гибкости. Раньше залить фон градиентом можно было только с помощью свойства background-image и, чтобы его изменить, приходилось каждый раз переделывать всю картинку. Перенос градиента в css позволил упростить этот процесс — достаточно изменить цвета в стиле, а браузер сам всё перерисует. Неплохо, да?
Я знаю, мы сейчас находимся в некотором переходном периоде, но когда Webkit и Firefox стали каждый по-своему поддерживать градиенты, моя жизнь стала совершенно несчастной. Как продвинутому разработчику, интересующемуся новыми технологиями, мне не терпится начать использовать CSS3, но заставить всё это работать в нескольких браузерах — чертовски затратно по времени и байтам. Вчера мне нужно было сделать простой градиент, и в результате я пришёл к такому коду:
/* так было раньше: */
background:url("...") left top repeat-y;
/* а так стало сейчас: */
background:#FEF3D1;
background:-moz-linear-gradient(top, #FFF1CC, #FDF5D5);
background:-webkit-gradient(linear,0 0,100% 0,from(#FFF1CC),to(#FDF5D5));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5)";
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);
С этим кодом градиент работает в FF 3.6+, Safari/Chrome и IE5.5+. Пользователи Оперы и ИЕ без фильтров его не увидят. В то же время, использование фонового изображения позволит без проблем отобразить градиент в любом браузере.
Проблема даже не в том, что синтаксис css3 немного длиннее, а в том, что он выглядит как кусок кода, которым можно стилизовать полсайта. И это только для градиента.
Поддержка не подразумевает качество
Изображение это изображение. Если опустить различие в цветовых профилях, оно показывается именно таким, каким было сделано, во всех браузерах. В css3-эффектах это не так — браузер поддерживает определённое свойство так, как сам считает нужным. Например, градиенты в Firefox хуже, чем в других браузерах, особенно это заметно на большой площади заливки, когда начинают появляться ужасные полосы.
Да, видимость артефактов зависит от внешних условий (настройки монитора и т.п.), но на моём домашнем компьютере разница между градиентами Safari и Firefox очень существенная. И это только единственный пример. В будущем, я уверен, постоянно будут выявляться новые различия в качестве рендеринга — проблема, которой не было при использовании изображений.
Другая слабая сторона css3 — анимация. Конечно, неплохо, что можно задать анимацию в css, но я ещё ни разу не видел ни одной плавно работающей реализации. Замена флэша открытыми стандартами — это хорошо, но пока не будет гарантирован соответствующий уровень качества, я лучше буду пользоваться флэшем. Css3-анимация крута, но с точки зрения качества это абсолютное дерьмо.
Поддержка не подразумевает полную поддержку
Несмотря на всё это, я не бросил экспериментировать с css3-градиентами. Сегодня начал работу над новым проектом и первая вещь, которую мне нужно было сделать, — это задать сложный фоновый градиент для сайта.
Мне потребовалось меньше минуты, чтобы всё заработало в Firefox и около часа, чтобы найти (простое?) решение для Webkit. После всех мучений я решил — больше никаких css3-градиентов. С меня хватит.
Заключение
Вывод прост. В теории css3 выглядит замечательно, но на практике мы наблюдаем нечто совершенно иное. Надеюсь, «переходный период» продлится не слишком долго, и проблемы совместимости, подобные IE6, пропадут. Причина всех бед — открытость предварительных версий стандартов. Я бы рекомендовал браузерам поддерживать их в developer-версиях, но, боюсь, меня никто не послушает.
В сложившейся ситуации, мне кажется, проще отлаживать сайты под IE6 (с помощью IE6 CSS Fixer), чем писать работающий во всех браузерах css3-код. Эта удручающая мысль резко контрастирует с нашими мечтами, но что поделаешь, такова реальность.