Полезные CSS хаки

13.02.2008 css

Box Model Hack

padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 20em;

Условные комментарии (Conditional Comments)

Думаю всем знакомы, на всякий для заметки.

Для всех версий IE

<!--[if IE]>    Some Css Code<![endif]-->

Для 7-й версии

<!--[if IE 7]>    Some Css Code<![endif]-->

Для 5.01, 5.5 и 6.0

<!--[if lte IE 6]>    Some Css Code<![endif]-->

Условия:

• IE (Все версии IE)
• lt IE version (Ниже указанной версии)
• lte IE version(ниже и равно указанной версии)
• IE version (только для этой версии)
• gte IE version (выше или равной указанной версии)
• gt IE version (выше указанной версии)

Min-width и Max-width

Минимальная ширина

 #wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? "750px": "auto" );} 

Минимальная и максимальная одновременно

#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}

Минимальная высота от Dustin Diaz

#id{ min-height: 100px; height:auto !important; height:100px; } 

Фильтрация CSS по браузеру

• IE 6 и ниже

  * html {}

• IE 7 и ниже

  *:first-child+html {} * html {}

• Только IE 7

  *:first-child+html {}

• Только IE 7 и все современные браузеры

   html>body {}

• Все современные браузеры, кроме IE 7

   html>/**/body {}

• Opera 9 и ниже

  html:first-child {} 

• MacIE

  /*\*//*/selector{property:value;}/**/

• Mozilla FireFox

  .class, noindex:-moz-any-link { }

  
  или
  

  
  @-moz-document url-prefix()
  {
          body {  }
  }
  

• ie6 win only

  
  /*\*/
  * html {}
  /**/

• IE only

  .class, v\:* { color: red }

Для FF и IE only решения найдены у Евгения Степанищева, за что огромное спасибо!

Псевдокласс :hover для любых элементов

Решается добавлением .htc, либо этого либо этого.

Прозрачность PNG

Помогает этот скрипт.

Вертикальное выравнивание в блоке

http://stylizedweb.com/2008/02/01/vertical-align-div/

Autoclear

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Reset CSS

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Scrolling Render IE

html {
background : url(null) fixed no-repeat;
}

PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Элемент abbr

html\:abbr, abbr {
  cursor: help;
  font-style: italic;
}

Удаление отступов в button для IE

button {
  overflow:visible;
}