Progressive enhancement tools

04 Бер
04.03.2013

Использование принципа “прогрессивное усовершенствование” в разработке увеличитвает ресурсозатраты, требуя дополнительное внимание в поддержку новых фич в старых браузерах.
Из проекта в проект неустанно возникает вопрос о степени поддержки старых браузеров. А также нужно ли их поддерживать и, главное, зачем?
Конечно, каким-то тематическим IT-блогам и сайтам, возможно, эта поддержка и не нужна. А вот такие сервисы как почта, поиск заинтересованы в максимально возможном количестве пользователей. Потому им важно, чтоб их сайт работал везде без исключения.
В связи с такой необходимостью в сети появился ряд инструментов, позволяющих упростить разработку и уменьшить затраты сил и времени.

Modernizr
Наиболее известным инструментом является Modernizr. Его предназначение состоит в определении реализованных в браузере возможностей. Это позволяет разделить и написать код как с поддержкой определенных свойств так и без нее.

Как пользоваться:
1. Скачать пакет с оф.сайта и подключить.

<script src="/js/modernizr-1.0.min.js"></script>

2. Добавить класс no-js к html

<html class="no-js">

3. Используем классы .no-rgba и .rgba, описывая свойства для браузеров не поддреживающих и поддеживающих данное свойство.

.no-rgba .btn { text-shadow:#555; }
.rgba .btn { text-shadow:rgba(0, 0, 0, 0.5);}

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

Как пользоваться:
1. Скачать с сайта архив и распаковать в проекте.
2. В коде, где используется CSS3 подключать

.btn { behavior: url(path/to/pie_files/PIE.htc); }

HTML5shiv
Для IE также существует скрипт, который реализует поддержку новыйх HTML тегов.

Как пользоваться:
1. Скачать с сайта
2. Поключить скаченный файл или установить прямую ссылку

<script src="/js/html5.js"></script>

CSS3-MediaQueries
Для поддержки media queries в браузерах IE 5+, Firefox 1+ and Safari 2 создана библиотека JS CSS3-MediaQueries. Позволяет парсить, тестировать и применять стили, написанные в Media Queries.

Как пользоваться:
1. Скачать с сайта
2. Подключить скрипт

<script src="/js/css3-mediaqueries.js"></script>

Полезно почитать:
HTML5 & CSS3 Support – таблица поддержки HTML5 и CSS3 браузерами
Taking Advantage of HTML5 and CSS3 with Modernizr – коротко о самом главном – зачем и как пользоваться Modernizr
How to use Modernizr – совсем коротко о Modernizr
Modernizr – оф.сайт Modernizr
Progressive internet explorer – оф.сайт PIE
html5shiv
CSS3 Media Queries
Enquire.js – Media Query Callbacks in JavaScript