Blog
10 Best CSS Hacks
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. I’ve written about some of them earlier on that you can find on the blog, like PNG transparency issues.
Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div
https://3.7designs.co/blog/2008/02/01/vertical-align-div/
2. Min-Height
selector { min-height:500px; height:auto; !important height:500px; }
3. PNG transparency
https://3.7designs.co/blog/2007/12/30/png-transparency-issues/
4. 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 */
5. 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; }
6. Scrolling Render IE
html { background : url(null) fixed no-repeat; }
7. Opacity
#transdiv { filter:alpha(opacity=75); -moz-opacity:75; opacity:75; }
8. 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+ */ }
9. Li Background Repeat IE
<!--[if lt IE 7]> <style> #leftnav li { zoom: 1;} /* haslayout=true */ </style> <![endif]-->
10. 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;} /**/
Join thousands of designers, marketers and business leaders who receive notifications when we’ve published new design, inbound, and other digital resources. We publish less than once per week and you can unsubscribe anytime.