3.02 2010

10 способов заставить Internet Explorer понимать CSS3 и HTML5

Как и многие другие web-разработчики я просто обожаю Internet Explorer, особенно версию 6. В то время, как появляются такие мощные техники, как HTML5 и CSS3, разработчики IE даже и не думают их внедрять. Ну да, в принципе наверное лучше и не надо. Пусть хотя бы с предыдущими версиями разберутся. Ладно, хватит о грустном. Давайте посмотрим, как всё-таки можно заставить Internet Explorer понимать CSS3 и HTML5:

Как включить HTML5 в Internet Explorer

Большинство современных браузеров уже поддерживают HTML5, но Internet Explorer, как известно, всегда плетётся где-то позади. Чтобы заставить IE всё же воспринимать новую версию разметки, нужно подключить небольшой скрипт:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.

Как включить CSS свойство text-shadow в Internet Explorer

Опять же, Internet Explorer – это единственный браузер, который не поддерживает это CSS свойство. Правда в этом случае заставить его делать это не получится даже с помощью скриптов. Единственный выход – это использовать CSS свойство filter для IE, как альтернативу text-shadow. Вот пример:

p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Для нормальных браузеров */
filter: glow(color=#0000ff,strength=3); /* Для нашего любимого IE */
}

Подробнее о CSS свойстве filter можно прочитать в этой статье: http://webering.ru/articles/6/article/8

Как включить CSS свойство box-shadow в Internet Explorer

На мой взгляд, box-shadow – это одно из самых классных свойств в CSS3, потому что с помощью него можно добавить тень к любому HTML элементу, не используя при этом картинки.

.shadowed{
box-shadow: 10px 10px 5px #888;
}

Но не спрашивайте меня, поддерживает ли его IE! C ним, как всегда, придётся использовать костыли. В данном случае это опять будет свойство filter.

.shadowed {
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

Закруглённые углы в Internet Explorer

Закруглённые углы приобрели большую популярность в веб-дизайне. Причины этому понятны – выглядят такие углы классно. Разработчики спецификации CSS3 это прикрасно понимали и по этому создали CSS свойство border-radius, с помощью которого можно создавать HTML элементы без единой картинки. Для тех, кто не в курсе приведу пример использования этого CSS свойства.

.round{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

В IE же, как всегда, не обошлось без костылей. Теперь это будет снова использование JavaScript.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

В данном случае все HTML элементы с классом roundify будут с закруглёнными углами. Подробнее читайте на домашней страничке скрипта: http://www.dillerdesign.com/experiment/DD_roundies/ (англ.) Там же можно его скачать.

Макеты с несколькими колонками в Internet Explorer

CSS3 даёт возможность отображать любой контент в несколько колонок. В Firefox и Safari это можно сделать с помощью следующих стилей:

.column {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}

Но сделать что-нибудь подобное в Internet Explorer не представляется возможным. Но есть один способ, который может справиться с этой проблемой, используя Jquery. Всё, что нужно сделать – это убедиться, что на сайте подключена последняя версия Jquery и использовать вот такую функцию:

$(function(){
$('.wide').columnize({width:400});
$('.thin').columnize({width:200});
});

Подробности в этом посте: http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/ (англ.), там же ссылка на домашнюю страничку скрипта, где его можно скачать.

Поддержка псевдо-селекторов CSS3 в Internet Explorer

Чтобы заставить нашего любимого Internet Explorer понимать псевдо-классы CSS3 можно воспользоваться очень полезным скриптом ie-css3.js, который написал Keith Clark.

Использование: скачайте DOMAssistant и ie-css3.js и подключите их таким образом:

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

Подробности здесь: http://www.keithclark.co.uk/labs/ie-css3/ (англ.)

Прозрачность в Internet Explorer

Прозрачность – это еще одно свойство, о котором не знает Internet Explorer. В этом случае нам снова поможет свойство filter.

.element{
    opacity:.7; /* Для нормальных браузеров */
    filter:alpha(opacity=70); /* Костыли для IE */
}

Вращение HTML элементов в Internet Explorer

В CSS3 вращать элементы можно с помощью свойства transform.

transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

В Internet Explorer для этих целей будем использовать всё то же свойство filter.

filter:
progid:
DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

Стоит заметить, что используя вышеприведенный стиль Вы не пройдете WC3 валидацию, но когда речь идет о IE, с этим можно смириться.

Поддержка RGBa в Internet Explorer

Буква a в конце известной всем аббревиатуры означает alpha (альфа). Эта новая фича позволяет задавать прозрачность для цветов.

 .color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Для всех браузеров, кроме IE */
}

В Internet Explorer опять прибегнем к свойству filter.

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

Использование нестандартных шрифтов в Internet Explorer

В последнее время использование нестандартных шрифтов на веб-сайтах стало очень распространенным. С Internet Explorer, как всегда, есть свои особенности – он понимает шрифты только в формате EOT. Чтобы сконвертировать ваши нестандартные шрифты в этот формат, воспользуйтесь этой бесплатной онлайн утилитой.

@font-face {
    font-family: " название шрифта ";
        src: url( /расположение/шрифта/НазваниеФайлаШрифта.eot ); /* Для IE */
        src: local(" название шрифта "), url( /расположение/шрифта/НазваниеФайлаШрифта.ttf ) format("truetype"); /*  не IE */
    }

/* Затем используем это название, как обычный web-safe шрифт */
.element {
    font-family:" название шрифта ", verdana, helvetica, sans-serif;
}

Это был свободный перевод статьи 10 ways to make Internet Explorer act like a modern browser.

P.S. Информационный спонсор статьи о том, как заставить Internet Explorer понимать CSS3 и HTML5 – раскрутка сайтов в Киеве, Харькове, Одессе и других городах Украины, а так же в России и других странах ближнего и дальнего зарубежья.

Комментарии:
Never Lex

3 февраля 2010
Спасибо! Реально полезная статья!

Ответить
Ян Такушевич отвечает:
3 февраля 2010 в 22:25
Комментарий в лучших традициях спамеров. Если бы не знал тебя – сразу же в спам P.S. Рад, что статья оказалась полезной.

Ответить
Andrey

3 февраля 2010
Вместо того чтобы учить IE чему либо полезному и делать всю работу за разработчиков данного шедевра, лучше уж воспользоваться альтернативными решениями – Опера или АшкуАщч (FireFox – прим. автора).

Ответить
Ян Такушевич отвечает:
3 февраля 2010 в 23:16
Но ведь посетителей своего сайта не заставишь не пользоваться эксплорером, в этом то и причина всех этих изысканий.

Ответить
Andrey

4 февраля 2010
Ну тогда сделать в своем блоге сравнительный анализ различных браузеров и попытаться убедить своих посетителей перейти на нормальную программу. Двойная польза – прекрасный материал для блога получится.

Ответить
Ян Такушевич отвечает:
3 февраля 2010 в 11:10
На моём блоге посетителей с IE порядка 5% по понятным причинам. По этому смысла в таких статьях не вижу.

Ответить
WhiteHakeR

4 февраля 2010
фух.. ну и долго же я искал такой материал. Автору респект!!! и подправь теги, чтобы можно было статью найти скажем по запросам: «особенности вёрстки IE» «CSS вёрстка в Internet Explorer».. а то ну реально ничего дельного по таким запросам.

Ответить
Алексей

4 февраля 2010
Понятно, что лучше оперу/фф юзать, но абсолютное большинство все равно на ИЕ сидит.

Ответить
Разработчик

4 февраля 2010
Я давно уже все нужные мне свойства CSS3 выставляю посредством jQuery. Он уже сразу все хаки и ухищрения использует.
Посему, хоть эксплорер и зло, но под него тоже можно писать рабочие сайты.

Ответить
WhiteHakeR

5 февраля 2010
box-shadow: 10px 10px 5px #888;
классно, вот только нигде не работает :(
Это скорее всего прекрасное далёко не более…
если я не прав, буду рад услышать объяснения

Ответить
WhiteHakeR

5 февраля 2010
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);

это тоже не работает, проверял в ie6 и 7
уныло.. первоначальное впечатление подпортилось. материал пока реально ничем не помог. видимо тени так и придётся через png делать :(

Ответить
Ян Такушевич

6 февраля 2010
Так в IE 6 и 7 оно и не работает, только в 8. На счет box-shadow аналогичная ситуация. Старые версии браузеров всё это понимать можно научить только с помощью Jquery.
P.S. Недавно наткнулся на статью на хабре, где описан процесс создания блока с тенью, трансформацией и прозрачностью. Вот ссылка: http://habrahabr.ru/blogs/css3/81409/

Ответить
TryDIM

13 февраля 2010
IE всегда отличался свой корявостью

Ответить
Sarg

14 февраля 2010
Вот тоже интересная статься с хабра в тему. http://habrahabr.ru/blogs/browsers/83989/

Ответить
lord

18 февраля 2010
Я думаю что проще перейти на оперу или фф.Меньше мороки будет.И скорость там значительно выше.

Ответить
Ян Такушевич отвечает:
3 февраля 2010 в 00:43
Да каким местом вы пост читаете? Речь идет не о вашем браузере, а о браузерах посетителей. Их на другой браузер перейти не заставишь!

Ответить
WhiteHakeR

19 февраля 2010
на сколько новые?! у меня опера10 и фф 3.5.8 boxshadow не понимают..

Ответить
Ян Такушевич отвечает:
3 февраля 2010 в 13:08
Опера не понимает, а фф прекрасно понимает, даже более старые версии, чем 3.5
Вот рабочий пример блока с тенью и не только, можете открыть его в разных браузерах и увидить, какие понимают, а какие нет: http://my-html.ru/example/3D_css/index.html

Ответить
Ян — веб-дизайнер

25 февраля 2010
IE и CSS 2 не очень-то хорошо понимает, его бедного уже и под третий ломают )))

Ответить
xVansX

6 мая 2010
а по моему ие выеживается, все браузеры как браузеры все с каждым днем обновляются становятся лучше внедряют новые стандарты а ие можно сказать сидит на месте ничего не делает..

Ответить

Об авторе…

Добро пожаловать!

Меня зовут Ян Такушевич и я рад приветствовать Вас на моём блоге. Мне 22 года, живу я в городе Минске. Чтобы связаться со мной, посетите страницу об авторе. Так же можете заказать услуги по созданию сайтов и блогов или рекламу на этом блоге.

Подписка на блог

Поиск по блогу

10 способов заставить Internet Explorer понимать CSS3 и HTML5

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

Добро пожаловать!