Comunidad de diseño web y desarrollo en internet online

Interpretacion de css segun cada navegador

Citar            
MensajeEscrito el 09 Ene 2009 12:37 pm
Hola amigos, mi pregunta es si alguno me puede recomendar algun manual o sitio donde este bien explicado la forma en que cada navegador interpreta las etiquetas de css. Esto es porque viendo en algunos tutoriales como resuelven cuando algo no funciona , indudablemente es muy importante conocer como interpreta el navegador al css.
Si alguien sabe le estare muy agradecido.
Muchas gracias.

Por robertostringa

13 de clabLevel



 

msie7
Citar            
MensajeEscrito el 09 Ene 2009 03:09 pm
mmm no tengo un tutorial especifico de eso, pero si te dire que antes de empezar a maquetar cualquier diseño al xhtml, debes aplicar un Reset CSS

reset.css

Código HTML :

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
fieldset,img { 
   border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
   font-style:normal;
   font-weight:normal;
}
ol,ul {
   list-style:none;
}
caption,th {
   text-align:left;
}
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border:0;
}


Esto suprime cualquier valor por defecto que cada navegador tenga para las etiquetas, asi todos empiezan desde 0, sin margenes, paddings, bordes, etc. Esto soluciona muchisimos probelmas.

Ahora el navegador que da mas problemas es IE, especificamente IE6, no respeta los standares, yo lo que hago primero es hacer mi web (en XHTML Strict) y la pruebo en firefox, luego la chequeo en safari, en chrome y en opera, luego la veo en IE7, usualmente deberia verse bien, sino se le hacen sus ajustes a la hoja de estilo, y luego viene IE6, para el se debe colocar una condicional en el head, has escuchado de las condicionales? Conditional Comments se llama, asi puedes llamar una hoja de estilos con las correcciones en las clases que IE6 no interpreta bien.

IE6 no soporta mucho de las pseudo-clases y pseudo-elementos, asi que hay que tener eso en cuenta, IE7 llega a soportar pero no todos, creo que 3 no soporta, :after, :before, :lang, y algunas reglas de estilos, como "content", pero en IE8 si lo va a soportar, se supone que en IE8 ya va soportar todo, yo uso una herramienta IE Tester, para probar en el IE8 Beta 2, IE 7 e IE6. Tambien hay uno que se llama MultipleIE, que te permite tener IE6 en tu misma PC (tambien tiene versiones menores a IE6). Hay que tomarse un tiempo para ajustar las cosas en IE6, aun es muy usado y esta lejos de morir ^^

Hay varios errores conocidos en IE6 que se logran solucionar y tambien existe un javascript que logra que IE6 se comporte casi casi como IE7, no soluciona todos los problemas pero si buena parte, a veces suelo usarlo cuando son proyectos mas grandes.

Te voy a dejar estos links de smashing magazine, son muy buenas practicas (estan en ingles)

http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/
http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

Espero que esta info te sea util.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 09 Ene 2009 03:25 pm
Ok, muchas gracias por tu respuesta. Voy a leer esos articulos.

Por robertostringa

13 de clabLevel



 

msie7

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.