IE5+ и CSS3 — есть способ подружить!

    Уверен, что найдутся на Хабре люди, которые уже знают о этом замечательном способе заставить «ненавистный» ИЕ понимать такие вещи, как min-width и ::after. Но лично я об этом способе не знал, и испытал настоящий восторг, когда наткнулся в сети на очень элегантное и эффективное на мой взгляд решение данной проблемы.

    Достаточно прикрутить к своей страничке относительно маленький (не больше 40 кБ) js-скрипт, и (вуаля!) css-стили, ранее не воспринимаемые «осликом», начинают работать! Можно забыть про css-хаки и практически не извращаться, достигая кроссбраузерности. Удивило и то, что ИЕ с таким «костылём» стал «бегать быстрее» Firefox, т.е. правильнее следовать CSS3-стандартам (тестировал псевдокласс nth-child()).

    И, кстати, это ещё не все плюшки :). Скрипт также «исправляет» несколько не относящихся к CSS неприятностей (как, например, отсутствие поддержки в ИЕ png-формата).

    Большое спасибо автору (Dean Edwards) за столь замечательный инструмент. Попробовать в работе и скачать скрипт можно на официальной страничке проекта.

    Кстати, автор предлагает следующий способ подключения скрипта (обратите внимание на src):

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 80

      –1
      а ссылку дать религия не позволила?
        +9
        Вооот! Думал, повешу ссылку, будут обвинять в накрутке :)
        0
        Спасибо за полезную информацию. :) Думаю, что эта библиотечка может облегчить жизнь. :)
          0
          выглядит многообещающе. Попробуем. Спасибо за ссылку.
            0
            Выглядит хорошо. Попробуем на проектах.
              0
              Прицепил к странице, но, как ни странно, проблему png это не решило, тестировал на IE6
              А вцелом тема полезная, потому что освобождает от кучи рутинной работы.
                0
                Я сам ещё не пробовал «пободаться» с PNG. Как попробую — откомментируюсь.
                  +4
                  Цитата с их странички:

                  PNG
                  The script only fixes images named: *-trans.png
                  Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.
                    +2
                    Мдя, корявенько… Ну да ладно, я всё равно очень доволен этим скриптом :)
                  0
                  Про .png там написано:

                  The script only fixes images named: *-trans.png

                  Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

                  Т. е. .png с прозрачностью надо называть *-trans.png. Непонятно зачем разработчик так сделал, но вообще для .png есть решение всего на 2 Кб — homepage.ntlworld.com/bobosola/pnghowto.htm, работает с теми именами файлов, какие есть. Но что там с background-repeat и position не знаю, не пробовал.
                    +1
                    есть решение для background-position и background-repeat, только ссылку не помню, но не думаю, что вам её будет сложно найти по ключевым словам.
                    но, какбы, достигается это клонированием дива или его позиционированием. т. е. скрипт может создать не одну сотню дивов с фильтром, а это никогда хорошо не сказывается на производительности
                    0
                    Если подключать полупрозрачный png как бэкграунд через CSS то в IE6 незаработает, хоть ты тресни. Бэкграунд-репит, соответственно, тоже незаработает.
                      +1
                      Заработает, если подключать с помощью фильтра:
                      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=myimg.png, sizingMethod=scale);

                      Хотя размножить бэкграунд контейнера нельзя, зато можно размножить сам контейнер, как выше говорил wixus.
                        0
                        я пытался так делать, но мой браузер растягивал только один слой, а другие с подобным стилем напрочь отказывался растягивать
                          0
                          Погуглите — IE5.5+ PNG Alpha Fix v2.0 Alpha с поддержкой Background Tiling.
                      +1
                      очень даже понятно зачем так разработчик сделал.

                      Не всегда же PNG использовать для передачи полупрозрачности.
                      Его ведь можно использвать и как толковую замену JPG, ибо для фотографий размер сравнительный, а деструкции нет.
                        +1
                        Да не, логика разработчика в принципе понятна, но просто складывается ощущение, что это экономия на спичках, приносящая лишние неудобства. Если используются, например, те же иконки famfamfam, то придется их все переименовывать и в коде соответственно править. Можно было бы это поведение сделать настраиваемым, например, чтобы все картинки из директории icons обрабатывались, а другие нет или как-то так.

                        По поводу png вместо jpeg для фотографий, вряд ли это правильно, у меня получалось, что фотография в png весит почти в 3 раза больше, чем jpeg очень хорошего качества.
                          0
                          Ну, кстати говоря, никто не мешает скачать этот файл себе локально (что на реальном проекте было бы сделано в любом случае), найти место где прописывается условие на -trans.png и заменить на что-нибудь свое.

                          Конечно, лишние телодвижения, но если выйдет быстрее, чем переименовывать — вполне логичное решение.
                            0
                            Можно конечно, но тогда так придется делать каждый раз, когда захочется обновить версию этого скрипта.
                            0
                            А ведь это ещё нужно с PNG уметь работать… ))
                          0
                          Наверное это сделано с целью, чтобы скрипт не пытался сделать прозрачными те png в которых нет прозрачности.
                            0
                            Ой. всю ветку не дочитал… CAH4A уже сказал :)
                            +1
                            Так а что трудно подправить js файл?
                            IE7_PNG_SUFFIX:"-trans.png"… на IE7_PNG_SUFFIX:".png"
                              0
                              «для .png есть решение всего на 2 Кб — homepage.ntlworld.com/bobosola/pnghowto.htm, работает с теми именами файлов, какие есть» — да уж у них даже демка на сайте не работает )))
                                0
                                Хм, проверил только что — у меня работает в IE6. Могу скриншот прислать ;) Может у вас случайно js выключен?
                                  0
                                  Уже разобрался: у моего IE мания величия по conditional comments он себя считает 7-м
                            +7
                            А надо-ли? ИЕ5 имхо вообще уже не стоит брать в расчет при верстке.
                              +3
                              Там IE5+
                                +3
                                Надо — «It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.»
                                А IE6 еще держит позиции… к сожалению!
                                0
                                сколько пробовал их запустить-проверить, так и не вышло, постоянно ошибка js вылазит…
                                  +1
                                  Какой браузер пробуете? У меня в IEtester на вкладке 5.5 тоже ошибка скрипта вылезает (пробовал с png «пообщаться»)
                                    0
                                    пробовал на MultipleIE (IE6) и «родной» IE7
                                  +2
                                  Угу, по началу тоже в восторге был, а потом, как начала замечать тормоза на больших проектах, оставил эту затею.

                                  Да и либа уже не молодая.
                                    +1
                                    Вы, кстати, давно знакомы с ней?
                                    Оставили её и вернулись к хакам?
                                      +5
                                      эта библиотека и есть один гигантский хак ;)
                                      для серьёзных проектов не годится
                                    +1
                                    Протестил: некоторые вещи заработали, а некоторые нет :(
                                    А такие надежды подавал… Но и так не плохо :)
                                      +1
                                      Убожественный скрипт… Лучше кодить без него…
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          +1
                                          О! Спасибо за ссылки и коммент!
                                            +1
                                            Воистину!
                                            Тем более, работает это All-in-one через пень-колоду
                                              0
                                              мне вот нужно ксс свойство tagname[att='value'], есть такой скриптик?
                                                0
                                                jQuery? ;-)
                                                  0
                                                  ну в данном случае использование целого фреймворка будет не оправданным
                                                    0
                                                    Если в GZip, то всего около 15 КБ. ;-)
                                                  +1
                                                    0
                                                    да, двигаться надо в этом направдении. просто думалось что уже есть автоматизированный для этих целей js :)
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      +1
                                                      лучше не runtimeStyle.color, а присваивать заранее определённый className, иначе, если нужно поменять больше одного свойства, выглядеть будет довольно громоздко
                                                        0
                                                        спасибо. непременно попробую :)
                                                  +3
                                                  Некрофилия на хабре
                                                    –1
                                                    А это Вы к чему? :)
                                                    Типа, на ИЕ-юзеров плюем с высокой колокольни?
                                                    Или имелась ввиду «непервая свежесть» либы?
                                                      +1
                                                      Непервая свежесть, очевидно. Баян, иначе говоря. ;-)
                                                        0
                                                        Я имел ввиду что IE5 мёртв. :)
                                                          0
                                                          Да, менее полупроцента доли IE5.x не оставляют в этом никаких сомнений. ;-)
                                                        +5
                                                        Про эксперименты Дэна Эдвардса знает любой уважающий себя разработчик.
                                                        А также знает, что побаловаться — да, а использовать не стоит.

                                                        «Каких-то 40 килобайт»…
                                                      +2
                                                      Может разработчику и удобно, но подумайте о юзерах. ИЕ6 и так позже отображает загруженную страницу, а теперь будет уходить лишнее время на парсинг и преобразование stylesheet с помощью яваскрипта.
                                                        0
                                                        у меня на сайте очень долго грузится страница. решил не юзать )
                                                        0
                                                        ИМХО никакого практического значения это не имеет.
                                                        Поддержкой IE5 сейчас могут заниматься только отъявленные маньяки.
                                                        А с багами IE6 большинство верстальщиков хорошо знакомы и знают как их обходить без монстрических JS. Зачем лишний раз нагибать скриптами и так не быстрого старичка?
                                                          0
                                                          Практический пример-задачка:
                                                          как, не задавая дополнительных классов на строки таблицы, в ИЕ6-7 сделать расцветку-«зебру»?

                                                          (сам в данном случае смотрю в сторону DOM, но хотелось бы пользоваться стандартами CSS3, руки уже чешутся :))
                                                            +3
                                                            И ради этого подключать 40кб скрипта, который ещё и кучу ненужного делать будет? Увольте.
                                                              +1
                                                              Скрипт делает кучу НУЖНОГО… А вот КАК он это делает, медленно или быстро, уже другой вопрос…
                                                                0
                                                                Нужного кому? Вам? А что скажут пользователи?
                                                              0
                                                              В нормальной CMS для этого автоматически проставляются классы odd/even.
                                                                0
                                                                А если нужно три цвета? :)
                                                                красный
                                                                желтый
                                                                зеленый
                                                                красный
                                                                желтый
                                                                зеленый

                                                                Для этого есть стандарт, в котором описан псевдокласс nth-child()

                                                                Я очень хочу писать по стандартам. Поэтому я обрадовался появившейся возможности делать это.
                                                                  0
                                                                  >> Я очень хочу писать по стандартам.
                                                                  А ваши пользователи хотят, что бы сайт нормально работал. Подумайте о них. Сайт делается для них, а не для поднятия своей самооценки.

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

                                                                    Но хочется, чтобы всё было красиво не только снаружи, но и внутри. А Вам нет?
                                                                      0
                                                                      Если это «красиво» нагибает бразузер посетителя, то это не мой метод.
                                                                        +1
                                                                        Вы можете подумать, что я пропагандирую повсеместное использование представленного решения. На самом деле это не так. Я просто выражаю солидарность с его автором в том, что стандарты пишутся не просто так, а именно для того, чтобы облегчить жизнь и работу разработчикам. Чтобы у них больше времени оставалось на другие важные задачи, помимо борьбы с браузерами. Чтобы интернет стал красивым и быстрым :)
                                                                    0
                                                                    Нормальная CMS обладает достаточной гибкостью для подобных изменений.
                                                                    А когда у вас при подключении библиотеки «IE7» всё начнёт работать вообще не так, как можно ожидать — тогда вы и поймёте, что она представляет не более чем академический интерес, особенно в настоящее время, когда на носу IE8.

                                                                    В контексте же вашего желания писать по стандартам и использовать новые селекторы в старых браузерах, вам, возможно, покажутся интересными заметка Эрика Мейера и проект Джона Резига (автора jQuery) sizzle.
                                                              0
                                                              Ничего особо нужного скрипт не поправил, png тоже не фиксит вылазит ошибка жабаскрипта в 3 строке 24015 символе, не вижу смысла в применение, продолжаем юзать кондишенал коммент :))))
                                                                0
                                                                Кто-то смотрит на телевизоре 50-х годов HDTV?
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                    0
                                                                    «быстрее» в кавычках…
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                      +3
                                                                      Библиотека не всегда способна устранить старые глюки — и зачастую добавляет новых.

                                                                      Лучше использовать конкретные узконаправленные решения, которые могут занять не более двух-трёх строчек в CSS и/или нескольких в JS (благо информации в Сети хватает с лихвой!).

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

                                                                      А новички тем более не должны пользовать её: им нужно учиться понимать, как избавиться от определённого бага, запоминать — чтобы впредь не наступать на грабли.

                                                                      Я думаю, что мало кому бы понравилось, если бы доктор для того, чтобы вылечить простуду, заковывал бы пациента полностью в гипс, а реставратор заливал бы цементом и бетоном объект культурного наследия — и вешал бы на полученном фасаде растяжку с изображением, как постройка должна выглядеть.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                          0
                                                                          С каким же нетерпением я жду этого великого момента! От всей души желаю ослу №6 скорейшей смерти, аминь :)
                                                                            –1
                                                                            И после него выйдет новый ослик — ослик 8. Еще более глюкавый и нелогичный :-)
                                                                            … ИЕ… мля.

                                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                          Самое читаемое