Статьи

Автор статьи: Денис Кийко

---

Мне, как наверное и многим другим, очень хочется при верстке использовать плюшки 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 и джаваскриптовый рендер джаваскрипта

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

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

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

jQuery CSS parser

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

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

сделать CSSное

.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 должны страдать…