WEBEXPEDITION18 Never Stop The Exploring

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

Visit PsPrint Emeryville today to get huge online printing discount.

Authored by Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.