На сьогоднішній день існує декілька найпопулярніших браузерів, які люди використовують для своєї роботи в Інтернет. І постійний головний біль будь-якого веб дизайнера - це те, що один і той же HTML код виглядає по різному в різних браузерах. Більш того, один і той же код виглядає по різному в різних версіях одного і того ж браузера.
Природно, будь-який веб майстер повинен піклується про те, щоб сайт виглядав однаково в найбільшій кількості браузерів. Саме це вміння (коли код виглядає однаково в різних браузерах) і називають "кросбраузерності версткою HTML". Уміння верстати такий код - вельми корисно і цінується потенційними роботодавцями. Дуже часто така вимога стоїть одним з перших в умовах, яким повинен задовольняти потенційний кандидат на вакансію веб програміста в серйозну компанію.
Чому сайт виглядає по різному в різних браузерах?
Існує кілька причин виникнення різного виду сайту на різних браузерах.
1. Використання нестандартних можливостей HTML.
Дизайнер може скористатися наявними можливостями, які не входять в стандарт HTML. Дійсно, браузери можуть підтримувати безліч різних атрибутів тегів, які не описані в стандарті. Використовувати ці можливості не рекомендується. З однієї простої причини - якщо що-небудь не описано в стандарті, будь-якої з браузерів може це не підтримувати. І творці такого браузера будуть абсолютно праві. Не потрібно використовувати нестандартні особливості.
Завжди перевіряйте написаний вами код на відповідності стандарту.
Наведу класичний приклад. Розглянемо наступний HTML код найпростішої таблиці.
Hello world |
Даний код виводить таблицю, що складається з одного осередку. Веб дизайнер хоче, щоб висота першого рядка даної таблиці дорівнювала 100 пікселям. Однак, в стандарті HTML у тега
В даному випадку, помилка не велика, так як атрибут height у тега
Правильне рішення для прикладу з табличній - це використання стилів. Ось як може виглядати "правильний" код:
Hello world |
Даний варіант буде (або, принаймні, повинен) відображатися однаково в усіх типах браузерів.
2. Значення атрибутів за замовчуванням.
У кожного HTML елемента існує безліч атрибутів. Це і колір, і відстань до сусідніх елементів, і вирівнювання, і багато іншого. Коли верстається HTML код, дизайнер зазвичай задає значення тільки тих атрибутів, які для важливі для представлення елементів на сторінці. Що ж робити браузеру зі значеннями невказаних атрибутів? В цьому випадку браузери використовують значення за замовчуванням. І ось тут-то і криється небезпека. Значення за замовчуванням у різних браузерів можуть відрізнятися. Наприклад, розмір шрифта може бути різним. Через це в одних браузерах текст займе більше місця, ніж в інших. Що, в свою чергу, може привести до відмінностей у відображенні сторінки.
Як можна вирішити цю проблему? По-перше, універсальна порада: перевіряти відображення сайту в якомога більшій кількості браузерів. По-друге, можна в css файлі задати свої значення за замовчуванням для всіх елементів, які використовуються на сторінці. Це позбавить браузер від необхідності "додумувати" значення властивостей HTML елементів. Зробити це можна, наприклад, так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: top;
background: transparent;
font: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
background-color. white;
>
Таким чином, всі елементи на сторінці матимуть властивості задані в цьому файлі. Якщо необхідно, щоб у будь-якого елементу властивості відрізнялися від властивостей за замовчуванням, то їх треба перевизначити явно.
3. "Особливості" деяких браузерів.
Однак, навіть якщо веб майстер використовує тільки стандартні можливості HTML, встановив свої атрибути за замовчуванням для всіх елементів, сайт все одно може виглядати по різному в різних браузерах. Це відбувається від того, що браузери самі можуть не відповідати стандарту HTML. Браузери, як і будь-яке програмне забезпечення, можуть містити помилки. Ці помилки, як правило, швидко виправляються, проте завжди існує ймовірність, що у користувача встановлена не найсвіжіша версія браузера.
Так само можливо, що виробники браузерів (особливо цим грішить MicroSoft) вважають, що вони краще знають, як треба відображати той чи інший елемент.
Оскільки основний винуватець проблем несумісності зі стандартом - це Internet Explorer, то було придумано безліч можливих обхідних шляхів, як змусити сайт в IE виглядати так само, як і в інших браузерах.