Что нового в css3
Новые возможности CSS3 и чего ждать в CSS4
Технология CSS с появлением новой версии CSS3 предоставила разработчикам поистине уникальные возможности для оформления страниц. Главная особенность CSS3 — это возможность создания анимированных элементов на странице без помощи скриптов, а также внедрение поддержки всевозможных градиентов, радиальных и линейных. Добавилась поддержка сглаживания и теней. Эта версия является глобальным обновлением и пришла на смену старым версиям: 1, 2, 2.1.
Например, в CSS3 была введена возможность определения поддержки того или иного свойства с помощью запроса @supports. Теперь можно писать различные правила, которые будут применяться только в случае поддержки требуемых свойств. Эта возможность поддерживается практически всеми современными браузерами, за исключением лишь некоторых.
Наконец в CSS появилась возможность использовать переменные, что раньше было возможным только с использованием сторонних библиотек, которые называются препроцессорами CSS. Теперь достаточно определить переменную и использовать ее везде в коде, это позволит быстро изменить значение нужного свойства за несколько секунд, а раньше приходилось вручную изменять его у всех. С поддержкой все довольно неплохо, но нужно смотреть таблицы совместимости.
Еще, что стоит выделить, так это возможность создания сетки на чистом CSS. Добавилось значение для популярного свойства: display: grid. Были введены новые единицы измерения, как раз для таких случаев: fr. Теперь можно делать макеты любой сложности. С поддержкой в браузерах все довольно неплохо на данный момент, но старые версии не поддерживают эти новшества, поэтому нужно быть внимательным при использовании.
Что касается CSS4, то здесь пока все довольно непонятно. Эта версия существует в черновом варианте, конкретный список возможностей будет определен в финальном варианте. Так, планируется добавить следующие новшества: новые псевдоклассы самых разных видов, логические комбинации из селекторов, различные селекторы тегов и атрибутов, селекторы таблиц и отношений.
Например, среди псевдоклассов можно выделить некоторые, это языковые псевдоклассы, псевдоклассы расположения, псевдоклассы пользовательских действий, псевдоклассы, относящиеся ко времени, псевдоклассы для элементов ввода, мутирующие псевдоклассы, псевдоклассы древовидной структуры.
Использовать новые возможности CSS3 сейчас очень важно для правильной и красивой верстки страниц, а с выходом CSS4, постепенно будут использоваться и возможности этой новой версии. Но как всегда, даже после выхода новой версии, должно пройти некоторое время, пока она станет поддерживаться большинством современных браузеров.
Разница между CSS2 и CSS3
Новые CSS3 селекторы
CSS3 предлагает несколько новых способов написания правил CSS с новыми селекторами CSS, а также с новым комбинатором и некоторыми новыми псевдоэлементами.
Есть три новых селектора атрибутов:
Элемент имеет атрибут с именем foo, который начинается с «bar», например
Элемент имеет атрибут с именем foo, который заканчивается на «bar», например
Элемент имеет атрибут с именем foo, который содержит строку «bar».
Введено 16 новых псевдоклассов:
Есть один новый комбинатор:
Новые свойства
В CSS3 блочная модель не изменилась. Но есть множество новых стилевых свойств, которые могут помочь вам стилизовать фон и границы ваших рамок.
Несколько фоновых изображений
Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений для наложения друг на друга в поле. Первое изображение — это слой, ближайший к пользователю, а следующие закрашены. Если есть цвет фона, он окрашивается под всеми слоями изображения.
Новые свойства стиля фона
В CSS3 также есть несколько новых фоновых свойств:
Изменения в существующих свойствах стиля фона
Есть также несколько изменений в существующих свойствах стиля фона:
CSS3 Border Properties
В CSS3 границами могут быть стили, к которым мы привыкли (сплошные, двойные, пунктирные и т. Д.) Или изображения. Кроме того, CSS3 поддерживает закругленные углы. Изображения границ интересны тем, что вы создаете изображение всех четырех границ, а затем сообщаете CSS, как применить это изображение к вашим границам.
Новые свойства стиля границы
В CSS3 появилось несколько новых свойств границ:
Дополнительные свойства CSS3, связанные с границами и фоном
Когда блок разбивается при разрыве страницы, столбца или строки (для встроенных элементов), свойство box-художественное оформление-разрыв определяет, как новые блоки переносятся с полями и отступами. Фоны делятся между несколькими разбитыми прямоугольниками, используя это свойство
Новое свойство box-shadow добавляет тени к элементам box.
Определить количество и ширину столбцов
Есть три новых свойства, которые позволяют вам определять количество и ширину ваших столбцов:
CSS3 столбцы пробелы и правила
Пробелы и правила размещаются между столбцами в одном многоколоночном сценарии. Пробелы будут раздвигать столбцы, но правила не занимают места. Если правило столбца шире его пробела, оно будет перекрывать соседние столбцы. Есть пять новых свойств для правил столбцов и пробелов:
CSS3 Разрывы столбцов, Охватывающие столбцы и Заполнение столбцов
Как и в случае с таблицами, вы можете установить элементы для охвата столбцов с помощью свойства column-span. Это позволяет создавать заголовки, которые охватывают несколько столбцов, как газета.
Заполнение столбцов решает, сколько контента будет в каждом столбце. Сбалансированные столбцы пытаются поместить одинаковое количество содержимого в каждый столбец, в то время как auto просто передает содержимое до тех пор, пока столбец не заполнится, а затем переходит к следующему.
Дополнительные функции в CSS3, которые не включены в CSS2
В CSS3 есть множество дополнительных функций, которых не было в CSS2, включая:
Что такое CSS3?
— это неоспоримое будущее в области декоративного оформления веб-страниц, и ее разработка еще далека от завершения. Большинство модулей все еще продолжает совершенствоваться и модифицироваться, и ни один браузер не поддерживает все модули. Это означает, что CSS3 испытывает такие же сложности, как и HTML5. Веб-разработчикам нужно решать, какие возможности использовать, а какие игнорировать, а также каким образом заполнить зияющие пробелы в браузерной поддержке.
Спецификация CSS3 не является частью спецификации HTML5. Эти два стандарта были разработаны отдельно друг от друга, разными людьми, работающими в разное время в различных местах. Но даже организация W3C призывает веб-разработчиков использовать HTML5 и CSS3 вместе, как часть одной новой волны современного веб-дизайна.
Внедрять CSS3 в веб-сайт можно, по большому счету, используя три стратегии:
Стратегия 1: используйте то, что можно
Логично использовать возможности с высоким уровнем поддержки на всех основных браузерах. В качестве примера одной из таких возможностей можно назвать применение веб-шрифтов. Используя шрифты правильного формата, эту функциональность можно заставить работать на таких старых браузерах, как Internet Explorer 6. К сожалению, очень немногие возможности CSS3 входят в эту категорию. Почти все иные возможности не будут работать на все еще популярных браузерах IE 7 и IE 8.
Стратегия 2: рассматривайте возможности CSS3 как усовершенствования
Идея в основе этой стратегии заключается в использовании CSS3 для тонкой доработки страниц, причем эта доработка не повлияет на возможность просмотра основного содержимого и форматирования страницы в менее способных браузерах. Одним из примеров такой тонкой настройки является свойство border-radius, позволяющее скруглять углы рамок. Далее приводится пример указания этого свойства в правиле таблицы стилей:
Браузеры, поддерживающие свойство border-radius, будут использовать его, a старые браузеры просто игнорировать его, оставляя углы рамок квадратными:
Эта стратегия явно привлекательна, так она позволяет веб-дизайнерам манипулировать последними «игрушками» этой технологии. Но если слишком увлечься, она имеет и определенный недостаток. Несмотря на то, насколько хорошо веб-страница может выглядеть при просмотре в последней версии вашего любимого браузера запустив ее в одном из старых браузеров, которые используются значительной частью ваших посетителей, вы можете быть глубоко разочарованы ее намного менее впечатляющим внешним видом. А ведь вы хотите, чтобы ваш веб-сайт производил впечатление на всех, а не только на веб-фанатов, использующих лучшие браузеры.
По этой причине следует подходить к применению некоторых усовершенствований CSS3 с определенной долей осторожности. Ограничьтесь использованием возможностей, которые уже поддерживаются несколькими браузерами (и поддержка которых, по крайней мере, уже реализована в IE 10). И никогда не применяйте эти возможности так, чтобы производимое вашим сайтом впечатление резко менялось при его просмотре в старых браузерах.
Что касается поддержки CSS3, Internet Explorer большой слабак в этой области. Существует воинствующее меньшинство веб-дизайнеров, которые считают, что веб-дизайнеры должны игнорировать этот браузер и применять возможности CSS3 как только они начинают поддерживаться другими браузерами. А как иначе оказывать давление на Microsoft и стимулировать усовершенствование Интернета?
Такой подход вполне уместен, если основная цель вашего веб-сайта «политическая», заключающаяся в продвижении передовых веб-стандартов. В противном случае следует иметь в виду, что сбрасывание со счета большого сегмента сетевой общественности плохо отразится на вас, т.к. человек все равно использует свой браузер (который вам может и не нравиться) для просмотра вашей работы.
Стратегия 3: добавляйте резервные решения с помощью библиотеки Modernizr
Использование частично поддерживаемой возможности CSS3 хорошая идея, если веб-сайт будет достойно выглядеть и без нее. Но иногда без этой возможности легко потерять важную часть дизайна своего веб-сайта, или же сайт может выглядеть просто неприглядно. Рассмотрим, например, что случится, если использовать многоцветную рамку, поддерживаемую только в браузере Firefox:
Иногда эту проблему можно решить, установив несколько свойств в правильном порядке. Здесь базовым методом будет установка сначала общих свойств, а за ними новых, которые замещают предыдущие свойства. Когда этот подход работает, он удовлетворяет все браузеры — старые браузеры используют стандартные настройки, в то время как новые браузеры замещают эти настройки новыми. Далее показан пример применения этого метода для замены обычного фона градиентным:
Результаты применения этого правила показаны на рисунке:
Вверху: браузеры, которые не понимают CSS3, используют первую часть правила для header и окрашивают фон сплошным желтым цветом. Внизу: браузеры, которые понимают CSS3, используют вторую часть правила и заполняют фон радиальным градиентом.
В некоторых случаях замещение свойств стиля не работает, т.к. устанавливаются комбинированные свойства. Примером комбинированного свойства является многоцветная рамка. Эффект многоцветности устанавливается свойством border-colors, но появляется только если установлена большая толщина рамки посредством свойства border-thickness. В браузерах, которые не поддерживают многоцветные рамки, толстая рамка одного цвета режет глаза независимо от цвета.
С помощью этой библиотеки можно определить альтернативные настройки стилей для браузеров, не поддерживающих свойства стилей, которые вы хотите использовать в первую очередь. Допустим, что нам нужно создать две версии рамки для верхнего колонтитула. Мы хотим использовать скругленные углы в браузерах, которые поддерживают эту возможность, и двойную рамку в браузерах, которые эту возможность не поддерживают. Добавив в разметку страницы ссылку на сценарий Modernizr, можно использовать следующую комбинацию правил таблицы стилей:
Этот набор правил работает следующим образом. В корневой элемент страницы вставляется атрибут :
Когда загружается Modernizr, этот сценарий выполняет быструю проверку на поддержку данным браузером ряда возможностей HTML5, JavaScript и CSS3. По результатам проверки сценарий вставляет в корневой элемент страницы целую кучу классов, разделенный пробелами:
Наличие в этом списке класса без префикса no- означает, что данный браузер поддерживает соответствующую возможность. Если же класс указан с префиксом, соответствующая возможность в данном браузере не поддерживается. В данном случае пример запущен на последней версии Chrome, поэтому поддерживаются почти все возможности.
Но здесь есть своя загвоздка, заключающаяся в том, что Modernizr предоставляет классы только для определенного подмножества всех возможностей CSS3. В это подмножество входят некоторые наиболее популярные и развитые возможности CSS3, но не многоцветные рамки, т.к. эта возможность поддерживается только браузером Firefox. По этой причине лучше воздержаться от использования многоцветных рамок в своих разработках, по крайней мере на данном этапе.
С помощью Modernizr можно также создавать резервные решения на JavaScript. В данном случае нужно просто проверить значение соответствующего свойства объекта Modernizr, как при проверке на поддержку возможностей HTML5. Этот метод можно использовать, чтобы компенсировать отсутствие более продвинутых возможностей CSS3, таких как переходы или анимации. Но для этого требуется так много усилий и настолько разные модели, что для необходимых возможностей веб-сайта обычно лучше всего придерживаться решений только на основе JavaScript.
Стили, специфичные для конкретных браузеров
При разработке новых возможностей CSS часто приходится сталкиваться с дилеммой курицы и яйца. Для того чтобы усовершенствовать возможности, разработчикам нужно иметь отзывы и замечания об этих возможностях от разработчиков браузеров и веб-дизайнеров. Но чтобы разработчики браузеров и веб-дизайнеры могли предоставить такие отзывы и замечания, им нужно реализовать эти новые и несовершенные возможности.
Это порождает цикл тестирований и предоставления отзывов по результатам тестирований, в результате которого многие усовершенствования принимают законченную форму. Но в процессе этого цикла синтаксис и реализация возможностей меняются. Такая ситуация порождает конкретную опасность применения какой-либо новой впечатляющей возможности неосведомленными веб-разработчиками, не осознающими, что будущие версии стандарта могут изменить правила, вследствие чего эта возможность больше не будет работать на веб-сайтах.
Для каждого браузера существует собственный префикс разработчика:
| Префикс | Браузер |
|---|---|
| -moz- | Firefox |
| -webkit- | Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации) |
| -ms- | Internet Explorer |
| -o- | Opera |
Хотя префиксы разработчиков браузеров невероятно усложняют жизнь веб-разработчиков, для их использования есть хорошее основание. Разные разработчики браузеров добавляют поддержку возможностей в различное время, при этом часто используя разные предварительные версии одной и той же спецификации. Хотя все браузеры будут поддерживать одинаковый синтаксис для конечной версии, синтаксис свойств и функций, специфичных для конкретных разработчиков, часто бывает разным.
Поэтому, если вы хотите использовать в своем веб-сайте радиальный градиент уже сегодня, для того чтобы он правильно отображался во всех браузерах (включая Internet Explorer 10), вам нужно использовать раздутое правило CSS наподобие следующего:
Использование префиксов разработчиков браузеров — сложное и трудное занятие. Веб-разработчики разделились во мнении, являются ли эти префиксы необходимым злом для получения самых последних и лучших возможностей или же большим предупреждением для рассудительных разработчиков не связываться с ними. Но можно быть уверенным в одном: если не использовать префиксы разработчиков, некоторая часть возможностей CSS3 в данное время будет недоступна.
Зачем использовать CSS3 если есть JavaScript и Flash?
Появление некоторых новых возможностей CSS3 не касающихся стилизации элементов страницы (такие как анимации и переходы) вызвали кучу вопросов о их необходимости, ведь таких же эффектов можно добиться использованием JavaScript, либо подключаемых модулей Flash или Silverlight. Давайте рассмотрим преимущества и недостатки каждого подхода:
Обзор новых возможностей таблиц стилей в CSS 3.0
К сожалению, на сегодняшний день еще нет ни одного веб-браузера, который бы поддерживал все возможности новых версий HTML 5.0 и CSS 3.0. Однако с переходам к более новым версиям веб-браузеров наблюдается постоянное наращивание их возможностей в плане поддержки указанных спецификаций.
Спецификация CSS3 делится на «модули». Старые спецификации разбивались на более мелкие части, к которым также были добавлены новые части.
К числу наиболее важных модулей CSS3 относятся следующие:
С помощью CSS3 теперь возможно напрямую создавать закругленные контура, добавлять тени к фигурам и использовать изображения в качестве контуров, не прибегая к использованию графических редакторов.
К числу наиболее важных свойств CSS3 Borders можно отнести следующие:
В IE9 на момент создания данного курса была реализована поддержка только первых двух.
CSS3 Box Shadow применяется для добавления тени к блоку.
CSS3 Backgrounds предоставляет больше возможностей для управления элементом фона.
| Свойство | Описание |
|---|---|
| background-origin | Указывает положение области фонового изображения |
| background-size | Указывает размер фонового изображения |
С помощью CSS3 Transforms возможно перемещать, масштабировать, поворачивать, вращать и растягивать элементы.
2D трансформации задаются следующими методами:
CSS3 с погружением
CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.
Но это только поверхностный уровень. Мне пришлось разобраться с новыми возможностями браузеров более подробно, чтобы ответить на возникшие вопросы типа: насколько кроссбраузерны градиенты со множеством цветовых переходов, где и как можно применять сразу несколько теней к блоку, для каких конкретно браузеров применяются префиксы свойств и т.п.
Кроме того, меня интересовала поддержка CSS3 на мобильных платформах, неизученные возможности CSS3, а также генераторы, которые создают кроссбраузерный код. Я попробовал восполнить некоторые пробелы и собрать полезную информацию для тех, кто еще только готовится к погружению.
Браузеры, поддерживающие свойства перечислены в виде CSS комментариев. Генераторы и инструменты чаще всего могут выполнять сразу несколько функций, поэтому в таких случаях я указывал их только там, где они, по-моему, справляются лучше всего.
Linear-gradient
У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.
Все возможности градиентов поддерживаются теми браузерами, которые могут отображать CSS3 градиенты, даже если некоторые генераторы предлагают нам только переход между двумя цветами.
Repeating-linear-gradient
Позволяет повторять градиент, дает возможность создавать фоновые паттерны.
Radial-gradient
Круговой градиент. Так же можно иметь несколько цветовых переходов, можно определять точку начала градиента (не обязательно из центра круга).
Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.
Инструменты:
Множественные фоны
Не стоит забывать о браузерах, не поддерживающих множественные фоны.
Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.
Border-radius
Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.
Все производители уже отказались от вендорных префиксов в последних версиях браузеров.
Но если у разных углов должен быть разный радиус, то нужно перечислить радиусы для каждого угла.
В Firefox есть особенность, связанная с тем, что перечисление углов происходит с помощью синтаксиса, отличного от стандарта. Но решением может стать использование сокращенного синтаксиса, который у браузеров одинаков.
div <
-moz-border-radius : 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
border-radius : 15px 30px 45px 60px;
>
Интересной возможностью является передача пар значений радиусов для каждого угла. Так можно добиться более сложных форм, чем просто закругления:
div <
border-top-left-radius : 5px 30px;
border-top-right-radius : 30px 60px;
border-bottom-left-radius : 80px 40px;
border-bottom-right-radius : 40px 100px;
>
div <
border-radius : 8px / 13px;
>
Инструменты:
Box-shadow
Падающие тени от блоков.
div <
-webkit-box-shadow : 0px 0px 4px #000000; /* Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ */
-moz-box-shadow : 0px 0px 4px #000000; /* Firefox 3.5-3.6 */
box-shadow : 0px 0px 4px #000000; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+, iOS 5+ */
>
Тени можно направить вовнутрь элемента
div <
-webkit-box-shadow : inset 6px 6px 12px #000000;
-moz-box-shadow : inset 6px 6px 12px #000000;
box-shadow : inset 6px 6px 12px #000000;
>
Можно применить сразу несколько теней к одному элементу.
div <
-webkit-box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
-moz-box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
>
Внутренние тени, множественные тени и spread-radius можно применять во всех браузерах, которые поддерживают простые CSS3 тени.
Практически все производители уже отказались от вендорных префиксов в последних версиях браузеров.
Инструменты:
Это возможность использовать альфа-прозрачность для цветов. В отличие от свойства opacity можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока.
Для кроссбраузерности стоит указать цвет без альфа-прозрачности, либо путь к прозрачному PHG.
Существующий формат записи HSLA можно использовать в тех же версиях браузеров, которые поддерживаю RGBA.
Инструменты:
hex2rgba.devoth.com превращает HEX в RGBA
Псевдоэлементы
Генерация контента в CSS через :before/:after. Используется как для добавления символов и целых слов в документ, так и для создания новых блоков, которые можно использовать для оформления.
Поддержка уже очень хорошая, даже на мобильных платформах срабатывают без проблем.
Интересно, что CSS3 требует применения синтаксиса с двумя двоеточиями (::before / ::after) но IE8 требует использования псевдоэлементов с одним двоеточием.
Заключение
Получилось выяснить положение с поддержкой CSS3 разными браузерами. Удалось найти множество инструментов. Не обнаружилось генератора для закруглений с парами значений для угла, генератора, который может создавать сразу несколько теней у блока, а также генератора, который объединял бы все необходимые функции, но при этом был бы прост и имел хороший интерфейс.
Конечно, есть еще множество свойств, например border-image или transition, но они не так широко используются, либо требуют еще более глубокого изучения, поэтому не вошли в этот обзор. Но инструменты или информацию найти можно попытаться практически для любого случая.
Источники информации о поддержке свойств браузерами
upd Для желающих автоматизировать процесс создания префиксов написана другая статья.
And for those of you who don’t speak Russian, this article in English.