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, але для цього потрібне знання цих мов.
Тільки авторизовані користувачі можуть додавати коментарі.