Панель Управления





Курс CSS. Урок 45.
Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 45. Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx. Все, что мы изучили до этого относится к стандартам CSS 1.xx и CSS 2.xx. Последним стандартом является CSS 3, который по состоянию на сейчас (конец 2013-го года) все еще находится в разработке организацией W3C. Тем не менее, последние версии широко поддерживают новый стандарт, поэтому есть смысл некоторые наиболее интересные, красивые и наименее глючные возможности новой спецификации CSS 3 использовать уже сегодня, проявляя, конечно, осторожность и сдерженность. CSS3 логически разбивается на "модули". Селекторы (Selectors). Блочные Модели (Box Model). Фоны и Границы (Backgrounds and Borders). Текстовые эффекты (Text Effects). Двумерные и Трехмерные Трансформации (2D/3D Transformations). Анимационные эффекты (Animations). Разбивка Текста на Колонки (Multiple Column Layout). Интерфейс Пользователя (User Interface).
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 45.
Заключение по версиям CSS 1.xx, 2.xx.
Введение по версиям CSS 3.xx.
Все, что мы изучили до этого относится к стандартам 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 FireFox -moz-
3 IE IE -ms-
4 Safari Safari -webkit-
5 Opera 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)
На следующих уроках мы рассмотрим наиболее интересные и нужные свойства из этих модулей.

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: ::  / 


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p045.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑