» Incredibly Useful CSS Snippets
Posted by | 0 Comments
Posted on: September 25th, 2011

Below is a list of CSS snippets that will help you minimize headaches, frustration and save your time while writing css, and I hope you will find it useful. Whether you are a experienced web developer, or just getting started with css, they are all worth checking out.

Eric Meyer’s CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

Source

Comprehensive List of Browser-Specific CSS Hacks

/***** 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  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { 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 */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Source

A New Micro Clearfix Hack

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Source

Font Sizing with REM

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Source

The New Bulletproof @Font-Face Syntax

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
}

Source

Target IE6, IE7, and IE8 with Only 4 Characters

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Source

Cross-Browser Transparency via CSS

selector {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

Source

Remove Outline for WebKit Browsers

input[type="text"]:focus {
  outline: none;
}

Cross-Browser Min Height

#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

Font Shorthand

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;

Drop Cap

p:first-letter {
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:60px;
	font-family:Georgia;
}

Vertical Center the Content of a Container

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

Cross Browser Text-Shadow (IE included)

p {
	text-shadow: #000000 0 0 1px;
	zoom:1;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";

}

Source

Box Shadows (IE included)

.shadow {
      -moz-box-shadow: 0 0 4px #000;
      -webkit-box-shadow: 0 0 4px #000;
      -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
      filter:
              progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
              progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
              progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
              progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
	    box-shadow: 0 0 4px #000;
}

Source

Image Replacement Technique with Text-Indent

h1 {
  background: url(img/image.jpg) no-repeat;
  height: 100px;
  width: 500px;
  display: block;
  text-indent: -9999px;
}

IE6/7 Double Margin/Padding Bug

ul li {
  float: left;
  margin-left: 5px;
  *display: inline; /*IE7 and below*/
  _display: inline; /*IE6 and below*/
}

/* this example fixes double left margin bug */

Remove Textarea Scrollbar in IE

textarea {
	overflow:auto;
}

Change Text Selection Style

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background-color: red;
}

Web Fonts with Google Font API

To use fonts from Google Font API, first reference the remote style sheet inside your <head>.

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/*CSS selector {
  font-family: 'Font Name', serif;
}*/

font-family: 'Tangerine', serif;

Stop Superscripts From Breaking Line-Heights Once and for All

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

Source

Styling Links by File Type

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Hardboiled CSS3 Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Source

View 's Profile | Subscribe via RSS
No comments currently exist for this post.
Leave your response:

Name (Required)

Email (Required)

Website (Optional)