Wednesday, October 10, 2012

Reset CSS

Reset CSS

CODE:

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

What is Reset CSS?

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules thatresets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser. (NB: article coming soon about why this is a false notion!)
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Monday, October 8, 2012

CSS Hack for Opera

Opera

The key to targeting Opera browser, just combine this code (@media all and (min-width: 0px){ your style }) on your style. For example: (see the yellow marker below)

@media all and (min-width: 0px){
   body {
      background: #ff0000; /* for Opera */
   }
}

CSS Hack for Mozilla Firefox

Mozilla Firefox

The key to targeting Mozilla Firefox browser, just combine this code (@-moz-document url-prefix() { your style }) on your style. For example: (see the yellow marker below)

@-moz-document url-prefix() { 
   body {
      background: #ff0000; /* for M.Firefox */
   }
}

CSS Hack for Google Chrome and Safari

Google Chrome and Safari Browser

The key to targeting Google Chrome and Safari browser, just combine this code (@media screen and (-webkit-min-device-pixel-ratio:0) { your style }) on your style. For example: (see the yellow marker below)

@media screen and (-webkit-min-device-pixel-ratio:0) {
   body {
      background: #ff0000; /* for G.Chrome and Safari */
   }
}

CSS Hacks for Internet Explorer

Here's are the samples of CSS Hack for Internet Explorer from IE6 to IE9 version.

body {
   background: #ff0000; /* for all browser */
   background: #0000ff\9/* for IE9 & below */
   background: #00cc00\0//* for IE8 */
   background: *#ff9900; /* for IE7 */
   background: _#ff66ff; /* for IE6 */
}

Internet Explorer 9 & below

The key to targeting Internet Explorer 9 and below, with a hack is to append "\9" (backslash + nine) to end of your style, For example: (see the yellow marker below)

body {
   background: #ff0000; /* for all browser - display "red" */
   background: #0000ff\9/* for IE9 - display "blue" */
}

Internet Explorer 8 & below

The key to targeting Internet Explorer 8 and below, with a hack is to append "\0/" (backslash + zero + slash) to end of your style, For example: (see the yellow marker below)

body {
   background: #ff0000; /* for all browser - display "red" */
   background: #00cc00\0//* for IE8 - display "green" */
}

Internet Explorer 7 & below

The key to targeting Internet Explorer 7 and below, just add "*" (asterisk) at the beginning of your style, For example: (see the yellow marker below)

body {
   background: #ff0000; /* for all browser - display "red" */
   background: *#ff9900; /* for IE7 - display "orange" */
}

Internet Explorer 6 & below

The key to targeting Internet Explorer 6 and below, just add "_" (underscore) at the beginning of your style, For example: (see the yellow marker below)

body {
   background: #ff0000; /* for all browser - display "red" */
   background: _#ff66ff; /* for IE6 - display "pink" */
}