10 способов имитировать эффекты CSS3 и HTML5 в Internet Explorer
Не вижу смысла сейчас останавливаться на том, что такое CSS 3 и HTML 5, ведь для абсолютного большинства читателей моего блога это и так должно быть ясно, а если и нет, то поиск никто не отменял 
Как и многие другие web-разработчики я просто обожаю Internet Explorer, особенно версию 6. В то время, как появляются такие мощные техники, как HTML5 и CSS3, разработчики IE даже и не думают их внедрять. Ну да, в принципе наверное лучше и не надо. Пусть хотя бы с предыдущими версиями разберутся. Ладно, хватит о грустном. Давайте лучше рассмотрим, как подключить CSS3 и HTML5 в нашем самом любимом браузере:
- Как включить HTML5 в Internet Explorer
- Как подключить CSS3 свойство text-shadow в Internet Explorer
- Как подключить CSS3 свойство box-shadow в Internet Explorer
- Закруглённые углы в Internet Explorer
- Макеты с несколькими колонками в Internet Explorer
- Поддержка псевдо-селекторов CSS3 в Internet Explorer
- Прозрачность в Internet Explorer
- Вращение HTML элементов в Internet Explorer
- Поддержка RGBa в Internet Explorer
- Использование нестандартных шрифтов в Internet Explorer
Большинство современных браузеров уже поддерживают HTML5, но Internet Explorer, как известно, всегда плетётся где-то позади. Чтобы заставить IE всё же воспринимать новую версию разметки, нужно подключить небольшой скрипт:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.
Опять же, 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
На мой взгляд, 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);
}
Закруглённые углы приобрели большую популярность в веб-дизайне. Причины этому понятны – выглядят такие углы классно. Разработчики спецификации 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/ (англ.) Там же можно его скачать.
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/ (англ.), там же ссылка на домашнюю страничку скрипта, где его можно скачать.
Чтобы заставить нашего любимого 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. В этом случае нам снова поможет свойство filter.
.element{
opacity:.7; /* Для нормальных браузеров */
filter:alpha(opacity=70); /* Костыли для IE */
}
В 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, с этим можно смириться.
Буква 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, как всегда, есть свои особенности – он понимает шрифты только в формате 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. Рад, что статья оказалась полезной.
Вместо того чтобы учить IE чему либо полезному и делать всю работу за разработчиков данного шедевра, лучше уж воспользоваться альтернативными решениями – Опера или АшкуАщч (FireFox – прим. автора).
Но ведь посетителей своего сайта не заставишь не пользоваться эксплорером, в этом то и причина всех этих изысканий.
Ну тогда сделать в своем блоге сравнительный анализ различных браузеров и попытаться убедить своих посетителей перейти на нормальную программу. Двойная польза – прекрасный материал для блога получится.
На моём блоге посетителей с IE порядка 5% по понятным причинам. По этому смысла в таких статьях не вижу.
фух.. ну и долго же я искал такой материал. Автору респект!!! и подправь теги, чтобы можно было статью найти скажем по запросам: “особенности вёрстки IE” “CSS вёрстка в Internet Explorer”.. а то ну реально ничего дельного по таким запросам.
Понятно, что лучше оперу/фф юзать, но абсолютное большинство все равно на ИЕ сидит.
Я давно уже все нужные мне свойства CSS3 выставляю посредством jQuery. Он уже сразу все хаки и ухищрения использует.
Посему, хоть эксплорер и зло, но под него тоже можно писать рабочие сайты.
box-shadow: 10px 10px 5px #888;
классно, вот только нигде не работает
Это скорее всего прекрасное далёко не более…
если я не прав, буду рад услышать объяснения
box-shadow – это селектор css3. А как известно, это пока что действительно “прекрасное далёко”. Поэтому в дополнение к box-shadow используйте это:
-webkit-box-shadow: 10px 10px 15px #888; // для сафари
-moz-box-shadow: 10px 10px 15px #888; // для лисы
Только box-shadow – это свойство, а не селектор.
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 делать
Так в IE 6 и 7 оно и не работает, только в 8. На счет box-shadow аналогичная ситуация. Старые версии браузеров всё это понимать можно научить только с помощью Jquery.
P.S. Недавно наткнулся на статью на хабре, где описан процесс создания блока с тенью, трансформацией и прозрачностью. Вот ссылка: http://habrahabr.ru/blogs/css3/81409/
IE всегда отличался свой корявостью
Вот тоже интересная статься с хабра в тему. http://habrahabr.ru/blogs/browsers/83989/
Я думаю что проще перейти на оперу или фф.Меньше мороки будет.И скорость там значительно выше.
Да каким местом вы пост читаете? Речь идет не о вашем браузере, а о браузерах посетителей. Их на другой браузер перейти не заставишь!
на сколько новые?! у меня опера10 и фф 3.5.8 boxshadow не понимают..
Опера не понимает, а фф прекрасно понимает, даже более старые версии, чем 3.5
Вот рабочий пример блока с тенью и не только, можете открыть его в разных браузерах и увидить, какие понимают, а какие нет: http://my-html.ru/example/3D_css/index.html
IE и CSS 2 не очень-то хорошо понимает, его бедного уже и под третий ломают )))
а по моему ие выеживается, все браузеры как браузеры все с каждым днем обновляются становятся лучше внедряют новые стандарты а ие можно сказать сидит на месте ничего не делает..
По-моему, пытаться компенсировать с помощью фильтров для IE отсутствие поддержки свойств CSS3, это все-равно, что нивелировать алмаз напильником. Если решили использовать в верстке CSS3 – я обеими руками ЗА, но! Лучше создавать дизайн таким образом, чтобы и без поддержки CSS3 он смотрелся читабельно (в конце-концов, нельзя же вечно оглядываться на Microsoft! Пусть они на нас оглядываются и завидуют
)
P.S. К тому же, адаптация дизайна к лагерным условиям IE – это прямой путь к стимулированию разработчиков этого браузера (если его можно назвать таковым ):) к продолжению опытов над психикой членов web-сообщества. Иначе говоря, таким образом мы сами же и занимаемся пиаром IE!
Полностью согласен.
Хорошая заметка.
Только IE6,7,8 больше не разрабатываются (такой подход у микрософт), а в IE9 все замечательно работает.
Ну это логично, работы ведутся только над последней версией продукта, так все разработчики софта поступают. Но ведь и 8 и 7 и даже 6 версией люди по-прежнему пользуются. И их тоже нужно учитывать, это порядка 30%.
У IE9 к XP неприязнь, а XP пока наиболее популярен.
Хорошая сборка “фокусов”, они будут актуальны еще долго. Сделал закладку.