Посмотрим правде в глаза, некоторые люди застряли с использованием Internet Explorer в качестве веб-браузера. Возможно, эта работа заблокировала их машины, и они не могут установить достойный браузер. В то время, когда появляются новые и мощные методы, такие как HTML5 и CSS3, неудивительно, что IE не может правильно их обрабатывать. К счастью, есть несколько хитростей, которые могут упростить вашу жизнь. Посмотрите на этот пост.
1. IE совместимое вложение шрифтов
Много лет назад в сети доминировали несколько шрифтов (Arial, Verdana, Courier и, в частности, Times New Roman). Почти на всех компьютерах эти шрифты установлены, очевидно, потому что они помечены как «безопасные для сети». (Не установлен на GNU / Linux, хотя, потому что они не бесплатны).
Но не так давно встраивание шрифтов стало очень интересной и любимой техникой, потому что она позволяет вам встраивать определенный шрифт в свой дизайн, и среди других техник, метод @ font-face, вероятно, самый чистый и верить этому или нет, IE поддерживает внедрение шрифтов с версии 4.
@font-face { font-family: yourFontName ; src: url( /location/of/font/FontFileName.ttf ) format("truetype"); } /* Then use it like you would any other font */ .yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif; } } 2. Поддержка RGBa
«А» в RGBa означает альфа. Эта новая функция позволяет разработчикам указывать значение непрозрачности для цвета, что чрезвычайно полезно при кодировании веб-сайта.
.color-block { width: 50%; background-color: rgba(0, 0, 255, 0.2); /* Modern Browsers */ }
Как обычно, Internet Explorer демонстрирует отсутствие инноваций и свою неполноценность по сравнению с другими браузерами без поддержки RGBa. К счастью, фильтр может достичь эффекта, аналогичного RGBa:
3. Вращающиеся элементы HTML
Вращать элементы можно с помощью CSS3, используя свойство transform.
transform: rotate(240deg); -webkit-tranform: rotate(240deg); -moz-transform: rotate(240deg);
Internet Explorer просто проигнорирует все 3 объявления выше. Но пользователи IE получили фильтр, не так ли? Конечно, это свойство недопустимо для W3C, но, поскольку это Internet Explorer, вам не следует спрашивать слишком много. Следующий код будет имитировать преобразование во всех версиях IE:
НЕКОТОРЫЙ ТЕКСТ
НЕКОТОРЫЙ ТЕКСТ
НЕКОТОРЫЙ ТЕКСТ
4. Непрозрачность
Непрозрачность — это еще один CSS3, который IE не может отобразить. Это очень жаль, потому что возможность взаимодействия по непрозрачности определенного элемента очень интересна с точки зрения веб-дизайна.
Опять же, свойство crappy filter может помочь нам достичь удовлетворительного результата в IE. В приведенном ниже примере показано, как использовать фильтр, чтобы сделать элемент прозрачным.
.element{ opacity:.7; /* Standard CSS */ filter:alpha(opacity=70); /* IE patch */ }
5. Эмуляция псевдоселектора CSS3
CSS3 представляет множество чрезвычайно полезных селекторов. Среди прочего, псевдокласс: nth-child () нацелен на элемент, который имеет определенное количество родных элементов перед собой в дереве документа, как показано ниже:
p:nth-child(3) { color:#069; }
Как вы можете догадаться, такие вещи слишком сложны для IE. Чтобы преодолеть эту проблему, Кит Кларк создал очень полезный скрипт с именем ie-css3.js. (Использовать его легко: загрузите DOMAssistant Роберта Наймана, Keith ie-css3.js и свяжите их в заголовке HTML-документа.)
6. Многостолбцовые макеты
CSS3 позволяет автоматически отображать некоторый контент в столбцах. Это отличная вещь, поскольку она дает дизайнерам гораздо больше возможностей для создания потрясающих макетов.
Следующий CSS будет работать на Firefox и Safari. Это автоматически добавит столбцы к элементу div.
.column { -moz-column-width: 13em, -webkit-column-width: 13em, -moz-column-gap: 1em, -webkit-column-gap: 1em }
К сожалению, в Internet Explorer нет возможности сделать нечто подобное. Но jQuery и его плагин для колонизации помогут вам! В следующем примере показано, как легко создавать столбцы с помощью jQuery и columnize:
$('#mydiv').columnize(); $('#mydiv').columnize({ width:200 }); $('#mydiv').columnize({ columns:2 });
7. Закругленные углы!
Они так популярны среди своих «Веб 2.0? Смотри и чувствуй. Спецификация CSS3 поняла это и создала свойство с именем border-radius, которое предназначено для простого создания закругленных углов без использования одного изображения.
Для тех, кто не знает, вот как использовать border-radius:
.round { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
К счастью, есть несколько способов создать IE-совместимые закругленные углы без использования изображений. Мой фаворит — DD roundies, маленький кусочек JavaScript, который может округлить любой элемент HTML.
В следующем примере будут созданы закругленные углы для любого HTML-элемента с классом roundify.
8. CSS box-shadow в IE
Это было одно из самых крутых новых свойств CSS3, потому что оно позволяет вам легко создавать красивые тени на любом HTML-элементе без использования изображений. Но не спрашивайте, может ли Internet Explorer обрабатывать box-shadow. Не может
Еще раз, чтобы имитировать CSS-свойство box-shadow, нам придется использовать собственное свойство filter, как показано в следующем примере:
.shadowed { -moz-box-shadow: 2px 2px 3px #969696; -webkit-box-shadow: 2px 2px 3px #969696; } .shadowed { background-color: #fff; zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
9. Используйте свойство text-shadow CSS в IE
Сегодня большинство современных браузеров могут отображать это свойство довольно хорошо, но, опять же, IE игнорирует его. К счастью, проприетарное свойство фильтра только для IE может достаточно хорошо имитировать тень текста.
p.shadowed { text-shadow: #0000ff 0px 0px 30px; /* Modern Browsers */ filter: glow(color=#0000ff,strength=3); /* IE */ }
10. Включить HTML5 в IE
Большинство современных браузеров уже могут обрабатывать, по крайней мере частично, новые рекомендации HTML5. Но поскольку Internet Explorer не очень известен своим инновационным подходом, он просто проигнорирует разметку.
Html5.js — очень интересный проект, целью которого является обеспечение совместимости Internet Explorer с HTML5. Единственное, что вам нужно сделать, это встроить скрипт html5.js в заголовок вашего HTML-документа. Вы можете сделать горячую ссылку на скрипт, как показано в примере ниже: