Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности 😉
Призывы перейти на нормальные браузеры или хотя бы обновить IE6, можно встретить на каждом шагу. Тем не менее ситуация меняется очень медленно.
И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.
К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.
Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.
Поддержка :hover селекторов
Вообще-то в IE6 есть поддержка этих селекторов, но только для тега a, т.е. ссылки. В тоже время в современных браузерах их можно использовать для любых элементов страницы.
Напомню, правила, определенные с помощью этого селектора, применяются, когда курсор мыши находится над элементом. При грамотном использовании можно получить очень красивые визуальные эффекты.
Решить проблему можно с помощью небольшого скрипта под названием Whatever:hover.
От вас требуется добавить только одно CSS правило
body {
behavior: url("csshover3.htc");
}
Естественно нужно указать правильное размещение скрипта.
Скрипт сам найдет нужные элементы на странице и, если курсор мыши окажется над ними, применит соответствующие CSS правила.
Поддержка альфа-канала в PNG файлах.
Примечание. В альфа-канале хранятся данные о прозрачности рисунка.
Рассмотрим небольшой пример. Допустим, у вас есть логотип с названием компании, который должен находиться над фоновой картинкой.
При этом для картинки установлено правило
background-attachment: fixed;
Т.е. при прокрутке страницы фон остается неподвижным, а логотип должен перемещаться.
Получается, что нужно делать отдельную картинку с логотипом и отдельную с фоном, а затем накладывать их друг на друга. При этом в Photoshop и современных браузерах все получается отлично, но не в устаревших версиях IE.
Чтобы проиллюстрировать проблему я сделал 2 скриншота.
Угадайте, какой из них сделан в IE6? 🙂
IE закрасил прозрачные пиксели серым цветом. Кстати, использование gif изображений не поможет, т.к. по краю букв идут частично прозрачные пиксели.
Решается эта проблема с помощью скрипта IE PNG Fix.
Вам нужно подключить его для тех элементов на странице, которые содержат прозрачные png изображения. Например, так.
img {
behavior: url("iepngfix.htc");
}
После этого, изображения будут выглядеть правильно.
Небольшое заключение для пользователей IE6.
То, что web разработчик может как-то обойти обойти ограничения браузера не означает, что вам не нужно его апгрейдить 🙂
Даже если вас не интересует собственная безопасность, нужно понимать, что такие решения используют JavaScript и работают обычно значительно медленнее, чем встроенные функции современных браузеров.
Так что не удивляйтесь, если после загрузки пары страничек у вас начнет «тормозить» компьютер 🙂
Удачного обновления!
