Tres consejos CSS para obtener diseños Cross Browser

Vamos a seguir con el tema de los diseños cross browser, traducido al castellano conseguir que un sitio se vea igual en todos los navegadores, quien dice igual dice lo más parecido que se pueda. En esta ocasión tres consejos que nos dan desde el blog Onyx Design para aplicar en nuestra hoja de estilos que paso ha adaptar de forma totalmente libre al español para su mayor difusión.

  • Resetea:
  • Los navegadores otorgan por defecto diferentes valores a las etiquetas html, como es el caso de h1. Si lo usamos tal cual, sin tocar nada, un texto entre las etiquetas h1 /h1 no se verá igual en los diferentes navegadores, unos le dan un tamaño más grande, otro más pequeño, diferentes espacios etc. Para solucionar esto existen los CSS reset, que no es ni más ni menos que poner a cero todas las etiquetas y selectores más usados para comenzar el diseño igual en todos los navegadores.

    Existen multitud de CSS reset, aunque no es oro todo lo que reluce, también existen detractores de esta técnica.

  • Cuidado con el uso de selectores:
  • CSS incorpora varios selectores con los que conseguir diferentes fines, como puede ser :befote y :after, pero como era de esperar estos no funcionan en todos los navegadores. Cuidado cuando los uses.

  • Valida:
  • Validar la hoja de estilos es una buena idea, siempre tendremos más posibilidades de que funcione en todos si tenemos un CSS que cumpla los estándares del W3C. Ahora bien, tampoco te obsesiones con el asunto, personalmente pienso que la W3C en ocasiones también suelta errores bastante absurdos o que precisamente se producen por intentar que el sitio se vea decentemente en los diferentes navegadores.

Tres consejos básicos que está bien tener en cuenta, sin tomarlos como una biblia, porque en estos mundos de la maquetación cada uno tiene mucho que decir.

Enlace: CSS coding for cross browser compatibility

Últimos artículos

Scroll al inicio