Internet Explorer 7-9: выбор инструментов для максимальной поддержки CSS3, HTML5

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).

Что нам понадобится:

— HTML 5 Boilerplate ^[1] — это просто шаблоны для css, html и прочего, чтобы не приходилось начинать работу с пустого файла. В этих строчках кода кроется огромнейшая работа других верстальщиков: исправлены различные баги для IE, прописаны стили на случай, если пользователь захочет распечатать документ и т.д.

— Modernizr ^[2] — позволяет использовать семантические теги HTML 5 для IE, а также добавляет удобные классы к тегам; к примеру, для Internet Explorer 7 в html добавится класс .ie7, который мы потом можем использовать для настройки отображения html-элемента только в этом браузере (ведь часто приходится подправлять некоторые элементы только для конкретной версии IE).

— Selectivizr ^[3] и IE9.js ^[4] для CSS3 селекторов — в некоторых случаях намного удобнее и быстрее выбирать html элементы при помощи таких конструкций, как :nth-child(2) или :nth-last-of-type(1), чем прописывать классы в html, и делать выбор элемента по его классу.

— CSS3 media queries ^[5] — для адаптивного дизайна (удобная технология, которая позволяет изменять отображение элементов в зависимости от разрешения экрана, и таким образом мы можем сверстать сайт для мобильных устройств)

— CSS3 Pie ^[6] — отличнейшая вещь для создания тени, закругленных уголков, градиента и т. д.

— boxsizing.htc ^[7] — используем для поддержки 'border-box' в IE7. Зачем это? Когда мы задаем padding для элементов, то в обычной ситуации ширина (высота) элемента тоже увеличивается, то есть помимо padding приходится еще и следить за шириной (высотой) элемента. С помощью данного инструмента мы можем спокойно указывать padding без необходимости вычислять каждый раз ширину (высоту). Простой пример: создайте input-элемент и установите для него padding — ширина (либо высота) увеличится, что часто добавляет лишней работы.

Итак, если вы планируете использовать эти инструменты вместе для поддержки CSS 3 и HTML 5 в браузерах IE 7-9, то вот какие проблемы могут вас ожидать:

• Selectivizr
  • не работает в локальной директории, но работает на сервере
  • не работает с jQuery, но работает с MooTools
  • не работают конструкции вида :last-child:after без IE9.js
• IE9.js
  • не работают конструкции вида :last-child:after без Selectivizr
• CSS3 Pie
  • PIE.htc не работает вместе с Selectivizr
  • PIE.htc не работает вместе с IE9.js
  • PIE.htc не работает для элементов, которые используют boxsizing.htc

Дабы избавиться от головной боли, используйте уже проверенный шаблон, который можно скачать тут ^[8]. Основа этого шаблона — HTML5 Boilerplate.
Уточнения:

• jQuery минимизирован и находится в plugins.js, чтобы уменьшить количество запросов на сервер (и тем самым ускорить загрузку страницы)
• вместо PIE.htc используется PIE.js, чтобы избежать вышеупомянутых проблем
• PIE.js используется и для 9-ой версии IE, чтобы можно было реализовать градиент (возможно, не только это)
• Selectivizr работает только на сервере (для меня это загадка), поэтому для полноценной работы рекомендуется включать свой локальный сервер (если вы верстаете в локальной директории)
• В PIE.js в самом конце дописано пару строк с использованием jQuery для работы с border-radius, box-shadow и -pie-background
• Создатели HTML5 Boilerplate рекомендуют весь свой javascript-код копировать в 1 файл — script.js (так мы уменьшаем количество запросов к серверу, если вы используете несколько файлов со скриптами)

Автор: almac