Повний посібник з приборкання IE6, Черговий блог фрілансера
коротко та корисно про веб-розробку
Повний посібник з приборкання IE6
Протягом багатьох років Internet Explorer 6 (IE6) був нещастям для веб-розробників у всьому світі. Розробники та користувачі стали використовувати більш передбачувані сучасні браузери, такі як Firefox, Opera і Safari. Тим часом, IE6 продовжує переслідувати наші дизайни, ховаючись у темних місцях, а вмирає нестерпно довго, в агонії. Оскільки ми очікуємо настання того великого і світлого дня, коли IE6 остаточно помре, так само як Netscape 4, давайте згадаємо деяких користувачів, які, з різних сумних причин, продовжують мучитися з цим жахливим браузером.
Так що давайте відсвяткуємо останні дні IE6, з цим остаточним посібником з приборкання дикого звіра IE6.
У цій великій статті, ви познайомитеся з найкращими методами підтримки IE6, включаючи спеціальні хакі, підтримку зображень, боксові моделі, флоати, та багато іншого.
Потім, у файлі ie6.css, ми можемо розмістити всі IE6-хакі та інші хитрощі, потрібні цьому браузеру. Це дозволить нам об'єднати всі IE6-стилі в один CSS-файл, який повністю ігноруватиметься іншими браузерами. З таким методом застосування стилів до IE6 немає необхідності у використанні IE6-хаків, так званий «star-HTML» хак, або хак з підкресленням.
Напрямок та фільтр IE6 c «вбудованими» CSS-хаками
На щастя, з появою IE6 цих вбудованих CSS-методів з'явилася достатня кількість. Через кілька років деякі з цих «хаків» піднялися в топі, виявившись надзвичайно корисними та ефективними для застосування до IE6. Напевно, найпоширеніший з таких вбудованих CSS-прийомів, хак підназвою "star-HTML":
В той час, як браузери, що відповідають стандартам, ігнорують цей нелогічний селектор, IE6 трактує його як допустимий селектор, навіть якщо html найвищий елемент у дереві документа. Це дозволяє нам застосувати CSS-стилі тільки для IE6 без втручання в інші браузери. Найкраще те, що цей метод для IE6 повністю правильний.
Також трапляються випадки, коли нам необхідно сховати стилі від IE6. Наступний хак пропонує вирішити це за допомогою фільтра дочірнього селектора, що дозволить нам застосувати CSS-стилі до всіх браузерів, за винятком IE6:
Цей селектор також повністю валідний і застосовується до всіх відповідних стандартів браузерів. Цей метод дуже ефективний, тому що IE6 просто не розуміє цього селектора.
Інші корисні методи направлення та фільтрації IE6 включають хак !important , який дуже зручно використовувати, коли вам потрібно скасувати значення властивості для IE6:
Коли ці дві однакові властивості перебувають у одному селекторі, IE6 застосує друге властивість, якщо перша властивість включає директиву !important . Інші браузери звичайно застосують декларацію !important , тим самим дозволивши нам застосувати до IE6 інші значення властивостей.
Увімкнення підтримки альфа-прозорості у PNG
Одним з найсумніших дефектів в IE6 є відсутність підтримки 32-бітної альфа-прозорості у PNG-зображень. При відображенні в браузері 32-бітових альфа-прозорих PNG, IE6 замінює всю прозорість на потворне сірий фон. На щастя, це добре відома проблема, що часто зустрічається, для якої існує велика кількість обхідних шляхів і рішень.
Якщо відкласти убік заборону використання альфа-прозорих PNG-зображень в цілому, можливо, найпростіший спосіб забезпечитивізуальну сумісність із IE6 – це використовувати повністю прозорі PNG, які повністю підтримуються та правильно відображаються у всіх браузерах, включаючи IE6.
Найбільш практичним підходом буде використання 8-бітного, альфа-прозорого формату PNG замість звичайного 32-бітового формату. Щоб його отримати, використовуйте програму Adobe Fireworks (Photoshop цього не вміє), збережіть своє альфа-прозоре PNG-зображення у 8-бітному форматі, а потім увімкніть у свій дизайн, як завжди. 8-бітні PNG, можливо, не так гарно виглядають як 32-бітові версії, зате в IE6 вони будуть виглядати, так само як і в інших браузерах. Цей метод дозволяє застосовувати альфа-прозорість у всіх сучасних браузерах, без отримання потворного сірого фону в IE6.
Звичайно, є можливість включити до IE6 підтримку 32-бітної альфа-прозорості. Існує безліч різних скриптів, що включають таку функціональність, але всі вони ґрунтуються на розробці Microsoft, фільтрі AlphaImageLoader, який можна включити до вашого CSS-файлу таким чином:
Щоб змусити це працювати, вам знадобиться завантажити ці два файли, і розташувати їх у тій же папці, що і ваш CSS-файл. Перший файл – це прозоре gif-зображення, і другий файл – це HTC-скрипт, що надає IE6 (і нижче) функціональність, яка потрібна для 32-бітової альфа-прозорості. Це базова реалізація фільтра AlphaImageLoader, більш розширена функціональність також можлива з використанням великої кількості безкоштовних скриптів. Ось деякі з моїх коханих:
Виправлення полів та відступів
Ранні версії Internet Explorer неправильно інтерпретували модель боксів, включаючи рамки та внутрішні відступи під час підрахунку ширини контенту. Наприклад, погляньте на наступний випадок:
Усучасних браузерах, висота та ширина цього блоку, буде розрахована відповідно до специфікації W3C як 100px + 20px +20px = 140px . У ранніх версіях IE, незважаючи на це, і висота, і ширина буде помилково розрахована в 100px. Ця різниця відповідає за розробку безлічі невідповідностей між відповідними стандартами браузерами та старими версіями Internet Explorer.
На щастя, неправильна модель боксів була переглянута в IE6, який виявився здатним повернути правильну ширину для веб-сторінок, що включають повний DOCTYPE. Коли присутній повний DOCTYPE , IE6 включає один із двох «підтримує стандарти режим» або «майже підтримує стандарти режим», обидва ці режими дозволяють IE6 правильно інтерпретувати боксову модель. Якщо ж повний DOCTYPE не включений до веб-сторінки, IE6 повернеться в «quirks mode», і інтерпретуватиме боксову модель неправильно.
Таким чином, проблема боксової моделі легко вирішується в IE6 шляхом включення повного DOCTYPE і подальшої роботи в стандартному режимі. Але якщо вам раптом потрібно попрацювати в режимі quirks mode, найпростіший спосіб уникнути застосування внутрішніх відступів і рамок до елементів - задати їм точну ширину. Ви завжди можете застосувати внутрішні відступи та/або поля до закритих елементів.
Незважаючи на ці рішення, можуть виникнути ситуації, коли необхідно точно контролювати висоту та ширину конкретних елементів. У цих випадках ми можемо використовувати для цього «Tan Hack»:
У першому наборі правил, ми застосовуємо ширину і висоту як звичайні значення для відповідних стандартам браузерів. Потім, у другому наборі правил, ми прораховуємо неправильну боксову модель в IE5 і IE6, в режимі quirks mode шляхом коригування значень висоти і ширини, включаючи додатковівідступи та ширину рамки.
Встановлення min-width/max-width та min-height/max-height
Крім боксів, IE6 не розуміє максимальної та мінімальної висоти та ширини. Це неймовірно сумний факт для розробників, оскільки безлічі макетів потрібні ці властивості для нормального функціонування. У сучасних браузерах ми можемо використовувати наступний CSS для досягнення різних цілей:
…Що еквівалентно цьому
max-width
min-width
max-height
min-height
Усуваємо баг із подвійними полями
Більшість веб-дизайнерів, що займаються розробкою сайтів, добре знайомі з проблемою подвійних полів у IE6. Цей неприємний баг з'являється коли ви призначаєте float будь-якому елементу (такому як div ) в одній директиві, а потім застосовуєте поля в тій же директиві. Наприклад, якщо ми зробимо так:
..IE6 (зазвичай) подвоїть розмір поля до 20px, без будь-яких підстав. Немає потреби говорити, що це баг подвійних полів зруйнував безліч чудових дизайнів, викликаючи біль та страждання розробників.
На щастя, цей баг легко вбити. Просто змінити тип відображення елемента, до якого застосовується float з типу block на тип inline , наступним чином:
Це вирішує баг з подвійними полями у 99% випадках. У тих же випадках, коли це рішення не допомагає, ви можете обійти цю проблему шляхом видалення полів і встановлення внутрішніх відступів у батьківського елемента або безпосередньо у елемента, до якого застосовано float .
Чищення потоку
Чищення потоку від флоатів - інше загальновідоме завдання, не тільки в IE6, а й у багатьох сучасних браузерах. В ідеальному світі, один елемент, що містить інший плаваючий елемент, повністю ізолює його від навколишніх елементів. А в реальному світі веб-браузерів, флоати, часто не ізольовані. Коли таке трапляється, ми зазвичай говоримо, що плаваючий елемент не був очищений його батьківським елементам. Хороша новина в тому, що існують різні прості способи чистити флоати в IE6 та інших браузерах.
Один із найстаріших способів очистити потік від флоату – використовувати clearfix хак. Ця CSS-техніка працює за допомогою генерації контенту після батьківського елемента, використовуючи CSS-псевдо-клас :after . Згенерований контент, згодом чистить плаваючий елемент. Далі типовий приклад:
Щоб використовувати цей метод очищення потоку, розташуйте його у вашому CSS-файлі, і замініть всі рядки .clearfix на селектор елемента, який потребує очищення від плаваючих нащадків.
Інший CSS-метод очищення потоку – просто призначити float елементу-контейнеру. Наприклад, якщо ви призначаєте float малюнку, що знаходиться в контейнері div який не ізолює її, просто використовуйте наступний CSS:
Потім, якщо містить елемент, повинен поводитися як звичайний блоковий елемент, застосуйте до нього ширину в 100%, щоб прибрати простір для наступного елемента.
Все б добре, але є спосіб очищення потоку і краще за це. Просто застосуйте властивість overflow до контейнера div і він автоматично буде розширюватися по вертикалі і очищати float у дочірніх елементів. Ось приклад:
Призначення ширини для блоку обов'язково для Internet Explorer і Opera, але це не означає, що ширина повинна дорівнювати 100%, ви можете використовувати будь-яку ширину та одиниці вимірювання, які вважаєте за потрібне. Якщо не хочете вказувати ширину (width), натомість ви можете вказати висоту (height). Для властивості overflow також можуть бути використані будь-які з перерахованих значень:
- auto – відображає смуги прокручування, якщо контент перевищує вказану ширину
- hidden – ніколи не відображає смуги прокручування, навіть якщо контент не вміщується у вказані розміри
- scroll – завжди відображає смуги прокручування, навіть якщо в них немає потреби.
Також цей метод працює для очищення потоку від плаваючих елементів, бувають випадки, коли властивість overflow може перешкодити іншим аспектам дизайну. Якщо це станеться, ви можете спробувати обмежити застосування overflow за допомогою overflow-x: hidden або overflow-y: hidden . І пам'ятайте, що значення ширини елемента можна замінити на значення висоти.
Усунення інших проблем IE6
На завершення статті, давайте розглянемо кілька інших проблем, які часто зустрічаються в IE6. Ці складності, а також способи їх усунення, досить прості, так що я не довго розповідатиму про них, і перейду прямо до справи.
Відносне позиціонування
Використання position: relative у своїй роботі, можливо, найпростіший спосіб внести плутанину до IE6. Сучасні браузери, без проблем відображають вкладені елементи, позиціоновані відносно, але в IE6, часто з'являються проблеми з більш складною розкладкою. На щастя, є досить просте рішення - установка hasLayout шляхом додавання zoom:1; кожному, щодо позиціонованого, елементу.
Пам'ятайте, що ви не повинні застосовувати zoom:1; до будь-яких рядкових (inline) елементів, тому що, в цьому випадку IE6, трактуватиме їх, як блокові елементи. Не забувайте про це і в наступних рішеннях.
Негативні поля
Негативні поля дуже корисний прийом у багатьох різних розкладок, і більшість браузерів справляються з ними без проблем. Дона жаль IE6 не любить негативних полів, поки ви не застосуєте відносного позиціонування до цільового елементу:
Пам'ятайте, призначення блоку zoom:1 , яке необхідно, тому що це відносне позиціонування.
Усунення проблем із overflow
Використання overflow у IE6 іноді може призвести до несподіваних, незрозумілих проблем з відображенням. На щастя, ми можемо вирішити безліч overflow -залежних проблем, шляхом встановлення hasLayout за допомогою - як ви вже, напевно, здогадалися - zoom:1. Далі приклад:
Інша, дивна проблема з overflow, пов'язана з встановленням властивості f ont-style: italic, яке розтягує ширину батьківського елемента. Ця проблема вирішується шляхом застосування наступного CSS до батьківського елементу:
Вибудовування плаваючих елементів
Коли ви застосовуєте float до елементів із фіксованою шириною, вони розташовуються горизонтально, заповнюючи всю ширину батьківського елемента. Принаймні так поводяться блоки у більшості браузерів. У IE6, плаваючі блоки не будуть вишиковуватися в одну лінію, натомість, вони швидше вишикуються драбинкою. Хороша новина в тому, що є два рішення цієї проблеми. Перше – це застосувати властивість line-height: 0 до батьківського елементу:
Інший спосіб - по черзі вказати кожному плаваючому елементу, властивість d isplay: inline.
Усунення проблем зі списками
До:
Після:
Насамкінець
Звичайно, всі без винятку верстальники, і багато звичайних користувачів не люблять Internet Explorer версії 6, але погляньте на результати голосування за два тижні:
На жаль проголосувала невелика кількість людей, але все ж таки варто замислитися, чи так вже сильно, ми хочемо позбутися цьогобраузера?