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