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

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

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

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

Code:

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

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

2. Как подключить CSS3 свойство text-shadow в Internet Explorer

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

Code:

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

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

3. Как подключить CSS3 свойство box-shadow в Internet Explorer

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

Code:

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

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

Code:

      .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);
      }

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

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

Code:

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

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

Code:

      <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/ (англ.) Там же можно его скачать.

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

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

Code:

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

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

Code:

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

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

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

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

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

Code:

      <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/ (англ.)

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

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

Code:

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

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

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

Code:

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

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

Code:

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

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

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

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

Code:

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

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

Code:

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

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

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

Code:

@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.