Normalizando documentos con CSS
Visita este artículo en http://www.estadobeta.com/2006/05/10/normalizando-documentos-con-css/
Por Ismael en CSS, artículos, tipsPor defecto, los navegadores “interpretan” visualmente los documentos HTML de maneras diferentes. En algunos los títulos se ven más grandes que en otros. Un caso típico son los elementos <ul> y <ol> (utilizados para estructurar listas). Algunos navegadores los indentan automáticamente usando la propiedad padding-left, mientras que otros usan margin-left.
Escribir CSS que tome en cuenta todas estas inconsistencias de los navegadores puede ser problemático. La solución es sencilla: normaliza los tamaños, márgenes y “paddings” de todos los elementos de una vez usando el selector universal *.
* {
padding:0;margin:0;
font-size:10px;
}
A continuación puedes empezar a dar estilos particulares a los elementos de HTML.
ul, ol {
margin-left: 2em;
}
h1 {
font-size:200%;
}
Esto asegura un diseño más homogeneo entre navegadores.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
5/10/2006 at 5:37 pm
Estupendo consejo.
5/16/2006 at 1:50 am
Pasa lo mismo al darle estilos a las listas, a parte del padding y margin, me explico: por ejemplo mi blog en IE lo que son listas “ol” aparecen con circulos, sin que le diera ese estilo. Eso se resuelvo como lo explicas en el post?
Saludos.
Seba.
5/16/2006 at 4:17 pm
No se si te entiendo bien Sebastian, pero hay una serie de atributos que puedes usar para modificar las listas. Primero que nada, si le quieres quitar los “bullets”:
ol{
list-style-type:none;
}
Si en lugar de eso quieres ponerle imágenes en vez de los bullets por defecto:
ol.con-imagenes {
list-style-image: url(mi-img.gif);
}
Por último, si quieres que los OL muestren letras en vez de numeros:
ol.letras {
list-style-type: lower-alpha
}
Todas las propiedades CSS de las listas las puedes ver aquí.
5/18/2006 at 11:40 pm
creo que no me explique muy bien, más que el estilo es el error que se produce en IE al mostrar las listas.
Los atributos y estilos los entiendo, a todo esto W3SCOOLS es una muy buena página hace tiempo que la visito.
5/19/2006 at 11:17 pm
Hola!
Sebastian, no recuerdo bien como iba tu plantillla respecto de las listas, pero si te fijas en la CSS del theme default de WP dice esto:
/* Begin Lists
Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets.
*/
Si mal no recuerdo, el comportamiento de Opera e Internet Explorer tanto en los bullet, padding y margin son parecidos y el que se diferencia es Firefox.
Yo lo que hice para solucionarlo fue algo parecido a lo que plantea Ismael: normalizar y luego aplicar estilos con imágenes a cada lista
#sidebar ul {list-style: none;
margin: 0px;
padding-left: 10px;
text-indent: -10px;
}
La diferencia en mi caso es que el text-index tiene valor -10px.
Ismael: voy a probar con tus recomendaciones, porque ahora que lo pienso poniendo cero a todo también debería funcionar bien. La verdad es que batallé hartos días y probé casi todo para cuadrar la listas en IE, Opera y firefox.
Saludos
5/20/2006 at 2:05 am
Debiera funcionar. Prueba usando “list-style-type: none;” en lugar de “list-style: none;” y cuando pongas “margin:0px” (o cualquier otro) basta con poner “margin:0;”.
A mi me funciona.
5/21/2006 at 11:51 am
http://bitesizestandards.com/bites/using-the-universal-selector
5/30/2006 at 6:43 pm
Justo ahora me encontraba trabajando en este tema, estoy haciendo un menu, usando listas. Esto quiere decir que la lista queda horizontal permitiendo así hacer un menu. La cosa es que llevo horas y en Firefox, no funciona, en safari muy bien pero no salen los bordes, y en opera ni hablar horrible. Estaba viendo el problema cuando entré a microservios y voy a intentar lo del selector universal.
Max, un gusto encontrarnos aca, estoy rediseñando my plantilla a is es que en IE todavia no se ve.
Quería plantear una cosa:
Que se puede hacer, a parte de recomendar a nuestros lectores de usar un navegador especifico, para solucionar este tema. De hecho recién vi Etado beta en safari y los comentarios se desordenan.
Saludos.
5/30/2006 at 7:07 pm
Ups! Eso pasa cuando se desarrolla en PC (ya no más).
No he tenido tiempo de revisar el problema en Safari pero estoy seguro de que la solución es simple. Si bien no podemos aspirar (todavía) a que nuestro trabajo se vea exactamente igual en todos los navegadores, creo que basta con seguir unas cuantas buenas prácticas para lograr resultados en todos los navegadores modernos. Creo que esas prácticas merecen un post propio (pronto!).
Por otro lado, personalmente NO recomiendo IE por interés profesional: si baja el mercado de IE en favor de navegadores con mejor soporte de estándares, MS se ve obligado a mejorar su navegador (como IE7). En mi sitio personal decidí no preocuparme por IE6.
Sobre las lista horizontales, puedes ver Listamatic para buenos ejemplos de listas CSS (horizontales y verticales).
5/30/2006 at 8:12 pm
Gracias!!!! muy buena página ya esta en mis marcadores.
Ahhh lo otro es que lo de Safari no es terrible, disculpa, lo que pasa es bien simple, la numeración del comentario queda sobre el avatar. No es nada.
Saludos y gracias, espero por el post con buenas prácticas.
5/30/2006 at 8:17 pm
No son necesarias las disculpas
La verdad no me había fijado en el probloema y se agradece que te hayas fijado (en mi sitio personal pasa lo mismo!)
5/30/2006 at 9:40 pm
Tengo que decirlo, LISTAMATIC es una muy buena herramienta, deja bien encaminado el asunto, el resto es diseño. Me sirvió mucho para entender a cuales son los paddings y margins de cada li o ul.
Cuando termine mi sitio van a ver los resultados.
Saludos.
5/30/2006 at 10:38 pm
[…] Los navegadores interpretan visualmente el código HTML de forma arbitraria y diferente si es que no se le indica cómo por medio de CSS. Para evitar imprevistos normaliza los márgenes, paddings y tamaños antes de empezar con tu diseño. […]
5/30/2006 at 10:47 pm
Personalmente espero con curiosidad esos resultados. Happy redesign!
6/1/2006 at 10:59 pm
Hola Ismael …..
Soy nuevo por aki …. excelente artículo …
Bye y saludos..
7/6/2006 at 6:14 pm
Personalmente para comenzar todo diseño utilizo el CSS Starter.
Hace lo que mencionas aquí y algunas otras cosillas!
Saludos!
11/7/2006 at 12:14 am
[…] Cierto. Siguiendo ciertas directrices -no uses más de dos floats consecutivos, olvídate de position: fixed, normaliza los márgenes y paddings y sólo utiliza los métodos estándares del DOM- es posible llevar un proyecto a buen término sin demasiadas complicaciones en cualquier navegador moderno, pero en muchos casos nuestro proyecto incluye técnicas triviales en la mayoría de los navegadores (¿alguien dijo position: absolute?) que en IE pueden tomar horas (o días) de investigación, pruebas y hacks para resolver. Esas mismas horas en que aún contabas con ese empuje vital para realizar cualquier proyecto de calidad: la motivación y los objetivos claros. […]
11/22/2006 at 5:00 am
Hola Ismael,
Hacía tiempo que no me pasabsa por aquí a leerte, aunque tu blog ande entre mis mejores preferencias. Muy bueno todo.
Ahora, sobre accesibilidad. El tamaño del texto siempre debería ir en medidas relativas em o % ya que ciertos “navegadores” tienen el grato placer de no cambiar el tamaño del texto si las medidas están expresadas en px. Vamos si tienes eso puesto, prueba a cambiar el tamaño del texto con el IE, a ver que pasa
No solo en diseño nos fastidia el dichoso IE, también en accesibilidad.
Prueba con algo del estilo:
* {
padding:0;margin:0;
font-size:.8em;
}
A parte de ese detalle, me apunto el hack (es de los pocos hacks q no se pueden considerar como tal
y eso que no suelo usarlos. Prefiero quitar una “habilidad” a tener que enguarrar el código.
Un saludo y sigue así.