Web-Programming.in.ua

CSS хаки для браузерів

Привіт, напевно кожен, хто займався Web-дизайном стикався з проблемою, коли дизайн сайту "ламався" при перегляді сайту на старих браузерах( Наприклад Internet Explorer).

CSS хаки - синтаксис CSS, який розуміє тільки певний браузер.

CSS хаки можуть бути застосовані не тільки для різних браузерів, але й для різних версій одного браузера.

Приклад, в якому підключається стиль тільки для IE:

<!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->

Для IE 6 версії:

<!--[if IE 6.0]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->

Для IE 7 версії:

<!--[if IE 7]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->

Якщо потрібно застосувати стиль для всіх версій нижчих 6 використовують:

<!--[if lt IE 6]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->

Якщо ж замість "lt" написати "lte", то стиль застосується для всіх версій нижче шостої або еквівалентно їй.


Також можна не підключати інші CSS файли, а писати так:

body {
    padding: 5px; # Для всіх
    * padding: 15px; # Для IE7 і нижче.
}

Для IE 6

body {
    padding: 5px; # Для всіх
    _padding: 15px; # Для IE6 і нижче.
}

Для Firefox, Opera, Konqueror, Safari:

*|html .myClass {
    /* властивості */
}

Для Opera:

* |html[xmlns*=""] p {
    margin-top: 30px;
}

Це всі базові CSS хаки. Повний набір можна переглянути тут: http://www.web-utils.net/css-hack/browser-list-ie-firefox-opera-safari

P.S: також CSS хаки можна підключати через PHP або JS, але для цього потрібне знання цих мов.

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору