Главная » Полезные статьи » Разное » Порядок свойств CSS3 имеет значение
Распечатать статью

Порядок свойств CSS3 имеет значение

Июнь 20th, 2012 Archi

При указании свойств CSS3 современная мудрость гласит: «ставь реальное свойство CSS3 после всех браузерозависимых свойств»:

1 .not-a-square {
2 -webkit-border-radius: 10px; 
3 moz-border-radius: 10px;
4 border-radius: 10px;
5 }

Существует также другой «неправильный способ»:

1 .not-a-square {
2 border-radius: 10px;
3 -moz-border-radius: 10px;
4 -webkit-border-radius: 10px;
5 }

Чтобы понять почему порядок имеет значение, стоит вспомнить историю:

  • Очень давно: Ни одно из свойств не поддерживалось браузерами, и конечно нечего говорить и об их порядке.
  • В недавнем прошлом: Поддерживались только свойства с префиксами, и поэтому порядок не имел значения.
  • Сейчас: Поддерживаются и реальные свойства CSS3 и свойства с префиксами. Если свойство с префиксом располагается после реального, оно его переопределяет.
  • В будущем: Будут поддерживаться только реальные свойства, и порядок снова будет не важен.

Очень давно

1 .not-a-square { 
2 border-radius: 10px; /* игнорируется */
3 -webkit-border-radius: 10px; /* игнорируется */
4 }

В недавнем прошлом

1 .not-a-square {
2 border-radius: 10px; /* игнорируется */
3 -webkit-border-radius: 10px; /* игнорируется */
4 }

Сейчас

1 .not-a-square {
2 border-radius: 10px; /* переопределяется */
3 -webkit-border-radius: 10px; /* используется */
4 }

В будущем

1 .not-a-square {
2 border-radius: 10px; /* используется */
3 -webkit-border-radius: 10px; /* игнорируется */
4 }

И если например мы захотим сделать блок с закругленными углами так:

1 .not-a-square {
2 /* These do totally different things */
3 border-radius: 30px 10px;
4 -webkit-border-radius: 30px 10px;
5 }

и создадим тестовую разметку:

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset=utf-8 />
05 <title>JS Bin</title>
06 <style>
07 p {
08 margin: 20px;
09 width: 300px;
10 }
11 #wrongway { background: #ccc; padding: 30px;
12 border-radius: 30px 10px;
13 -webkit-border-radius: 30px 10px;
14 }
15 #rightway { background: #ccc; padding: 30px;
16 -webkit-border-radius: 30px 10px;
17 border-radius: 30px 10px;
18 }
19 </style>
20 </head>
21 <body>
22 <p id="wrongway">Wrong Way</p>
23 <p id="rightway">Right Way</p>
24 </body>
25 </html>​

то получим нежелательный для нас результат:

Правильный и неправильный способ расположения свойства CSS3

Так что ставьте реальное свойство CSS3 после всех аналогичных свойств с префиксами.

Источник:   w3pro.ru

Опубликовано в рубрике Разное Метки: , , , ,
«
»
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи

Шаблоны Joomla  |  Шаблоны phpBB  |  Темы Wordpress  |  Скачать Joomla  |  Скачать Wordpress  |  Скачать phpBB  |  Скачать Drupal