Почему CSS3 хуже, чем возня с багами IE6

http://www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging
  • Перевод
Я помню времена, когда у нас не было ничего, кроме CSS2.1. Стандарт CSS3 казался несбыточной мечтой, открывающей дверь в мир простого кодинга и свободных вечеров, а IE6 был дьяволом, превращавшим нашу работу в сущий ад своими причудами и вольным отношением к стандартам. Как же мы были наивны.

image



Взрыв кода


В действительности, 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-код. Эта удручающая мысль резко контрастирует с нашими мечтами, но что поделаешь, такова реальность.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 184
  • +8
    >> Раньше залить фон градиентом можно было только с помощью свойства background-image

    Всё гениальное — просто. Чем тратить n-нное количество часов, рисуя css код, затачивая под все браузеры(и то остаются очень популярные, в которых хрен заработает) — не легче ли нажать пару кнопок за 10 секунд и залить на ftp новый фон? :)

    Исключения составляют случаи, когда в извращенном дизайне требуется постоянно менять цвет у градиентов.
    • +7
      Тут есть ещё вопрос о масштабировании. Градиенты масштабируются более или менее невозбранно, а вот фоновую картинку растянуть не удастся, если только не прибегнуть к тому же CSS3 (или не класть вместо нормального фона какой-нибудь <img> со специальным z-index и кучей джаваскрипта).
      • +2
        SVG вполне себе справится с задачей масштабирования и к тому же уже вполне ровно держится браузерами
        • +1
          Это вряд ли: IE6 без труда поймёт DXImageTransform.Microsoft.gradient, а как насчёт SVG?
          Конечно, можно использовать VML или любой из автоматических преобразовальников SVG в VML, но зачем городить этакий-то огород?
          • +3
            уже вполне ровно держится браузерами
            Ну да, вашими бы устами… Фаерфокс до сих пор не может использовать svg в качестве фона.
            • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              На худой конец можно использовать флэш в качестве бекграунда. Тоже поддерживается всеми браузерами.
              Вот, когда-то готовил такой примерчик:
              explosion.ru/tmp/bg/bg.html
              • +1
                он просто растянут на всю страницу
                а wmode=opaque — это минус в карму производительности, с таким же успехом можете растянуть картинку :)
                • 0
                  Растяните небольшую картинку с градиентом и посмотрите на результат. Он будет как минимум непотребным.
                  Без wmode=opaque, к вашему сведению, флэш не засунуть под html-контент :)
                • 0
                  ага. Только тем, у кого стоит блокировщик флэша (что встречается нередко по понятным причинам) открывается просто замечательная картина: s46.radikal.ru/i111/1008/6e/b3301a0c5dbe.png
                  и нет никакой возможности этот флэш включить.
                  • 0
                    Блокирую картинки, когда сижу через GPRS-модем в разъездах.
                    По понятным причинам.
                    Картина более чем замечательная, поверьте.
                • 0
                  SVG тупит, как зараза.
              • 0
                Не сочтите за укор, но что для вас важнее, скорость разработки или производительность последующей работы? Лишняя картинка это лишний запрос к серверу от каждого нового пользователя. Если пользователей не планируется больше 100 в день, то ответ склонится в пользу скорости разработки, а если это популярный и расширяющийся сервис, то оптимизацией лучше озаботиться сразу. css-градиенты это один из способов избавиться от многих ненужных картинок. Кстати спрайты и data-url тоже намного сложнее реализовать, чем россыпь простых картинок, но оно обычно того стоит.
                • 0
                  Меня скорее волнует то, что пользователи IE и Оперы без фильтров не увидят этого, а в остальных браузерах разной версии результат может быть самым неожиданным.

                  В той же опере, не то что в версиях — в разных билдах, порою, некоторые моменты работали по разному. И что же, мало нам теперь под браузеры(и даже версии их) делать — теперь для каждого билда будем костыли лепить? :)

                  Тем не менее в помощью старого и доброго способа, при желании, можно добиться так же существенного результата. И спать спокойнее, в ожидании оседания такого бардака, описанного автором.
                  • 0
                    Понимаю вашу логику, но не готов разделить ее.
                    Для себя выбрал стратегию graceful degradation. Если у пользователя старый браузер или какой-то новый стандарт/драфт не поддерживается, то функция может быть отключена без проблем для сути страницы. В крайнем случае пользователя можно предупредить, что его браузер не до конца передает задуманное и предложить ему выбор — наплевать на отсутствие какого-то градиента или обновить/сменить браузер.
                    • 0
                      Это вам на Хабре рассказали? А я вам скажу другое, если подходить с принципом «потом оптимизируем», у начинающих разработчиков получается такой хлам, который потом просто не исправить. Так что мысль о возможности для оптимизации надо держать в уме при разработке.
                      • +1
                        вообще-то это говорил Кнут
                        хлам получается при кривом дизайне приложения
                    • +3
                      шило на мыло…
                      а тратить ресурсы компьютера пользователя на алгоритм-прорисовки этого галимого фона нормально? а для миллиона пользователей просчитывать этот градиент заново… а это энергия… CO2 глобальное потепление…
                      • 0
                        Это экономия на спичках размером в пару килобайт и одном запросе, раз уж у нас такой мощный растущий проект, то как же кэши, нгниксы, кэш браузера на стороне клиента и прочее? Несколько более капитальная оптимизация может позволить на спичках не экономить.
                      • 0
                        Так а разве CSS3 запрещает поставить картинку в качестве фона? Просто надо относиться к CSS-градиентам не как к замене, а как к дополнению существующих возможностей и сразу картина становится гораздо менее трагичной, чем описано в статье. :-)
                      • +48
                        Это не CSS3 код а его эмуляция.

                        просто CSS3 еще не принят как стандарт.
                        так что свойства перфиксами:
                        -moz-linear-gradient
                        -webkit-grad
                        ведут себя кто в лес кто по дрова.

                        ну а после принятия стандарта. вышедшие выйдут новые версии браузеров
                        для которых будет достаточно и одной строки без префиксов.

                        Но на текущие версии браузеров все это никак не повлияет.
                        Так что при необходимости поддерживать устаревшие версии браузеров вам придется к вернуться к данным хакам.
                        • +50
                          Бред какой.

                          Как продвинутому разработчику, интересующемуся новыми технологиями, мне не терпится начать использовать CSS3
                          Может быть в этом проблема? Еще нет нормальной спецификации и одинаковой реализации, а вам уже не терпится.

                          Вообще, весь сайт можно сделать одной картинкой, выглядеть будет идеально в любом браузере. Никакие различия в понимании даже css1 разными браузерами вас не коснутся.
                          • 0
                            Согласен с Вами. Но критику лучше автору материала высказать, а не переводчику.

                            По теме… Пока только спецификации, но уже худо-бедно можно их использовать. Мне не нравится каждый раз рисовать мелкие иконки, другую графику для сайта, когда можно сделать красивый и легкий сайт только средствами css. Нравится то, что развитие css идет в этом направлении.
                            • +1
                              Но критику лучше автору материала высказать, а не переводчику.
                              Я это понимаю, но автора нужно искать, изъяснится с ним на английском. Проще дать понять переводчику, что оно того не стоило.
                              • 0
                                Всему свое время. И CSS3 тоже. Не стоит напрягать сейчас мозг как его адаптировать.
                            • +1
                              Никакие различия в понимании даже css1 разными браузерами вас не коснутся.

                              Очевидно, вы не пробовали под pocket ie
                              • 0
                                И слава богу. Мне и ИЕ6 хватает.
                              • +3
                                В браузере с отключёнными картинками такой сайт будет смотреться пустовато.
                                • 0
                                  Слово «сарказм» вам о чем нибудь говорит?
                              • –14
                                Это самое, как говорится, ох***ое, что с нами было! Мир растет и развивается, а вот отображение «загадочных», как говорится, префиксов — это уже проблема браузеров. Почему Safari FF и Chrome в общем-то все читают и воспринимают, а Опера, за которую все дрожат и трепещут — нет? У Русских менталитет другой, дай им функций побольше, да и еще вот этого и давайте того, а нахера это ему сам не знает!

                                Стандарт CSS3 дает возможности, но не все браузеры их берут!
                                • +3
                                  Сам удивляюсь, почему в Опере до сих пор не сделали поддержки свойств с префиксами -moz- и -webkit-?! В Файрфоксе и Хроме это уже давно есть!

                                  Стандарт CSS3 пока дает не возможности, а представление о новых возможностях.
                                  • +5
                                    В комментарии хабрахабровца мы видим не хабрахабровца, а его комментарий.
                                    • –1
                                      А можно для не далеких, это хорошо или плохо?
                                      • –5
                                        Это му.
                                        • +2
                                          is a word which has been roughly translated as «no», «none», «null», «without», and «no meaning»

                                          Зашибенно точное и однозначное слово.
                                          • –2
                                            В том-то и весь буддизм его.
                                      • 0
                                        Какая какая овца?
                                    • 0
                                      Почему Safari FF и Chrome в общем-то все читают и воспринимают, а Опера, за которую все дрожат и трепещут — нет?
                                      У «Оперы» есть свойство «-o-gradient».
                                  • +21
                                    Niels Matthijs нытик какой-то, не знает о чем говорит

                                    граждане, прежде чем постить переводы, разберитесь в них, не все забугорные авторы пишут стоящие статьи
                                    • +2
                                      «как было» никто не отменял…
                                      CSS3 уж точно не хуже, как-будто в ие нужно приложить меньше усилий и написать меньше кода чтоб все заработало…
                                      Бредятину написал какую-то,«продвинутый»)))))))))))
                                      • –5
                                        автор идиот. как только css3 примут как стандарт все будет хорошо.
                                        • –4
                                          комментатор идиот. бумажный стандарт и реализация его в коде — две разные вещи
                                          • 0
                                            как вы самокритично! вы не понимаете почему сейчас «css3», а точнее его эмуляция содержит -moz-*/-op-*/-webkit-*/? Рассказать или сами догадаетесь?
                                            для примера можете вот тут почитать: habrahabr.ru/blogs/webdev/92348/?reply_to=2794141#comment_2793935
                                            • –2
                                              для буратин могу повторить дважды, если доходит тяжело.
                                              Бумажный стандарт и реализация его в коде — две разные вещи.
                                              • –2
                                                вы тоже смишной. вы понимаете, что сейчас браузеры эмулируют ccs3 каждый посвоему за счет того, что нет единого стандарта? само по себе наличие браузеро-специфичных нод говорит об этом, сами браузеры намекают. еще раз повторить вам это? :D
                                                • –1
                                                  по вашему, в момент появления стандарта все браузеры волшебным образом заработают как надо?
                                                  • +1
                                                    ie — нет. а все остальные — да и не волшебным, а силами разработчиков.
                                                    • –1
                                                      Ура, двигаемся понемногу =)
                                                      Следующий наводящий вопрос, кто даст гарантию что анимация, или градиент в разных браузерах будет выглядеть одинаково?
                                                      • 0
                                                        соотвествие W3C стандартам к которому все кроме ie тянутся?
                                                        • –1
                                                          Вот именно тянутся, и еще долго тянуться будут. А сайт должен нормально выглядеть сегодня. Поэтому после публикации стандарта, пройдет несколько лет, пока все начнут нормально поддерживать CSS3 и им можно будет пользоваться без хаков на разные браузеры.
                                                          • 0
                                                            вы путаете нормальный браузер и ie. покажите мне сайт который в FF,Webkit смотрится не одинаково? Как я уже сказал у меня есть пару сайтов с (эмуляцией) css3 — во всех текущих версиях браузеров выглядит одинаково.
                                                            • –2
                                                              покажите мне сайт где все пользователи используют FF.
                                                              Вообщем разговор себя исчерпал, мне кажется я доходчиво объяснил свою позицию и любой верстальщик меня поддержит.
                                                              • +1
                                                                а причем тут это? верстальщики это вообще смешные люди. считают, что делать костыли под ie6 это правильно, то, что уделять столько внимаю мертвому браузеры — правильно, использовать другие костыли когда если няшный css3 — правильно, о graceful degration они не слышали. В чем ваша позиция? дальше продолжать заниматься некрофилией и тормозить прогресс? удачи вам в этом.
                                                                • 0
                                                                  Смешные люди — это те, кто считает, что процесс важнее результата. Результат — это довольный пользователь сайта. А ему совершенно не важно что и как вы используете. Так вот 5-6% пользователей важно, чтобы все работало в их IE6.

                                                                  До сих пор нет полной поддержки SVG (привет фоновым SVG изображениям), XSLT на клиентской стороне работает через одно место. Реализации JS разные и т.п., и т.п. А ведь все это было изобретено много-много лет назад.
                                                                  • –1
                                                                    >Так вот 5-6% пользователей важно, чтобы все работало в их IE6.

                                                                    а теперь давайте подумаем вхожят ли эти проценты в вашу ЦА? Так ли велика потеря этих процентов? стоит ли они лишних ЧЧ(человеко часов).

                                                                    >До сих пор нет полной поддержки SVG (привет фоновым SVG изображениям), XSLT на клиентской стороне работает через одно место. Реализации JS разные и т.п., и т.п. А ведь все это было изобретено много-много лет назад.

                                                                    ну так вам же нравится использовать костыли. сами виноваты, что тормозите прогресс.
                                                                    • 0
                                                                      Какие человека-часы, о чем вы? 10-20 лишних часов из нескольких сотен (время управленцев тоже денег стоит) погоды не сделают.

                                                                      Вопрос о ЦА и 5% решать заказчику. Если вы сами себе заказчик, то с этого надо было начинать, т.к. подходы разные.

                                                                      Вкладываться надо в дизайнеров, чтобы они понимали что умеет современный веб и не рисовали черт знает что.
                                                                      • 0
                                                                        Да даже если не сам себе заказчик, между посылом заказчика в лес и костылями по ие — я лучше пошлю заказчика.
                                                                        Если же я сам себе владелец или мы работаем в команде (на себя) то тут решает ЦА и ЧЧ. лично если бы для меня так была важна доля IE — я бы еще раз обдумал — в том ли я направлении иду?

                                                                        >Какие человека-часы, о чем вы? 10-20 лишних часов
                                                                        А теперь довьте сюда время дизайнера который буде bg.jpg перерисовывать, который будет тень поновой рисовать, углы по разному скруглять, а про няшные псевдо-классы/селекторы я молчу.
                                                                        • –1
                                                                          Поскольку вы не считаете нужным читать весь комментарий перед тем, как отвечать на него, считаю нашу дискуссию законченной.
                                                                          • 0
                                                                            прочитал от начала до конца. но дискуссия такие законченна.
                                                                  • 0
                                                                    верстальщики — самые обычные люди, которые хотят получать деньги за свою работу, а не дрочить на сверического коня в вакууме. реальность такова, что ты либо делаешь своё дело, либо трындишь о поддержке «некрофилии». клиенты обычно платят за первое, потому что их не волнует вся эта чушь. их волнует, что юзера, которые сидят на ИЕ, могут принести ему свои кровные копейки.
                                                                    • –2
                                                                      я говорю про нормальных верстальщиков, а не фрилансеров которые за ЖРАТ будут делать все, что им скажут. А пользователи ie сами перейдут на норманые браузеры как только все к ним жопой повернутся, но вам то нравится некрофилия…
                                                                      • 0
                                                                        какая разница — фриланс\оффис? приходит клиент в софтверную компанию, которому нужен продукт для его бизнеса. и его интересует результат. будешь рассказывать про мёртвые браузеры — скорее всего останешься без работы, потому что клиента интересует работающий интстумент :) а гнуть пальцы можно бесконечно долго и это будет работать только до тех пор, пока приносит деньги.
                                                                        • 0
                                                                          под нормальными фрилансерами я имел ввиду которые не работают на кого-то кроме себя самих :)

                                                                          > а гнуть пальцы можно бесконечно долго и это будет работать только до тех пор, пока приносит деньги.

                                                                          делаем заоблачные цены, посылаем клиентов на ЙУХ = PROFIT инфа 100%
                                                                          /tread
                                                                    • 0
                                                                      Не встречал нормальных верстальщиков, которые думают «что делать костыли под ie6 это правильно». Если заказчику пох — никто не будет подстраивать под IE6. А если заказчик непереубедимый дыбил, так кто кому доктор? Или Вы сделаете без костылей?
                                                              • –1
                                                                Поставлю вопрос по-другому. Поставите ли Вы $1000 на то, что свёрстанная страница при помощи css3 будет всегда выглядеть одинаково в FF, Opera, Safari, Chrome без дополнительных хаков под конкретный браузер?
                                                                • 0
                                                                  а чего спорить? у меня есть пару страниц сверстанных на html5+css3 одинаково в FF, и любом вэбките, точно так же в новой версии оперы(раньше в опере не работало).
                                                                  • 0
                                                                    Вы не отвели на вопрос.

                                                                    П.С. хочу дополнить свой вопрос словом «любая» перед словом «страница».
                                                                    • 0
                                                                      внезапно! если писать валидной код то он одинаково отображается во всем кроме ie! И разве моего ответа не понятно?

                                                                      >П.С. хочу дополнить свой вопрос словом «любая» перед словом «страница».

                                                                      я за обезьян и школьников отвечать не собираюсь. /tread
                                                                      • 0
                                                                        Хахаха, разработчики Оперы ржут в голос с вашего комментария. Даже такое банальное старое свойство CSS2, как clear в Опере и Мозилле работает по-разному.

                                                                        Плюс стандарты не всегда годятся. Например стандарты ничего не говорят по поводу стилизации и применения CSS к элементам форм, а в реальности такая задача как вы понимаете, встречается каждый день.
                                                                • 0
                                                                  «Кроме IE»? IE9 проходит мимо вас стороной?
                                                                  • 0
                                                                    а что IE9 уже вышел и дошел до уровня Сафари с Хромом?
                                                                    • +1
                                                                      А я это утверждал? Я отвечал на ваше «соотвествие W3C стандартам к которому все кроме ie тянутся». IE9 показывает, что MS тянется к W3C стандартам.
                                                                      • 0
                                                                        не заметил, увидел только тесты в которых IE набирает больше всех балов.
                                                                        • +2
                                                                          Я что-то вас не понимаю. IE9 реализует стандарты W3C, этого вам мало? Чем дальше, тем больше реализует.
                                                                          • –1
                                                                            Ну мне мягко говоря не нравится как они преподносят это. По их тестам их браузер самый лучший. А svg они нормально все еще не держат. (нормально это хотя бы как ff)
                                                                            • +1
                                                                              Назовите хотя бы один браузер, который не лучший по собственным тестам.
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                              • +1
                                                                                Да, и какое это имеет отношение к вашему утверждению, что ie не тянется к стандартам?
                                                                                • –2
                                                                                  ms создали опять свою собственную версию стандартов и поддерживают ее заявляю, что остальные браузеры хуже это делают. хром сливает в собственных тестах…

                                                                                  когда я увижу хотя вот это(http://grab.by/45gY) в ie — тогда и будем обсуждать его.
                                                                                  • +1
                                                                                    ms создали опять свою собственную версию стандартов и поддерживают ее
                                                                                    Это не так, всё что есть нового в IE9 — это реализация стандартов W3C и только их.

                                                                                    когда я увижу хотя вот это(http://grab.by/45gY) в ie — тогда и будем обсуждать его.
                                                                                    Тест ACID3 не проходит FF. Не будем обсуждать FF?
                                                                                    • –1
                                                                                      >Это не так, всё что есть нового в IE9 — это реализация стандартов W3C и только их.
                                                                                      интересно каким образом тогда сафари(а точнее весь вэбкит) может тогда сливать тесты ослу? смыслв том, что они взяли какие-то отдельно взятые части стандарта их реализовали.

                                                                                      >Тест ACID3 не проходит FF. Не будем обсуждать FF?

                                                                                      поэтому я говорю «хотя бы как ff», я же знаю, что ff отстает от WebKit.
                                                                                      • +3
                                                                                        интересно каким образом тогда сафари(а точнее весь вэбкит) может тогда сливать тесты ослу? смыслв том, что они взяли какие-то отдельно взятые части стандарта их реализовали.
                                                                                        А что вас смущает? Да, в IE9 реализовано что-то, что не реализовано в других браузерах, ну и что. Это часть стандарта.

                                                                                        В любом случае, я спорил с вашим утверждением, что IE не тянется к стандартам W3C. Очевидно, что это не так.
                                                            • 0
                                                              Т.е. как только в стандарте напишут, что градиент должен рисоваться ровненьким и красивеньким и без багов, то он во всех браузерах таким станет?
                                                      • +3
                                                        Идиот — тот, кто апеллирует в споре к обсуждению личности оппонента и прибегает к оскорблениям.

                                                        Автор темы привёл перевод, который приводит одну из точек зрения, которую тоже следует учесть, наряду с хвалебными песнями на тему того, как всё круто.

                                                        Хотя и соглашусь, что стандарты — это хорошо и разрабатывать становится со временем проще и удобнее.
                                                        • 0
                                                          я обсуждал личность апонента? я констатировал факт. под автором я имел ввиду автора оригинала иначе сказал бы переводчик — . И не ограничился этим, но еще и привел своб точку зрения относительно мнимой проблемы. А вот первый комментарий на мой да это обсуждение моей личности.
                                                      • +2
                                                        Я делаю дезайн прямо в окне браузера, а не в фотошопе, и очень рад новым фичам CSS3, теперь даже градиент могу повесить с помощью CSS
                                                        • –2
                                                          Cлово «дезайн» лежит внутри «uncanny valley»; рекомендую «дязаин» тогда уж.
                                                          • +3
                                                            На этом огороде тебе не взрастить сочных плодов. :)
                                                          • 0
                                                            Не афишируется, но на мобильных девайсах мощный CSS3 ест ресурсы как боров.
                                                          • –3
                                                            расслабтесь! панацеи как не было так и не будет, чего зря сотрясать воздух?
                                                            • 0
                                                              Взрыв кода
                                                              — а то, что картинку грузить теперь не нужно вы не заметили? Ну и что, что CSS кода немного прибавилось. К тому же я верю, что это — постепенный переход и впереди — общий для всех браузеров код.
                                                              • –4
                                                                …который, однако, не станет работать, например, в Firefox 3.6.x без «-moz-»-костылей %-)
                                                                • +1
                                                                  это временная мера.
                                                                  Огнелиса юзеры намного быстрее обновляют, чем Осла.
                                                              • +4
                                                                Всё будет хорошо! Вот увидите! )
                                                                • –1
                                                                  Ну что вы на самом деле. Все эти несоответствия, сложности, хаки позволяют вам зарабатывать свою нелегкую копейку. Вот станет все легко и просто и 100 рублей за сайт будет реальностью, куда вы тогда со всеми своими знаниями и умениями?
                                                                  • 0
                                                                    Не согласен.

                                                                    Да, будет переходный период, когда будет не выгодно пользоваться некоторыми свойствами. Но это не значит что CSS3 сакс!
                                                                  • 0
                                                                    Получилась статья ради статьи.
                                                                    Если пользоваться новыми технологиями затратно, используйте отработанные подходы… между прочим именно IE6 нас этому и научил.
                                                                    • –1
                                                                      Да пошли вы в задницу со своим css3, мне с ie6 проблем хватает.
                                                                      • –2
                                                                        У Вас с Вашим IE6 не будет особенных проблем со многими из свойств CSS3, так как они во многом дублируют и упрощают стародавнюю майкрософтовскую проприетарщину.
                                                                      • +1
                                                                        «Замена флэша открытыми стандартами — это хорошо.»
                                                                        Флэш и есть открытый стандарт. Он полностью открыт с начала 2009 года.
                                                                        • +5
                                                                          флеш такой же открытый, как и OOXML. Т.е. формально спеки есть, но на деле разработка стандарта в руках одной корпорации, и полноценная реализация тоже одна — проприетарная, от той же корпорации.
                                                                          • 0
                                                                            Но того факта, что можно сделать свою реализацию это не умаляет. Просто, как оказывается в большинстве случаев, это никому не нужно, лень и не хочется браться. Зато все горазды орать, что Adobe (Microsoft и т.п.) — корпорация зла.
                                                                            • 0
                                                                              ну да. Сделайте альтернативную реализацию поддержки OOXML, спеки на 7000 страниц вам в руки.
                                                                              • 0
                                                                                О чём я и говорю: лень, не хочется браться, никому не нужно.
                                                                                • 0
                                                                                  дело не столько в объеме спеков, сколько в их соответствии реальности. Касательно флеша, ничего полезного я на нем не видел, кроме видео. Да и видео уже можно без флеша сделать. Так что проще выкинуть совсем этот кривой костыль и забыть как страшный сон.
                                                                        • +6
                                                                          Лично я для таких штук написал несколько шоткатов (как и все верстаки у нас я пользуюсь WebStorm, бывшая WebIDE, бывшая IntelliJ IDEA). Например:

                                                                          bagh –
                                                                          /* Mozilla 3.6+ */
                                                                          background: -moz-linear-gradient(0deg, $COLOR$ 0, $COLOR2$ 100%);
                                                                          /* WebKit */
                                                                          background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $COLOR$), color-stop(1, $COLOR2$));
                                                                          /* IE */
                                                                          filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=$COLOR$, endColorstr=$COLOR2$, GradientType=0);$END$

                                                                          bagv –
                                                                          /* Mozilla 3.6+ */
                                                                          background: -moz-linear-gradient(-90deg, $COLOR$ 0, $COLOR2$ 100%);
                                                                          /* WebKit */
                                                                          background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $COLOR$), color-stop(1, $COLOR2$));
                                                                          /* IE */
                                                                          filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=$COLOR$, endColorstr=$COLOR2$, GradientType=0);$END$

                                                                          или там borbr –
                                                                          border-bottom-right-radius: $VALUE$;
                                                                          /* Gecko (Firefox 3.6+) */
                                                                          -moz-border-radius-bottomright: $VALUE$;
                                                                          /* WebKit (Safari/Chrome) */
                                                                          -webkit-border-bottom-right-radius: $VALUE$;

                                                                          При вводе одного значения переменной остальные подставляются автоматически. Становится удобнее, быстрее и не надо запоминать синтаксисы.
                                                                          • 0
                                                                            Отличная штука, беру на вооружение.
                                                                            • 0
                                                                              Я правда перепутал, это не шоткат, а Live Templates. А-ля Zen CSS
                                                                              • 0
                                                                                это zen css а-ля live templates, потому как для идеи у нас в начале и придумал Виталя разворачивать css лайв тимплейтс
                                                                                • 0
                                                                                  Юра, ты уверен? =)
                                                                                  • 0
                                                                                    Чтобы ты не подумал что я пытаюсь тут кого-то подколоть, просто если Виталя раньше это придумал, встает логичным вопрос: почему в Zen CSS в итоге шоткаты стали писать через ":"? Или ты имеешь ввиду хронологически раньше, но в большой мир эта идея не ушла, пока не появился Zen Coding
                                                                                    • 0
                                                                                      потому что Вадим написал свой велосипед :)
                                                                                      я не считаю, что это плохо, это просто данность.
                                                                                    • 0
                                                                                      да, наша страничка в вики со списком css свойств датирована
                                                                                      2 сентября 2008, 11:10

                                                                                      а до этого мы просто не записывали этот список в вики очень долго

                                                                                      ну и:
                                                                                      pepelsbey.net/2008/08/zen-html/#comment-615
                                                                                      pepelsbey.net/2008/08/zen-html/#comment-630

                                                                            • 0
                                                                              Правильно! Айда верстать таблицами! Долой тяжелый png с не поддерживаемой альфой! :-)

                                                                              Если серьезно, то действительно многие новые решения выглядят громоздко и оправданы бывают лишь в редких случаях. Я бы делал CSS-градиент только если бы хотел динамически менять его свойства явасриптом, в остальных случаях не вижу смысла огород городить.
                                                                              • 0
                                                                                >Правильно! Айда верстать таблицами!
                                                                                Коллега, не пробуждайте умершие холивары.
                                                                                • 0
                                                                                  Нам, ветеранам, можно иногда погундеть о былых сражениях =)
                                                                                • 0
                                                                                  Я бы делал CSS-градиент только если бы хотел динамически менять его свойства явасриптом
                                                                                  1) если пользователь захочет увеличить шрифт и размер блока увеличится (например, текст перенесется на следующую строку), то фон из картинки не смасштабируется. Насколько я знаю, браузеры пока не умеют масштабировать background-image (если я не прав, поправьте), а обычная картинка в качестве фона — жуткий костыль. Да, я знаю, что браузеры умеют масштабировать страницу целиком, но не всем нравится наблюдать замыленные картинки.
                                                                                  2) если нужно сделать несколько блоков разного размера с одинаковым фоном, то придется под каждый рисовать и загружать отдельную картинку.
                                                                                  • 0
                                                                                    1) Градиенты при масштабировании не замыливаются, да и практически во всех случаях с градиентами достаточно указать background-position и repead-x + background-color. Кроме того, фон в виде блока с картинкой лежащего уровнем ниже — не такой уж и костыль в сравнении с описанным в топике методом.

                                                                                    2) Можно придумать кучу ситуаций когда действительно удобнее делать фон через CSS, я написал про один из таких частных случаев, но все это требуется делать значительно реже (даже приверженцам нестандартных дизайнов, коим я являюсь), чем использовать те методы, которые быстро, точно и кроссбраузерно позволяют решить большинство задач.
                                                                                    • 0
                                                                                      >Градиенты при масштабировании не замыливаются,
                                                                                      На странице могут быть другие изображения, кроме градиентов
                                                                                      >background-position и repead-x + background-color.
                                                                                      и получить тихий ужас.
                                                                                      >но все это требуется делать значительно реже
                                                                                      я предпочитаю верстать страницы, которое не разъезжаются при изменении размера шрифта. С градиентом в виде картинки это делать сложнее. Городить костыли в CSS в текущем виде тоже не красиво, поэтому я жду принятия стандарта.
                                                                                      • 0
                                                                                        > На странице могут быть другие изображения, кроме градиентов

                                                                                        Другие изображения вы тоже будете средствами CSS создавать? Или вы уже забыли о теме разговора и вас просто несет?

                                                                                        > и получить тихий ужас

                                                                                        Как-то удается мне этого избежать. Более того, еще надо сильно постараться его получить, когда речь идет о таких простых инструментах.

                                                                                        > С градиентом в виде картинки это делать сложнее.

                                                                                        Не вижу сложностей. Ждать принятия стандартов и допиливания браузеров можно и верстая с умом, делая все оптимально подходящими под задачу средствами.
                                                                                        • 0
                                                                                          >Другие изображения вы тоже будете средствами CSS создавать?
                                                                                          вы, видимо, уже запутались. Поясню еще раз. Имеем страницу, на ней есть элементы с градиентом через backgound-image плюс обычные картинки. Варианты:
                                                                                          а) браузер масштабирует только текст. Градиент не масштабируется, текст вылезает из блока, страница расползается.
                                                                                          б) браузер масштабирует всю страницу, при этом обычные картинки замыливаются. Это дело вкуса, но меня это тоже не устраивает.
                                                                                          >Не вижу сложностей.
                                                                                          можете показать живую страницу с «несложной» реализацией?
                                                                                          • 0
                                                                                            Сколько еще повторить, что можно СНЕЦИАЛЬНО выдумать кучу ситуаций, когда растровым градиентом будет обойтись сложно. Когда вам просто обязательно необходимо, что-бы градиентная область совпадала с границами блока, да еще и не фиксированного по размерам — тут конечно можно и заморочиться. Но в этом случае, я лучше буду ожидать полной поддержки SVG, что-бы быстренько нарисовать то, что мне нужно в своем любимом Inkscape.

                                                                                            Во всех остальных случаях, все будет пристойно выглядеть при тайлинге градиента по одной оси.

                                                                                            Еще раз повторю, я не против CSS3, я за МОЗГ.
                                                                                            • 0
                                                                                              >можно СНЕЦИАЛЬНО выдумать кучу ситуаций, когда растровым градиентом будет обойтись сложно.
                                                                                              к сожалению, я с такими ситуациями как раз на практике сталкиваюсь.

                                                                                              >Еще раз повторю, я не против CSS3, я за МОЗГ.
                                                                                              странный у вас мозг, если ему проще нарисовать картинку и прикручивать ее, чем написать одну строку текста :)
                                                                                              • 0
                                                                                                > к сожалению, я с такими ситуациями как раз на практике сталкиваюсь.

                                                                                                Стоит ли об этом сожалеть? Я нестандартные задачи воспринимаю с радостью. Но практика у нас с вами определенно очень разная.

                                                                                                > странный у вас мозг
                                                                                                Действительно, он выгодно отличается от большинства распространенных моделей своими ТТХ. =)

                                                                                                > одну строку текста :)
                                                                                                Посчитаем вместе? Автор топика ситуацию обрисовал, не вижу смысла повторять его слова.

                                                                                                В общем мы спорим ни о чем, это уже похоже на таблично-блочный холивар.
                                                                                                • 0
                                                                                                  >Я нестандартные задачи воспринимаю с радостью.
                                                                                                  нестандартные задачи я тоже люблю. Я не люблю решать их костылями
                                                                                                  >Посчитаем вместе?
                                                                                                  то, что написано в топике, это НЕ css3
                                                                                                  • 0
                                                                                                    > это НЕ css3
                                                                                                    а кто спорит? Но CSS3, как таковой, мы и не обсуждаем, т. к. о поддержке и применении этих стандартов говорить еще рано. Мы начали с конкретного примера с градиентами и яваскриптом, который я противопоставил всем гипотетически-простым случаям, разбирать другие конкретные примеры и мерятся осями «х» не очень то корректно в рамках данного дискурса.
                                                                                        • –1
                                                                                          > На странице могут быть другие изображения, кроме градиентов

                                                                                          Другие изображения вы тоже будете средствами CSS создавать? Или вы уже забыли о теме разговора и вас просто несет?

                                                                                          > и получить тихий ужас

                                                                                          Как-то удается мне этого избежать. Более того, еще надо сильно постараться его получить, когда речь идет о таких простых инструментах.

                                                                                          > С градиентом в виде картинки это делать сложнее.

                                                                                          Не вижу сложностей. Ждать принятия стандартов и допиливания браузеров можно и верстая с умом, делая все оптимально подходящими под задачу средствами.
                                                                                • +4
                                                                                  Во всем виноват Бил Гейц. Вместо того чтобы забить осиновый кол в гроб w3c, выпустил ie6.
                                                                                  • 0
                                                                                    Вот именно поэтому я считаю, что не должно быть разделения на верстальщиков и программистов. Хороший программист уже даааавно бы задумался на тему кодогенерации.

                                                                                    Есть куча всем известных хаков, которые применяются в одних и тех же случаях. Что мешает динамически парсить CSS и вставлять туда эти хаки?

                                                                                    Исходя из этого, единственный довод против CSS3 — поддержка не всеми браузерами. Но в большинстве случаев кодогенерацией можно решить и эту проблему, к примеру картинки динамически создавать.

                                                                                     

                                                                                    Сам я CSS3 не использую вообще. Пока основные браузеры плохо поддерживают этот черновик(!), я буду верстать по-старинке. Речь в комментарии идет о подходе, а не о инструментах.
                                                                                    • –1
                                                                                      > я считаю, что не должно быть разделения на верстальщиков и программистов.
                                                                                      Ну да, ну да. А еще программист должен уметь администрировать любой сервер, рисовать в Adobe Illustrator, уметь сочинять стихи и играть на дуде,
                                                                                      • 0
                                                                                        Не да, ну да. Программисту достаточно 10 IQ, а верстальщик может даже не уметь запускать фотошоп.
                                                                                        • 0
                                                                                          Ну это то здесь причем?
                                                                                          Разделение специальностей придумали так давно, что спорить об этом бессмысленно.
                                                                                          • 0
                                                                                            Да-да-да. Придумали. Только огромная куча народу не понимает, что в реальной жизни все намного сложнее. Не надо слепо следовать «модным» тенденциям без понимания как плюсов, так и минусов.

                                                                                            А со стороны работников нежелание обучаться можно воспринимать только как в минус. Нелюбовь к верстке у веб-программера это все равно что нелюбовь к людям у человека на горячей линии.
                                                                                            • 0
                                                                                              >Не надо слепо следовать «модным» тенденциям
                                                                                              Этой моде не меньше 6.000 лет. По крайней мере в Книге Бытия указано что Каин был охотником, а Авель — земледельцем. А это ведь всего второе поколение людей.
                                                                                              >в реальной жизни все намного сложнее
                                                                                              Именно поэтому и произошло разделение профессий на программистов и верстальщиков. Потому что владеть тонкостями и той и другой профессии не то что нельзя, а не непродуктивно.
                                                                                              • 0
                                                                                                > Потому что владеть тонкостями и той и другой профессии не то что нельзя, а не непродуктивно.
                                                                                                Почему?
                                                                                                • 0
                                                                                                  Потому что голова — не помойка. Пытаться забить ее тонкостями всего на свете все равно не получится. А уж если получится, то лучше идти в шоу «Что-Где-Почем» или выступать в цирке, чем заниматься эникейством. По крайней мере веселее чем на конвеерее натягивать битрикс/друпал на очередное ТЗ
                                                                                                  • 0
                                                                                                    По настоящему сложных версток — единицы. А учитывая тенденции современного дизайна, их будет все меньше и меньше. Ну и чем тогда голову забивать? Знания, которые требуются для верстки настолько малы по сравнению с тем же самым программированием, что обсуждение в стиле «зачем лишним забивать голову» вызывает только смех.
                                                                                                    • 0
                                                                                                      >А учитывая тенденции современного дизайна
                                                                                                      Вы неправильно учитываете. Тенденция минимализма началась лет пять назад на волне WEB2.0 Пять лет для модной тенденции — очень много. Еще пару лет и пойдет откат.

                                                                                                      > Знания, которые требуются для верстки настолько малы по сравнению
                                                                                                      Да малы. Только среднестатистический верстальщик никогда не слышал про hasLayout, но зато говнякает сайты на джумбле, а похапе-кодеры впадают на собеседованиях в ступор, услышав слово design patterns, но зато знают что есть очень важные теги FONT и BLINK
                                                                                                      • 0
                                                                                                        Вопрос ведь не в моде, а в здравом смысле.

                                                                                                        Не надо ориентироваться на быдлокодеров, пожалуйста! В любой профессии можно найти огромное кол-во бездарей, но это не значит, что о них вообще стоит говорить.
                                                                                                        • 0
                                                                                                          >Вопрос ведь не в моде, а в здравом смысле.
                                                                                                          Здравый смысл — понятие растяжимое. Особенно в дизайне. Особенно в условиях тотального отсутствия дизайнеров с профильным образованием.

                                                                                                          >В любой профессии можно найти огромное кол-во бездарей,
                                                                                                          В любой профессии есть нет предела совершенству. Даже в верстке, хотя как правило, продвинутые верстальшики на этой должности долго не задерживаются.

                                                                                      • 0
                                                                                        хаки зачастую сильно специфичны от контекста использования, так что кодогенерация лишь добавит гемора в отладке и дополнительных хаков для кодогенератора х)
                                                                                        • 0
                                                                                          Ну, как минимум в SASS можно сделать что-то подобное самому.
                                                                                          !radius = 2ex
                                                                                          !background = #ddd

                                                                                          =rounded
                                                                                            border-radius = !radius
                                                                                            -moz-border-radius = !radius
                                                                                            -webkit-border-radius = !radius

                                                                                          =padding(!sizex, !sizey = !sizex / 2)
                                                                                            padding-left = !sizex
                                                                                            padding-right = !sizex
                                                                                            padding-top = !sizey
                                                                                            padding-bottom = !sizey

                                                                                          #element
                                                                                            +rounded
                                                                                            background-color = !background
                                                                                            +padding(!radius)


                                                                                          Хотя необходимость воевать с ie всё равно остаётся…
                                                                                        • +1
                                                                                          Проведите простую аналогию — система контроля версий cvs и нынешние svn/hg/git/bzr. Вы просто не понимаете, что в будущем всё станет хорошо, но для этого надо пользоваться тем, что есть и понимать что это как минимум идейно верно.
                                                                                          • 0
                                                                                            Плохая аналогия. SVN и GIT создавался программистами для программистов, и потому сделаны по-человечески. А вот стандарты веба создаются людьми, далекими от практики (имхо), а мучаются другие, которые на практике должны их воплощать.
                                                                                            • 0
                                                                                              Еще раз. Попользуйтесь CVS en.wikipedia.org/wiki/Concurrent_Versions_System, который был задолго до svn/git. SVN — это замена тому самому CVS, которым слава богу пользовались те, кто понимал, зачем он нужен. Если бы похерили идею CVS — не было бы svn, так бы и сидели с тысечей папочек) Первый блин — он всегда комом.
                                                                                              • 0
                                                                                                * судя по статье, то третий тоже
                                                                                                • 0
                                                                                                  Насколько я понимаю, в будущем (когда допилят) градиент будет делаться так:
                                                                                                  background: linear-gradient(white, gray);

                                                                                                  dev.w3.org/csswg/css3-images/#gradients-

                                                                                                  А пока что — пользуйтесь на здоровье картинками, никто не просит лезть куда не надо.
                                                                                                  • 0
                                                                                                    Опять-таки всех мучают сомнения — а будут ли градиенты везде одинаковыми?
                                                                                                    • 0
                                                                                                      Во-первых, не стоит беспокоиться, всё равно у меня внешний монитор к ноуту подключен и цвета на двух мониторах очень сильно отличаются. Поэтому проблема есть уже сейчас и нет идеального решения. А во-вторых, можно было точно так же бояться что картинки будут рисоваться по-разному (а ведь градиент — это и есть картинка, как описано на w3.org) и не использовать их.

                                                                                                      p.s.: кстати всё никак руки не дойдут до поиска рекомендованных цветов для веба, чтоб примерно одинаково хорошо смотрелись на всех цветовых профилях всех мониторов. Полезная штука была бы.
                                                                                                • 0
                                                                                                  CVS — это уже что-то вполне пригодное. Намного лучше подходила бы не метафора «SVN vs CVS» (да и hg/git/bzr в один ряд с svn ставить тоже как-то неловко), а «CVS vs RCS».
                                                                                                  • 0
                                                                                                    Да нет, даже сравнение с CVS натянуто. Вполне удобен CSS3, есть огрехи, но, допустим, уже сейчас прописать border-radius для всех браузеров (скопировать, выделить область и сделать replace-string на нужное кол-во пикселей) куда удобнее чем возня с картинками.
                                                                                            • +2
                                                                                              вы будете удивлены, но filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);, работает _быстрее_ чем background:url(....), поэтому при выборе фильтр или img я выберу первое
                                                                                              • 0
                                                                                                Не надо забывать что CSS3 — это не только градиенты, но и много других полезных свойств, типа opacity, border-radius, font-face, border-image, и многое другое. И использовать CSS3 нужно постепенно, тогда все будет в порядке.
                                                                                                • –1
                                                                                                  -o-gradient добавьте, для Opera
                                                                                                • 0
                                                                                                  ИМХО, тут как с бета-прошивками для девайсов. Одни торопятся их попробовать и вынуждены прилагать дополнительные усилия, а другие ждут выхода официального релиза и всего лишь теряют время.
                                                                                                  Каждый выбирает по себе
                                                                                                  • +1
                                                                                                    проще отлаживать сайты под IE6 (с помощью IE6 CSS Fixer), чем писать работающий во всех браузерах css3-код.
                                                                                                    Разница в том, что CSS3 — это возможность (можно пользоваться, можно — нет), а вёрстка под IE6 — обременительная необходимость (надо, и всё тут).
                                                                                                    • 0
                                                                                                      А вот айфон прекрасно поддерживает css3 анимацию, просто с блеском. Даже лучше, чем десктоп.
                                                                                                      • 0
                                                                                                        настольная макосевая сафаря тоже показывает css3 отличненько