Кожному браузеру свій стиль

Незважаючи на те, що сучасні браузери поступово наближаються один до одного за своїми можливостями і підтримки специфікації CSS (ЦСС), між ними все ще є відмінності в підходах. Кожен браузер інтерпретує на власний розсуд код ШТМЛ і стилів особливо. При цьому можна довго сперечатися, який з браузерів «правильніший», суть залишається одна - поки існують кілька браузерів і люди їх застосовують, сайт треба робити так, щоб він коректно і без Errors в них відображався. Більшість користувачів просто байдуже ставляться до різного роду стандартам і специфікаціям, хоча б тому, що і не підозрюють про їх існування. Багато хто навіть не знають, що таке ШТМЛ і користуються браузером, який встановлений в системі за замовчуванням. Люди приходять на сайти за інформацією і зацікавлені в тому, щоб отримати її швидко і без проблем. Якщо улюблений браузер «криво» відображає сайт, то простіше не розбиратися в чому справа, а закрити сайт і перейти на інший, благо їх тепер багато по будь-якій темі.

Таким чином, ми приходимо до висновку, що код треба робити універсальним, «заточеним» під різні браузери, а це значить, що потрібно вивчати їх особливості і багато тестувати файли. І тут ми стикаємося часом з протиріччями в роботі браузерів, обійти які можна тільки написанням тегів CSS (ЦСС) під кожен браузер. Нижче розглядаються способи, які враховують специфіку браузерів і дозволяють скоротити витрати часу і сил при створенні сайтів.

document.write ( "")

де style.CSS (ЦСС) являє собою файл для конкретного браузера.


DOM = document.getElementById;
Нетscape4 = document.layer;
Нетscape6 = Mozilla = (navigator.appName == "Нетscape") DOM;
Нетscape7 = navigator.userAgent.indexOf ( "Нетscape / 7")> = 0;
Опера5 = window.Опера DOM;
Опера6 = Опера5 window.print;
Опера7 = Опера5 navigator.userAgent.indexOf ( "Опера 7")> = 0;
Опера8 = navigator.userAgent.indexOf ( "Опера / 8")> = 0;
Опера9 = navigator.userAgent.indexOf ( "Опера / 9")> = 0;
IE = document.all ! Опера5;
Фаєр Фох = navigator.userAgent.indexOf ( "фаєр Фох")> = 0;
if (IE) document.write ( "");
else document.write ( "");



.



Не варто вважати, що доведеться писати окремі стилі для всіх браузерів. Наприклад, Нетscape (версії 6 і старше), Mozilla і Фаєр Фох засновані на одному ядрі під назвою Gecko, тому працюють c з нашого сайтами приблизно однаково. В якійсь мірі за своїм підходом близькі браузери Internet Експлорер 6 і Опера 7, і в більшості випадків вони відображають результат в рівній мірі правильно. Виходить, що зазвичай потрібно створити всього два різні стилі, призначених для браузерів, що належали до різних «таборів».

дочірні селектори

Специфікація CSS (ЦСС) говорить, що для управління стилем дочірніх елементів використовується символ> (знак «більше»). Запис H1> I повідомляє браузеру встановити зелений колір для вмісту тега тільки в тому випадку, якщо заголовок

є для нього прямим батьком.

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

DIV> I / * Дочірній селектор * /
DIV I / * Конконтентний селектор * /

Різниця між цими видами селекторів наступна. Стиль до дочірнього селектору застосовується тільки в тому випадку, коли він є прямим нащадком, іншими словами, безпосередньо розташовується всередині батьківського елементу. Для конконтентного селектора допустимо будь-який рівень вкладеності. Щоб стало зрозуміло, про що йде мова, розберемо наступний код (приклад 2).

Приклад 2. Неправильне використання дочірнього селектора


Lorem ipsum dolor sit amet.


У прикладі показано додавання тега

. всередині якого розміщується параграф

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

. А в нашому випадку тег розташовується всередині

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

P> I
DIV> P
DIV> P> I

Конконтентние селектори не враховують порядок вкладеності елементів, тому запис DIV I в прикладі 2 діятиме правильно, тобто колір контенту стане червоним.

Повернемося тепер до браузерів. Internet Експлорер (IE) не розуміє дочірні селектори, але зате коректно працює з конконтентнимі. Створюючи код CSS (ЦСС), який одночасно містить і ті і інші селектори, тим самим робимо розмежування стилю для браузера IE і всіх інших. Хоча конконтентние селектори розуміються всіма браузерами, наступний рядок перепризначає поточні установки стилю (приклад 3).

Приклад 3. Селектори для різних браузерів


Lorem ipsum dolor sit amet.


В даному прикладі показано створення контенту зеленого кольору для браузера IE і червоного - для всіх інших.

У браузері Internet Експлорер 5 помічена цікава особливість - він розуміє конструкцію ШТМЛ> селектор. яку інші браузери, в тому числі його ж старші версії, ігнорують. Додавши в код стилю контент ШТМЛ> DIV отримаємо контент, який знаходиться всередині тега

. червоного кольору. Але тільки в IE 5.

універсальний селектор

Для позначення будь-якого елементу в CSS (ЦСС) використовується символ зірочки (*), який мається на увазі універсальним селектором. Його розуміють всі браузери, але ось поєднання * ШТМЛ - тільки один Internet Експлорер. Таким чином, зміна стилю для різних браузерів показано в прикладі 4.

Приклад 4. Використання універсального селектора


Lorem ipsum dolor sit amet.


В даному прикладі показано створення стилю для IE і всіх інших браузерів.

Усередині квадратних дужок допустимо використовувати наступні ключові слова:
IE - будь-яка версія браузера Internet Експлорер;
IE 5 - Internet Експлорер 5;
IE 5.5 - Internet Експлорер 5.5;
IE 6 - Internet Експлорер 6;
IE 7 - Internet Експлорер 7;
lt - номер версії браузера менше зазначеної;
gt - номер версії більше зазначеної;
lte - номер версії менше або дорівнює зазначеній;
gte - номер версії браузера більше або дорівнює зазначеній.

Оскільки зазначені елементи можна писати тільки всередині контейнера . то слід додаємо тег


  1. Lorem ipsum dolor sit amet

  2. Consectetuer adipiscing elit

  3. Sed diem nonummy nibh euismod

  4. 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.

Notice. Undefined variable: o in /home/www-html/data/www/www-html.ru/-id=67.htm on line 451

CSS (ЦСС) по темі

background
Параметр дозволяє встановити одночасно до п'яти атрибутів стилю фону. Значення можуть йти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібному атрибуту.

display
Багатоцільовий атрибут, який визначає, як елемент повинен бути показаний в файлі.

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

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

Схожі статті