CSS Hacks / Cross-browsing / Repaso

css.attributes.md

Attribute Hacks

IE6

#once { _color: blue }

IE6, IE7

#doce { *color: blue; /* or #color: blue */ }

Todo menos IE6

#diecisiete { color/**/: blue }

IE6, IE7, IE8

#diecinueve { color: blue\9; }

IE7, IE8

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

IE6, IE7 -- actía como !importan

#veintesiete { color: blue !ie; } /* la cadena después de ! puede ser cualquier cosa */

IE8

#anotherone  {color: blue\0/;} /* debe ir al FINAL de todas las reglas */

css.cross-browsing.md

Min / Max width (IE included)

Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.

You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBA (IE included)

This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.

IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.

The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug :)

.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Image rotation / scaling (IE included)

Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.

The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.

HTML

(div.content > p) + (div.background > img.full.portrait.landscape)

CSS

img {
	transform:
		rotate(180deg)
		scale(-1, 1);

	/* for firefox, safari, chrome, etc. */
	-webkit-transform:
		rotate(180deg)
		scale(-1, 1);
	-moz-transform:
		rotate(180deg)
		scale(-1, 1);

	/* for ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	/* opera */
	-o-transform:
		rotate(180deg)
		scale(-1, 1);
}

Fullscreen Background (IE included)

.content {
	position: relative;
	width: 760px;
	z-index: 10;
 }
 .background {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index:2;
 }
	.portrait {
		height: 100%;
	}
	.landscape {
		width: 100%;
	}
	.full {
		width: 100%;
		height: 100%;
	}

Box Shadows

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

Rounded corners

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Clearfix (IE included)

Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:

.clearfix {
	zoom:1;
	overflow:hidden;
}

Pull quotes without images

blockquote:before {
	display: block;
	float: left;
	margin: 10px 15px 0 0;
	font-size: 100px; /* let's make it a big quote! */
	content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
}

css.selectors.md

Selector hacks

IE6 e inferiores

* html #uno  { color: red }

IE7

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

IE7, FF, Saf, Opera

html>body #tres { color: red }

IE8, FF, Saf, Opera (Todo menos IE 6,7)

html>/**/body #cuatro { color: red }

Opera 9.27 e inferiores, 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  }

Todo menos IE6-8

:root *> #quince { color: red  }

IE7

*+html #dieciocho {  color: red }

Solo Firefox 1+

#veinticuatro,  x:-moz-any-link  { color: red }

Firefox 3.0+

#veinticinco,  x:-moz-any-link, x:default  { color: red  }

Fuente

css.snippets.md

Vertical Align Anything

.verticalcenter{  
  position: relative;  
  top: 50%;  
  -webkit-transform: translateY(-50%);  
  -o-transform: translateY(-50%);  
  transform: translateY(-50%);  
}

Stretch An Element To Full Window Height

html,   
body {  
  height: 100%;  
} 

element{
  height: 100%;
}

Applying Different Styles Based On File Format

a[href^="http://"]{
  padding-right: 20px;
  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: 20px;
  background: url(pdf.png) no-repeat center right;
}

CSS Table Column Autowidth

td{
  white-space: nowrap;  
}

Wrapping Long Text Context

pre {  
  white-space: pre-line;  
  word-wrap: break-word;  
}  

Making The Blurry Text

element {  
  color: transparent;  
  text-shadow: 0 0 5px rgba(0,0,0,0.5);  
}  

Animating Ellipsis Using CSS Animation

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

shorthands.md

Font

font: 1em/1.5em bold italic serif

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Background

background: #fff url(image.gif) no-repeat top left

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Lists

list-style: disc outside url(image.gif)

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Margin & padding

Four different values

margin: 2px 1px 3px 4px (top, right, bottom, left)

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

margin: 5em 1em 3em (top, right and left, bottom)

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

@Source