AJAX загрузка
home

CSS3 значительно расширяет возможности CSS2.1.

Что такое CSS3?

CSS3 - это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.

Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как JavaScript) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.

В CSS3 Вы можете:

  • Создавать элементы со сглаженными углами;
  • Создавать линейные и сферические градиенты;
  • Более гибко оформлять фоновую картинку элементов;
  • Добавлять к элементам и к тексту элементов тени;
  • Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);
  • Создавать анимацию и различные эффекты переходов;
  • Задавать цвета несколькими новыми способами и многое другое.

Пример 


background:-webkit-linear-gradient(top,#E567B1,#84004D);
background:-moz-linear-gradient(top,#CB0077,black);
background:-o-linear-gradient(top,#CB0077,black);
box-shadow:3px 3px 10px 1px #000000;
Попробовать в редакторе
Быстрый просмотр

Обратите внимание: новые CSS3 свойства разобранные в данном учебнике поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+. Особые случаи будут специально оговариваться.

Обратите внимание: спецификация CSS3 от W3C все еще находится в разработке, поэтому поведение некоторых свойств рассмотренных в данном учебнике может измениться.

Поддержка CSS3 в старых браузерах

Доля использования старых браузеров полностью или частично не поддерживающих CSS3 уже не так велика (данные StatCounter для России на Октябрь 2013):

  • Internet Explorer 9 (частично не поддерживает CSS3 свойства): 3%
  • Internet Explorer 8 (не поддерживает CSS3 свойства): 4.5%

Однако мы все же рекомендуем дополнительно анализировать количество пользователей использующих старые браузеры для каждого сайта индивидуально (например с помощью Google Analytics) и если это количество еще велико воздержатся от использования свойств, которые могут привести к проблемам отображения сайта в старых браузерах.

Для эмуляции поведения новых свойств CSS3 в браузерах Internet Explorer 6-9 Вы можете использовать специальную библиотеку css3pie.