If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers.
Here is the list picked CSS hacks and tricks which can help you in your CSS code and also save some time.
Min-Height
selector {
min-height:500px;
height:auto; !important
height:500px;
}
min-height:500px;
height:auto; !important
height:500px;
}
autoclear
.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 */
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 */
Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
Scrolling Render IE
html {
background : url(null) fixed no-repeat;
}
background : url(null) fixed no-repeat;
}
Opacity
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;}
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;}
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+ */
}
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+ */
}
Li Background Repeat IE
<!--[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]-->
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]-->
Good to know
@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;}
/**/
/* ---------------------------
WinIE7
------------------------------ */
*:first-child+html selector{property:value;}
/* ---------------------------
WinIE6 & Mac IE
------------------------------ */
* html selector{property:value;}
/* ---------------------------
WinIE6
------------------------------ */
/*\*/
* html selector{property:value;}
/**/
/* ---------------------------
MacIE
------------------------------ */
/*\*//*/
selector{property:value;}
/**/
No comments:
Post a Comment