Найповніша шпаргалка для IE6 або як виправити 25 + помилок Internet Explorer

Переклад: Ultimate IE6 Cheatsheet : How To Fix 25 + Internet Explorer 6 Bugs
Автор: Benjamin

Краща практика по «залагодження справ» з Internet Explorer 6 - відмовитися від його підтримки.

Стоп. Добре, я відчуваю Ваше засмучення. Ви веб розробник і Ви готові рвати на голові волосся, бо змушені підтримувати Internet Explorer 6, або скажімо більш коректно - IE6 не хоче «дружити» з Вами. Ви витрачаєте на це години, але Ви не можете виправити макет своєї верстки. Співчуваю. Я можу Вам допомогти.

Це не те просторікування або компанія з приводу «відстрілу» IE6. Таких речей повно в Інтернеті, але вони Вам не допоможуть якщо Вам необхідна підтримка IE6, цей браузер продовжує займати значне місце на ринку браузерів і Ви не можете просто так ігнорувати його. Ні, цей ресурс Ваша реальна надія.

Я «перевернув» купу ресурсів в Інтернет і включив деякі з моїх власних виправлень для IE6 і тепер я зібрав все це разом в одній шпаргалці/описовому керівництві, як єдине джерело для того, хто хоче «потоваришувати» з Internet Explorer 6. Де було можливо, я поліпшив рішення пропонуючи більш зрозумілий і коректний варіант замість «кривого» хака. Також я постарався коректно посилатися на першоджерела, але іноді рішення були настільки растіражіравани в Інтернет, що знайти їх початкові джерела було дуже важко. Якщо Вам попадеться відсутня посилання на першоджерело або якщо я пропустив якийсь баг або виправлення, будь ласка зв'яжіться зі мною і дайте знати, я буду постійно оновлювати цю сторінку.

Збір матеріалу в цьому масивному керівництві для IE6 зайняв багато часу, посилайтеся на нього у своїх закладках, поширюйте, залишайте твітти і звичайно-ж використовуйте його, зберігаючи свій час і час своїх колег, всместо того, що-б кричати в свій монітор і битися головою об стіл або інші відповідні предмети. Однак, не обманюйте себе, ця шпаргалка важлива для мене, як і для Вас.

Зміст

Розділ Баг/Фікс/Краще рішення
Стратегії
Як відокремити IE6
Зображення
Макет
Списки
Поведінка
JavaScript
Різне
Бонус ресурси

Стратегії

Перш ніж посилатися на специфічні для IE6 баги і фікси важливо подивитися на деякі стратегії, які допоможуть мінімізувати виникаючі проблеми. Невеликі попередні заходи набагато ефективніші за метушня з численними помилками, які могли бути усунуті за допомогою використання загальноприйнятих практик.

Зміст | Вгору

Питома вага IE6

У відповідності з питомою вагою, поточний відсоток (Серпень 2009) користувачів IE6 становить 25.25% (прим . hb: Жовтень 2010 - 15,55%), але за іншими джерелами цей відсоток набагато менше 18.1% . Як говорить статистика, ми спостерігаємо тренд на зниження. Проте, дійсно значущої статистикою буде статистика Вашого власного сайту. Якщо у Вас вже є аналітика по трафіку для Вашого сайту, чи служить вона виправданням того, що варто робити підтримку IE6? Оперуючи термінами бізнесу: яке співвідношення ціна/користь для часу і грошей витрачених на розробку під IE6 проти того, що-б зовсім кинути його підтримку? Чи можете Ви зробити бізнес план з підтримки поступово минає IE6?

Якщо більшість відвідувачів Вашого сайті не використовує IE6 і це не буде приносити Вашому бізнесу ніяких грошей, Ви можете заощадити собі хмару часу, сил і грошей усунувши разом все проблеми з IE6.

Зміст | Вгору

Плануйте свій дизайн і робіть все просто

Якщо ви плануєте свій дизайн наперед, навіть хоч на кілька хвилин припускаючи найбільш вдале рішення для його кодінг, Ви будете на крок попереду потенційних проблем з версткою. Навіть найскладніший візуальний дизайн може і повинен бути створений з використанням простих кодових рішень. Якщо Ви бачите, що використовуєте надмірна кількість розмітки, це може послужити хорошим знаком до того, що Вам слід було-б подивитися на свій дизайн з іншого боку.

Як тільки Ви наберетеся досвіду і підкорите купу різних макетів, відстежуйте Ваші досягнення і проблеми які Ви вирішили. Я можу повністю гарантувати Вам, що Ви будете зустрічатися зі схожими проблемами знову, і звичка мати під рукою шпаргалку збереже Вам купу часу в майбутньому.

Зміст | Вгору

Використовуйте правильний doctype

Відмова від використання правильного (або якого-небудь) doctype викличе включення режиму сумісності і буде впливати на належне відображення вашої сторінки у всіх браузерах. Використовуйте один з наступних doctype: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional або XHTML 1.1

HTML 4.01 Strict

HTML 4.01 Frameset

HTML 4.01 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.0 Transitional

XHTML 1.1

Зміст | Вгору

перевірки ваш код

Я чув твердження від декількох людей, що у перевірки коду на помилки немає ніяких відносин з працюючим продуктом, але я не купую такі продукти. Валідація дійсно не настільки важлива в багатьох випадках і займає всього кілька хвилин на виконання. Кілька витрачених хвилин на валідацію вашого XHTML і CSS може принести користь для всіх браузерів, не тільки для IE6. Валідація дозволяє бути впевненим в усуненні проблем з подальшою сумісністю і знижує ціну на підтримку в майбутньому. Мінімальна і достатня вимога - перевіряйте Ваш XHTML. Єдина причина по якій можна проігнорувати цей пункт - використання переваг деяких властивостей CSS3 в браузерах, які можуть їх підтримувати.

Зміст | Вгору

Спершу розробляйте для браузерів сумісних зі стандартами

Так-же як і з перевіркою вашого коду, ви позбудетеся від головного болю, якщо першим ділом будете робити верстку для браузерів підтримують стандарти, таких як Firefox, Opera, Safari і Chrome і потім підлаштовувати її для несумісних браузерів, таких як IE6 та IE7. У наслідок того, що сумісні браузери відображають інформацію в тій чи іншій мірі однаково, ви зможете зосередитися на «особливості» Internet Explorer'а. Використовуючи такий підхід до процесу верстки, він зможе допомогти в майбутньому покращувати ваш код, так як дає надійну основу і якщо ви відзначаєте ваші поправки, ви зможете безболісно видалити їх, коли підтримка таких браузерів більше не буде потрібно.

Зміст | Вгору

Використання прогресуючих поліпшень

Прогресуючі вдосконалення означають те, що базова функціональність завжди доступна для всіх користувачів до додавання в проект глянцю. Загалом, термін прогресуючі поліпшення вказує на те, що веб додатки повинні працювати без JavaScript і з використанням JavaScript додаватися: анімація, Ajax ефекти тощо, але коли це говориться по відношенню до Internet Explorer 6, принцип прогресуючих поліпшень може так- ж застосовуватися щодо CSS3 (або навіть до багатьох частинах CSS2), HTML5 та іншим веб протоколами, які IE6 не підтримує.

У деяких випадках, це просто може стати неможливим, коли ви робити спроби донести всі свої вміння до всіх користувачів усіх браузерів, особливо тих, хто використовує Internet Explorer 6. Використовуючи стратегію прогресуючих поліпшень будьте впевнені, що такі користувачі отримують хоча-б мінімальні можливості при роботі з вашим сайтом або веб додатком.

Ще про прогресуючих поліпшеннях

Зміст | Вгору

Використовуйте правило обнулення CSS

Кожен браузер містить свою власну таблицю стилів за замовчуванням і ні для кого не буде сюрпризом те, що всі ці стилі різні. Просте правило обнулення на початку кожної таблиці стилів може відігравати велику роль у написанні крос-браузерного коду. В Інтернет існує безліч правил обнулення, від простих до більш детальних.

Просте обнулення 

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, th, td {margin: 0; padding: 0;}

Популярні CSS «обнулятори»

Зміст | Вгору

Використовуйте JavaScript фреймворк

Якщо JavaScript представляє з себе лише тривіальну частина вашого сайті, подумайте над використанням JavaScript фреймворка. Більшість фреймворків протестовані в різних браузерах, включаючи IE6, і зможуть управлятися з безліччю (хоча і не всі) Ваших JavaScript крос-браузерних проблем автоматично. Вибрати є з чого. Загалом, що-небудь, що може бути зроблено в одному, може бути зроблено і в іншому, тому вибір фреймворку заснований на Ваших персональних синтаксичних перевагах.

Список деяких, найбільш популярних фреймворків:

Звичайно існує безліч інших фреймворків і ще більша кількість з'являється, але їх список не для сьогоднішнього дня. З тих, що в списку я люблю, використовую і щиро рекомендую MooTools, якщо ви знайомі з JavaScript. Якщо Ви новачок, моєї рекомендацією став би jQuery.

Зміст | Вгору

Використовуйте JavaScript IE Fix

В Інтернет «миготять» кілька JavaScript рішень, які змушують Internet Explorer працювати як браузер підтримує стандарти. Якщо Ваша цільова аудиторія має досить високий відсоток користувачів IE з включеним JavaScript, Ви можете спробувати використовувати скрипт Dean Edwards 'IE7 або інші аналогічні скрипти.

Зміст | Вгору

Як робити налагодження в IE

Internet Explorer «славиться» своєю нелюбов'ю до налагодження, але існує кілька інструментів дозволяють полегшити життя розробників. Як говорилося раніше, насамперед починайте працювати з браузерами підтримують стандарти. Firebug та Web Developer Toolbar прекрасні доповнення для Firefox, які побічно допоможуть сприяти або передбачити у виправленні багатьох помилок для IE. Якщо Ви хочете отримати всю міць Firebug в інших браузерах, Firebug Lite буде доступний Вам як аплет для браузера.

Для тестування різних версій Internet Explorer, існує пара хороших варіантів якщо ми не розглядаємо варіант з віртуальною машиною, IE Collection та IETester , обидва з яких є безкоштовні (але все ще мають недоробки). Виробники IETester так-же пропонують DebugBar , плагін для IE, який безкоштовний для персонального використання, але вимагає комерційну ліцензію після 60-ти денного використання.

Зміст | Вгору

Як відокремити IE6

Перший крок у справі «гимназій» з Internet Explorer 6 можливість відокремити його так, що-б будь-які зміни в коді відображалися тільки на IE6 і ні на яких інших браузерах. Для цього є кілька шляхів для IE6: умовне коментування, селектори CSS, і JavaScript. Ми розглянемо кожен з цих методів.

Зміст | Вгору

Використання умовного коментування для Internet Explorer

Microsoft підтримує умовне коментування, як шлях включення коду для певної версії Internet Explorer. У блоці умовного коментування може бути розміщення що завгодно, включаючи розмітку, JavaScript, файли JavaScript, CSS і зовнішні таблиці стилів. Умовні коментарі працюють так, що Ви можете поставити умовою спрацьовування для них конкретну версію Internet Explorer або будь-яку версію нижче або вище певної.

Синтаксис такого коментування наступний:

Це повідомлення з'явиться для всіх браузерів.






Це повідомлення з'явиться для всіх браузерів.

Використання умовних таблиць стилів має деякі переваги для інших методів. Стильова таблиця відокремлюється від інших таблиць і абсолютно не заважає працювати іншим браузерам.

} } } } }

Опубліковано: 07/04/11 @ 06:03
Розділ Блоги

Рекомендуємо:

BestMasterіZація
SE-ефект, SM-ефект, Feed-ефект
Плюси движка WordPress
Як утримати відвідувача на сайті
Конференція Optimization.com.ua - Жодне питання не залишиться без відповіді