CSS хакі
Браузери і стандарти. Вічна гонитва. Через невідповідностей стандартам, через різні способів рендеринга сторінок більша частина часу веб-дизайнера йде на те, щоб загладити ці невідповідності (використовувати хакі). У підсумку, замість ефективної роботи, дизайнер вступає в протиприродні стосунки з браузерами, втрачаючи дорогоцінний час.
Css Хак - спеціальна CSS конструкція, яку розуміють одні браузери і ігнорують інші. Використання хаков часто говорить про непрофесійність верстальника. Але трапляються випадки, коли хак - єдиний спосіб вирішення проблеми (наприклад загальновідомі баги браузерів (див «Глюки браузерів»)). Не варто також забувати, що в наш час поспіх - звичайне явище. Тому термінами «на вчора» - нікого не здивуєш. Ось і немає часу розбиратися чому не виходить так як хочеться.
Плюс css хаков
Це швидке вирішення проблеми. Прописали додаткових рядків і все відмінно, верстаємо далі.
Недоліки css хаков
- Немає впевненості як поведе себе сайт з виходом нових версій браузерів. Наприклад, написали код з хаком для Firefox, через місяць виходить нова версія Safari і виявляється вона теж сприймає цей хак! Доводиться переробляти.
- Багато хакі не проходять валідацію - небезпека цього описана в попередньому пункті.
По можливості намагайтеся уникати використання хаков. Для виправлення помилок IE використовуйте окремий CSS-файл, котjрий підключається за допомогою умовних коментарів.
глосарій
Кросбраузерну - властивість сайту відображатися і працювати у всіх популярних браузерах ідентично.
Хак - виправлення помилки або додавання нової функції за допомогою використання іншої недокументованою або некоректно реалізованої особливості.
Брудний хак - це швидке рішення будь-якої проблеми, в основному в короткостроковій перспективі, яка позбавляє сутність код внутрішньої краси і дисгармоніюють з її внутрішньою будовою.
CSS-хакі для браузера Internet Explorer
ZOOM: 1:Хак, призначений для визначення hasLayout
* {Zoom: 1; }
PNG в IE6:
Для IE6 підключається htc-файл iepngfix.htc, для правильної роботи фонових зображень формату PNG для всіх елeментов, в файлі cssf-ie6.css. Використовується IE PNG Fix v1.0 RC4 останньої версії.
* {Behavior: url ( "css / iepngfix.htc"); }
Якщо важливі байти є приклад використання фільтра для IE:
.class { background: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader ( src = '/images/png-image.png', sizingMethod = 'scale' ); }
Відділення стилів від IE6:
html> body. class {} head + body. class {} html: first-child. class {}
Відділення стилів від IE6 та IE7:
html> / ** / body {}
Відділення стилів від IE6 - IE8:
* | Html. class {} html: not ([lang * = ""]). class {}
Conditional comments в IE:
Умовні коментарі працюють тільки в IE під Windows, для інших браузерів вони є звичайними коментарями, тому їх можна безболісно використовувати. Синтаксис такий:
<! - [If умова]> <link href = "styles.css" rel = "stylesheet" media = "all" /> <! [Endif] -> <! - [If! Умова]> <link href = "styles.css" rel = "stylesheet" media = "all" /> <! [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. * /
Conditional comments в IE6, IE7, IE8:
<! - [if IE 6]> <link href = "ie6.css" rel = "stylesheet" media = "all" /> <! [endif] -> / * Таблиця стилів для IE6 * / <! - [if IE 7]> <link href = "ie7.css" rel = "stylesheet" media = "all" /> <! [endif] -> / * Таблиця стилів для IE7 * / <! - [if IE 8]> <link href = "ie8.css" rel = "stylesheet" media = "all" /> <! [endif] -> / * Таблиця стилів для IE8 * /
Box Model хак:
В IE існують глюки, коли border і padding включаються в ширину елемента. Box Model хак фікс їх.
. class { padding: 4 em; border: 1 em solid red; width: 30 em; width / ** /: / ** / 25 em; } / * Для IE ширина блоку менше на величину padding + border * /
Min-width і max-width в IE:
IE не розуміє ці властивості css. Хак для блоку виглядає так:
.class { min-width: 500 px; width: expression ( document.body.clientWidth <500? "500px": "auto" ); } / * Для IE ширина блоку менше на величину padding + border * /
.class { min-width: 500 px; max-width: 750 px; width: expression ( document.body.clientWidth <500? "500px": document.body.clientWidth> 750? "750px": "auto" ); } / * Для IE ширина блоку менше на величину padding + border * /
Min-height хак від Дастіна Діаза
.class { min-height: 100%; height: auto! important; height: 100%; }
Прості селектори:
Не обов'язково створювати окремий файл для різних браузерів. Можна використовувати індивідуальні css-селектори в основному css-файл:
* Html. class {} / * У разі, якщо у html-сторінки є доктайпів, цей хак працює в IE6 * / / * У разі quirks-mode, хак працює в IE6 та IE7. * / *: First-child + html. class {} / * Для IE 7 і нижче (first-child) * / * + html. class {} / * Для IE 7 * / *: first-child + html. class {} / * Для IE 7 * / html> body. class {} / * Для IE 7 і нормальних браузерів * / html> / ** / body .class {} / * Для нормальних браузерів (крім IE 7) * / / * Приклад: .class {background: red} * html .class {background: green} У всіх браузерах окрім IE6 і нижче бекграунд буде червоний, а в IE6 і нижче браузерах - зелений * /
Брудні хакі для IE6:
. class {_background: # F00; }. class {- background: # F00; }. class {c \ olor: # F00; } / * Не працює перед буквами a, b, c, d, e, f * /
Брудні хакі для IE7:
> Body {background: # F00; } / * Вибирає елемент body тільки в IE7 * / html * {background: # F00; } / * Виділяє всі елементи всередині елемента html. Тільки для IE7 і нижче * / -, .class {background: # F00; } .class {Background: # F00! Important! ; } / * Хак працює за аналогією з властивістю! Important. Працює для IE7 і нижче * /
Брудні хакі для IE8:
.class {background: # F00 \ 0 /; } / * Вибирає елемент body тільки в IE7 * /
Брудні хакі, що працюють в IE6 та IE7:
.class {* background: # F00; } .class {// Background: # F00; } .class {Background: # F00! Ie; } / * Хак працює за аналогією з властивістю! Important * /
CSS-хакі для браузера Mozila FireFox
Хакі для всіх версій MFF:#class [id = class] {color: # F00; } @ -moz-Document url-prefix () {.class {color: # F00; }} *> .class {Color: # F00; }
Для MFF 1.5 і вище:
.class, x: -moz-any-link, x: only-child {color: # F00; }
Для MFF 2.0 і вище:
body: empty .class {color: # F00; } #class [Id = CLASS] {color: # F00; } Html> / ** / body .class, x: -moz-any-link {color: # F00; }
Для MFF 3.0 і можливо вище:
html> / ** / body .class, x: -moz-any-link, x: default {color: # F00; }
CSS-хакі для браузера Google Chrome
body: nth- of - type (1) .class { background: # 000; }
CSS-хакі для браузера Opera
Хакі для всіх версій Opera:@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { .style {background: # F00; } }
@ Media all and (min-width: 0 px) { .class { color: # F00; } }
Для Opera 6:
@ Media all and (min-width: 1 px) {{} .class { color: # F00; } }
Для Opera 7, 8:
@ Media all and (min-width: 1 px) { .class { color: # F00; } }
Для Opera 9:
@ Media all and (width) { .class { color: # F00; } }
@ Media all and (min-width: 0 px) { head ~ body .class { color: # F00; } }
CSS-хакі для браузера Safari
body: first-of-type .class {color: # F00; } Html: root * .class {color: # F00; } Body: first-of-type .class {color: # F00; } Body: first-of-type .class {color: # F00; }
@ Media screen and (-webkit-min-device-pixel-ratio: 0) { .class { color: # F00; } } / * Хак для Opera і Safari * /
Selector Hacks
/ ***** Selector Hacks ****** / / * IE6 and below * / * Html #uno {color: red} / * IE7 * / *: First-child + html #dos {color: red} / * IE7, FF, Saf, Opera * / html> body #tres {color: red} / * IE8, FF, Saf, Opera (Everything but IE 6,7) * / html> / ** / body #cuatro {color: red} / * Opera 9.27 and below, safari 2 * / html: first-child #cinco {color: red} / * Safari 2-3 * / html [xmlns * = ""] body: last-child #seis {color: red} / * Safari 3+, chrome 1+, opera9 +, ff 3.5+ * / body: nth-of-type (1) #siete {color: red} / * Safari 3+, chrome 1+, opera9 +, ff 3.5+ * / body: first-of-type #ocho {color: red} / * Saf3 +, chrome1 + * / @media screen and (-webkit-min-device-pixel-ratio: 0) { #diez {color: red} } / * IPhone / mobile webkit * / @media screen and (max-device-width: 480px) { #veintiseis {color: red} } / * Safari 2 - 3.1 * / html [xmlns * = ""]: root #trece {color: red} / * Safari 2 - 3.1, Opera 9.25 * / * | Html [xmlns * = ""] #catorce {color: red} / * Everything but IE6-8 * / : Root *> #quince {color: red} / * IE7 * / * + Html #dieciocho {color: red} / * IE 10+ * / @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #veintiun {color: red; } } / * Firefox only. 1+ * / #veinticuatro, x: -moz-any-link {color: red} / * Firefox 3.0 + * / #veinticinco, x: -moz-any-link, x: default {color: red} / * FF 3.5+ * / body: not (: - moz-handler-blocked) #cuarenta {color: red; }
Attribute Hacks
/ ***** Attribute Hacks ****** / / * IE6 * / #once {_color: blue} / * IE6, IE7 * / #doce {* color: blue; / * Or #color: blue * /} / * Everything but IE6 * / #diecisiete {color / ** /: blue} / * IE6, IE7, IE8, but also IE9 in some cases * / #diecinueve {Color: blue \ 9; } / * IE7, IE8 * / #veinte {color / * \ ** /: blue \ 9; } / * IE6, IE7 - acts as an! Important * / #veintesiete {color: blue! Ie; } / * String after! can be anything * / / * IE8, IE9 * / #anotherone {color: blue \ 0 /;} / * must go at the END of all rules * / / * IE9, IE10 * / @media screen and (min-width : 0 \ 0) {#veintidos {color: red}}
Property prefix hacks
/ * Property prefix hacks * / / * IE6 only - any combination of these characters * / _ -? ¬ | / * IE6 / 7 only - any combination of these characters * /! $ & * () =% + @,. / `[] # ~? : <> |
@media hacks
/ * @media Hacks * / / * IE6 / 7 only (via Keith Clarke) * / @media screen \ 9 {} / * IE6 / 7/8 (via Keith Clarke) * / @media \ 0screen \, screen \ 9 {} / * IE8 (via Keith Clarke) * / @media \ 0screen {} / * IE8 / 9 * / @media screen \ 0 {}
Список CSS хаков для різних браузерів, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome
/ * Хак тільки для IE8 Only * / .myClass { color: red \ 0 /; /* червоний */ padding: 70px \ 0 /; / * Відступ 70px тільки для Internet Explorer 8 * / } / * IE 6 Only * / * html .myClass { ... } / * All except IE6 standards * / .myClass { property / ** /: value; } / * Firefox & IE 7, і вище * / html> body .myClass { ... } / * Modern browsers only (not IE 7) * / html> / ** / body .myClass { ... } / * IE 7 Only * / *: first-child + html .myClass { ... } / * Firefox Only * / @ -moz-document url-prefix () { .myClass { ... } } / * Opera Only * / noindex: -o-prefocus, .MyClass { color: red; } / * IE7 Only * / div [class ^ = "myClass"] .myClass2 { ... } / * IE7 only * / * + html .myClass { ... } / * Hack for Opera <= 9 * / html: first-child .myClass { ... } / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { ... } / * IE8 beta 2 only (?) * / Html: first-child .myClass [attr | = ab] { ... } / * IE5 / Mac only * / / * \ * // * / .myClass {property: value; } / ** / / * Gecko only * / .myClass: not ([attr * = ""]) { ... } / * Opera * / @media all and (min-width: 0px) { html: first-child .myClass { ... } } / * Safari only * / .myClass: not (: root: root) { ... } / * Safari 3.0 and Chrome only * / @media screen and (-webkit-min-device-pixel-ratio: 0) { .myClass { .... } } / * Chrome browser * / body: nth-of-type (1) .myClass { ... } / * Safari browser css hack * / body: first-of-type .myClass {property: value;}
CSS для Explorer
<! - [If IE]> ... Якщо Internet Explorer .. <Link href = "ie-fix.css" type = "text / css" rel = "stylesheet"> <! [Endif] -> <! - [If IE 6.0]> ... Якщо IE6 <! [Endif] -> <! - [If IE 7]> ... Якщо IE7 <! [Endif] -> <! - [If gte IE 5]> ... Якщо IE5 + <! [Endif] -> <! - [If lt IE 6]> .. Якщо нижче IE 6 <! [Endif] -> <! - [If lte IE 5.5]> ... Якщо нижче або дорівнює IE 5.5 <! [Endif] -> <! - [If gt IE 6]> ... Якщо вище IE 6 <! [Endif] ->
Напівпрозорість фону в IE, Firefox, Opera
.myClass { background-color: # 000; -moz-opacity: .82; / * Firefox * / opacity: .82; / * Opera * / filter: alpha (opacity = 82); / * IE * / }
Прибрати зайвий padding в button в Firefox
button :: - moz-focus-inner { border: 0; padding: 0; }
Chrome / Firefox ...?
button { -webkit-border-fit: lines; }
Firefox 2
html> / ** / body .selector, x: -moz-any-link {color: lime; }
Firefox 3
html> / ** / body .selector, x: -moz-any-link, x: default {color: lime; }
Any Firefox
@ -moz-document url-prefix () { .selector {color: lime; }}
додатково
Хакі для IE
синтаксис | хто розуміє | приклад |
проходять валідацію | ||
---|---|---|
* html | IE6 | div { background: # ff0000; } * Html div { background: # 000; } |
! important | IE6 | div { background: # ff0000! important; / * Для всіх браузерів * / background: # 000; / * Для IE6 * / } |
*: First-child + html | IE7 | div { background: # ff0000; } *: First-child + html div { background: # 000; } |
* + Html | IE7 + може зрозуміти Opera 9 і нижче |
div { background: # ff0000; } * + Html div { background: # 000; } |
html> body | зрозуміють все крім IE6 |
div { background: # ff0000; } html> body div { background: # 000; } |
# Ie # fix | зрозуміють все крім IE8 | div { background: # ff0000; / * Для ie8 * / } div, # ie # fix { background: # 000; / * Для інших браузерів * / } |
Чи не проходять валідацію (що не рекомендуються) | ||
_свойство: значення і -властивість: значення |
IE6 | div { background: # ff0000; / * Для всіх браузерів * / _background: # 000; / * Для IE6 * / } |
* Властивість: значення і // Властивість: значення |
IE6 IE7 |
div { background: # ff0000; / * Для всіх браузерів * / * Background: # 000; / * Для IE6 та IE7 * / } |
html * | IE6 IE7 Chrome Safari |
div { background: # ff0000; } html * div { background: # 000; } |
! ie | IE6 IE7 |
div { background: # ff0000; / * Для всіх браузерів * / background: # 000! ie; / * Для IE6 та IE7 * / } |
Хакі для Firefox
синтаксис | хто розуміє | приклад |
Чи не проходять валідацію (що не рекомендуються) | ||
---|---|---|
|
FF 1.5 + Opera 9.6 update: 14.01.10
не актуально (Розуміють нові версії opera, chrome, safari) |
div { background: # ff0000; } html: root div { background: # 000; } |
x: -moz-any-link | FF 1.5 + IE7 |
div { background: # ff0000; } div, x: -moz-any-link { background: # 000; } |
@ -moz-Document url-prefix () | FF 1.5 + | div { background: # ff0000; } @ -moz-Document url-prefix () { div { background: # 000; }} |
Хакі для Opera
синтаксис | хто розуміє | приклад |
проходить валідацію | ||
---|---|---|
html: first-child | Opera 7-9.01 | div { background: # ff0000; } html: first-child div { background: # 000; } |
Чи не проходять валідацію (що не рекомендуються) | ||
проходить валідацію CSS3 |
Opera 9-9.6 update 14.01.10
не актуально (Розуміється новими версіями ff, chrome, safari) |
div { background: # ff0000; } @media all and (min-width: 0) { div { background: # 000; }} |
html> / ** / body noindex: -o-prefocus, html> / ** / body | Opera 9.5-10 | html> / ** / body noindex: -o-prefocus, html> / ** / body p { color: # 0f0 } |
Хакі для Chrome і Safari
синтаксис | хто розуміє | приклад |
Чи не проходять валідацію (що не рекомендуються) | ||
---|---|---|
|
update 14.01.10 - не актуальне (розуміється новими версіями opera, ff, safari, chrome) |
div { background: # ff0000; } body: nth-of-type (1) div { background: # 000; } |
|
update 14.01.10 - не актуальне (розуміється новими версіями opera, ff, safari, chrome) |
div { background: # ff0000; } html: root * div { background: # 000; } |
html * |
Safari Chrome IE6 IE7 |
div { background: # ff0000; } html * div { background: # 000; } |
хакі Konqueror
синтаксис | хто розуміє | приклад |
Чи не проходять валідацію (що не рекомендуються) | ||
---|---|---|
html: not (: nth-child (1)) #element |
Konqueror FF 3.5 |
#div { background: # ff0000; } html: not (: nth-child (1)) #div { background: # 000; } |
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.