Internet Explorer уже давно надоедает Web-разработчикам своими багами и несоответствием современным стандартам.
Хоть много багов и исправлено в IE9, но всё равно он не так популярен, как IE8. Об IE7 я даже боюсь говорить.
Суть поста в том, что IE8 все-таки можно заставить соответствовать современным Web-технологиям. В нашем случае — это теги HTML5.
У HTML5 есть целый набор новых элементов, например, header для отделения шапки сайта и footer для отделения подвала.
Так как IE8 ничего не знает о них, он не будет распознавать их стили из CSS. К счастью, есть простой способ — просто добавить недостающие элементы к DOM страницы:
Другая проблема состоит в том, что элементы HTML5 выводятся как блок по умолчанию, но IE8 не знает и этого. Чтобы побороть эту проблему, нужно лишь добавить в CSS:
Веб-шрифты уже приличное время используются разработчиками и даже есть несколько больших ресурсов, с помощью которых можно подключить их: Google fonts, Type Kit, Font Squirrel. Кроме текста, веб-шрифты могут быть очень полезными для значков или иконок соц. сетей.
Для использования веб-шрифтов нужно в CSS добавить правило @font-face:
В этом примере я завёл новое “семейство шрифтов” и обозвал его “My Font”, также указал расположение шрифта на относительно css-файла. Это позволит при описании стилей использовать этот шрифт.
IE8 всё же не всегда обрабатывает подоные конструкции и отображает системный шрифт вместо задуманного.
Чтобы такого не возникало, можно использовать сразу несколько типов файлов со шрифтами. Браузерами поддерживаются следующие типы файлов со шрифтами:
Из всех перечисленных, WOFF сейчас становится стандартом. Он поддерживается многими браузерами (Chrome, Firefox (выше 3.6), Opera, Safari и IE9).
Конечно же, IE8 ничего не знает о WOFF и поддерживает лишь EOT. Значит чтобы использовать веб-шрифт, который хотим показать и пользователям IE8 как и в других браузерах, нужны файлы в форматах WOFF и EOT.
Ну и тут все не в порядке, у IE8 есть ошибка, которая препятствует загрузке нескольких форматов одного и того же шрифта. К счастью, есть хак, который это исправляет.
На помощь пришли парни из Font Spring (ссылка выше):
В этом примере шрифт называется MyWebFont и представлен сразу в нескольких форматах (EOT, WOFF, TTF и SVG).
* SVG используем на всякий случай, если юзер использует мобильный Safari (iPhone/iPad) до версии 4.1
Ну а для полного использования шрифта, нужно описать все виды. Например я использую лишь 4:
Ну или описать их можно так::
Ну и напоследок, посмотрите сервис, в котором Вы можете сгенерировать шрифт во всех форматах веб-шрифтов.
P.S. В комментариях указывают на то, что решение работает и для более ранних версий IE.
Хоть много багов и исправлено в IE9, но всё равно он не так популярен, как IE8. Об IE7 я даже боюсь говорить.
Суть поста в том, что IE8 все-таки можно заставить соответствовать современным Web-технологиям. В нашем случае — это теги HTML5.
HTML5 Элементы
У HTML5 есть целый набор новых элементов, например, header для отделения шапки сайта и footer для отделения подвала.
Так как IE8 ничего не знает о них, он не будет распознавать их стили из CSS. К счастью, есть простой способ — просто добавить недостающие элементы к DOM страницы:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
Другая проблема состоит в том, что элементы HTML5 выводятся как блок по умолчанию, но IE8 не знает и этого. Чтобы побороть эту проблему, нужно лишь добавить в CSS:
header, nav, section, article, aside, footer {
display:block;
}
Веб-шрифты
Веб-шрифты уже приличное время используются разработчиками и даже есть несколько больших ресурсов, с помощью которых можно подключить их: Google fonts, Type Kit, Font Squirrel. Кроме текста, веб-шрифты могут быть очень полезными для значков или иконок соц. сетей.
Для использования веб-шрифтов нужно в CSS добавить правило @font-face:
@font-face {
font-family: 'My Font';
src: url('fonts/Myfont.eot');
}
h1 {
font-family: 'My Font';
}
В этом примере я завёл новое “семейство шрифтов” и обозвал его “My Font”, также указал расположение шрифта на относительно css-файла. Это позволит при описании стилей использовать этот шрифт.
IE8 всё же не всегда обрабатывает подоные конструкции и отображает системный шрифт вместо задуманного.
Чтобы такого не возникало, можно использовать сразу несколько типов файлов со шрифтами. Браузерами поддерживаются следующие типы файлов со шрифтами:
- Embedded Open Type (EOT)
- TrueType (TTF)
- OpenType (OTF)
- Scalable Vector Graphics (SVG)
- Web Open Font Format (WOFF)
Из всех перечисленных, WOFF сейчас становится стандартом. Он поддерживается многими браузерами (Chrome, Firefox (выше 3.6), Opera, Safari и IE9).
Конечно же, IE8 ничего не знает о WOFF и поддерживает лишь EOT. Значит чтобы использовать веб-шрифт, который хотим показать и пользователям IE8 как и в других браузерах, нужны файлы в форматах WOFF и EOT.
Ну и тут все не в порядке, у IE8 есть ошибка, которая препятствует загрузке нескольких форматов одного и того же шрифта. К счастью, есть хак, который это исправляет.
На помощь пришли парни из Font Spring (ссылка выше):
@font-face {
font-family: 'MyWebFont';
src: url('fonts/MyWebFont-Light-webfont.eot');
src: url('fonts/MyWebFont-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont-Light-webfont.woff') format('woff'),
url('fonts/MyWebFont-Light-webfont.ttf') format('truetype'),
url('fonts/MyWebFont-Light-webfont.svg#MyWebFontLight') format('svg');
font-weight: 300;
font-style: normal;
}
В этом примере шрифт называется MyWebFont и представлен сразу в нескольких форматах (EOT, WOFF, TTF и SVG).
* SVG используем на всякий случай, если юзер использует мобильный Safari (iPhone/iPad) до версии 4.1
Ну а для полного использования шрифта, нужно описать все виды. Например я использую лишь 4:
- 300, normal
- 300, italic
- 600, normal
- 600, italic
Ну или описать их можно так::
@font-face {
font-family: 'MyWebFont';
src: url('fonts/MyWebFont-LightItalic-webfont.eot');
src: url('fonts/MyWebFont-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont-LightItalic-webfont.woff') format('woff'),
url('fonts/MyWebFont-LightItalic-webfont.ttf') format('truetype'),
url('fonts/MyWebFont-LightItalic-webfont.svg#MyWebFontLightItalic') format('svg');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'MyWebFont';
src: url('fonts/MyWebFont-Bold-webfont.eot');
src: url('fonts/MyWebFont-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont-Bold-webfont.woff') format('woff'),
url('fonts/MyWebFont-Bold-webfont.ttf') format('truetype'),
url('fonts/MyWebFont-Bold-webfont.svg#MyWebFontBold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'MyWebFont';
src: url('fonts/MyWebFont-BoldItalic-webfont.eot');
src: url('fonts/MyWebFont-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont-BoldItalic-webfont.woff') format('woff'),
url('fonts/MyWebFont-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/MyWebFont-BoldItalic-webfont.svg#MyWebFontBoldItalic') format('svg');
font-weight: 600;
font-style: italic;
}
Ну и напоследок, посмотрите сервис, в котором Вы можете сгенерировать шрифт во всех форматах веб-шрифтов.
P.S. В комментариях указывают на то, что решение работает и для более ранних версий IE.