Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Другая отдельная, но не менее важная часть создания веб-страниц — это каскадные таблицы стилей (CSS). Как вы, наверное, знаете, CSS — это язык стилей, который описывает, как пользователю предоставляется разметка HTML. CSS3 — это последняя версия спецификации CSS.
CSS3 содержит почти все, что включено в CSS2.1, предыдущую версию спецификации. Он также добавляет новые функции, чтобы помочь разработчикам решить ряд проблем, связанных с презентацией, не прибегая к плагинам сценариев или дополнительным изображениям.
Новые функции в CSS3 включают поддержку дополнительных селекторов, теней, закругленных углов, обновленных функций макета, анимации, прозрачности и многого другого.
CSS3 отличается от HTML5. В этой публикации мы будем использовать термин CSS3 для обозначения текущего уровня спецификации CSS с особым акцентом на том, что было добавлено после CSS2.1. Таким образом, CSS3 отделен от HTML5 и связанных с ним API.
Здесь следует сделать последнее замечание относительно CSS и текущей метки «версии 3». Хотя это, похоже, подразумевает, что однажды будет «CSS4», Таб Аткинс, член Рабочей группы CSS, отметил, что у него нет планов. Вместо этого, как он объясняет, спецификация была разделена на отдельные модули, каждый со своим собственным номером версии. Таким образом, вы можете увидеть что-то вроде «CSS Color Module Level 4» — но это не относится к «CSS4». Независимо от того, на каком уровне находится отдельный модуль, он все равно будет технически под зонтиком «CSS3», или еще лучше просто «CSS». Для целей этой книги мы все равно будем называть его «CSS3», но просто поймем, что это, вероятно, будет последний номер версии для языка в целом.
Почему я должен заботиться о CSS3?
Позже в этой книге мы рассмотрим более подробно многие из новых функций в CSS. А пока мы дадим вам представление о том, почему новые методы CSS3 так интересны для веб-дизайнеров.
Некоторые методы проектирования находят применение практически в каждом проекте. Тени, градиенты и закругленные углы — вот три хороших примера. Мы видим их повсюду. При правильном использовании и в соответствии с общей темой и целью сайта, эти улучшения могут сделать дизайн процветающим. Возможно, вы думаете: мы создавали эти элементы дизайна с использованием CSS в течение многих лет. А у нас есть?
В прошлом для создания градиентов, теней и закругленных углов веб-дизайнерам приходилось прибегать к ряду хитрых приемов. Иногда требовались дополнительные элементы HTML. В тех случаях, когда HTML поддерживается достаточно чистым, требуются скриптовые хаки. В случае градиентов использование дополнительных изображений было неизбежным. Мы смирились с этими обходными путями, потому что не было никакого другого способа выполнить эти проекты. CSS3 позволяет включать эти и другие элементы дизайна в дальновидной манере, что дает множество преимуществ: более четкая разметка, поддерживаемый код, меньшее количество посторонних изображений и более быстрая загрузка страниц.
Примечание. Краткая история префиксов поставщиков
С тех пор, как начали внедряться экспериментальные функции в CSS3, разработчикам приходилось использовать префиксы в своих CSS для нацеливания этих функций в различных браузерах. Браузеры добавляют префиксы вендоров к функциям, которые все еще могут быть экспериментальными в спецификации (то есть они не очень далеки от процесса стандартизации). [3] Например, когда-то было обычным увидеть что-то подобное для простого перехода CSS:
a {
color: #3381d6;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: color 0.4s ease;
}Это может показаться контрпродуктивным только что упомянутому, а именно тому, что CSS3 делает код чище и проще в обслуживании. К счастью, многие префиксы больше не нужны. Кроме того, мы настоятельно рекомендуем разработчикам использовать инструмент, который автоматически добавит префикс к вашему CSS.
Один из таких инструментов называется Autoprefixer. Autoprefixer может быть включен как часть вашего рабочего процесса Grunt для пост-обработки вашего CSS. При этом вам нужно включить только стандартную версию какой-либо функции CSS, и Autoprefixer проверит базу данных «Я могу использовать…», чтобы определить, нужны ли какие-либо префиксы поставщика. Затем он автоматически создаст ваш CSS со всеми необходимыми префиксами. У вас также есть возможность вручную обработать ваш CSS с помощью онлайн-инструмента, такого как pleeease. Как бы то ни было, во многих местах этой книги мы будем включать префиксы поставщиков, однако обязательно используйте онлайн-ресурс для получения актуальной информации о том, какие функции по-прежнему требуют префиксов.
Что мы подразумеваем под «реальным миром»?
В реальном мире мы создаем веб-приложения и обновляем их, настраиваем, тестируем на предмет потенциальных проблем с производительностью и постоянно корректируем их дизайн, макет и контент.
Другими словами, в реальном мире мы не пишем код, который не собираемся пересматривать. Мы пишем код, используя самые надежные, поддерживаемые и эффективные доступные методы, с каждым намерением вернуться к работе над этим кодом еще раз, чтобы внести любые необходимые улучшения или изменения. Это проявляется не только в веб-сайтах и веб-приложениях, которые мы создаем и поддерживаем как личные проекты, но и в тех, которые мы создаем и поддерживаем для наших клиентов.
Нам нужно постоянно искать новые и лучшие способы написания нашего кода. HTML5 и CSS3 — большой шаг в этом направлении.
[3] Для получения дополнительной информации см .: http://www.sitepoint.com/web-foundations/vendor-specific-properties/