Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

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

Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.

1. Progressive Internet Explorer или PIE ^[1] – помогает IE 6+ версии стать более умным, и распознавать CSS3 свойства. Во всяком случае — его декоративную часть. Скачать его можно тут ^[2]. Из этой библиотеки нам понадобится файл PIE.htc, который необходимо положить в один каталог с файлом стилей, из которого мы потом его будем подключать.

2. jQuery.textshadow. ^[3] — учит все тот же IE ниже 9 версии использовать свойство text-shadow. Для корректной работы необходимо использовать Modernizr ^[4] и собственно сам jQuery ^[5].

3. Selectivizr ^[6] — js библиотека, которая научит IE 6-8 псевдо-классам, псевдо-элементам и селекторам стандартов CSS 2.1 и CSS 3. Кстати, для его работы также нужно использовать Modernizr, или другую библиотеку. Подробнее здесь ^[6].

Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.

Закругленные края или border-radius

.border-radius {
  -webkit-border-radius:10px; 
  -moz-border-radius: 	10px; 
  border-radius: 	10px; 
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  behavior: url(PIE.htc);
}

Префиксы -webkit- , -moz- и другие, здесь и в последующем, используются для поддержки свойств различными браузерами.

Свойство

background-clip: padding-box; 

исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.

Строка

behavior: url(PIE.htc); 

подключает наш PIE файл, для поддержки данного свойства IE.

Тень блока или box-shadow

.box-shadow{
	-moz-box-shadow: 	3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 		3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
	behavior: url(PIE.htc);
}

Свойства

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');

используются для IE.

Градиент на заднем фоне или background: linear-gradient()

.gradient{
	background-color: #444444;
	background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
	background: -webkit-linear-gradient(top, #444444, #999999);
	background:    -moz-linear-gradient(top, #444444, #999999);
	background:     -ms-linear-gradient(top, #444444, #999999);
	background:      -o-linear-gradient(top, #444444, #999999);
	background:         linear-gradient(to bottom, #444444, #999999);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
	-pie-background: 	linear-gradient(to bottom, #444444, #999999);
    behavior: url(PIE.htc);
}

Двойной задний фон или background: url(), url();

.multiple-background{
	background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat;
    -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat;
    behavior: url(PIE.htc);
}

Современные браузеры, вроде, все понимают, а для IE опять используем PIE.

Картинка вместо обводки или border-image: url();

.border-image{
    -moz-border-image:    url('image.png') 30 round round;
	-webkit-border-image: url('image.png') 30 round round;
	-o-border-image:      url('image.png') 30 round round;
	border-image:         url('image.png') 30 round round;
    behavior: url(PIE.htc);
}

Тень текста или text-shadow

На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.

Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров

.text-shadow{
    text-shadow: 1px 1px 3px #000;
}

а затем, c помощью библиотеки, просим необычные браузеры IE нас понять

<script type="text/javascript">
    $(function(){
       $(".text-shadow").textShadow();
    })
</script>

предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.

Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing

.box-sizing{
    box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    -webkit-box-sizing: border-box;
}

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

Ставим блоки в линию или display: inline-block

Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так

.inline-block{
    display: inline-block;
}

Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:

.inline-block{
    min-height: 250px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    _height: 250px;
}

Здесь

    display: -moz-inline-stack;

используется для понимания inline-block старой Mozilla.
Свойство

    vertical-align: top; 

выравнивает все блоки по вертикали по верху. В зависимости от задачи можно и по низу.
И наконец свойства

    zoom: 1;
    *display: inline;
    _height: 250px;

используются для IE. Обратите внимание что в данном случае _height: 250 используется потому, что IE не знает свойства min-height.

Прозрачность или opacity

.opacity{
  -moz-opacity:   0.5;
  -khtml-opacity: 0.5;
  opacity:        0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.

Анимация или transition

.transition {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
          transition: all 1s ease;
}

Трансформация объектов или transform

.transform{
  -webkit-transform: scale(0.3);
     -moz-transform: scale(0.3);
      -ms-transform: scale(0.3);
       -o-transform: scale(0.3);
          transform: scale(0.3);
}

Свойства transition и transform не поддерживаются браузерам IE ниже 9 версии, а transition и вовсе только с 10 версии. Решения для старых IE я пока тоже не нашел.

Размер заднего фона или background-size

.background-size{
    background: url("back.jpg") no-repeat top center;
    -o-background-size:       cover;
    -webkit-background-size:  cover;
    -khtml-background-size:   cover;
    -moz-background-size:     cover;
    background-size:          cover;
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='back.jpg',sizingMethod='scale')";
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='back.jpg', sizingMethod='scale');
}

Селекторы CSS3

Речь идет о таких селекторах как

ul li:fist-child{}

ul li:last-child{}

ul li:nth-child(3){}

input[attr='']{}

a:hover{}

И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке ^[6], в разделе «How does it work?».

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

Автор: popovsergey

Источник ^[7]