10 полезных CSS-хаков и трюков

2008-02-29 / Рубрика: CSS

Если вы верстальщик, вы должны знать, насколько важно делать кроссбраузерный, валидный CSS- и XHTML-код. Также вы должны знать как много времени мы тратим на все эти хаки для различных браузеров. Команда проекта StylizedWeb.com составила список из 10 хаков и трюков, которые могут помощь вам в CSS-кодировании и сэкономить время.

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

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

2. Min-Height

selector {
 min-height:500px;
 height:auto; !important
 height:500px;
}

3. PNG-прозрачность

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Запрет обтекания

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

5. Сброс CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
 margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
 font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}

6. Проблема при прокрутке в Internet Explorer

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

7. Прозрачность

#transdiv {
 filter:alpha(opacity=75);
 -moz-opacity:.75;
 opacity:.75;
}

8. Тег PRE

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+ */
}

9. Повторение фона LI (Internet Explorer)

<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>

10. Полезно знать

@charset “UTF-8″;
 
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
 
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
 
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
 
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/

Автор — Dejan Cancarevic

Дата написания — 2008-02-29

Перевод — Владимир Полухин