This page has been robot translated, sorry for typos if any. Original content here.

CSS хакі

Браузери і стандарти. Вічна гонитва. Через невідповідностей стандартам, через різних способів рендеринга сторінок більша частина часу веб-дизайнера йде на те, щоб загладити ці невідповідності (використовувати хакі). У підсумку, замість ефективної роботи, дизайнер вступає в протиприродні стосунки з браузерами, втрачаючи дорогоцінний час.

Css Хак - спеціальна CSS конструкція, яку розуміють одні браузери і ігнорують інші. Використання хаков часто говорить про непрофесійність верстальника. Але трапляються випадки, коли хак - єдиний спосіб вирішення проблеми (наприклад загальновідомі баги браузерів (див «Глюки браузерів»)). Не варто також забувати, що в наш час поспіх - звичайне явище. Тому термінами «на вчора» - нікого не здивуєш. Ось і немає часу розбиратися чому не виходить так як хочеться.

Плюс css хаков

Це швидке вирішення проблеми. Прописали додаткових рядків і все відмінно, верстаємо далі.

Недоліки css хаков

  1. Немає впевненості як поведе себе сайт з виходом нових версій браузерів. Наприклад, написали код з хаком для Firefox, через місяць виходить нова версія Safari і виявляється вона теж сприймає цей хак! Доводиться переробляти.
  2. Багато хакі не проходять валідацію - небезпека цього описана в попередньому пункті.

По можливості намагайтеся уникати використання хаков. Для виправлення помилок 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

синтаксис хто розуміє приклад
Чи не проходять валідацію (що не рекомендуються)
html: root 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;
		 }
		
Чи не проходять валідацію (що не рекомендуються)
@media all and (min-width: 0)
проходить валідацію 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

синтаксис хто розуміє приклад
Чи не проходять валідацію (що не рекомендуються)
body: nth-of-type (1)
update 14.01.10 - не актуальне (розуміється новими версіями opera, ff, safari, chrome)
  div {
		 background: # ff0000;
		 }
		 body: nth-of-type (1) div {
		 background: # 000;
		 }
		
html: root *
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;
		 }