Пропустить навигацию

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

13.02.2008

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;
}