Modernizr - JavaScript библиотека для условного CSS
Вам никогда не хотелось чтобы ваш CSS умел выполнять условия if как язык программирования? Наверняка хотелось. Ну например: "если это IE6 — отображать бордеры, а если более продвинутый браузер — не отображать, но скруглять углы". Для выполнения условий в CSS без всяких сложностей и создана JavaScript библиотека Modernizr.
В чем соль
Соль в том, что эта библиотека определяет умеет ли браузер выполнять то или иное свойство CSS и позволяет вам создавать стили для случая поддержки браузером свойства и на случай, если браузер это свойство не поддерживает.
Например, браузеры Firefox умеют скруглять углы у блоков и делают это неплохо при помощи CSS. А вот старичок IE6 делать этого не умеет. Можно, конечно, написать стиль для FF и забить на IE6, который отобразит как умеет. Но что если мы хотим применить совершенно разные стили в случае разных браузеров, но не хотим использовать CSS-хаки (которые еще знать надо)? Вот для создания таких стилей и нужен Modernizr.
Пример
Для примера создадим вот такую страницу:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://yandex.st/modernizr/1.7/modernizr.min.js"></script>
<style>
body {
background-color: #D4DEE4;
}
.test {
width: 200px;
padding: 20px;
text-align: center;
background-color: #EDEDED;
border: 1px solid red;
}
.borderradius .test {
border: none;
border-radius: 10px 10px 10px 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div class="test">Test</div>
</body>
</html>
Мы видим подключение Modernizr, но не видим никакого другого JavaScript-кода. Как же так? А вот такая вот магия! Modernizr не требует написания никакого JS-кода, только CSS! И у нас уже все написано!
Если открыть эту страницу в IE6 и Firefox4, мы увидим следующее:
А если мы уберем подключение Modernizr — мы увидим уже другую картинку:
Таким образом, Modernizr позволяет не просто переопределять стили, но применять их выборочно, в зависимости от поддержки браузерами определенных свойств CSS.
Напоследок
Это удовольствие весит всего-то 3.6кб. И вам даже не обязательно загружать его на свой хостинг — библиотека доступна из хостинга JavaScript библиотек Яндекса и вы можете подключать ее на свою страницу как это сделал я — одной строкой.
При помощи этой библиотеки вы можете оформлять, например, баннеры. Вот как это выглядит:
Разумеется, круглые углы - это не единственное что может эта библиотека. Это просто пример. Вы можете ознакомиться с перечнем всех возможностей с примерами на сайте этой библиотеки.
![[Valid RSS]](/img/valid-rss-rogers.png)
by SHAman