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

Наверное, вы уже слышали о таких вещах как 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-технологии поддерживаются браузерами
Поделиться публикацией

Комментарии 15

    +6
    Залейте на GitHub, пожалуйста. Думаю, будет значительно удобней и точно сохранится дольше, чем на непонятном файлообменнике.
      0
      Спасибо за совет! Наконец-то научился им пользоваться и залил файлы.
      0
      Спасибо за то, что собрали все в одном месте!
        +1
        Также в IE6+, да и в другие браузеры, можно добавить поддержку DOM 4 API и ES5 (и частично методов из ES6). Для того, чтобы писать примерно так:
        var element = document.querySelector("#test_element[type=test]");
        element.querySelectorAll("span:nth-child(2n)").forEach(function(node) {//We can use 'forEach' because NodeList inherit from Array now
          node.addEventListener("click", function(){  /**/  })
        })
        

        Либа, демка
          +1
          Также в IE6+, да и в другие браузеры, можно добавить поддержку DOM 4 API и ES5 (и частично методов из ES6

          То что можно было реализовать из ES6, можно взять у меня в репозитории на githab'e :)

          PS: правда относительно некоторых методов, в комитете идут бурные споры, они то добавят что-то, потом удалят… потом опять вернут, в общем все как обычно, главное что рабочий процесс не стоит на месте.
          0
          Спасибо, взял на вооружение!

          Правда, чтобы сделать кнопки с градиентом на css и скругленными углами одинаково красивыми во всех браузерах, пришлось потрудиться. Приведенных в статье средств (а именно PIE) не достаточно, чтобы градиенты работали и скруглялись в IE 9. Использовал сервис генерации градиентов ColorZilla. Только из сгенерённого данным сервисом кода нужно убрать filter.
            0
            В IE до 10-ой версии можно делать скругленный градиент (с тенью если нужно) из двух цветов (не более), и PIE с этим справляется. Важно также использовать правильный синтаксис CSS-правил, как в демо на сайте PIE.
              0
              Хм. Странно, но демка в IE9 работает на сайте PIE, а у меня в коде (стилизовал ссылку в виде кнопки со скруглениями и градиентами) не хочет даже тот код, который на PIE в демке… У меня одного так? :)
                0
                Вот этот код: jsfiddle.net/QGDNk/1/ работает даже в IE6, но не в IE9…
                  0
                  1. Проверьте, чтобы путь к PIE.htc был указан правильно относительно html-файла, а не css-файла
                  2. С PIE.htc могут возникнуть некоторые проблемы, указанные в статье
                    0
                    1. Утверждение не верно, путь к PIE.htc должен быть указан исключительно относительно файла, в котором скрипт используется. Если стили лежат в html — относительно него, если в css-файле — относительно css-файла. Иначе не работает даже.
                    2. Проблем не должно быть, т.к. в стиле, где использую PIE, не используется ни Selectivizr, ни boxsizing.htc.
                      0
                      По пункту 1 (и не только) вот тут все написано: http://css3pie.com/documentation/getting-started/
                      В Step 4: «Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.»
                      Все проверено неоднократно, хотя конечно всякое бывает… пробуйте, все должно получится — и будет еще 1 неплохой инструмент на руках.
                        0
                        Тогда даже не знаю. Если писать url относительно html-файла, ничего не работает в IE6-9. Если же относительно css-файла — работает в IE6-8, для 9-го приходится генерировать SVG на ColorZilla
              0
              Спасибо, за ColorZilla. Не натыкался на нее раньше. Утащил в закладки.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое