Pull to refresh

CSS3 в IE 6-8 любой ценой

Reading time2 min
Views7.3K
Мне, как наверное и многим другим, очень хочется при верстке использовать плюшки CSS3. Все большая поддержка 3 уровня каскадных таблиц такими браузерами как opera, firefox, safari, chrome и даже explorer 9 только подогревает это желание, но как обычно есть «но», IE6-8. При этом стоит понимать, что аллергия IE9 к winXP откидывает мечту на годы вперед. На этом можно было бы и закончить, но настырность и зуд в области мозга которая отвечает за желание использовать CSS3 не позволяют мне этого сделать.

Весь смысл этого поста сводится к тому, что IE не умеет CSS3 и поэтому его нужно научить, а если не захочет — заставить. И поиск подобного решения сподвиг меня сделать данную подборку.

Встречайте, парад нездоровых решений




Google Chrome Frame




Всем известное решение, плагин для IE который рендерит страницы движком хрома.

Плохо оно тем, что нужно ставить плагин поверх IE. Люди которые используют IE не хотят/боятся/не могут ничего ставить.

Но сам по себе он наталкивает на мысль — «действительно, может в место IE заставить рендерить страницы что-нибудь другое». Ну разумеется, заниматься таким гиблым делом с нуля нет резона, поэтому нужно найти готовые решения и довести до нужного результата.

Нашлись очень забавные вещи, html рендеры написанные на flash.

HTMLWrapper


HTML и CSS рендер на ActionScript с прибобахами флеша, градиенты, анимация, видио и аудио…

Ну и еще парочка подобных извращений:
AS3 HTML Parser Library

DENG


Между прочим встречал даже рендер HTML на SVG и джаваскриптовый рендер джаваскрипта 0o

Но это все уж как-то хардкорно слишком, нужно поэлегантней.

Можно, конечно, использовать всевозможные хаки и приемы, как нам советует Smashing Magazine, но это не удобно и не красиво.

Нужна система, и она есть, можно многими любимого зверька JQuery заставить сделать апорт.

jQuery CSS parser


Этот замечательный плагин для JQuery позволяет в место джаваскриптового

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

сделать цссное

.gallery a {
-jquery-lightbox: {overlayBgColor: '#ddd'};
}

А плагинов эмулирующих CSS3 у JQuery полно:

border-radius

jQuery Canvas Rounded Corners
jQuery Corners

border-image

borderImage

Multiple Backgrounds

Background Layers

Ну и так далее…

Но «Но», большинство из этих эмуляций кривые, почти все убогие и хорошо работают только на демках своих родных сайтов. Те же которые работают хорошо, превращают страницу в кашу при сочетании друг с другом, попробуйте, например, border-radius и Multiple Backgrounds сделать на один блок.

Именно поэтому я решил писать свою библиотеку эмулирующую CSS3, но об этом в другой раз.

P.S. Я прекрасно понимаю, что IE будет притормаживать иногда, но считаю это плюсом, пользователи Internet Explorer должны страдать…
Tags:
Hubs:
+43
Comments76

Articles