Различия между CSS и CSS3
Первоначальная спецификация каскадных таблиц стилей, а также ее гораздо более поздняя версия CSS3 — это технологии, используемые для улучшения и форматирования веб-страниц HTML. Первоначально CSS был разработан для обработки уровня представления веб-страницы более эффективным способом, чем форматирование с помощью HTML, который никогда не предназначался для обработки сложной конструкции современной сети. Поскольку CSS2 является общепринятым расширением CSS1, термин CSS без номера подразумевает включение CSS2. По состоянию на июль 2014 года спецификация CSS3 все еще находится в стадии разработки, поэтому веб-разработчикам необходимо учитывать, что поддержка функций зависит от браузера.
CSS3 обратно совместим с CSS
CSS3 — это обновление CSS2, поддерживающее совместимость со всеми функциями CSS — CSS3 не объявляет устаревшим какой-либо код CSS. Код CSS3 предназначен для того, чтобы веб-страницы выглядели лучше и загружались быстрее, а также сокращали время разработки для создания страниц в браузере пользователя. CSS3 делает веб-дизайн менее зависимым от файлов изображений для элементов дизайна страницы и сокращает количество запросов на передачу файлов и время загрузки за счет использования меньшего количества изображений. CSS1 сосредоточился на форматировании внешнего вида, тогда как CSS2 добавил возможности позиционирования для текста и объектов. Старые версии браузеров, такие как IE 9 и более ранние, не поддерживают широко добавленные функции CSS3, что может потребовать дополнительного времени на разработку для поддержки резервного кода CSS.
CSS3 добавляет закругленные углы и градиенты
До появления CSS3 веб-разработчикам приходилось проектировать файлы изображений, добавляя такие элементы, как закругленные углы для структурных границ и градиенты фонового изображения; CSS3 включает сопоставимые функции, которые можно добавить с помощью нескольких строк кода. В CSS веб-разработчик должен разработать рамку или градиент, загрузить их на сервер изображений, поместить изображение на страницу и использовать CSS для правильного позиционирования границы. В CSS3 веб-разработчик может выполнить нечто подобное с кодом вроде «.roundBorder{border-radius:10px;}». Фоновые градиенты немного сложнее и требуют разного кода для разных браузеров. Например, градиент от белого к черному для Chrome и IE использует такой код, как ".gradBG{background:liner-gradient(white,black);}".
CSS3 добавляет функции анимации и текстовые эффекты
CSS3 имеет несколько функций, отсутствующих в CSS, для улучшения внешнего вида элементов вашей страницы. С помощью CSS3 веб-разработчики могут добавлять тень к тексту, чтобы его было легче читать, или добавлять визуальное чутье, а также принудительно разрывать строки в более длинных словах, чтобы они помещались внутри столбцов с переносом слов. До появления CSS3 веб-разработчикам приходилось программировать анимацию на таких языках сценариев, как JavaScript и jQuery; CSS3 добавляет несколько функций анимации на слой дизайна. W3C все еще работает над стандартом веб-анимации, чтобы решить проблемы совместимости между различными методами анимации.
CSS3 определяет текстовые столбцы
В CSS3 добавлена возможность разбивать текстовые разделы на несколько столбцов, чтобы их можно было читать как газету. В спецификации CSS2 веб-разработчикам сложно создавать многоколоночные текстовые разделы, потому что стандарт не поддерживает автоматическое разделение текста. В частности, на сайтах с адаптивным дизайном (методом разработки, при котором контент переупорядочивается и изменяется в зависимости от разрешения экрана устройства просмотра) людям с большими мониторами может быть трудно читать текстовые строки, расползающиеся по экрану.