html5 в ie


html5 в ie

Главная мечта любого веб-разработчика о том, чтобы html5 в ie и других браузерах отображался одинаково корректно, похоже, близка к своему осуществлению. Речь пойдет о новом js-плагине modernizr и его возможностях в сравнении с существующими решениями в среде веб-разработки. Рассмотрим самые основные фиксы для HTML5/CSS3.

html5shiv

Самый широко используемый javascript. Делает теги html5 совместимыми с ie и включает свойства стилей для элементов html5 по умолчанию, такие как блочное отображение для article и section. Работает для ie начиная с 7 версии.

Скрипт можно либо скачать с сайта разработчика и добавить в html документа после CSS следующую строчку:


или прописать абсолютный путь


Библиотека ie7-js

Позволяет новым тегам корректно отображаться в ie и фиксирует проблемы с прозрачностью png начиная с ie-5.

Как и в предыдущем случае мы можем прописать абсолютный путь до скрипта

  

или скачать его на сайте разработчика.

Для решения проблем с прозрачностью png в скрипт необходимо добавить строчку

var IE7_PNG_SUFFIX = ".png";

Теперь он будет выглядеть так:


При этом не работают функции repeat и background-position.

За дополнительной информацией заходите сюда.

html5shiv и ie7-js не решают всех проблем с кроссбраузерностью html5 в ie и требуют дополнительных CSS хаков, особенно если это адаптивный дизайн

modernizr.

На сегодняшний день лучшее предложение для обеспечения кроссбраузерности не только html5 в ie, но и во всех версиях браузеров.

Что такое modernizr

modernizr-это js плагин, который анализирует ВСЕ (!) версии браузеров ( а не только IE) на предмет совместимости с новыми тегами и стилями html5/CSS3. На выходе сама программа, а не пользователь! генерирует массив классов с помощью функции no-js, который обеспечивает АБСОЛЮТНУЮ кроссбраузерность элементов. Те браузеры, которые пока не включили поддержку новых элементов по-прежнему не смогут их отображать. Но, что очень важно, кодер сможет сам управлять тем, как будут отображатся в браузерах новые элементы.

В состав плагина входит html5shiv, который является аналогом вышеупомянутой библиотеки для фиксации html5 в ie.

И еще одно, может быть не последнее, но одно из основных преимуществ modernizr состоит в том, что плагин поддерживает адаптивность макета. Именно по этой причине он и вошел в основу построения самой популярной среди веб-разработчиков во всем мире open source библиотеки - github.

У плагина есть и недостатки. Генерация большого количества классов тормозит браузер пользователя, сайт работает медленнее. Кроме того, некоторые разработчики отмечают, что анализируя браузеры modernizr выводит некое среднее изображение в пользу того браузера, который html5 понимает хуже. В результате пользователь, браузер которого видит html5 на все 100%, лишится возможности увидеть идельную картинку.

Тем не менее сегодня modernizr - это самая совершенная технология, которая позволяет фиксировать html5 в ie и других браузерах.

Как это работает?

На этой странице можно загрузить всю поддержку modernizr.

Далее устанавливаем скрипт на сайте:


Или можно зайти сюда и воспользоваться поддержкой только нужных нам тегов и стилей.

Протестируем плагин.

/* текст с тенью для тех, кто понимает*/
.textshadow h1{
background: #FF9900;
color: #FF9900;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
}
/*непонимающим браузерам даем картинку*/
.no-textshadow h1 {
background: url(textpic.png) no-repeat;
text-indent:-9999px;
}

Я хочу, чтобы все браузеры понимали html5

Все средства хороши, и чем пользоваться для фиксации html5 в ie и в других браузерах, конечно же, остается на усмотрение пользователя.

26 июня 2012 г.
Подготовила Ольга Мараева.
При использовании статьи ссылка на сайт автора обязательна.

Google