31 CSS Code Scraps to Make You a Better Coder

  • February 8, 2017
  • Posted by: user
  • Category: Uncategorized
No Comments

It is almost unfeasible to collect in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more frequently than others. Don’t get afraid by the length of some of these CSS hack’s code because they’re all easy to apply and where is the case, they’re well documented. Besides the ones that resolve common and annoying problems there are also some that solve new issues brought by the new technologies.

Full record of Browser-Specific CSS Hacks

Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate.

[code:css]
/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 – 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 — acts as an !important */
#veintesiete {color: blue !ie; } /* string after ! can be anything */[/code]