a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class "pointer" for applying it to other clickable things as needed.
At the time of this writing, this will only work in Chrome 18+, but it's standardized so support will eventually come to everywhere.
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
html {
overflow-y: scroll;
}This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent "centering jumps" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.
Firefox and IE have the "choose file" button to the right of the filepath, while Webkit puts it on the left. This makes WebKit put it on the right as well.
<input type="file">input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
A.K.A The "Clearfix" hack.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */Just apply a class="clearfix" to the parent element. This is an improved version of the original, and documented here.
Updated by Jeff Starr to be cleaner, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */Updated again... "group" class name is nicer and more semantic (via Dan Cederholm). Content property doesn't even need the space, can be empty string (via Nicolas Gallagher). Without any text, font-size is un-needed (Chris Coyier).
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */Of course if you drop IE 6 or 7 support, remove the associated lines.
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}Update August 2012: I'd say for the most part these days (if you only need IE 8 and up) this is fine:
.group:after {
content: "";
display: table;
clear: both;
}
/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}