@alterebro

Ejemplos de propiedades CSS cross-browser haciendo uso de los prefijos en la implementación propia de cada navegador.

Opacidad de un elemento

.selector {
 opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
 filter: alpha(opacity=75); /* IE lt 8 */
 -ms-filter: "alpha(opacity=75)"; /* IE 8 */
 -khtml-opacity: .75; /* Safari 1.x */
 -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

Esquinas redondeadas

.selector {
 -moz-border-radius: 12px; /* FF1+ */
 -webkit-border-radius: 12px; /* Saf3-4 */
 border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

Cada esquina tambien puede ser definida por separado usando las siguientes propiedades:

• CSS3 (Navegadores como Opera) :
  border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
• Mozilla (Firefox, K-meleon, Seamonkey…) :
  -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft, -moz-border-radius-topleft
• Webkit (Safari, Chrome, iPhone…) :
  -webkit-border-top-right-radius, -webkit-border-bottom-right-radius, -webkit-border-bottom-left-radius, -webkit-border-top-left-radius

.selector {
 -moz-border-radius-topright: 5px;
 -webkit-border-top-right-radius: 5px;
 border-top-right-radius: 5px;

 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 border-bottom-right-radius: 5px;

 -moz-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
 border-bottom-left-radius: 5px;

 -moz-border-radius-topleft: 5px;
 -webkit-border-top-left-radius: 5px;
 border-top-left-radius: 5px;
}

En el caso de IE puede ser usado un comportamiento .htc el cual lo puedes descargar desde aqui: border-radius.htc

.selector { behavior: url(border-radius.htc); /* >= IE6 */ }

Sombra de un elemento

.selector {
 -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
 -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
 box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9 */
}

Fondo en gradiente

.selector {
 background-color: #444444;
 background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444), color-stop(1, #999999)); /* Saf4+, Chrome */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}

Fondo RGBA con canal alpha

.selector {
 background-color: #B4B490;
 background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490', EndColorStr='#99B4B490'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490', EndColorStr='#99B4B490')"; /* IE8 */
}

Rotación de un elemento

.selector {
 -moz-transform: rotate(7.5deg);  /* FF3.5+ */
 -o-transform: rotate(7.5deg);  /* Opera 10.5 */
 -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
 transform: rotate(7.5deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix( M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand')"; /* IE8 */
 zoom: 1;
}

Transición de un elemento

.selector {
 -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
 -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
 -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
 transition: all 0.3s ease-out;
}

Sombra en el texto

.selector { text-shadow: 1px 1px -2px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */ }

Incrustar una fuente tipográfica

@font-face {
 font-family: 'WebFont';
 src: url('myfont.eot');  /* IE6-8 */
 src: local('?'),
 url('myfont.woff') format('woff'),  /* FF3.6, IE9 */
 url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
}

Etiquetas: cross browser, css