Межбраузернаясовместимость

Піт Гуллексон, www.thedevweb.com

Ніщо не виглядає так”Аматорськи”, як сайт, зроблений без урахуваннязручності використання. Одна з найбільш частихпомилок – така розробка сайту, що вінзовсім по-різному виглядає в різнихбраузерах. Проблема полягає в структурі HTML ів тому, що різні браузери не відповідаютьнабору суворих рекомендацій.

HTML спочатку не був призначений длявикористання в сайтах з великою кількістю графіки,які ми бачимо сьогодні. Фактично, його першаверсія навіть не включала підтримку графіки аботаблиць! Він був створений для передачіформатованого тексту, а не створення величезнихмультимедійних порталів. Це вело до мокрогомові підвищення, зараженому недоліком будь-якихстрогих вимог синтаксису, запропонованихбраузерами. Якби Netscape, IE, Опера, та іншібраузери задовольняли набору стандартнихрекомендацій, Інтернет був би щасливим місцем.

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

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

Тестування, тестування та ще разтестування

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

Розміри таблиці

Тричі перевірте розміри таблиці, щоб потім неВиник проблем. Якщо Ви визначили таблицюшириною в 100 пікселів, а ширина осередків складає вЗагалом 120 пікселів, результати можуть бутинебажаними. Більш нові версії IE зазвичайобробляють таку ситуацію нормально, але з Netscapeбудуть проблеми.

Вкладені таблиці

В Netscape є проблеми із вкладеними таблицями.Часто колір фону / зображення відрізняється від того,чого можна було очікувати і на що можна булосподіватися. Навіть якщо Ви визначили колір фонувкладеної таблиці, вона успадкує фоновезображення основної таблиці. Netscape дає фоновимзображень більш високий пріотрітет ніжквітам, навіть якщо контекст їх використанняє різним. Щоб обійти цеперешкода, Ви можете встановлюватиbackground = “” і bgcolor = “ваш колір” у комірці.Це повинно перешкодити Netscape закрити ваш bgcolor фоновиммалюнком.

Стильові таблиці

CSS дає дизайнерові набагато більше можливостейуправляти різними властивостями тексту. Дожаль, деякі властивості погано підтримуютьсяпевними браузерами. В цілому, нові версії IEкраще обробляють CSS, ніж Netscape. Однак, самийостанній випуск Netscape (версія 6) підтримуєзначно більше число властивостей. Подивітьсядовідник по CSS, який містить інформацію пропідтримки кожного властивості різнимибраузерами: www.webreview.com/style/css1/charts/mastergrid.phtml

Тег

Завжди використовуйте закриваючий тег .ЗАВЖДИ. Netscape не буде відображати жоден зелементів форми, якщо Ви опустите закриваючийтег. Запишіть це. Вбийте собі в голову. Зробітьвсе, щоб запам’ятати це.

Правильний синтаксис

Як і в будь-якому іншому комп’ютерному мовою, авторповинен витратити час і ефективно писати код,має сенс. За правильний синтаксис Вамвоздасться по заслугах. Це набагато більшпослідовно ніж ‘сирої’ код, але, самеголовне, це запобігає безліч проблем знаданням в різних браузерах. Коли яговорю про правильне синтаксисі, я маю на увазіпараграфи, що закриваються тегом , належнимчином вкладені одна в одну теги( ), укладенняатрибутів в лапки (text = “this”, а не text = this) і всеінше, що спричиняє за собою створення”Правильних” документів. Є такожредактори HTML, які перевірять ваш синтаксис.Macromedia Dreamweaver, наприклад, перевіряє ваш синтаксиспід час написання коду. Знайдені помилки будутьпідсвічені жовтим, так що Ви можете робитиналежні виправлення.

Утиліти, перевіряючі ваші документи HTML:

http://validator.w3.org/
Ресурс для перевірки сторінки в on-line навідповідність стандарту HTML, встановленим W3C.

http://www.w3.org/People/Raggett/tidy/
Програма, яка перевірить файл на відповідністьстандарту, також, як і описаний вище сайт.

http://www.htmlvalidator.com/
Ця програма також перевірить ваш вихідний текст
HTML.

Якби я був повинен підвести підсумок цієї статті водному реченні, це було б щось подібне”Використовуйте строгі правила при написаннівашого коду HTML. “Коли Ви робите ‘сирої’ код,це відбивається на вашій сторінці. Різнібраузери оброблять ваші помилки по-різному, алеваш належним чином письмовий код вони, якправило, обробляють красиво.

Одне заключне слово

Коли Ви створюєте ваш сайт, щоб він бувсумісним, упевніться, що Ви маєтеуявлення про вашу аудиторії. Thedevweb.com,наприклад, має симпатичну розсудливуаудиторію, так що можна безпечно припустити,що майже всі відвідувачі використовують IE4/NS4 +браузери. Безсумнівно, можуть бути випадковікористувачі IE3, але чи варто писатидодатковий код, якщо вони складають 0.02%вашого трафіку? Вам вирішувати.


Pete Gullekson – веб-майстер і редактор сайту
www.thedevweb.com,сайту присвяченого інтернет-програмуванню.Підписатися на безкоштовну англомовну розсилку випускаєтьсяїм можна за адресою: www.thedevweb.com/eZine.asp


Всі права на російський переклад статті належать сайту
http://AKWProject.da.ru


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*