Добрый день, союзники!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.
Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.
Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.
1. Progressive Internet Explorer или PIE – помогает IE 6+ версии стать более умным, и распознавать CSS3 свойства. Во всяком случае — его декоративную часть. Скачать его можно тут. Из этой библиотеки нам понадобится файл PIE.htc, который необходимо положить в один каталог с файлом стилей, из которого мы потом его будем подключать.
Есть и минусы, данная библиотека сильно нагружает старые браузеры, поэтому использовать ее стоит в крайнем случае и лучше отдавать пользователю упрощенную версию веб-страницы.
2. jQuery.textshadow. — учит все тот же IE ниже 9 версии использовать свойство text-shadow. Для корректной работы необходимо использовать Modernizr и собственно сам jQuery. Так же стоит отметить, что данная библиотека как и PIE сильно нагружает старые браузер, и использовать его лучше в крайних случаях. Тень можно попробовать сделать псевдо-элементами.
3. Selectivizr — js библиотека, которая научит IE 6-8 псевдо-классам, псевдо-элементам и селекторам стандартов CSS 2.1 и CSS 3. Кстати, для его работы также нужно использовать Modernizr, или другую библиотеку. Подробнее здесь.
Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.
Свойство
Строка
Свойства
Современные браузеры, вроде, все понимают, а для IE опять используем PIE.
Здесь свойство behavior не будет работать в IE10.
На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.
Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
а затем, c помощью библиотеки, просимнеобычные браузеры IE нас понять
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.
К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует.
Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
Здесь
Свойство
И наконец свойства
используются для IE. Обратите внимание что в данном случае
Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.
Свойства
Речь идет о таких селекторах как
И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке , в разделе «How does it work?».
Напоследок, хочется отметить, что я не рассматривал все свойства на кроссбраузерность, а только те, что чаще всего используются в повседневной практике. Надеюсь данный пост может быть Вам, хоть чем-то, полезен!
UPDATE
Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!
UPDATE
Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!
Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.
Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.
Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.
1. Progressive Internet Explorer или PIE – помогает IE 6+ версии стать более умным, и распознавать CSS3 свойства. Во всяком случае — его декоративную часть. Скачать его можно тут. Из этой библиотеки нам понадобится файл PIE.htc, который необходимо положить в один каталог с файлом стилей, из которого мы потом его будем подключать.
Есть и минусы, данная библиотека сильно нагружает старые браузеры, поэтому использовать ее стоит в крайнем случае и лучше отдавать пользователю упрощенную версию веб-страницы.
2. jQuery.textshadow. — учит все тот же IE ниже 9 версии использовать свойство text-shadow. Для корректной работы необходимо использовать Modernizr и собственно сам jQuery. Так же стоит отметить, что данная библиотека как и PIE сильно нагружает старые браузер, и использовать его лучше в крайних случаях. Тень можно попробовать сделать псевдо-элементами.
3. Selectivizr — js библиотека, которая научит IE 6-8 псевдо-классам, псевдо-элементам и селекторам стандартов CSS 2.1 и CSS 3. Кстати, для его работы также нужно использовать Modernizr, или другую библиотеку. Подробнее здесь.
Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.
Закругленные края или border-radius
.border-radius {
border-radius: 10px;
background-clip: padding-box;
behavior: url(PIE.htc);
}
Свойство
background-clip: padding-box;
исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.Строка
behavior: url(PIE.htc);
подключает наш PIE файл, для поддержки данного свойства IE.Тень блока или box-shadow
.box-shadow{
box-shadow: 3px 3px 4px #444;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
behavior: url(PIE.htc);
}
Свойства
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
используются для IE.Градиент на фоне или background: linear-gradient()
.gradient{
background-color: #444444;
background: -webkit-linear-gradient(top, #444444, #999999);
background: linear-gradient(to bottom, #444444, #999999);
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{
-webkit-border-image: url('image.png') 30 round round;
border-image: url('image.png') 30 round round;
behavior: url(PIE.htc);
}
Здесь свойство behavior не будет работать в IE10.
Тень текста или text-shadow
На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.
Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
.text-shadow{
text-shadow: 1px 1px 3px #000;
}
а затем, c помощью библиотеки, просим
<script type="text/javascript">
$(function(){
$(".text-shadow").textShadow();
})
</script>
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.
Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing
.box-sizing{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует.
Ставим блоки в линию или display: inline-block
Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
.inline-block{
display: inline-block;
}
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
.inline-block{
min-height: 250px;
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{
opacity: 0.5;
filter: alpha(opacity=50);
}
Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.
Анимация или transition
.transition {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
Трансформация объектов или transform
.transform{
-webkit-transform: scale(0.3);
-ms-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;
-webkit-background-size: cover;
background-size: cover;
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, можно ознакомиться на официальной страничке , в разделе «How does it work?».
Напоследок, хочется отметить, что я не рассматривал все свойства на кроссбраузерность, а только те, что чаще всего используются в повседневной практике. Надеюсь данный пост может быть Вам, хоть чем-то, полезен!
UPDATE
Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!
UPDATE
Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!