CSS Tips and Tricks
Cross browser hack for inline-block styling
Inline-block layout solves a lot of problems. It lets you do some cool stuff previously thought impossible with CSS. It makes vertical alignment work properly. And sadly, it’s supported pretty badly.
.some-selector { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; /* for IE browsers*/ }
- //blog.izs.me/post/146672448/cross-browser-support-for-inline-block-styling
Targeting IE6 and IE7 and IE8
.some-selector { border:1px solid green; /* works in all */ border:1px solid pink\9; /* targets IE6, IE7, IE8 *border:1px solid red; /* targets IE6 and IE7 */ _border:1px solid blue; /* targets IE6 */ border/**/: 1px solid yellow /* Everything but IE6 */ border/*\**/: 1px solid maroon\9; } /* IE7, IE8 */ border: 1px solid brown !ie; } /* IE6, IE7: acts as an !important (string after ! can be anything) */ }
- //net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
- //snook.ca/archives/html_and_css/targetting_ie7
- //www.ejeliot.com/blog/63
- //paulirish.com/2009/browser-specific-css-hacks/
Attribute-specific icons
a[href$='.doc'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/doc.gif) no-repeat center right; }
- //www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html
Min-height hack
.selector { min-height: 500px; height: auto!important; height: 500px; }
- //www.dustindiaz.com/min-height-fast-hack/
Overflow attribute + positioning
Positioning elements in an overflow:scroll enabled container causes
layout errors in IE6 and 7.
To solve this, add position:relative
to the container.
.container { overflow: scroll|auto; (*)position: relative; }
- //snook.ca/archives/html_and_css/position_relative_overflow_ie/
Tableless forms using labels
form label{ width: 100px; float: left; margin-right: 10px; text-align: right; }
<form action="/" method="post"> <label for="username">Username</label> <input id="username" name="username" type="text"><label for=“password”>Username</label> <input id=“password” name=“pass” type=“password”>
<input type=“submit” value=“Submit”> </form>
- //www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html
Vertical centering w/ line-height
.selector { line-height: 30px; }
- //www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html
Print page breaks
While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page
.selector { page-break-before: always; }
- //www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html
The New Bulletproof @Font-Face Syntax
Internet Explorer < 9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.
.container { @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot#') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#webfontFqDaNIX6') format('svg'); }
- //www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
- //paulirish.com/2009/bulletproof-font-face-implementation-syntax/
References
- //blog.izs.me/post/146672448/cross-browser-support-for-inline-block-styling
- //net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
- //snook.ca/archives/html_and_css/targetting_ie7
- //www.ejeliot.com/blog/63
- //www.dustindiaz.com/min-height-fast-hack/
- //www.webspeaks.in/2010/07/25-incredibly-useful-css-tricks-you.html