Juan Manuel 21 de enero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

Estilos CSS para Safari y Chrome en un archivo aparte


cssAl 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:

  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:

  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):

  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.

Fuente: Evo


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Albert dice:

    kajakaja Excelente!!!!!! ^^!

  2. DuDe dice:

    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!

  3. Richard dice:

    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.

  4. Raul dice:

    No sé como solucionar mi menú horizontal para que se vea en Chrome http://www.bandolerosdegrazalema.es/blog-bandoleros/

  5. Carlos Maquetador dice:

    lo que estaría todavía mejor sería diferenciar entre safari y los demás

  6. leo dice:

    te sacasate 100 puntos bro!!!!… B-)

  7. jose dice:

    mmmm………..es útil, para safari y chrome, mmmm ya osea eso arregla los problemas de estabilidad y seguridad mmmmm

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder