Joomla! Україна

Блоги — цікаві статті та записи про Joomla, програмування, верстку та інше.
  • Версія Joomla! від 13.08.2019
  • 1229 користувачі
  • 60 записи в блогах
  • 788 новини та статті
     

Як подружити IE та інші браузери за допомогою CSS

28.07.2007, 00:28 |  Прочитано: 43648 раз  |  CSS та верстка  |  Автор: Денис Носов Друк|E-mail

(1 голос)

Стандартний 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.