Все, что мы изучили до этого относится к стандартам CSS 1.xx и CSS 2.xx.

Последним стандартом является CSS 3, который по состоянию на сейчас (конец 2013-го года) все еще находится в разработке организацией W3C. Тем не менее, последние версии популярных браузеров широко поддерживают новый стандарт, поэтому есть смысл некоторые наиболее интересные, красивые и наименее глючные возможности новой спецификации CSS 3 использовать уже сегодня, проявляя, конечно, осторожность и сдерженность.

Основная проблема в использовании стандарта CSS 3 заключается в том, что браузеры (здесь и далее под термином "браузеры" следует понимать пятерку наиболее популярных браузеров по состоянию на сейчас: Гугль Хром, FireFox, IE, Safari, Opera) имеют разный уровень поддержки новой спецификации и разный подход к подключению новых свойств.

Браузеры, префиксы для подключения свойств CSS 3.

NN	Лого	Браузер	Префиксы
1		Гугль Хром	-webkit-
2		FireFox	-moz-
3		IE	-ms-
4		Safari	-webkit-
5		Opera	-o-

Процесс изучения новых свойств осложняет тот факт, что таблица выше работает далеко не во всех случаях. Иногда, свойства CSS 3 действительно следует подключать с данными префиксами, т.е. в 4 разных видах (Гугль Хром и Safari используют один и тот же префикс - спасибо им за это, какой ни есть, а все ж стандарт...). Но некоторые свойства работают и без префиксов. Часто бывает и так, что свойство не работает ни с префексом, ни без префекса, вообще никак.

На данном курсе мы не будем слишком глубоко погружаться в многочисленные свойства CSS 3, ограничимся только наиболее интересными и перспективными, которые более или менее работают ок во всех браузерах.

Давайте, начнем с того, что бросим взгляд на сводную таблицу свойств CSS 3.

Сводная таблица свойств CSS 3.

NN	Свойство	Гугль Хром	FireFox	IE	Safari	Opera
1	alignment-adjust	-	-	-	-	-
2	alignment-baseline	-	-	-	-	-
3	@keyframes	-webkit-	16	10	-webkit-	12.1
4	animation	-webkit-	16	10	-webkit-	12.1
5	animation-name	-webkit-	16	10	-webkit-	12.1
6	animation-duration	-webkit-	16	10	-webkit-	12.1
7	animation-timing-function	-webkit-	16	10	-webkit-	12.1
8	animation-delay	-webkit-	16	10	-webkit-	12.1
9	animation-iteration-count	-webkit-	16	10	-webkit-	12.1
10	animation-direction	-webkit-	16	10	-webkit-	12.1
11	animation-play-state	-webkit-	16	10	-webkit-	12.1
12	appearance	-webkit-	-moz- 3	-	-webkit-	-
13	backface-visibility	-webkit-	-moz-	-ms- 10	-webkit-	-
14	background-clip	4	4	9	5	10.5
15	background-origin	4	4	9	5	10.5
16	background-size	4	4	9	5	10.5
17	baseline-shift	-	-	-	-	-
18	bookmark-label	-	-	-	-	-
19	bookmark-level	-	-	-	-	-
20	bookmark-target	-	-	-	-	-
21	border-bottom-left-radius	4	4	9	5	10.5
22	border-bottom-right-radius	4	4	9	5	10.5
23	border-image	16	15	-	6	-o- 11
24	border-image-outset	-	-	-	-	-
25	border-image-repeat	-	-	-	-	-
26	border-image-slice	-	-	-	-	-
27	border-image-source	-	-	-	-	-
28	border-image-width	-	-	-	-	-
29	border-radius	4	4	9	5	10.5
30	border-top-left-radius	4	4	9	5	10.5
31	border-top-right-radius	4	4	9	5	10.5
32	box-decoration-break	-	-	-	-	-
33	box-align	-webkit-	-moz-	-	-webkit-	-
34	box-direction	-webkit-	-moz-	-	-webkit-	-
35	box-flex	-webkit-	-moz-	-	-webkit-	12.1
36	box-flex-group	-	-	-	-	-
37	box-lines	-	-	-	-	-
38	box-ordinal-group	-webkit-	-moz-	-	-webkit-	-
39	box-orient	-webkit-	-moz-	-	-webkit-	-
40	box-pack	-webkit-	-moz-	-	-webkit-	-
41	box-shadow	10	4	9	5.1	10.5
42	box-sizing	10	-moz-	8	5.1	9.5
43	color-profile	-	-	-	-	-
44	column-fill	-	-	-	-	-
45	column-gap	-webkit-	-moz-	10	-webkit-	11.1
46	column-rule	-webkit-	-moz-	10	-webkit-	11.1
47	column-rule-color	-webkit-	-moz-	10	-webkit-	11.1
48	column-rule-style	-webkit-	-moz-	10	-webkit-	11.1
49	column-rule-width	-webkit-	-moz-	10	-webkit-	11.1
50	column-span	-webkit-	-	10	-webkit-	11.1
51	column-width	-webkit-	-moz-	10	-webkit-	11.1
52	columns	-webkit-	-moz-	10	-webkit-	11.1
53	column-count	-webkit-	-moz-	10	-webkit-	11.1
54	crop	-	-	-	-	-
55	dominant-baseline	-	-	-	-	-
56	drop-initial-after-adjust	-	-	-	-	-
57	drop-initial-after-align	-	-	-	-	-
58	drop-initial-before-adjust	-	-	-	-	-
59	drop-initial-before-align	-	-	-	-	-
60	drop-initial-size	-	-	-	-	-
61	drop-initial-value	-	-	-	-	-
62	fit	-	-	-	-	-
63	fit-position	-	-	-	-	-
64	float-offset	-	-	-	-	-
65	@font-face	4	3.6	9	3	10
66	font-size-adjust	-	2	-	-	-
67	font-stretch	-	-	-	-	-
68	grid-columns	-	-	-	-	-
69	grid-rows	-	-	-	-	-
70	hanging-punctuation	-	-	-	-	-
71	hyphenate-after	-	-	-	-	-
72	hyphenate-before	-	-	-	-	-
73	hyphenate-characters	-	-	-	-	-
74	hyphenate-lines	-	-	-	-	-
75	hyphenate-resource	-	-	-	-	-
76	hyphens	-	-	-	-	-
77	icon	-	-	-	-	-
78	image-orientation	-	-	-	-	-
79	image-resolution	-	-	-	-	-
80	inline-box-align	-	-	-	-	-
81	line-stacking	-	-	-	-	-
82	line-stacking-ruby	-	-	-	-	-
83	line-stacking-shift	-	-	-	-	-
84	line-stacking-strategy	-	-	-	-	-
85	mark	-	-	-	-	-
86	mark-after	-	-	-	-	-
87	mark-before	-	-	-	-	-
88	marks	-	-	-	-	-
89	marquee-direction	-webkit-	-	-	-webkit-	-
90	marquee-play-count	-webkit-	-	-	-webkit-	-
91	marquee-speed	-webkit-	-	-	-webkit-	-
92	marquee-style	-webkit-	-	-	-webkit-	-
93	move-to	-	-	-	-	-
94	nav-down	-	-	-	-	11.5
95	nav-index	-	-	-	-	11.5
96	nav-left	-	-	-	-	11.5
97	nav-right	-	-	-	-	11.5
98	nav-up	-	-	-	-	11.5
99	opacity	4	2	9	3.1	9
100	outline-offset			-		11
101	overflow-style	-	-	-	-	-
102	overflow-x		2	9
103	overflow-y		2	9
104	page	-	-	-	-	-
105	page-policy	-	-	-	-	-
106	perspective	-webkit-	-	-	-webkit- 5	-
107	perspective-origin	-webkit-	-	-	-webkit-	-
108	punctuation-trim	-	-	-	-	-
109	rendering-intent	-	-	-	-	-
110	resize	4	5	-	4	-
111	rest	-	-	-	-	-
112	rest-after	-	-	-	-	-
113	rest-before	-	-	-	-	-
114	rotation	-	-	-	-	-
115	rotation-point	-	-	-	-	-
116	ruby-align	-	-		-	-
117	ruby-overhang	-	-		-	-
118	ruby-position	-	-		-	-
119	ruby-span	-	-	-	-	-
120	size	-	-	-	-	-
121	string-set	-	-	-	-	-
122	target	-	-	-	-	-
123	target-name	-	-	-	-	-
124	target-new	-	-	-	-	-
125	target-position	-	-	-	-	-
126	text-align-last	-	-	-	-	-
127	text-emphasis	-	-	-	-	-
128	text-height	-	-	-	-	-
129	text-justify	-	-	5	-	-
130	text-outline	-	-	-	-	-
131	text-overflow	4	7	6	3.1	11
132	text-shadow	4	3.5	10	4	9.5
133	text-wrap	-	-	-	-	-
134	transform	-webkit-	16	10	-webkit-	12.1
135	transform-origin	-webkit-	16	10	-webkit-	12.1
136	transform-style	-webkit-	-	-	-webkit- 5	-
137	transition	26	16	10	-webkit-	12.1
138	transition-property	26	16	10	-webkit-	12.1
139	transition-duration	26	16	10	-webkit-	12.1
140	transition-timing-function	26	16	10	-webkit-	12.1
141	transition-delay	26	16	10	-webkit-	12.1
142	word-break	4	15	5.5	3	-
143	word-wrap	4	3.5	5	3.1	10.5

Из этой таблицы видно, что новых свойств сделано много, но теория значительно опережает практику. Есть смысл изучать и внедрять те свойства, которые поддерживаются всеми браузерами. В целом этого принципа мы и будем придерживаться далее.

CSS3 логически разбивается на т.н. "модули". Наиболее значимые из них следующие:

• Селекторы (Selectors)
• Блочные Модели (Box Model)
• Фоны и Границы (Backgrounds and Borders)
• Текстовые эффекты (Text Effects)
• Двумерные и Трехмерные Трансформации (2D/3D Transformations)
• Анимационные эффекты (Animations)
• Разбивка Текста на Колонки (Multiple Column Layout)
• Интерфейс Пользователя (User Interface)

На следующих уроках мы рассмотрим наиболее интересные и нужные свойства из этих модулей.