21 декабря 2012 в 03:14

Всем, всем, всем: время обновлять свой CSS3 перевод tutorial

HTML*, CSS*
Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.


Отсортируйте префиксы


Не существует обязательного требования по упорядочиванию префиксов. Тем не менее, настоятельно рекомендуется расположить их в алфавитном порядке, с безпрефиксной версией в конце. То есть правильно было бы сортировать так: moz, ms, o, webkit, а затем свойство без префикса.

Opera недавно добавила поддержку -webkit- префиксов для нескольких CSS свойств. Это было необходимо поскольку многие разработчики используют только префикс для webit, либо попросту не включают префикс opera. Т.к. принято считать, что оба префикса, -o- и -webkit-, обладают одинаковой спецификой, по порядку выигрывает webkit, и если указаны оба, то использован будет именно он. Вы возможно хотели бы использовать -o- для Opera, особенно, если приходится что-то замещать, поэтому было бы уместным предложение сортировать префиксы по длине:

-webkit-property
-moz-property
-ms-property
-o-property
property

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

Этот совет, конечно, обладает наименьшей пользой в этой статье, тем не менее, польза от него доказана на практике.

Уберите избыточные префиксы


Некоторое количество CSS3 свойств уже довольно давно доступны к использованию без префиксов, например border-radius. В недавнем прошлом лишь немногие CSS спецификации доросли до уровня, который сейчас считается приемлемым, чтобы производители браузеров могли убрать префиксы. Среди них находятся спецификации Transforms, Transitions, Animations, Multi-Column Layout, Flexbox, и Image Values (градиенты, преимущественно). Различные браузеры находится на различных этапах пути к удалению префиксов, но некоторые уже готовы к этому, в зависимости от того, какие из более старых версий браузеров Вам приходится поддерживать.

box-sizing


Internet Explorer и Opera поддерживали box-sizing без префиксов с тех самых пор, когда спецификация была реализована, так что Вам нужно принимать во внимание лишь браузеры на основе Gecko и Webkit. Firefox до сих пор требует префикс -moz-, в то время как Вы можете опустить префикс для Webkit, если не нужна поддержка:

  • Chrome 9 и ниже (~0.30% рынка)
  • Safari 5 и ниже (~0.74% рынка)
  • Браузер Android 3 и ниже (> 60% девайсов на Android в данный момент)
  • Safari на iOS 4.3 и ниже
  • Браузер BlackBerry 7 и ниже

Рекомендовано использовать:
-webkit-box-sizing: value;  /* рассчитывать на удаление по мере обновления пользователей Android */
-moz-box-sizing: value;
box-sizing: value;

box-shadow


Ситуация с box-shadow практически аналогична box-sizing, за исключением того, что Firefox требует от Вас префикс только в версиях 3.5 и 3.6. Вместе они представляют 0.77% текущего рынка.

Рекомендовано использовать:
-webkit-box-shadow: value;  /* удалять по мере обновления Android, либо если наличие box-shadow не так критично */
box-shadow: value;

Лично я бы удалил -webkit-box-shadow, т.к. это чаще всего не критичный элемент стилей, в отличие от box-sizing, который способен поломать разметку.

border-radius


Как и в ситуации с предыдущими двумя свойствами, Opera и Internet Explorer поддерживали border-radius без префикса с момента реализации. Можно опустить -webkit- и -moz- если не нужна поддержка следующих браузеров:

  • Firefox 3.6 и ниже (~0.95% рынка)
  • Chrome 4 и ниже (~0.05% рынка)
  • Safari 4 и ниже (~0.12% рынка)
  • Android 2.1 и ниже (~3% актуальных Android девайсов)
  • Safari на iOS 3.2 и ниже

Рекомендовано использовать:
border-radius: value;

Более свежие спецификации


Плохая новость в том, что Вам все еще нужно использовать -webkit- в современных версиях Webkit для всех спецификаций, которые перечислены в этом разделе. Хорошая же новость в том, что больше не надо писать префиксы для градиентов, transitions, transforms и анимаций, начиная с:

  • Internet Explorer 10
  • Opera 12.1
  • Firefox 16

К тому же, префиксы никогда не были нужны для все вышеуказанных спецификаций (кроме 2D трансформаций) в IE. 3D трансформации не реализованы в Opera, но можно рассчитывать, что они будут реализованы сразу без префиксов.

Я бы порекомендовал использовать -webkit-, -moz-, -o- и версию без префикса (принимая во внимания то, что ниже будет написано о градиентах), за исключением того, что нужно помнить про префикс -ms- для 2D трансформаций и опускать -o- для 3D трансформаций. В ближайшем будущем можете заняться удалением поддержки Firefox и Оперы, т.к. пользователи обновляются довольно шустро, и в этих браузерах даже близко нет такой проблемы по сравнению с пользователями Android — эти обновляют свою операционную систему с черепашьей скоростью.

Мульти-колоночная раскладка была реализована без префиксов в IE и Опере. Но они по-прежнему необходимы в Firefox и во всех версиях Вебкита.

Flexbox вообще легендарен (позже я напишу об этом), и в связи с этим требует поддержки нескольких различных синтаксисов и префиксов, но поддерживается современными версиями всех браузеров. Свойство реализовано без префиксов в Opera 12.1.

Добавьте свойства без префиксов


Так как упомянутые спецификации теперь готовы к безпрефиксному использованию, настало время для разработчиков этим воспользоваться. В теории, эти свойства больше не должны никак поменяться — по ним достигнуты все необходимые соглашения в рабочих группах CSS.

Среди разработчиков существует два подхода. Первый подразумевает использование в работе безпрефиксных версий свойств. Если Вы практикуете этот подход, то Вам всего лишь нужно удалить неиспользуемые префиксы, но перед этим загляните в следующую главу, т.к. существуют некоторые подводные камни. Второй подход, соответственно, состоит в том, чтобы не пользоваться безпрефиксными версиями. Если Вы из этих, то теперь Вам нужно будет их все добавить. В следующей главе описано, как это делать.

Обновитесь до нового синтаксиса


Это наверное самая важная часть генеральной уборки. Особенно если Вы разрабатываете инструменты, или поддерживаете туториалы с кучей живого трафика.

Широко известен тот факт, что border-radius переключился на альтернативный синтаксис, вместо того, который изначально был в Firefox 2. Также известно, что похожая вещь произошла с градиентами, взамен решения Safari. Но наверняка не все знали (а тем более, обновили в живых проектах), что синтаксис градиентов изменился еще раз. Если Вы давненько не притрагивались к своим градиентам, скорее всего куча Вашего кода уже устарела и ждет решительных действий.

Новый синтаксис градиентов


К счастью, до нового синтаксиса очень просто обновиться, и все, что Вам на самом деле необходимо, это обновить безпрефиксную версию. Вы можете оставить префиксы без изменений. Все свежие браузеры поддерживают это нововведение, за исключением Webkit. Да да, Вебкит отстает от IE!

Основное правило: если Вы указываете направление, то оно должно быть перевернуто и предшествоваться ключевым словом to. Таким образом:
background:  -prefix-linear-gradient(left, white, black);

Становится:
background:  linear-gradient(to right, white, black);

Если Вы указали угол, то начальная точка отсчета сместилась. Ранее точка 0deg находилась на востоке. Углы увеличились против часовой стрелки, так что теперь 90deg начинается на севере. С безпрефиксным синтаксисом линия градиента в 0deg начинается на севере и угол растет по часовой стрелке. Формула перерасчета со старых значений выглядит как abs(oldDegValue − 450) mod 360.

Для круговых градиентов, позиции и длине должно предшествовать ключевое слово at:
background: -prefix-radial-gradient(center, white, black);

Становится:
background: radial-gradient(at center, white, black);

Ключевые слова cover и contain по отношению к размеру градиента больше не поддерживаются. cover меняется на farthest-corner и contain на closest-side.

И наконец, если Вы укажете граденту позицию, а вместе с тем форму или размер, то позиция должна быть указана последней, таким образом:
-prefix-radial-gradient(center, 50px 25px, white, black);

Превращается в:
-radial-gradient(50px 25px at center, white, black);

Новый синтаксис Flexbox


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

На данный момент только Опера поддерживает новый синтаксис без префиксов. Хром поддерживает его с префиксами начиная с Chrome 21, Firefox собирается поддерживать новый синтаксис без префиксов начиная с версии 20, но сейчас ему доступен только старый синтаксис. IE поддерживает слегка устаревший синтаксис, но не тот, который присутствует в старых реализациях Webkit и Firefox. Safari сейчас поддерживает только старую запись. Чтобы добиться максимальной совместимости, Вам нужно использовать:

  • Самый свежий безпрефиксный синтаксис: display: flex и компания (Opera, Firefox 20, и возможно Chrome в ближайшем будущем).
  • Самый свежий синтаксис с префиксом -webkit-: display: -webkit-flex и компания (Chrome 21). Было бы разумным забить на это и подождать безпрефиксной реализации на старом синтаксисе.
  • Старый новый синтаксис с префиксом -ms-: display: -ms-flexbox и компания (IE10).
  • Старый синтаксис с -moz- и -webkit-: display: -webkit-box (WebKit), display: -moz-box (Firefox).

Спецификация слишком мудреная, чтобы провести сравнение в рамках этого поста, но можно прочитать о том, как заметить разницу и посмотреть несколько демок старого старого и нового нового синтаксиса на CSS Tricks. Крис не затрагивает старый новый (или же это новый старый...) синтаксис, так что можно сходить за подробностями еще и к документации Flexbox от Microsoft.

Информация о распространении браузеров была взята с StatCounter за декабрь 2012. Данные об актуальных версиях Android взяты из официального отчета Google. Данные для России могут отличаться.
Перевод: David Storey
Николай Шебанов @shebanoff
карма
53,7
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (48)

  • +25
    До известной степени после появления Android браузер WebKit (в его форме Android Browser) присоединился к Internet Explorer, встав в ряды популярных необновляемых браузеров.

    Пользователи Windows XP не могут поставить Internet Explorer более новой версии, чем IE8.

    Пользователи Android могут обновить браузер, встроенный в Android, только вместе с операционной системой (что у многих популярных производителей, HTC например, означает «никогда» в отношении большинства мобильников, выпущенных более года тому назад).

    Что позволяет предрекать свойствам «-webkit-box-sizing» и «-webkit-box-shadow» (именно в их «-webkit-»-виде) необыкновенно долгую жизнь.
    • –6
      Android 2.x вымрет раньше, чем Windows XP. Так что это хотя и проблема, но не настолько страшная.
      • +19
        Кажется только вчера МТС презентовал свой смарт на втором андроиде.
        • –1
          … бомжу :)
        • +1
          Такие девайсы отсрочат конец его использования на год—два, не больше.
          Цикл жизни смартфонов несравним с циклом писишек/ноутов.
        • 0
          Остаётся надеяться, что мертворождённый.
          • НЛО прилетело и опубликовало эту надпись здесь
    • –4
      На Андроид можно поставить Dolphin, который использует webkit, и уже сейчас рвет родной браузер.

      А XP и IE8 — да, очень больная тема. Моя команда до сих пор вынуждена извращаться его поддержкой, т.к. «корпоративный сегмент».
      • +3
        Кроме того, на Windows XP (а равно и на Android) можно поставить Mozilla Firefox последней версии.

        Но я говорил о встроенных в систему браузерах (Internet Explorer в Windows XP, а также Android Browser в Android); вот их обновить не так просто.
        • –4
          Насколько я знаю в последних версиях Firefox XP не поддерживается. Они рекомендуют ставить Оперу :)
          • +1
            У меня Firefox 18 прекрасно работает на Windows XP.

            Подозреваю, что и у всех так.

            Если же Вы знаете противоположное, то тогда непременно скажите, откуда Вы знаете это. Любопытно же.
      • +1
        Есть люди которые пишут на phonegap, они не могут использовать другой браузер и они со слезами просматривают caniuse.com/ и подобные сайты, особенно когда смотрят колонку Android Browser, особенно радуют даунгрейды. Было бы хорошо, если бы нативный хромиум заменили хромом для андроида, хотя я уже в это почти не верю.
    • 0
      То, что андроид меньше третьей версии имеет 60% рынка ещё не значит, что он используются для веб-сёрфинга. Многие просто отключают передачу данных потому что считают её дорогой (и часто они правы).

      У нас, например, нет ни одного андроида второй версии на сайте. Наверное, остаются на мобильной версии. Она лучше приспособлена для телефонов.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Есть же Opera Mobile! Умеет тоже скукоживать текст и экономить трафик с помощью Turbo.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              Нет, именно текст.
  • +5
    Используйте пре-процессоры, упаковщики и gzip, и не будет никаких проблем.
  • +5
    Вообще, префиксы должны быть не проблемой верстальщика, а прописываться при сборке статики.

    Но если у вас (как и у большинства) с этим всё плохо, то для свойств, которые в нормальных браузерах давно работают без префиксов, можно подключить -prefix-free и ничего не прописывать.
    • +1
      Справедливости ради следует сказать, что упомянутые в комментируемой нами блогозаписи изменения, появившиеся в синтаксисе градиентов, принудят и пользователей -prefix-free обновить код CSS.
  • +2
    Ну как бы border-radius и box-shadow я уже год-полтора как пишу без префиксов. По-моему, принцип graceful degradation применим не только к IE < 9, но и к старым андроидам, например
  • –7
    Прочитал «and update your ass».
  • –3
    Префиксы использовать не стоит в принципе. По крайней мере на продакшене. Префиксы — это тестовые фичи. Ставить тестовые фичи на прод — это epic fail.
    • +2
      Если всем последовать такому принципу — спецификации так и будут оставаться на стадии «тестовых фич». Так что да, и впредь не выкладывайте в прод ничего нового. Ведь отказаться проще, чем подумать, как edge-технологию можно сделать доступнее.
      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Вы, видимо, разработкой интересуетесь только во время чтения хабра и о состоянии браузеров и w3c не в курсе. Ниже селен уже написал, что повсеместное использование префиксов вызывает только проблемы. Шаг мозиллы о полном их игнорировании давно необходим всем браузерам.

        P.S. Хабр — просто сборище троллей. Минусить любое мнение не разбираясь в вопросе самое главное тут.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    leaverou.github.com/prefixfree/

    А вообще — префиксы зло
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Насчет градиентов – с ума посходили‽ С какой целью так меняют нотацию – непонятно. С чего вдруг, казалось, еще со школьной геометрии угол 0° вдруг становится на севере, с направлением по часовой, и с теперь неинтуитивной тригонометрией? С чего вдруг естественным направлениям прибавилось to? Зачем?
    Поставил бы большой дизлайк автору этих идей!
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Не думаю, что это хоть сколько-нибудь весомое обоснование: это бы скорее было тогда каким-то гуманитарно-ассоциативным видением стандартов. Если это решение было принято только из соображения «обход оступов», «направление часов», «навигация и картография», и человек эту ассоциативную связь оценивает больше, чем совместимость со всеми существующими ныне реализациями и с геометрией – это скопрометирует доверие к стандарту и разочарует любого здравомыслящего разработчика. Благо, разработчики броузеров пока не собираются реализовывать эту ересь.
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      вы давно в школе учились? гуглите «тригонометрия 2.0» ;)
      • –1
        Будьте добры сами погуглить и дать линк, поясняющий ваше высказывание, раз вам затруднительно выражать мысли.
    • 0
      Вообще-то даже опрос был как лучше: математически, где ноль смотрит по оси x и далее против часовой стрелки, или как в компасе, где ноль смотрит по оси y, и далее отсчёт по часовой стрелке. Большинство высказалось за последний вариант — так понятнее.
      • 0
        Понятнее что – направление угла? А обычная геометрия вся такая непонятная?
        И то, что теперь синусы и косинусы углов известных векторов будут давать совершенно иные результаты, чем в математике – незначительный побочный эффект?
        • 0
          Где вы нашли синусы и косинусы в CSS? Это просто параметр.
          • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          вспомнил, это похоже на дирекционный угол, который используется в топографии. на первых лекциях все путали углы и делали массу ошибок.

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

          зы: еще б оно деления угломера понимало… _o\--
          • 0
            Или пеленг, что из морской навигации. Все же это не имеет отношения к геометрии и CSS. Не имело.
  • 0
    А есть какие-то сервисы, которые бы автоматически добавляли свойства с префиксами в мой CSS? То есть, я пишу только border-radius, а всякие там -moz он добавляет сам.
    • 0
      LESS, SASS и прочие.
      Можно online: lesstester.com, lesstester.com/
    • 0
      Странно видеть людей, которые ещё не используют Emmet. Он и это умеет делать автоматически.
      • 0
        Жаль, что он с phpstorm не работает:(
      • 0
        ой, не сюда писал, перенёс вниз
    • 0
      прозрачные примеси в препроцессоре Stylus с модулем nib и чуть мене прозрачные в препроцессоре SASS с модулем Compass (пример) и в препроцессоре LESS c модулем Prefixer помогут вам.
      также есть -prefix-free.js, но он не для серьёзных проектов, так как добавляет префиксы в таблицы стилей “на лету”, то есть после загрузки кода в браузер.
  • 0
    Нет, префиксы оставляем как есть. По крайней мере, для Webkit. box-sizing, box-shadow, border-radius. Кто там ещё?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.