Як подружити IE та інші браузери за допомогою CSS
28.07.2007, 00:28 | Прочитано: 45059 раз | CSS та верстка | Автор: Денис Носов Друк | E-mail
Стандартний css-файл шаблону Joomla! - template_css.css у якому прописані основні
класи.
Для того, щоб не засмічівати код шаблону можна, наприклад, створити додатковий
css-файл, у який прописуємо класи із графікою, всі параметри сторінки, залишаючи у коді шаблону голі
теги та класи.
У 50% відсотках добре зверстаний шаблон буде відображатись у всіх браузерах
майже однаково.
Але є деякі но!
1. У IE кольорова гама відображається інакше, ніж у Firefox та
Opera, а також Internet Explorer не підтримує прозорість файлу .png (IE6);
2. Відступи (margin, padding), висоти та деякі інші параметри у IE відрізняються
в порівнянні із Firefox та Opera.
Який є вихід? Дуже простий!
Шаблони у стандарті W3C:
1. Верстати шаблон потрібно у стандарті W3C;
2. Перед тегом <html> для стандарту xhtml, у якому пишуться шаблони так
html-теги для компонентів (оформлення компонентів), вписуємо наступний код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. Тег <html> оформлюємо відповідно но мови сайту:
<html xmlns="http://www.w3.org/1999/xhtml" lang="ua" xml:lang="ua">
де ua - українська мова;
для російської та англійської вписуємо відповідно ru та en.
Налаштування класів для Internet Explorer'a:
Одже, у нас є наші 2 файли css (див. вище). Якщо альтернативні браузери, які підтримують стандарти W3C відображають коректно наш дизайн та сайт у цілому, Internet Explorer ні, ми можемо маніпулювати нашими css класами з наших файлів спеціально для IE.
Для цього можемо використати наступніі методи подачі підправлених класів для IE:
1. Прописуємо самі класи у шаблоні:
<!--[if lte IE 7]>
<style type="text/css">
body {background-color: #94A2A8;}
table.body {background-color: #D9DEE1;}
li.newsfeed_main a{ float: left!important; }
</style>
<![endif]-->
Як ми бачимо ми коригуємо відповідні класи саме для Internet Explorer. Ці класи
в нас залишаються в основному файлі!!!
2. Прописуємо шлях до css-файлу:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="шлях до файлу/template_css_ie.css" />
<![en<![endif]-->
Примітка!
Зверніть увагу на цей надпис [if lte IE 7]!!!
Для версій нижче IE7 можна використовувати індифікатор останньої версії
браузера.
Якщо потрібно окремо впливати на певну версію Internet Explorer'a, наприклад на
6
прописуемо:
<!--[if lte IE 6]>
..... тут код або шлях до файлу ......
<![<![endif]-->
Тобто, [if lte IE Х],
де Х - версія Internet Explorer'a.