Pull to refresh

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

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

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

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

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

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

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

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

boxsizing.htc — используем для поддержки '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


Дабы избавиться от головной боли, используйте уже проверенный шаблон, который можно скачать тут и на github. Основа этого шаблона — 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 (так мы уменьшаем количество запросов к серверу, если вы используете несколько файлов со скриптами)


Полезные ресурсы:
  • HTML 5 Cross Browser Pollyfills — множество различных разработок для разных целей, которых объединяет одно: они позволяют работать с HTML 5 и CSS 3 уже вчера!, даже если браузеры их не поддерживают
  • caniuse.com — тут можно посмотреть какие web-технологии поддерживаются браузерами
Tags:
Hubs:
+26
Comments 15
Comments Comments 15

Articles