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

    Рано или поздно все 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 заставлял нас забывать.

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

    Мне очень интересно услышать мнения хабрапользователей относительно этого решеня.
    Share post

    Comments 122

      0
      Надо попробовать в реальных проектах.
      • UFO just landed and posted this here
        +1
        Хабр ссылку попортил, вот dean.edwards.name/IE7/
          –2
          Спасибо за наводку, буду пользовать(:
            +5
            Всегда как-то не охотно относился к данным затеям, когда страница загружается, в вашем случаи, будет простая страница без стилей ~1 сек, потом вдруг, что-то дёрнется и появится стиль, глазу очень не приятно и первые моменты кажется, что браузер зарезал css.
            • UFO just landed and posted this here
                +2
                Возможно, но самый первый, уйти скорее…
                  0
                  а от чего бежать то?
                  на мой взгляд, очень хорошее решение для описываемого случая.
              –4
              BVadim, посмотрите еще и на это решение решение.
                +2
                Так это же оно и есть!
                +4
                Я как-то юзал эту штуку чтобы заствить IE6 отображать прозрачные PNG (и у фона элементов тоже). Отображаться то они отображались, но как IE при этом глючил! Элементы начинали мигать и дергаться.
                На мой взгляд как раз заголовок у топика правильный — IE6 надо именно побеждать, то есть наоборот постепенно отказываться от его поддержки.
                  +1
                  От поддержки то отказться можно, но ведь одновременно с этим придётся отказываться и от довольно большой части аудитории, а этого хочет не каждый…
                    0
                    из всего что пробывал, лучше всего работал pngfix для jquery, но хорош только если вы используете jquery в своём проекте.
                      0
                      А куда в нынешнее время без jQuery :). В следующий раз если возникнет такая проблема может и попробую, но думаю, что надежней все-таки по старинке (_background-image: [JPG без прозрачности] — и пофиг что у приверженцев IE6 может пропадать красота:) ).
                        0
                        как скачать другой браузер… если у тебя вобще никакого нет?… предложение что мне это кто-то другой сделает абсолютно не рентабельно.
                          0
                          промахнулся
                        0
                        Представим, что в Windows по умолчанию не будет IE и каждому пользователю нужно будет установить обозреватель :)

                        По-моему, было бы очень круто! Пользователям, использовавшим раньше (или вообще новичкам) IE, помогли бы опытные люди и поставили бы нормальный обозреватель. И что-то мне подсказывает этим обозревателем врядли стал бы IE. Вот это был бы прорыв! ^_^
                          0
                          во время первой браузерной войны MS отстоял право комплектовать ОС браузером. Это и уничтожило Netscape
                            +1
                            Ну скажем нетшкаф был еще глючнее, чем IE, так что не только то, о чем Вы написали, его убило.
                              0
                              Ок, быстро уничтожило
                            0
                            ак скачать другой браузер… если у тебя вобще никакого нет?… предложение что мне это кто-то другой сделает абсолютно не рентабельно.
                            • UFO just landed and posted this here
                                0
                                Товарищ? вы о чём собственно? я сказал что если в ОС по умолчанию не будет браузера совсем, то как мне скачать Firefox или Opera?????
                                • UFO just landed and posted this here
                                    0
                                    Вы предлагаете компаниям которые продают компьютеры устанавливать браузеры отдельно?
                                    Товарищ… это бред.
                                    Единственно верное решение… это чтобы MS сделали хороший браузер который бы не глючил… тогда бы других не напрягало и каждый пользовал тем что ему нравится.
                                    • UFO just landed and posted this here
                                      0
                                      А как Вы скачаете себе нормальный браузер, если у Вас НЕТ БРАУЗЕРА по-умолчанию? ;) Оперу то на чистую систему откуда ставить, если ни дисков, ни флешки допустим нет? А так хоть открыл осла, скачал что надо, поставил. Пэтому вообще выкинуть браузер из ОС — это маразм.
                                      • UFO just landed and posted this here
                            +9
                              +1
                              Извините, поиск на эту статью не вывел.
                            +1
                            IE вообще самый убогий браузер. Бывают такие баги, что просто ужас. К примеру, изменил я значение (уже не помню точно какое именно, но связанное с текстом), а он мне ничего не изменяет. В Mozill'e и Oper'e всё отлично изменяется. Только reset помог.
                            • UFO just landed and posted this here
                                0
                                ага. постоянно через задний проход делаю.
                              0
                              мне вот интересно, это такая политика microsoft? Не верю что они не могут написать нормальный браузер.
                              • UFO just landed and posted this here
                                  +1
                                  выпуск восьмой версии не решит проблему IE6 и IE7. IE7 уже 2 года, однако до вытесения им IE6 ещё очень далеко.
                                    +3
                                    И вы им действительно верите? :)
                                    Я просто даже не знаю… Представляете, рраз — и вдруг все эти проблемы с ослами уйдут в прошлое. Ну такого просто не может быть :)
                                      –2
                                      Я им действительно верю, потому что у меня стоит IE8beta2, я её посмотрел.
                                        +3
                                        С виду вроде хорошо, а изнутри торчат уши старого осла.
                                        Навскидку, шибко не копаясь: прототипы DOM вроде открыли, а textNode забыт; всё ещё неясная генеалогия некоторых объектов (навроде currentStyle, у которого нельзя перечислить все свойства из-за отсутствия и невозможности назначить hasOwnProperty); перечислить атрибуты элемента всё ещё значительно быстрее регекспом по outerHTML; неймспейсы вроде добавили, а с незнакомыми тегами html-парсер что попало так и делает.
                                        Больше на косметический ремонт по списку фич похоже, чем на капитальный. Потому, на мой взгляд, верить пока рановато.
                                        (Побрюзжал вот.)
                                        • UFO just landed and posted this here
                                    +1
                                    Конечно, это политика Microsoft. Изначально у них в браузере было много «своего», например разные фильтры, которые использовали веб-мастера в своих проектах. В альтернативных браузерах такие сайты не работали, чем и держали аудиторию на IE.
                                      0
                                      У всех браузеров собственных стандартов хватает. Вспомните хотя бы XUL в FireFox.
                                        0
                                        глупости, каким боком XUL пересекается с проприетарными фичами IE? XUL — язык разметки для создания пользовательских интерфейсов, который используется в интерфейсе самого браузера, это часть платформы.
                                          +1
                                          XUL между прочим — тоже стандарт. И существует он не только в FF. Не путайте тёплое с мягким ;)
                                            0
                                            Я не понял причём тут «путанье тёплого с мягким», видимо, просто популярная фраза. Если так посмотреть, что и VML стандарт: www.w3.org/TR/NOTE-VML.html
                                              +1
                                              Ну так а мелкософтовские фильтры и всякие runtimeStyle нигде, кроме как в MSDN официально не описаны, т.е. являются проприетарными, т.е. никакой не стандарт.

                                              Так что тёплое — это узкоспециальные, но стандарты, а мягкое — это мелкософтовские свойства.
                                                0
                                                Я вам дал ссылку на VML. Canvas тоже нигде не был описан, сейчас описали, до того как описание на W3C появилось, он был проприетарным?
                                                  +1
                                                  Вы же прекрасно понимаете о чем речь идет, к чему этот бесполезный спор?
                                                    0
                                                    Вы знаете, я не понимаю.

                                                    Когда Microsoft вводит что-то новое, все плюют в Microsoft, тем не менее, во многих браузерах есть что-то своё.
                                                      +1
                                                      Хорошо, я объясню. *Капитан Очевидность* Идиотская политика Microsoft по части фильтров и проприетарных свойств приводит к тому, что веб-разработчики реализуют через костыли то, что должно было бы быть реализовано само по себе. Вот если бы IE6 поддерживал ВЕСЬ CSS2, со всеми дочерними селекторами, свойствами min- и max-width и прочее — никто бы не ругался, тот же expression вещь удобная. Живет же FF со свойствами -moz- и ничего.

                                                      Фишка в том, что вместо добавления своих «недо-креативов» лучше бы задумались о стандартах. И о безусловно верной реализации того, что обязано быть в наличии. Задание на дом — сверстайте мне полупрозрачный фон из PNG, с repeat и смещением фона -10px -10px (background: url(some.png) repeat -10px -10px) в IE6 с помощью гребаных фильтров — может поймете, что их костыли крайне ограничены.

                                                      Еще раз чтоб не было кривотолков — в FF есть куча свойств, расширяющих функционал. А в IE есть куча замещающих. Почему я должен писать min-width с помощью expression, когда эта вещь есть в стандарте и всеми нормальными браузерами поддерживается?
                                                        0
                                                        Вы год выпуска IE6 посмотрите. Тут спорить не о чем. Другое время было.
                                                          0
                                                          Могли бы и апдейты выпустить толковые
                                        • UFO just landed and posted this here
                                            0
                                            читайте внимательнее, я написал «например»
                                            • UFO just landed and posted this here
                                                +2
                                                Да нету у него популярности. Просто есть туча контор, где внутренний софт пашет только под IE. Есть куча контор, где политика безопасности не позволяет поставить что-то стороннее, а админам не хочется переучивать кучу народу на другой браузер.

                                                Самое зло — корпоративные клиенты. Сёрферы-одиночки обычно себе ставят что-то понормальнее, чем IE.
                                        +11
                                        Ещё один «недавно нашёл», а сколько лет проекту? Ага.
                                        А что он делает, когда к странице подключён CSS-файл порядка тысячи строк? Вот именно.

                                        Так что давайте не искать волшебных решений и всяческих JS-панацей.
                                          0
                                          Вадим, апплодирую стоя! Почему верстальщики до сих пор не воспримут CSS-хаки и условные комментарии (для больших файлов) как меньшее зло из возможных (если сравнивать производительность всех альтернатив)?
                                            0
                                            *с достоинством кланяется*

                                            Просто всем хочется найти решение, которое позволит наконец нормально верстать, без оглядки на калечны браузеры, но…

                                            жизнь жёстче, чем ты ожидал, когда был мал.
                                            чтобы её смягчить у меня не хватит мощи,
                                            жизнь жёстче, да, точно, жизнь жёстче


                                            © СБПЧ
                                          +3
                                          Вы бы сначала его попробовали, а потом писали.
                                          Багов словите ще больше причем непонятно как их искоренить. Когда нативные баги ИЕ — то хоть решение на поверхности.
                                            0
                                            О! Хотел бы спросить, может кто-то знает

                                            1) безывратное решение position:fixed в ИЕ6. трюк с _top:exprression() не прет, там блок дергается при скролле страницы((.

                                            2) как в ИЕ6 сделать якорь например на блок: <div id=«content»>, чтоб работала ссылка href="#content". пока что решел через conditional comments, добавляя для ИЕ тег <a name=«content»></a> перед дивом, и убирая ИД у дива, но это плохо. так как для ИЕ у дива нет ид (так как он уже использован в якоре)

                                            Может кто сталкивался?
                                              0
                                              про position:fixed совсем недавно натыкался на сайте лебедева. Там делается некий финт ушами, когда первые потомки body абсолютно позиционируются. В итоге получается fixed, но несколько наизнанку. Зато работает. И без всяких экспрешенов.
                                                0
                                                Можно и проще сделать, если не требуется задание фона картинкой, но последний ( www.artlebedev.ru/tools/technogrette/html/emulate-fixed/ ) способ универсальнее.
                                                • UFO just landed and posted this here
                                                    0
                                                    Вы посмотрите в чём заключается способ на который я дал ссылку.
                                                    • UFO just landed and posted this here
                                                        0
                                                        Возможно то же самое, сейчас смотреть видео, потом разбираться в примерах только чтобы понять то же самое или нет, не хочется :)
                                                        • UFO just landed and posted this here
                                                • UFO just landed and posted this here
                                                  +1
                                                  1) www.artlebedev.ru/tools/technogrette/html/emulate-fixed/

                                                  2) не знаю, мне всегда хватало <a name>
                                                    +1
                                                    Мне надо чтобы при переходе по ссылке экран скроллился на див. Якорь через [a] делает только вертик. скролл. Кроме того, ичпользование [a] для якорей — неудобно, ставить ид на заголовках или дивах правильнее и логичней (и наверно семантичней).

                                                    Сразу предупрежу, обертывать див якорем снаружи нельзя, так как в диве есть ссылки.

                                                    В общем, из-за долбаного ИЕ опять не получается все сделать просто и красиво а приходится извращаться. Желаю ему сдохнть в страшных муках.
                                                      0
                                                      откройте для себя, что достаточно элементу выставить атрибут id, от можно отказаться
                                                        0
                                                        Посмотрите на что я отвечаю, там написано, что это не работает.
                                                      –2
                                                      Ссылки на Якоря по стандартам вешаются только на. htmlbook.ru/html/a.html

                                                      Трюки с дивом это уже хук

                                                        +2
                                                        Эээ… вы за какой год мануалы читали? Вы стандарт видели?

                                                        > 12.2.3 Anchors with the id attribute

                                                        > The id attribute may be used to create an anchor at the start tag of any element (including the A element).

                                                        ( www.w3.org/TR/REC-html40/struct/links.html#h-12.2.3 )
                                                          0
                                                          Действительно я был не прав. Спасибо за то что ткнули носом. Просто читаю книжки на русском а не w3.org, как то больше люблю читать на своём родном языке. Видимо и книги какие то не такие… Что не слышал о такой возможности.

                                                          Правда все равно как то на мой взгляд, логичнее использовать якоря через ссылки.
                                                          Код проще человеком потом будет усваиваться.
                                                            +3
                                                            Нет, через ид понятнее и семантичнее так (имхо):

                                                            [h2 id=«po4emy-ploxo-usat-a-name»]Почему плохо юзать A name[/h2]

                                                            [p]Lorem ipsum dolorem....[/p]

                                                            [h2 id=«po4emy-horosho-usat-id»]Почему хорошо юзать id[/h2]

                                                            [p]Lorem ipsum...[/p]

                                                            ↑ так намного логичнее, зачем плодить пустые теги?
                                                            • UFO just landed and posted this here
                                                        +1
                                                        1. body {background-attachment: fixed;}
                                                        2. ссылки-якори на div#id отлично работают в IE6. Даже в quirsk mode. И в IE5 тоже.
                                                          0
                                                          1) Гм… и что? Это фиксирует фон body, а мен было нужно совсем другое, тут уже в Лебедевский вариант ткнули, плохо конечно, но работает всюду, видимо будем им пользоваться.
                                                          2) Точно работают) Видно, в чем-то другом ошибка была(
                                                          • UFO just landed and posted this here
                                                              0
                                                              Интересный способ, не слышал)
                                                        +3
                                                        Решение вроде «Каша из топора». Фиксить css с помощью js по моему, сам по себе дикий подход. Не буду говорить о том что ie6 тормозит верстальщиков в использовании доступных свойств и псевдоклассов css2.1, css3, самому хочется использовать в проектах возможности css3. Возможно использование такого скрипта на личных малопосещаемых проектах и нормально, но для крупных проектов скрипт весом 30 кбайт — что прилично, в коде которого еще нужно разобраться и убрать лишние не используемые фиксы, да и задержка при обработке скрипта браузером — слишком большой минус. Что касается уважения себя как верстальщика, хватит уже жаловаться на ie6,7,8 наша работа и заключается в написании кроссбраузерного кода независимо от общепринятых стандартов. Научитесь думать головой, если вы не хотите использовать в коде фиксы для ie и писать только валидный css, то чем данный способ лучше? Грамотный верстальщик может сверстать и без использование фиксов, вопрос только в усложнении кода и времени разработки.
                                                        • UFO just landed and posted this here
                                                            0
                                                            смотря для каких тегов ты используешь эти свойства, если это блочный элемент, должно помочь position: relative;
                                                            • UFO just landed and posted this here
                                                            +1
                                                            Ну данный скрипт подключаем только под IE 6 например, тем более сей час говорят что IE 7 уже отобрал 70 % пользователей у IE 6, так что подключение этого скрипта для IE 6 не такая уж трата… Дальше можно развивать тему, как уйдет XP, так и уйдет IE 6…
                                                              –1
                                                              70% преувеличение. Где то выше я видел вопрос «А что будет со скриптом при 1000 строчках кода?» у меня в одном проекте над которым я работаю уже более 3000 строчек. Пока скрипт будет выполняться не повесит ли он наш любимый ие? Не понимаю js-программистов, которые первыми пытаются предложить решение проблемы фиксов в верстке, когда в принципе все можно решить менее сложными вещами тому есть пример про top:exprression выше, что вполне можно обойтись без js. Фиксить css с помощью js — это радикально.
                                                                0
                                                                уважаемый, expression есть не что иное как javascript, и иной раз, неумеючи, можно такой экспрешшн написать, что всё будет глючить, виснуть и тормозить
                                                                  0
                                                                  да уважаемый, но я пишу, что можно сверстать без применения js, иной раз неумелые верстальщики хватаются за js когда решение проблемы того не стоит, пример тому обсуждение выше про top:exprression.
                                                                    0
                                                                    не можно, а нужно, а костыли для IE это уже другой вопрос, и вопрос спорный — с одной строны: нафиг бы они кому обосрались эти экспрешены и фильтры, с другой стороной — насколько беден был бы сейчас веб, если бы не было этих костылей…
                                                              0
                                                              +1, использовать javascipt для этого — неимоверное извращение, в коде потом вообще не разберешься, и изменить/поправить что-ли станет практически не возможным :)
                                                              Я вообще использую скрипты для ИЕ только в двух случаях — для фикса png и для min-width. Всё остальное — верстка. (Хаки я тоже практически не использую) :)
                                                              –6
                                                              Срочно портировать на jQuery!
                                                                0
                                                                Зачем?
                                                              • UFO just landed and posted this here
                                                                  +1
                                                                  Это общая болезнь всех разработчиков, не только вебных. Обладание знанием, недоступным простому пользователю, делает из большинства разработчиков тупых, самодовольных снобов. Это не ИЕ недобраузер. Это разработчик, не любящий пользователя — недочеловек.
                                                                  0
                                                                  бекграунд в эта штука не лечит…
                                                                  :hover и :first-child жутко тормозит в ие6…
                                                                  не буду юзать…
                                                                    0
                                                                    *бекграунд в [tr] эта штука не лечит…
                                                                    0
                                                                    верстай под браузер camino на маке, и будет одно и тоже во всех браузерах включая осёл 6.
                                                                      +1
                                                                      Может под Amaya? :)
                                                                        0
                                                                        Славен Хабр пионэрами!
                                                                        0
                                                                        > В итоге можно добиться адекватного отображения сайта во всех популярных браузерах включая IE6 и IE7 которые, к сожалению, пока самые популярные.

                                                                        Firefox почти догнал IE6+IE7. Кажды из них по отдельности уже давно не самый популярный.
                                                                          0
                                                                          Вы меня извините, но если сначала верстаем по стандартам, а потом открываем в IE6, то Вашему верстальщику ещё учиться и учиться)) По-хорошему, нужно изначально учитывать IE.

                                                                          Only users with full accounts can post comments. Log in, please.