Técnicas para Cross-Browser CSS

0
1714

Con CSS (Hojas de estilo en cascada) también se habla de Cross-Browser, desarrollo de páginas web que se ven exactamente igual en cualquier navegador. Existen algunas técnicas CSS con ese objetivo. Veamos algunas:

Resetear CSS

La mayoría de navegadores definen por defecto diferentes estilos para los elementos HTML. Por ello lo primero a realizar en nuestro diseño es resetear nuestra hoja de estilos.

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Internet Explorer hacks

Podemos usar atributos con sus valores para versiones especificas del navegador.

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Enfocado a Opera

Establecer estilos CSS para este navegador.

@media all and (min-width: 0px){
    .classname {}
}

Enfocado a Safari

Aunque es raro, pero siempre es bueno saber establecer estilos CSS para este navegador.

html:lang(en)>body  .classname {}

Enfocado a Google Chrome

Finalmente lo mismo que Opera y Safari para referirnos a Chrome.

body:nth-of-type(1) p{
   color: #333333;
}

Ver más técnicas y herramientas en CatsWhoCode