Al testear nuestros diseños en varios navegadores, llega un punto que para que todo quede "pixel-perfect" debemos recurrir a los famosos hacks.
Los hacks para Internet Explorer suelen aislarse dentro de tags conticionales para mayor prolijidad, pero lo que muchos no hacen es separar también los hacks para Safari y Chrome. Esto nos permite conservar una hoja de estilos limpia y fácil de actualizar.
Estilos para Webkit
La regla que permite apuntar a Webkit (el motor de renderizado de Safari y Chrome, entre otros), es la siguiente:
-
@media screen and (-webkit-min-device-pixel-ratio:0) {
-
/* Reglas específicas para Safari 3.0 y Chrome aquí */
-
}
Dentro de ella debemos poner todos nuestros hacks o estilos específicos para corregir diferencias con los demás navegadores.
Cargando los estilos CSS aparte
Ok, hay varias maneras de separar estos estilos de nuestra hoja general:
Usando Javascript
Con Javascript podemos apuntar directamente a un navegador determinado, por ejemplo:
-
<script type="javascript">
-
isSafari3 = false;
-
if(window.devicePixelRatio) isSafari3 = true;
-
</script>
Luego sólo bastara con preguntar si isSafari3 vale true, y cargar los estilos que corresponda. Lo mismo con cualquier otro navegador (haz clic aquí para conocer más al respecto).
Usando un include de PHP
Mediante un include de PHP (demás está decir que tu página debe estar en PHP 
), podemos mantener los estilos para Webkit en un archivo .php aparte. Debemos meter este código en el header (internal styles):
-
<style type="text/css" media="@media screen and (-webkit-min-device-pixel-ratio:0)">
-
<!––
-
<?php include("includes/safariCSS.php"); ?>
-
––>
-
</style>
Espero que este consejo te sea de ayuda.
Fuente: Evo
Viernes, 22 de Enero de 2010 a las 09.49
kajakaja Excelente!!!!!! ^^!
Lunes, 19 de Abril de 2010 a las 16.33
Amigo, uso la regla condicional para los navegadores webkit pero lamentablemente no me lo valida el validador de CSS de la W3C...como puedo hacer para que me lo valide??? POR FAVOR RESPONDEME A MI CORREO!
Domingo, 4 de Julio de 2010 a las 11.13
Gracias, me sirvio de mucho, estaba un poco cansado, porque un elemento en Firefox se visualizaba correcto y en Chrome no, solo por unos pixeles.
Miércoles, 22 de Septiembre de 2010 a las 14.06
No sé como solucionar mi menú horizontal para que se vea en Chrome http://www.bandolerosdegrazalema.es/blog-bandoleros/
Miércoles, 15 de Diciembre de 2010 a las 13.40
lo que estaría todavía mejor sería diferenciar entre safari y los demás
Viernes, 11 de Marzo de 2011 a las 15.25
te sacasate 100 puntos bro!!!!... B-)
Lunes, 20 de Junio de 2011 a las 14.30
mmmm...........es útil, para safari y chrome, mmmm ya osea eso arregla los problemas de estabilidad y seguridad mmmmm