Estilos CSS para Safari y Chrome en un archivo aparte

Leído en elwebmaster:

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:

PLAIN TEXT

1. @media screen and (-webkit-min-device-pixel-ratio:0) {
2. /* Reglas específicas para Safari 3.0 y Chrome aquí */
3. }

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:

PLAIN TEXT

1. <script type="javascript">
2. isSafari3 = false;
3. if(window.devicePixelRatio) isSafari3 = true;
4. </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):

PLAIN TEXT

1. <style type="text/css" media="@media screen and (-webkit-min-device-pixel-ratio:0)">
2. <!––
3. <?php include("includes/safariCSS.php"); ?>
4. ––>
5. </style>

Espero que este consejo te sea de ayuda.

Enlace | elwebmaster