Кожному браузеру свій стиль
Незважаючи на те, що сучасні браузери поступово наближаються один до одного за своїми можливостями і підтримки специфікації CSS, між ними все ще є відмінності в підходах. Кожен браузер інтерпретує на власний розсуд код HTML і стилів особливо. При цьому можна довго сперечатися, який з браузерів «правильніший», суть залишається одна - поки існують кілька браузерів і люди їх застосовують, сайт треба робити так, щоб він коректно і без помилок в них відображався. Більшість користувачів просто байдуже ставляться до різного роду стандартам і специфікаціям, хоча б тому, що і не підозрюють про їх існування. Багато хто навіть не знають, що таке HTML і користуються браузером, який встановлений в системі за замовчуванням. Люди приходять на сайти за інформацією і зацікавлені в тому, щоб отримати її швидко і без проблем. Якщо улюблений браузер «криво» відображає сайт, то простіше не розбиратися в чому справа, а закрити сайт і перейти на інший, благо їх тепер багато по будь-якій темі.
Таким чином, ми приходимо до висновку, що код треба робити універсальним, «заточеним» під різні браузери, а це значить, що потрібно вивчати їх особливості і багато тестувати документи. І тут ми стикаємося часом з протиріччями в роботі браузерів, обійти які можна тільки написанням коду CSS під кожен браузер. Нижче розглядаються методи, які враховують специфіку браузерів і дозволяють скоротити витрати часу і сил при створенні сайтів.
document.write ( "")
де style.css є файлом для конкретного браузера.
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") DOM;
Netscape7 = navigator.userAgent.indexOf ( "Netscape / 7")> = 0;
Opera5 = window.opera DOM;
Opera6 = Opera5 window.print;
Opera7 = Opera5 navigator.userAgent.indexOf ( "Opera 7")> = 0;
IE = document.all ! Opera5;
Firefox = navigator.userAgent.indexOf ( "Firefox")> = 0;
if (IE) document.write ( "");
else document.write ( "");
Не варто вважати, що доведеться писати окремі стилі для всіх браузерів. Наприклад, Netscape (версії 6 і старше), Mozilla і Firefox засновані на одному ядрі під назвою Gecko, тому працюють c сайтами приблизно однаково. В якійсь мірі за своїм підходом близькі браузери Internet Explorer 6 і Opera 7, і в більшості випадків вони відображають результат в рівній мірі правильно. Виходить, що зазвичай потрібно створити всього два різні стилі, призначених для браузерів, що належали до різних.
дочірні селектори
Специфікація CSS говорить, що для управління стилем дочірніх елементів використовується символ> (знак «більше»). Запис H1> I
Існують і контекстні селектори, які за своїм призначенням вельми схожі на селектори дочірні. При цьому два селектора пишуться поспіль через пробіл.
DIV> I Дочірній селектор
DIV I Контекстний селектор
Різниця між цими видами селекторів наступна. Стиль до дочірнього селектору застосовується тільки в тому випадку, коли він є прямим нащадком, іншими словами, безпосередньо розташовується всередині батьківського елементу. Для контекстного селектора допустимо будь-який рівень вкладеності. Щоб стало зрозуміло, про що йде мова, розберемо наступний код (приклад 2).
Приклад 2. Неправильне використання дочірнього селектора
Lorem ipsum dolor sit amet.
У прикладі показано додавання тега DIV. всередині якого розміщується параграф P. а у нього в свою чергу, тег I. У стилі прописано змінити колір тексту на червоний у селектора I. але тільки в тому випадку, якщо він безпосередньо знаходиться всередині DIV. А в нашому випадку тег I розташовується всередині P. тому стиль застосовуватися не буде. Щоб він заробив, треба використовувати один з наступних варіантів.
P> I
DIV> P
DIV> P> I
Контекстні селектори не враховують порядок вкладеності елементів, тому запис DIV I в прикладі 2 діятиме правильно, тобто колір тексту стане червоним.
Повернемося тепер до браузерів. Internet Explorer не розуміє дочірні селектори, але зате коректно працює з контекстними. Створюючи код CSS, який одночасно містить і ті і інші селектори, тим самим робимо розмежування стилю для браузера IE і всіх інших. Хоча контекстні селектори розуміються всіма браузерами, наступний рядок перепризначає поточні установки стилю (приклад 3).
Приклад 3. Селектори для різних браузерів
Lorem ipsum dolor sit amet.
У прикладі показано створення тексту зеленого кольору для браузера IE і червоного - для всіх інших.
У браузері Internet Explorer 5 помічена цікава особливість - він розуміє конструкцію HTML> селектор. яку інші браузери, в тому числі його ж старші версії, ігнорують. Додавши в код стилю текст HTML> DIV
універсальний селектор
Для позначення будь-якого елементу в CSS використовується символ зірочки (*), який називається універсальним селектором. Його розуміють всі браузери, але ось поєднання * HTML - тільки один Internet Explorer. Таким чином, зміна стилю для різних браузерів показано в прикладі 4.
Приклад 4. Використання універсального селектора
Lorem ipsum dolor sit amet.
У прикладі показано створення стилю для IE і всіх інших браузерів.
Усередині квадратних дужок допустимо використовувати наступні ключові слова:
- IE - будь-яка версія браузера Internet Explorer;
- IE 5 - Internet Explorer 5;
- IE 5.5 - Internet Explorer 5.5;
- IE 6 - Internet Explorer 6;
- lt - номер версії браузера менше зазначеної;
- gt - номер версії більше зазначеної;
- lte - номер версії менше або дорівнює зазначеній;
- gte - номер версії браузера більше або дорівнює зазначеній.
Оскільки зазначені елементи можна писати тільки всередині контейнера BODY. то слід додати тег STYLE. як показано в прикладі 5.
Lorem ipsum dolor sit amet.
Використання тега COMMENT
Приклад 6. Застосування тега COMMENT
Internet Explorer покаже білі букви на зеленому тлі, а інші браузери - зелені символи на сірому тлі.
Приклади використання стилю для різних браузерів
Розглянемо завдання, в яких потрібно використовувати різний стиль для браузерів, щоб дані правильно відображалися на веб-сторінці.
Браузери IE (Opera) і Netscape (в тому числі Mozilla і Firefox) по-різному підходять до поняття ширини елемента. IE за ширину приймає значення стильового атрибуту width. а Netscape додає до неї значення полів і товщину кордонів. За рахунок цієї особливості вид елементів може дещо відрізнятися в браузерах. У прикладі 7 показано створення меню з фіксованою шириною 200 пікселів. Вид меню за незначними винятками буде відображатися браузерами правильно, але до тих пір, поки для селектора A не додають параметр width: 100%. Справа в тому, що використання властивості display: block у посилань встановлює їх на всю ширину меню (рис. 1), і тепер не обов'язково наводити курсор миші строго на текст. Але тільки не в браузері Internet Explorer, який в цьому випадку вимагає ще додавання ширини через атрибут width. Значення 100% призведе до того, що в Netscape видільна смуга почне виходити за межі кордону, що виглядає досить недбало (рис. 2).
Мал. 1. Необхідне меню
Мал. 2. Меню при width: 100%
Є два способи, щоб домогтися роботи меню в браузерах ідентично і без помилок. Перший - встановити ширину не 100%, а менше, наприклад, 97%. Хоча це не кращий варіант, проблему, проте, він вирішує. І другий метод - додати атрибут width тільки для браузера IE, змусивши інші браузери його проігнорувати, як показано в прикладі 7.
Приклад 7. Створення меню
Щоб вирішити зазначену проблему, недостатньо використовувати відступи і збільшити відстань від чисел до тексту, будь-які відступи в цьому випадку браузером повністю ігноруються. Слід вказати list-style-position: outside і змістити текст вправо. Вид списку в такому випадку буде дещо відрізнятися в різних браузерах, але, тим не менш, відображатися коректно (приклад 8).
Приклад 8. Виправлення помилок браузера Internet Explorer 6
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.