От автора: сейчас сложно избежать назойливой рекламы, окружающей CSS3, хотя он несколько разделил сообщество разработчиков. В этой статье мы рассмотрим основные моменты CSS3 для начинающих специалистов. Если вы читали какие-то посты на эту тему, то они переполнены комментариями разработчиков, ощущающих, что все еще не могут использовать в своей работе CSS3. Кроме подбадривающих, ответы экспертов нашего сообщества могут оказаться агрессивными или снисходительными. Хотя они правы, утверждая, что CSS3 сейчас возможно использовать, решение зависит от отдельного человека, даже если его мнение основано на неверных суждениях.
В этой статье «CSS3 для начинающих», я попытаюсь осветить некоторые из самых широко распространившихся достижений CSS3, показав вам не только как их можно использовать, но также и поддержку, которую вы наверняка ожидаете от основных браузеров.
Почему сейчас возможно пользоваться CSS3
Аргументы за то, почему мы не можем пользоваться CSS3, включают такие вещи, как незавершенную спецификацию, или то, что некоторые элементы CSS3 плохо поддерживаются, либо не поддерживаются вообще. Все это верно, но не причина тому, чтобы не пользоваться CSS3. Если бы эти доводы были вескими, мы до сих пор ожидали бы появления CSS2.1.
Характеристикой доступности подобных технологий является то, поддерживают их браузеры или нет, а в случае с CSS3 достигается достаточная поддержка браузерами некоторого количества свойств, чтобы можно было начать использовать их для улучшения своих вебсайтов. Ключевое слово здесь — улучшение дизайна. Любой освоенный вами CSS3 должен быть сделан так, чтобы не ухудшить впечатление от сайта в более старых браузерах.
Не имеет значения, называете ли вы это системами Progressive Enhancement (прогрессивное улучшение), Graceful Degradation (поэтапная деградация) или Hardboiled, пока вы принимаете тот факт, что вебсайту не нужно выглядеть одинаково во всех браузерах. Если принять эту простую истину, то вы увидите, что CSS3 сегодня может применяться без отрицательного влияния на впечатления пользователей, пользующихся более старыми браузерами.
Префиксы, определяемые фирмой-разработчиком
Большая часть того из CSS3, что поддерживается браузерами, делается при использовании префиксов фирм-разработчиков. Изначально они не предназначались для разработки, а больше для тестирования реализации браузеров. Но времена меняются, и если мы хотим сейчас пользоваться CSS3, то префиксы разработчика являются его насущной частью.
Используемые сейчас префиксы:
-moz- : Firefox
-webkit- : Браузеры Webkit, такие как Safari и Chrome
-o- : Opera
-ms- : Internet Explorer
При кодировании CSS3 с помощью префиксов хорошо, когда это возможно, размещать вариант без префикса после любого с префиксом, чтобы гарантировать совместимость вашего вебсайта с будущими стандартами.
Приступаем к изучению CSS3 с нуля
Border Radius (закругленные углы)
Нашу статью CSS3 для начинающих, мы начнем с изучения закруглённых углов. Border radius, или, как некоторые называют его, «закругленные углы» (‘Rounded Corners’), возможно, самый широко используемый из всех элемент CSS3, так как он меньше всех влияет на пользователей со старыми браузерами. Спорно утверждение о том, что он самый выигрышный, так как гибкая реализация закругленных углов всегда требует некоторого количества дополнительных div’ов и изображений.
По большей части основные закругленные углы можно написать тремя способами:
|
1 2 3 |
border-radius: [<length> | <%>]; border-radius: [top-left] [top-right] [bottom-right] [bottom-left]; border-top-left-radius: [<length> | <%>]; |
Как показывает вышеприведенный код, border radius можно написать так, чтобы все углы можно было задать индивидуально или сокращенно. Однако, при использовании префиксов, определенных фирмой-разработчиком, имеется пара проблем:
Webkit
При использовании объявления в краткой форме браузер поймет только до двух значений, а не четырех; чтобы обратиться к нему, используйте полную форму. Кроме того, бывают проблемы с использованием процентов по сравнению с фиксированными длинами в пикселях.
Mozilla
Mozilla точно доказал, зачем нам все еще нужны префиксы разработчика при различной реализации объявления в полной форме. Так, при использовании префикса -moz- должны использоваться следующие потребности, хотя и краткая форма работает так, как нужно:
|
1 2 3 4 |
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; |
Примеры CSS3
|
1 2 3 4 |
#1 {border-radius:10px;} #2 {border-radius:50%;} #3 {border-radius:25px 5px;} #4 {border-radius:40px 30px 20px 10px;} |
Поддержка
IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.0+ [-moz- prefix], Opera 10.5+
Цвета
Наряду с CSS3 идет поддержка rgba (Red, Green, Blue, Alpha – красный, зеленый, синий, альфа) и hsla (Hue, Saturation, Lightness, Alpha- тон, насыщенность, яркость). В обоих «альфа» означает прозрачность цвета, позволяя нам определять непрозрачность индивидуальных свойств данного элемента, такого как фон, рамка и текст. Раньше было возможно применять непрозрачность только к целому элементу или пользоваться вместо того изображениями.
|
1 2 |
color: rgba([<0-255>],[<0-255>],[<0-255>],[<0-1.0>]); color: hsla([<0-360>],[<%>],[<%>],[<0-1.0>]); |
Оба типа определения цвета можно использовать без альфа-канала, опустив ‘a’ в ‘rgba’ или ‘hsla’ и удалив последнее число свойства. В таком виде rgb шире поддерживается старыми браузерами, но hsl все еще такая же новинка, как и hsla.
Эти свойства цвета также можно безопасно использовать в любом другом свойстве CSS3, требующем цвета, таком как box-shadow и градиенты, но при использовании их в более старых свойствах важно обеспечить альтернативный вариант.
|
1 |
color:rgb(0,0,0); color: rgba(0,0,0,0.5); |
Запасной цвет может быть в любом поддерживаемом виде, таком как rgb и hex.
Примеры CSS3
|
1 2 3 4 |
#1 {background:rgba(255,255,255,0.3);} #2 {background:rgba(45,35,200,0.5);} #3 {background:hsla(225,90%,10%,0.2);} #4 {background:hsla(125,100%,50%,0.5);} |
Поддержка
IE9+, Safari 3.2+, Chrome 5+, Firefox 3.0+, Opera 10.1+
Text-Shadow (тень текста)
Это свойство позволяет добавлять тень к любому тексту и контролировать ее расположение, размывание и цвет.
|
1 2 |
text-shadow: [color] [x-coordinate] [y-coordinate] [blur radius]; text-shadow: #000000 10px -5px 3px; |
Вы можете назначить цвет текстовой тени каким угодно способом, включая rgba и hsla. Координата Х – это позиция тени по отношению к тексту по горизонтали, координата У – то же самое, но по вертикали. У обеих могут быть положительные или отрицательные значения.
Радиус размывания – это назначенный тени размер размывания, не имеющий верхнего предела. Его нижний предел – ноль (0) и так обеспечивается попиксельное сходство с текстом без размывания.
Текстовая тень была изначально предложена в CSS2, а в последнее время занимает видное положение в CSS3, и, хотя она пока не указана в превью как поддерживаемая предшественниками IE9, надеемся, это скоро изменится.
Примеры CSS3
|
1 2 3 |
#1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;} #2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;} #3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;} |
Поддержка
Safari 3.2+, Chrome 4+, Firefox 3.0+, Opera 10.1+
Box-Shadow (тень блока)
Тень блока не так уж отличается от тени текста, но применяется ко всему элементу как div’у, а не только тексту в нем.
|
1 2 3 |
box -shadow: [x-coordinate] [y-coordinate] [blur radius] [color]; box -shadow: 10px -5px 3px #000000; box -shadow: inset 10px -5px 3px #000000; |
Вышеприведенный код показывает объявление, аналогичное текстовой тени, кроме добавления вкладки inset в третьей строке. Использование вкладки позволяет нам расположить тень внутри рамки элемента, а не вовне его.
С box-shadow, кроме того, можно комбинировать множественные тени блоков, как показано в коде внизу:
|
1 |
box -shadow: inset 10px -5px 3px #000000, 10px -5px 3px #000000; |
Примеры CSS3
|
1 2 3 4 |
#1 {box-shadow:10px 10px 0 #666666;} #2 {box-shadow:-10px -10px 5px #666666;} #3 {box-shadow:inset -5px -5px 0 rgba(255,255,255,0.5);} #4 {box-shadow:5px 5px 5px #666666, inset 5px 5px 5px rgba(255,255,255,0.5);} |
Поддержка
IE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz- prefix], Opera 10.5+
Множественные фоны
Множественные фоны, аналогично закругленным углам, позволяют нам создавать более сложный дизайн без потребности в дополнительных div’ах. Множественные фоны реализуют в точности то, как называются, и позволяют нам определить множественные фоны, а также их расположение и повторять их внутри отдельного элемента.
|
1 |
background: url([image]) [position] [repeat], url([image]) [position] [repeat]; |
Необходимый для их реализации код в точности такой, к которому вы привыкнете, но с использованием запятой для отделения разных объявлений изображений. Его также можно определить полной формой, но использование краткой формы лучше поддается управлению. Также, если хотите разделить на слои свои фоновые изображения, то порядок будет такой: первый в списке – это слой, ближайший к пользователю и так в обратном порядке.
Примеры CSS3
|
1 |
#1 {background:url(lollipop.png) 10px 10px no-repeat, url(stripes.png) left bottom repeat-x, url(diagonal-pattern.jpg), #FFFFFF;} |
Поддержка
IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+
Множественные фоны – еще одна часть CSS3, требующая запасного варианта, так как более старые браузеры просмотрят все объявление, а не просто возьмут первое изображение. Поэтому помните о том, что если ваш дизайн требует этого, нужно сначала установить фон как обычно.
Размер фона
Следующая за множественными фонами – возможность установить размер фона:
|
1 2 3 |
background-size: [<length> | <%> | <auto>] [<length> | <%> | <auto>]; background-size: 100% auto; background-size: 100% auto, 10px 10px; |
Как видно из этого кода, вы можете обеспечить как ширину, так и высоту изображения, при этом ширина заявляется первой. Третья строка также показывает, как использовать размер фона в сочетании с множественными фонами.
Поддержка
IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz- prefix], Firefox 4+, Opera 10.5+
Обрезка фона и точка отсчета фона
Говоря простыми словами, это позволяет вам лучше управлять расположением фона.
|
1 2 |
background-origin: [<border-box> | <padding-box> | <content-box>]; background-clip: [<border-box> | <padding-box> | <content-box>]; |
Точка отсчета фона background-origin позволяет управлять стартовой точкой, при помощи которой вы измеряете офсет, применяемый при использовании позиции фона, в то время, как обрезка фона background-clip позволяет расположить фон так, чтобы тот появлялся только внутри данной области. Внизу на изображении это показано более детально:
Border-box: значение по умолчанию, где в любые расчеты включают фон, так что изображение выходит за пределы рамки.
Padding-box: сдвигает границу, так что любое фоновое изображение или цвет не появятся за пределами рамки.
Content-box: смещает все за содержимое, уменьшает как ширину рамки, так и любой отступ, примененный при расчете расположения рамки.
В действительности этот элемент расширяет границы того, что сейчас возможно делать, так как ни одна версия Firefox не поддерживает этих свойств. У Opera возникают проблемы, а у браузеров webkit некоторые реализации требуют префикса фирмы-разработчика, а некоторые нет.
Поддержка
IE9+, Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 4+, Opera 10.5+
*не все свойства требуют префикса –webkit, за более полной классификацией обратитесь к Quirksmode.
Рамки-изображения
Во времена CSS2 самые сложные края, которые можно было сделать, были волнистыми или пунктирными, все линии прямыми и никакого удовольствия. С помощью рамок-изображений можно создавать такие края, какие хочется и так, как хочется.
|
1 2 3 4 |
border-image: <img src="" alt=""> [slice] [<repeat> | <round> | <stretch>]; border-top-image: <img src="" alt=""> [slice] [<repeat> | <round> | <stretch>]; border-corner-image: <img src="" alt=""> [slice] [<repeat> | <round> | <stretch>]; border-top-left-image: <img src="" alt=""> [slice] [<repeat> | <round> | <stretch>]; |
Как видно из кода вверху, существует как краткая, так и полная формы определения рамок-изображений, а также есть возможность управлять углами по отдельности, чтобы делать более сложные рамки.
При создании изображения для рамок вам нужно создать изображение вроде этого:
Таким образом, ваше изображение действительно показывает рамку. Срез затем используется для определения области рамки и удаления наполнения из центра. При определении среза вы устанавливаете от 1 до 4 значений в процентном соотношении, либо в пикселях (странно, но без px) в следующем порядке: верх, право, низ, лево. Если вы определяете одно единственное число, это значит, вы берете, скажем, 5 пикселей рамки заданного изображения.
Существуют, кроме того, опции для изменения того, каким образом повторяется рамка-изображение — repeat, stretch или round (повтор, растяжение или округление). Растяжение объяснить легко, так как оно растягивает изображение на краях рамки, повтор действует так, как это ожидается и может привести к появлению половинок изображения на рамке. Округление – действительно полезная опция, она действует таким же образом, как повтор, но масштабирует для того, чтобы половинок изображений не было видно.
Примеры CSS3
На самом деле лучше всего объяснить, на что похожа рамка-изображение, можно, показав работающий пример. Потом попробуйте сделать ее сами, это один из тех элементов, которые лучше всего изучаются таким способом.
|
1 2 3 4 |
#1 {border-image:url(border.jpg) 15 15 15 15 round;} #2 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 round;} #3 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 stretch;} #4 {border-width:20px; border-image:url(border.jpg) 15 15 15 15 repeat;} |
Как видите, определять ширину рамки тоже необходимо.
Поддержка
Safari 3.2+[-webkit- prefix], Chrome 5+[-webkit- prefix], Firefox 3.5+ [-moz- prefix], Opera 10.5+
Множественные колонки
Единственное, чем печать всегда превосходила сеть, это разметка текста в множественных колонках. Конечно, мы могли бы сымитировать тот же вид, но это никогда не было гибким решением, и не применялось для чего-то иного, чем статичный контент. Но в CSS3 разработано управление содержимым, позволяя нам определять не только количество колонок, но и размеры межстолбцовых промежутков и зазоров.
|
1 2 3 4 |
column-width: [width]; column-gap: [width]; column-count: [number]; column-rule: [width] [style] [color]; |
Код поясняет сам себя, но есть одна вещь, на которую стоит обратить внимание – случится конфликт, если вы используете всю ширину колонки и рассчитаете так, что количество колонок не подойдет к имеющемуся пространству. И, конечно, если ваш контейнер недостаточно большой, чтобы вместить любую заданную ширину, то результат может оказаться не таким, которого хотелось бы. По этим причинам более удобной опцией является определение количества колонок, а не их ширины.
Масштаб колонок затем устанавливается так, как вы определили бы рамку, но проявится только в зазорах между колонками.
Примеры CSS3
|
1 |
#1 {column-count:3; column-gap:3%; column-rule:3px double #999999;} |
Поддержка
Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.0+ [-moz- prefix], Opera 11+
Градиенты
Последними идут градиенты, которые в данный момент являются самыми сложным элементом CSS3. Почему? Потому что не существует ни одного префикса, не определенного фирмой-разработчиком, и реализация версий Mozilla и webkit сильно различается:
|
1 2 |
background-image:-moz-linear-gradient(#CC0000, #1A82F7); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #CC0000), color-stop(1, #1A82F7)); |
Оба этих решения работают и производят один и тот же эффект, реализация в Mozilla становится более сложной из-за разных углов и цветов внутри градиента. Но самое явное различие состоит в том, как они устанавливают очертания градиента. Mozilla размещает форму градиента, в данном случае линейную, внутри названия свойства, а webkit – внутри своих атрибутов. Объяснение всех возможности займет целую статью, так что в начале использования градиентов я рекомендовал бы онлайн инструмент.
Поддержка
Safari 4+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 3.6+ [-moz- prefix]
И еще…
На горизонтах CSS3 имеется еще многое, включая преобразования, переходы и анимацию, и если хотите, можете все это тоже использовать. По большей части то, что не было затронуто в этой статье, менее широко поддерживается, а в случае с анимацией CSS, то успевает за ней только webkit. В случае с менее поддерживаемыми достижениями следует решить, стоят ли того ваши время и усилия. Должны ли вы проводить часы, реализуя анимацию, если на сайт заходят всего 10 пользователей webkit в месяц? Я сказал бы, что нет, но вы можете думать по-другому.
Что можно сделать, так это почитать о них, и когда вы реально наткнетесь на вебсайт, от которого достаточное количество пользователей действительно получат отличное впечатление, то сможете начать реализовать их тут же.
Селекторы
Ниже приведена выборка новых селекторов, доступных благодаря CSS3 и маленькое описание каждого:
X[att^=»val»] — Любой элемент X со значением атрибута, начинающимся с ‘val’;
X [att$=»val»] — Любой элемент X со значением атрибута, заканчивающимся на ‘val’;
X [att*=»val»] — Любой элемент X со значением атрибута с ‘val’, содержащимся где-то внутри значения атрибута;
X:checked — Управление любой проверенной формой X;
X:disabled — Управление любой неработоспособной формой X;
X:enabled — Управление любой активированной формой X;
X:empty — Любой элемент X, пустой или не имеющий дочерних записей;
X:first-of-type — Элемент X, являющийся первым элементом одного уровня своего вида;
X:last-child — Последняя дочерняя запись элемента X своего исходного элемента;
X:last-of-type — Элемент X, являющийся последним элементом одного уровня своего вида;
X:nth-child(n) — Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента;
X:nth-last-child(n) — Любой элемент X, который является определенной N-ной дочерней записью своего исходного элемента, но отсчитывается от последней дочерней записи;
X:nth-of-type(n) — Любой элемент X, который является определенным N-ным элементом одного уровня своего вида;
X:nth-last-of-type(n) — Любой элемент X, который является определенным N-ным элементом одного уровня своего вида, но отсчитывается от последней дочерней записи;
X:not(s) — Любой элемент X, не равный селектору s;
X:only-child — Элемент X, являющийся единственной дочерней записью своего исходного элемента;
X:only-of-type — Элемент X, являющийся единственной дочерней записью своего исходного элемента и данного вида;
X:selection — Любая часть X, которая выбирается или подсвечивается пользователем;
X:target — Любой элемент X, который является целью ссылающегося URL’а;
X ~ Y — Любой элемент Y, предваряемый элементом одного уровня X.
Media Queries
Media Queries дает нам возможность обеспечить отзывчивый дизайн, основанный на виде устройства, где пользователь смотрит вебсайт. Чтобы полностью отдать должное Media Queries, потребуется целая статью, но для начала вот вам краткий обзор:
Media Queries может быть двух видов, первый – для использования их внутри своего CSS. Следующий пример показывает, как это происходит по отношению к браузеру, находящемуся на экране и имеющему максимальную ширину 800px.
|
1 2 3 |
@media screen and (max-width: 800px) { body {background: #000000;} } |
Кроме того, можно устанавливать Media Queries в своем html, чтобы можно было сослаться на отдельную таблицу стилей исключительно для данного запроса. В следующем примере запрос нацелен отдельно на iPhone 4.
|
1 |
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> |
В длинном списке существует гораздо больше опций, чем показано, таких как ориентация, цвет и разрешение. Медиа-запросы созданы для того, чтобы дать вам возможность делать отличные вебсайты, которые подойдут к ряду устройств и размеров экрана. Вы смогли бы обеспечить уникальную разметку для каждого устройства и разрешения экрана, но в настоящее время они в основном используются для мобильных устройств, таких, как iPhone и iPad.
Поддержка
IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+
@font-face
Это, строго говоря, не совсем CSS3, просто так получилось, что все детали паззла легли по своим местам в то самое время, когда получил развитие CSS3. Font-face дает нам возможность добавлять на свой вебсайт нестандартные шрифты, видимые всеми пользователями, без применения обходных маневров, таких как Cufon и sIFR.
Font-face все еще есть к чему стремиться, пять объявлений шрифта – это слишком много, но необходимо для гарантии полной поддержки.
|
1 2 3 4 5 6 7 8 |
@font-face {font-family:'ComfortaaBold'; src:url('/fonts/Comfortaa_Bold-webfont.eot'); src:local('☺'), url('/fonts/Comfortaa_Bold-webfont.woff') format('woff'), url('/fonts/Comfortaa_Bold-webfont.ttf') format('truetype'), url('/fonts/Comfortaa_Bold-webfont.svg#webfontPdgofT1X') format('svg'); font-weight:normal; font-style:normal;} |
За исключением пользования платными сервисами вроде Typekit и Fontdeck вышеприведенный код считается лучшим способом установить свои объявления @font-face. 5 объявлений шрифта полностью охватывают каждый браузер, а также шрифты svg для iPhone и iPad.
Для более исчерпывающего описания @font-face, бесплатных шрифтов, фантастического генератора @font-face и способа избежать нестилизованного контента Firefox Flash посетите Font Squirrel.
Поддержка
IE6+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+
Самое лучшее из CSS3
Внизу представлен краткий список нескольких сайтов, которые с помощью CSS3 добились великолепного эффекта. Хотя список короткий, это всего лишь верхушка айсберга по отношению к количеству сайтов, использующих сейчас CSS3.
Достоинства CSS3
Богатые интерфейсы — Имея такое управление своими вебсайтами, есть возможность создавать более роскошные пользовательские интерфейсы. Хотя в прошлом мы могли достигнуть того же эффекта, использовав изображение, мы их не обязательно использовали, CSS3 дает нам больше свободы для реализации подобных вещей.
Реализация — Довольно ясно, что применение закругленных углов border radius занимает при реализации гораздо меньше времени, чем создание четырех изображений углов и div’ов для их расположения. Многое созданное в CSS3 сделано так, чтобы дать нам возможность перевести созданное с использованием изображений в код или сократить код, используемый для реализации более сложных интерфейсов. Так мы получаем возможность строить сайты быстрее и легче.
Скорость — Сокращение количества используемых изображений и величины кода, необходимого для реализации дизайна, делает его более легковесным и, таким образом, быстрее загружающимся. Это также имеет сногсшибательный эффект в SEO, где скорость сайта сейчас стала весомым фактором ранжирования в Google.
Удобство сопровождения — Производить изменения в своем вебсайте теперь станет гораздо проще. Представьте себе, что вы создали кнопку с градиентами и тенями как изображение. Если нужно изменить любую их этих вещей или сделать кнопку шире, вам пришлось бы сделать измерения в изображении и экспортировать его в сеть. В CSS3 вы могли бы сделать те же самые изменения за доли времени.
CSS3: чего следует остерегаться
При правильном использовании CSS3 не должен делать слишком много ошибок, но остерегайтесь следующего:
Запасные варианты — Всегда старайтесь писать свой код так, чтобы если вдруг свойству CSS3 потребовалась бы альтернатива для более старого браузера, то она была бы установлена. Запасной вариант, конечно, должен быть не из CSS3 и предшествовать любому коду CSS3. Таким образом, более старый браузер увидит и реализует то, что понимает и просто пройдет мимо того, чего не понимает.
Неработоспособный CSS — Хотя в W3C есть контрольное устройство CSS3, оно не очень совершенно и многие в данный момент допустимые реализации будут возвращать ошибки. Проверка данных – не святой Грааль, каковой ее многие признают, а то, к чему нужно отнестись с осторожностью. Так что при валидации сайта используйте свой опыт для суждения о том, что является настоящей ошибкой, а что нет.
Безобразные сайты — К счастью, большинство читающих OXP (onextrapixel.com) должны уже хорошо понимать, что делают, и никогда не поддадутся соблазну использовать слишком много CSS3. Но многие только начинают употреблять CSS3, в результате чего неизбежно появятся уродливые вебсайты. При изучении CSS3 лучше начать с малого, чем сразу все смешать в одну кучу.
Префиксы фирмы-разработчика — Приведенные примеры демонстрируют многие свойства CSS3, требующие префиксов фирмы-разработчика для работы в некоторых браузерах. Это означает удвоение или даже утроение количества кода, требуемого для одного эффекта. Хотя это может привести к смешанному коду и головной боли при его написании и управлении, сейчас при использовании CSS3 это необходимость.
Заключение статьи «CSS3 для начинающих»
Итак, вот краткое пошаговое введение в то, что можно делать с помощью CSS3. Большая часть информации написана как введение в разные свойства, и существует множество статей, посвященных каждой по отдельности. Для более досконального понимания каждого свойства прочтите их.
Но, к счастью, читая этот выпуск посвящённый CSS3 для начинающих, вы убедитесь, что сможете пользоваться данной технологией, если даже этого раньше и не делали. Если нет, то это, конечно, ваш выбор, но сейчас действительно пора начать учиться, иначе можно сильно отстать.
Автор: Kean Richmond
Источник: //www.onextrapixel.com
Редакция: Команда webformyself.
Комментарии (14)