Сегодня существует много браузеров, и их список постоянно пополняется. Буквально недавно появился новый браузер от Google.

Список браузеров, на которые стоит обратить внимание при создании сайтов: Internet Explorer, Google Chrome, Mozilla Firefox, MyIE, Netscape, Opera, Safari.

Из них самые популярные среди пользователей интернета, это Internet Explorer, Firefox и Opera.

В данной статье расскажу о своем опыте работы с браузерами. Для корректного отображение сайтов, во всех трех вышеперечисленных браузерах помимо валидного кода иногда приходится использовать так называемые css-фильтры или css хаки.

Их принцип состоит в том, чтобы посылать  браузеру одни команды CSS, а всем остальным — другие, которые имеют приоритет перед первыми. Т.е. они  используются для включения или скрытия CSS от определенных браузеров. Зачастую трюки применяются для обхождения дефектов Internet Explorer.

1.    Internet Explorer.

— IE плохо относится к пробелу перед закрытием тега </td>, или переносу его на новую строку.

Пример:

<td>
Не правильно!
</td>

<td>Правильно!</td>

При таком оформление вокруг объекта заключенного в этом теге он будет обрамлен в невидимую рамку, толщиной 2px.  Соответственно все окружающие его объекты будут отступать от этого элемента на данное расстояние.

— Условные комментарии работают только в IE, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис  такой:

<!--[if условие]> HTML CODE <![endif]-->

Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте такой комментарий:

<!--[if !condition]> HTML CODE <![endif]-->

Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.

Пример использования:

<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/ie_sucks.css" /> <![endif]-->

— Индивидуальные хаки для определенной версии IE

а)  Internet Explorer 6.0 и ниже

1.    .style {
2.      _background: #03F;
3.    }
4.    /* код валидный */

1.    * html .style {
2.      background: #03F;
3.    }
4.    /* код валидный */

б)  Internet Explorer  7.0

1.    *:first-child+html .style {
2.      background: #F00;
3.    }
4.    /* код валидный */

1.    *+html .style {
2.      background: #F00;
3.    }
4.    /* код валидный */

в)  Internet Explorer 8.0

1.    *+html .style {
2.      background: #F00;
3.    }
4.    /* код валидный */

2.    FireFox

— Условные комментарии работают только в FireFox.

1.    html:root .style {
2.      background: #FA0;
3.    }

1.    .style, x:-moz-any-link {
2.      background: #FA0;
3.    }

1.    html:not([lang*=""]):not(:only-child) .style {
2.      background: #FA0;
3.    }

3.    Opera

— Как правило, если удавалось достигнуть одинаковой картинки в ИЕ и в МФ, то и в Опере после этого всё было нормально. Однако особенностью этого браузера является то что по краям браузера остаются отступы. Что бы их убрать не достаточно указать BODY { margin: 0px; }. Необходимо еще прописать padding: 0px;

— Условные комментарии работают только в Opera.

1.    @media all and (min-width: 0) {
2.      .style { background: #FF0; }
3.    }

1.    html:first-child .style {
2.      background: #FF0;
3.    }
4.    /* код валидный */

4.    Safari

— Условные комментарии работают только в Safari.

1.    html:root .style {
2.      background: #FA0;
3.    }