15 November 2008

Ещё один способ победить Internet Explorer

Website development
Рано или поздно все web-разработчики сталкиваются с ситуацией, когда Internet Explorer становится проблемой, тормозящей разработку проекта. Сайт свёрстан валидно, по стандартам. Нормально отображается в Mozilla, Opera, Safari и других нормальных браузерах. Но. Открываем его в IE. И видим. Как то, что мы подгоняли по пикселям, строго придерживаясь стандартов, размазано по странице. Ладно ещё в IE7 можно более-менее просто подогнать вёрстку (конечно зависит от дизайна), но от IE6 иногда волосы встают дыбом. К счастью, существуют способы, которые позволяют повлиять на ситуацию. Кто-то использует хаки, кто-то — conditional comments. Где-то можно пойти на компромис и упростить задумку дизайнеров, поддерживая пользователей недобраузеров.

В итоге можно добиться адекватного отображения сайта во всех популярных браузерах включая IE6 и IE7 которые, к сожалению, пока самые популярные. Но что мы получаем? Как правило, это один или несколько CSS файлов для IE. Или куча дополнительных свойств // или _. Всё это затрудняет поддержку сайта, внесение изменений, добавление новых элементов в вёрстку. Всегда остаётся шанс, что где-то что-то забыли подправить или не убрали стиль который работал только в IE.

Недавно нашёл очень интересное решение которое избавляет от множества проблем с IE. Сайт проекта. Решение написано на JavaScript.

На сайте проекта заявлены следующие возможности:

  • supports the following CSS selectors:
    • parent > child
    • adjacent + sibling
    • adjacent ~ sibling
    • [attr], [attr=«value»], [attr~=«value»] etc
    • .multiple.classes (fixes bug)
    • :hover, :active, :focus (for all elements)
    • :first-child, :last-child, only-child, nth-child, nth-last-child
    • :checked, :disabled, :enabled
    • :empty, :contains(), :not()
    • :before/:after/content:
    • :lang()

  • supports imported style sheets
  • preserves the cascade of the style sheet
  • does not alter the document structure
  • does not repeatedly query the DOM tree using JavaScript
  • uses pure CSS to enforce style sheet rules
  • supports the W3C box model in both standards and quirks mode
  • supports fixed positioning (flicker free)
  • supports overflow:visible
  • supports min/max-width/height
  • fixes broken (X)HTML elements (abbr, object)
  • standardised forms behavior
  • supports PNG alpha transparency
  • lightweight script (11KB)
  • works for Microsoft Internet Explorer 5+ (Windows only)


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

Да. За всё надо платить. Естественно без поддержки JavaScript решение работать не может и на скорость это, хоть не сильно но, влияет. Как правило — пользователи IE это «среднестатистические пользователи», которые не отключают JavaScript, а небольшие замедления при загрузке страниц — не самая большая их проблема.

Зато мы получаем возможность использовать много вкусностей CSS типа :first-child, parent > child, [attr=«value»]. О которых, раньше, IE заставлял нас забывать.

Лично я буду использовать это решение в своих проектах.

Мне очень интересно услышать мнения хабрапользователей относительно этого решеня.
Tags: css html вёрстка internet explorer
Hubs: Website development
+40
7.3k 86
Comments 122
Ads