Aporte - CSS compatible para todos los navegadores

gVenom · #1 (**permalink**) 23/02/2011, 12:54

Aunque parece un tema "trillado" , el continuo avance de CSS nos obliga a estar al dia con todas las herramientas que tengamos a nuestra disposición. Asi que aqui está para los mas nuevos una pequeña ayuda de este tema.

Para los que no saben aun, cada Browser tiene su propio “criterio” de cómo cómo interpretar los estilos CSS.
CSS no se detiene y por el contrario sigue creciendo y avanzando en propiedades y funcionalidades que para los que diseñamos paginas Web son un verdadero motivo de alegría de lo que podremos hacer, pero, eso es relativo, ya que viene en conjunto con los dolores de cabeza que causa que tu Web no se vea igual en todos los navegadores.

Cuando utilizamos una propiedad en una página y no sea reconocida por un determinado navegador, simplemente la ignorará y es cuando nos damos cuenta de que en cierto navegador nuestra página se vea perfecta, en otros es un desastre visual.
Cómo hacer tus estilos CSS compatibles con diferentes Browsers
Existen muchas cosas que podemos hacer, desde implementar los famosos “comments” hasta aplicar hacks o diseñar un css para cada browser.
Es bueno conocer mejor la forma como cada browser va a interpretar una línea de codigo CSS, ya que si no sabemos que es lo que no reconoce el browser, ¿Cómo podriamos arreglarlo? Buscando por ahí me encontré esta Web http://www.quirksmode.org/compatibility.html (esta en inglés pero se entiende muy bien), aquí se explica de forma “grafica” si se le puede decir, cuales son los comandos de cada versión de CSS que son reconocidas y cuales no son compatibles para cada browser que se probó. Al lado izquierdo de la tabla aparecerá el selector, como por ejm CSS2. Este es un link que los llevará a otra página donde se aplican los distintos comandos y se indica si esta línea es reconocida o no y por cuales browser.
Ahora bien, ya tenemos a mano algo de ayuda para reconocer codigos incompatibles, ¿Qué sigue ahora?

Sería bueno que pudieras realizar pruebas en los distintos navegadores según vallas diseñando tu Web. Un buen webmaster siempre debe comprobar que su página web sea compatible con los navegadores más usados. Para ello puedes hacer dos cosas:
1 – Descargar todos los navegadores importantes para que pruebes en tu pc
Opera Firefox Safari Google Chrome

2 – Testear tu página on-line en una Web que tenga esta opción.

Existen sitios web que realizan capturas de pantalla de nuestra página web en diferentes navegadores. Esto nos evita tener que instalar todos los navegadores en nuestra PC. Sin embargo, el inconveniente es que no podremos probar las modificaciones que hagamos en tiempo real. Si no que será necesario esperar hasta que nuestra solicitud sea aceptada.
• Browsershot (todos los SO + todos los navegadores)
• Browsercam (de prueba - todos los SO + múltiples navegadores)
• IEcapture (IE7)
• Icapture (Mac + Safari)
• Scapture (Linux + Firefox, Konqueror, Opera, Dillo + Lynx)

Resetear los estilos CSS
Antes de empezar a crear estilos para nuestra página es indispensable resetear o estandarizar los estilos. Todos los elementos HTML tienen unos atributos CSS predeterminados.El Cross browsing (ver la página web correctamente en todos los navegadores) es obviamente el que sale perjudicado como consecuencia de estos atributos predeterminados. Por lo tanto, lo más recomendable es resetar los estilos CSS para evitar que dichos elementos perjudiquen en demasía la página. Para hacerlo deberemos incluir este código en nuestro archivo CSS:

Código CSS:

Ver originalhtml, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     <A title=outline href=" http://www.cssblog.es/css-la-propiedad-outline/" rel=nofollow>outline</A>: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100&#37;;
     font-family: inherit;
     vertical-align: baseline
}
 
body {
     line-height: 1
}
 
:focus {
     outline: 0
}
 
ol, ul {
     list-style: none
}
 
table {
     border-collapse: collapse;
     border-spacing: 0
}
 
blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}
 
blockquote, q {
     quotes: "" ""
}
 
input, textarea {
     margin: 0;
     padding: 0
}
 
hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Así conseguiremos resetear los estilos CSS, evitando los problemas del Cross-browsing.
Y si no las reseteamos, podremos observar diferencias visuales que se complicarán más cuando queramos corregirlas.

Existen otros códigoss definidos para realizar este reset, aquí pueden descargarse otro si gustan llamado Toucan CSS http://borderleft.com/labs/.
Programar CSS según el browser
Otra forma de trabajar es crearse una hoja de estilo para cada browser.Estos códigos sólo serán aplicables cuando la página sea visualizada en los siguientes navegadores.
Internet Explorer

Código HTML:

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Con este podemos especificar la versión:

Código HTML:

<!--[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Dentro de las propiedades:

Código HTML:

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

Opera

Código HTML:

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

Safari

Código HTML:

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

Google Chrome

Código HTML:

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

Propiedades CSS con compatibilidad en todos los navegadores:

1. color
2. direction
3. font-family
4. font-size
5. font-style
6. font-weight
7. list-style-position
8. table-layout
9. text-indent
10. word-wrap

Propiedades CSS que NO tienen compatibilidad en todos los navegadores:

1. background
2. background-attachment
3. background-color
4. background-image
5. background-repeat
6. background-position
7. border
8. border-collapse
9. border-color
10. border-style
11. border-width
12. clear
13. cursor
14. display
15. float
16. font
17. font-variant
18. height
19. left
20. right
21. bottom
22. top
23. letter-spacing
24. line-height
25. list-style
26. list-style-image
27. list-style-type
28. margin
29. overflow
30. padding
31. page-break-after
32. page-break-before
33. position
34. text-align
35. text-decoration
36. text-transform
37. vertical-align
38. visibility
39. white-space
40. width
41. word-spacing
42. z-index

Creo que hay mucho más pero, por algun lado se empieza.

Saludos,

Hectorito · #2 (**permalink**) 29/02/2012, 16:48

Buen dia.

No me funciona he probado varias cosas pero el error persiste en los navegadores, mi codigo es el siguiente

Código CSS:

Ver originalhtml,body{
 margin: 0px;
 padding: 0px;
 height: 100%;
width: 100%;
}
 
#contenedor {
        
width: 1200px;
margin: 0px auto;
padding:0px ;
height: 600px;
}
 
#izquierda {
    
background:#0000;
 
width: 25%;
float: left;
height: 520px;
border-width:5px;
border-style:groove;
margin: auto;
}
#derecha {
border-width:2px;
border-style:groove;
overflow:auto;
width: 71%;
height: 520px;
text-align: center;
 
 
}
 
#enlaces{
background:#112837;
height: 50px;
width: 97%;
margin:10px;
border-width:3px;
border-style:groove;
 
}
 
.img{
  width: 100px;
  height: 60px;
}
 
.link{
    text-decoration: none;
    color: #2E2E2E;
    font-family: Georgia,Times New Roman, serif;
    font-weight: bold;
    text-align: center;
    position: relative;
 
    }

en chrome sale perfecto, en firefox casi perfecto solo que el div=derecha sale corrido a la derecha si no estoy mal la misma canidad de posiciones como el ancho del mismo, y en IE definitivamente no va, no funciona nada de nada..

me podria colaborar ?

gracias!