CSS: buenas prácticas
Visita este artículo en http://www.estadobeta.com/2006/05/30/css-buenas-practicas/
Por Ismael en CSS, Estándares, artículos, destacados, educación, tipsSumario de trucos y buenas prácticas para diseñar con CSS.
El objetivo primordial de CSS es definir un lenguaje estándar para diseñar interfaces para internet, sin importar el software o dispositivo que interprete los documentos.
Pero esa promesa se puede caer a pedazos apenas nos enfrentamos a las “diferencias” en la implementación del estándar de cada navegador. Diseñas para Firefox y resulta que tu sitio se ve pésimo en algunas versiones de Internet Explorer. Lo que se suponía que era un ahorro de trabajo se transforma en un pozo sin fondo de correcciones y “hacks”.
Es imposible dejar a todos los navegadores contentos -especialmente porque en versiones más antiguas el soporte de CSS es incompleto o inexistente- y como diseñadores para la web no debemos pretender que nuestros documentos se vean exactamente igual en todos los navegadores. Despues de todo, un documento diseñado para ser accesible debe considerar que el usuario puede elegir distintos tamaños de fuentes, tipografías, dimensiones o contrastes.
Dicho esto, hay una serie de prácticas que ayudan a minimizar las divergencias entre navegadores y evitan, en lo posible, el uso de “hacks” o trucos para satisfacer las mañas de los distintos programas. Sigue leyendo para ver estas prácticas.
Normaliza primero.
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.
Cuidado con el Width!
En el modelo de cajas de IE5, el ancho final de un elemento es el indicado en el atributo “width”. Los bordes, paddings y márgenes se cuentan hacia dentro de la caja:
#mi-caja {
width: 200px;
margin: 10px;
border: 5px;
}
/*
Para IE5, el ancho final de esta caja es 200px;
*/
Para Firefox, Opera, Safari y otros el ancho final es width + bordes + paddings + margins = 230px!
No sólo eso. IE6 usa el motor de CSS de IE5 si el documento HTML no tiene DOCTYPE. Esto fue una solución “parche” de Microsoft para soportar mejor CSS en IE6 sin romper el diseño de sitios “antiguos” hechos para IE5 (la mayoría de los sitios antiguos no tienen DOCTYPE).
¿La solución? No especifiques width en combinación con márgenes y bordes en la misma caja. Lo común es tener una caja exterior que controla el ancho total del elemento, y manejar los márgenes y paddings en los elementos interiores:
// HTML
<div id="contenedor">
<div id="contenido">
Este es un contenido.
</div>
</div>
// CSS
#contenedor {
width: 200px;
}
#contenido {
margin:10px;
padding: 5px;
}
por lo mismo, trata de manejar los anchos en unos pocos elementos contenedores. Los DIV’s y otros elementos son bloques; esto significa que, si no tienen un width especificado, ocuparán todo el espacio horizontal disponible (restando los bordes, márgenes y paddings). Aprovecha esa cualidad y minimiza el uso de WIDTH.
Ojo con los atributos no soportados.
Algunos atributos CSS son muy poderosos pero lamentablemente no soportados por navegadores populares como IE6. Entre ellos está la serie min-width, max-width, min-height y max-height, que especifican las dimesiones mínimas y máximas para una caja.
Solución: usa esos atributos con confianza para Firefox, Safari y Opera. Para IE 5 y 6 permítete usar un pequeño “hack”:
/*
Para Firefox, Safari, Opera y otros
*/
#mi-caja {
min-height: 300px;
}
/*
Para IE
*/
* html #mi-caja {
height: 300px;
}
Esto aprovecha dos particularidades de la implementación del DOM y CSS de IE.
Primero, IE cree que hay un elemento sin nombre que contiene a todo el documento HTML. Por lo tanto el selector en cascada
* html #mi-caja
sólo es visible para IE.
Segundo, si el contenido de la caja es más alto que el width, IE agrandará la caja los pixeles necesarios para acomodar la extensión del contenido, por lo que podemos usar el truco del asterisco para definir un height sólo para IE. En los otros navegadores el contenido sobresale de la caja si éste es más extenso que height. Para evitar eso fue diseñado min-height.
No abuses de la cascada.
Es fácil dejarse tentar por el poder de los selectores en cascada de CSS:
#mi-div div p strong a.link-especial {color:red;}
#mi-otro-div div p em a.link-especial {color:green;}
Mientras más “profundo” o específico el selector, más peso tiene sobre otros selectores más generales, sin importar cual vaya antes o despues en el código. Los selectores ultra-específicos son muy poderosos pero a veces muy difíciles de mantener. Trata de mantener tus selectores con el mínimo de especifidad necesaria y sólo aumenta la profundidad en casos puntuales.
/*
Estilo general
*/
.link-especial {color:red;}
/*
Estilo para un caso particular, más específico.
*/
#mi-otro-div .link-especial {color:green;}
Nombra tus atributos de acuerdo a su contenido, no su diseño.
A veces se tiende a usar nombres de clases e id’s de acuerdo al diseño que queremos lograr:
<div id="menu-derecha">
<a class="link-rojo">Logout</a>
</div>
Si alguna vez decides modificar la hoja de estilos puedes terminar con un div id=”menu-derecha” que se encuentre a la izquierda o un link class=”link-rojo” de color amarillo. No muy fácil de entender.
Tanto HTML como sus atributos fueron pensados para estructurar los documentos semánticamente, sin importar su diseño. Por esto es más sensato utilizar atributos que hablen del tipo de contenidos que contienen:
<div id="menu-principal">
<a class="link-logout">Logout</a>
</div>
¿dónde pongo las imágenes?
Las imágenes que incluímos en las hojas de estilo por medio de background-image o list-style-image son relativas a la hoja de estilos, no al documento HTML. Esto es bueno porque nos permite vincular la hoja de estilos a distintos documentos sin riesgo de perder las referencias a las imágenes. Eso es ideal además porque podemos cambiar de hojas de estilos rápidamente, modificando el diseño de un mismo documento por completo.
Por eso, las imágenes incluídas en el HTML (fotos descriptivas, gráficos, etc) debieran ir en directorios separados de las imágenes incluídas por CSS (que debieran ser ornamentales, no informativas). Si en el futuro queremos cambiar la hoja CSS de nuestro Fotolog queremos eliminar el estilo antiguo -y sus imágenes- pero mantener las fotografías de nuestros diarios o productos. Cuestión de orden.
———————————————————–
Por supuesto hay más. Esta es una breve lista de las consideraciones que tengo presentes ante cualquier nuevo proyecto CSS.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
5/31/2006 at 3:29 am
[…] Enumero las que proponen y dejo el v?nculo directo al desarrollo de las mismas: CSS: buenas pr?cticas. […]
5/31/2006 at 4:24 am
[…] Via Torresburriel descobreixo un interessant recull de bones pràctiques treballant amb CSS a Estado Beta. Cat: Tecnologia, Estàndards | […]
5/31/2006 at 8:21 am
Gran post!! y ademas muy claro, me imagino que todos esos conociemientos los abrás leido o estudiado en algun libro, podrías recomendarme alguno en español?
o hacer un post sobre eso
muchas gracias
5/31/2006 at 9:48 am
Estoy totalmente en contra de la recomendación de “no abusar de la cascada”. Es un fallo notorio el escaso uso de la cascada que se hace, y debería ser algo a potenciar en vez de lo contrario. El no utilizar la cascada es ir en contra de uno de los principios fundacional de las hojas de estilo (que, por si alguien lo ha olvidado, se llaman hojas de estilo en cascada). Si la cascada no se debiese utilizar se llamarían hojas de estilo a secas.
5/31/2006 at 11:32 am
Veamos, no dice “no usar cascada” sino “no abusar de la cascada”, que es bien distinto.
El uso de cascada es recomendable siempre que no obstruya la lectura y el mantenimiento de la hoja de estilos. En tal caso, no hay que tener miedo de relajar el uso de la cascada.
5/31/2006 at 12:29 pm
Alvaro: lo que quiero decir es que se debiera usar el nivel de especifidad (profundidad) justo y necesario para lograr lo que necesitas. El problema más común al que me he enfrentado al usar selectores demasiado específicos es cuando agrego varias hojas de estilo a un documento. Si los selectores de la primera hoja son muy específicos es necesario usar otros aún más específicos o la keyword !important para sobre-escribir los primeros. Eso es una pesadilla potencial de mantención.
Otro problema es la poca modularidad. Los selectores profundos dependen demasiado de una estructura específica de HTML. Quieres sacar esa lista de links del menu y ponerla en el footer? Pues tendrás que reacomodar todos los selectores relacionados con ella si estos eran muy específicos.
Otro error muy habitual que he visto es cosas como
#contenedor div #mi-caja {...}
Eso es totalmente innecesario porque las id’s son únicas de todas maneras.
5/31/2006 at 12:45 pm
Totalmente de acuerdo con Álvaro.
Si los beneficios de la cascada (qué mal suena ésto en español) se usan bien, no se debería perder “modularidad”.
Con respecto al ejemplo que pones del ID, ismael, puede ser correcto, pues el mismo id puede aparecer en diferentes páginas, cambiando su presentación gracias, precisamente, al uso de la cascada.
En definitiva, es cierto que hay que usarla sabiendo lo que se hace, con cuidado, etc… pero, ¿no es eso aplicable a todo? Más que no abusar de ella hay que usarla bien.
5/31/2006 at 12:56 pm
Alberto: tienes toda la razón con respecto al uso de id’s en varias páginas.
Sobre lo demás: para mi la frase “no abusar” = “usar bien”, por lo que asumo que estamos de acuerdo. Si gustas puedes entender ese punto como “Usar bien la cascada”.
5/31/2006 at 2:07 pm
Ismael, te pasaste con el post, lo que te quería preguntar es: si en el hack se puede usar tanto el height como el width?
Eso sería. Y lo otro es que tratemos de “entender” lo que Ismael dice no debe ser fácil explicarlo todo en un post, este blog es para aprender, sobretodo con estos temas en los cuales hay muchas interpretaciones de como dar solucion a estas cosas. Mas todavia cuando muchos de los lectores somos aprendices.
6/1/2006 at 2:15 am
Hola q bien todos los datos sobre css pero yo tengo problemas con eso de los hacks para iexplorer, yo no tengo hosting así q ocupo blogger para mis blogs, pero en el caso puntual de mi blog guíarte q forma parte de mi proyecto de título de diseñador gráfico profesional he intentado de todo para q el #sidebar-wraper de mi plantilla se vea en iexplorer y ojo q se vea no q se vea bien, a estas alturas con solo q funcione me conformo.
He probado con esto a ver q les parece:
#sidebar-wrapper {
_position: absolute;
position: absolute;
*position: absolute;
_top: 0px;
top: 0px;
*top: 0px;
_margin: 0 1px 0 0;
margin: 0 1px 0 0;
*margin: 0 1px 0 0;
wid\th: 269px;
_width: 269px;
width: 269px;
*width: 269px;
_right: 0px;
right: 0px;
_right: 0px;
color: #FFFFFF;
}
jajajaja me da risa parece q he probado todos los hacks, pero en serio estoy desesperado si alguien me pudiese ayudar y decirme en q estoy mal se lo agradesco de antemano, aca les dejo el link del blog q me causa bastantes dolores de cabeza por la culpa del maldito iexplorer.
http://guiartebba.blogspot.com/
6/2/2006 at 1:25 am
Miguel: O no te entiendo o los cambios que hiciste en los estilos te funcionaron. Porque yo veo perfectamente el DIV sidebar-wrapper en IE.
6/2/2006 at 12:52 pm
Miguel: me parece que estas usando mal el hack del asterisco. Primero que nada, si pones position:absolute; basta para todos los navegadores. No es necesario repetir el atributo con distintos hacks. Segundo, el asterisco se usa en el selector en combinación con el elemento HTML, así: * html #elemento {…}
6/2/2006 at 2:56 pm
José Luis: gracias por notar q se ve el sidebar-wrapper en IE, pero lo q pasa es q una vez q pinchas un boton de la botonera de la derecha del sidebar-wrapper cuando se va al vinculo del blog la botonera desaparece y eso es muy molesto.
Ismael: gracias por notar en q estoy mal, ocupare solo position:absolute y haber q pasa con mi blog. (en mis blogs ya estas en mis links en el item blogs de hace un buen rato para q sepas)
Gracias a los dos.
6/7/2006 at 9:19 pm
Estamos…estuve trabajando en el diseño de mi blog y quedo bastante bien con las mejoras de presentación, solo me resta agregar el menu y terminar el resto de las páginas.
Funciona en Safari, Firefox, y Opera no lo he visto en Nescape. Le dije a mi polola que lo viera en IE y adivinen…se desarmó..buaaaaa.
Voy a ver si me funciona el hack del arterisco, mi pregunta es: lo mejor sería colocarlo junto a la etiqueta del conteiner? *html #conteiner {bla, bla, bla}?
Saludos.
6/8/2006 at 12:07 am
Sebastian: el hack del asterisco usalo en el elemento que quieras modificar. Si ese es el #container, usalo ahí. Si es el #right, usa * html #right{…}
Vi rápidamente tu código y veo que en #right y #right2 tienes width, padding, margin Y border-width. Esa es una receta para el error porque esos 4 atributos se suman y aumentan el width final. Si tienes un elemento con width, no le pongas padding, border ni margin (y viceversa). Sobre todo cuando son floats. Revisa el segundo punto de este post para más detalles.
Luego trataré de escribir algunos tips para diagramar columnas.
Suerte!
6/9/2006 at 7:02 pm
Estoy cada vez más molesto con IE, pero quiero ir más allá de lo qie uno puede hacer con el diseño, ahora estoy haciendo una página de solo dos columnas con floats muy sencillos sin margenes ni padding y en IE queda la escoba. (por lo menos en el de mac) y no quiero verme en la obligación de hacerlo con tabals quiero aprender a usar CSS.
6/9/2006 at 8:13 pm
Como dice en el artículo, IE5 (el de Mac) tiene otro modelo de caja que los navegadores modernos. En IE5.5+ para PC no debiera verse mal. IE Mac es un navegador descontinuado. Se pueden aplicar hacks especiales para ese programa.
Si quieres me muestras el código para ver cual es el problema.
6/10/2006 at 2:10 am
Quería comentar que estuve revisando algunos tutoriales en la inmensidad de internet, (hace falta mas en español) y la propiedad de float para hacer columnas no es lo que yo creí. Según lo que entiendo los float se deben aplicar a los parrafos e imagenes y no para una capa. En ese caso se debería utilizar un clear, que hay de cierto?
6/10/2006 at 7:06 pm
No. Float y clear cumplen funciones distintas. Es válido usar float para diagramar columnas (el concepto de “capa”, aplicado a los DIVs es una metáfora para los diseñadores acostumbrados a las capas de Photoshop y otros editores gráficos).
Lo que sucede es que float tiene comportamientos complejos: por un lado convierte el elemento a display=”block” (si ya no lo es), lo que permite manejar su width y height, y por otro lado fuerza al elemento a apilarse horizontalmente, en lugar de verticalmente como el resto de los blocks. Los elementos normales junto a un float intentan llenar todo el espacio disponible junto al float. Para evitar esto se les pone clear “left”, “right” o “both” a los elementos contiguos a un float.
Float se usa comúnmente para situar imágenes y bloques “entre” párafps de texto, pero también se puede usar para diagramar grandes bloques (divs u otros).
6/11/2006 at 12:10 am
Perfecto, estoy bien entonces con mi “Buenas Prácticas”.
Ismael muchas gracias por toda la ayuda, este sitio me a sido muy útil, lo que me interesa es saber es cuando comenzará la ronda de las técnicas de Floats, por lo menos para comenzar a armar un sitio de dos columnas sin enfrentarse a tanto problema. Creo que voy por buen camino pero faltan “cosillas” me encontre la otra vez con una propiedad que no entendí bien para que sirve: z-index?.
Que tal es el libro: Stylin’ with CSS : A Designer’s Guide (Paperback) de Charles Wyke-Smith, lo mencionaste en un post por ahi, estoy pensando seriamente en adquirirlo.
Saludos.
6/11/2006 at 7:03 pm
De nada Sebastian.
Ese libro es bueno. Muy fácil de seguir, paso a paso.
z-index es la “profucndidad de un elemento (coordenada “z”). Sirve para controlar qué elemento aparece sobre los demás, como las capas de Photoshop. Eso si sólo es aplicable a elementos con el atributo position en “absolute” o “relative”.
Además del libro te recomiendo que revises las W3Schools. Ahí hay ejemplos de todos los atributos de CSS.
8/23/2006 at 6:12 pm
[…] Segundo, usa la mínima profundidad necesaria para afectar los elementos que quieras. No uses p a.un-link{…} si .un-link{…} es suficiente. Esto te permitirá aumentar la profundidad para elementos específicos más adelante. En este artículo hablo más de esto y otras buenas prácticas. […]
1/8/2007 at 6:30 pm
Buenas prácticas en CSS…
Para partir armando sus css con el pie derecho y "the right way"….
3/13/2007 at 3:09 am
hola tengo una preguntita, esoty construyendo un sitio, en explorer no tengo problema (mis usuarios utilizan en su mayoria este navegardor) pero en firefox tengo problemas con la imagen de fondo, tal como explicabas en tu artículo, ya que en explorer se repite sin problema acomodándose al contenido (la extención que éste tenga), pero en firefox no. si utilizo la opción: min-height cosa que probé antes de llegar acá, me obliga de cierta forma a que las páginas en que tengo menos contenido (por ejemplo un alto de 1000px) queden de 3000, el alto de mi página mas “larga”. obviamente generando un scroll innecesario y un fondo casi interminable.
no se si me explico, bueno no existe alguna forma de que el height que se adapte al 100% del alto de cada página ?
espero me puedas responder.
de antemano Gracias !!
(por si quisieras revisar al sitio, aun no está linkeado solo debes agregar /blog para ingresar)
3/13/2007 at 12:09 pm
Andrea: lee este artículo en este mismo sitio.
4/17/2007 at 12:14 pm
tengo este problema:
diseñe una pagina donde personalize los scroll de esta manera:
input {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
background-color: #3e2102;
border: #595552;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px
}
y tambien el area de texto de mi formulario
textarea {
background:#3e2102;
border: #595552;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
}
lo q pasa es esto:
en el explorer se ve perfecto no tengo ningun problema, pero en el firefox se ven los scroll con el tipico color celeste y azul, q es el predeterminado por el dreamweaver.
mi pregunta es esta:
¿existe algun tipo de parche para q mis scroll se vean en el firefox como se ven en el explorer?
6/19/2007 at 4:57 am
mismo problema..
en IE me cambia el INPUT como digo en el css…en firefox se ve el boton de default…
como puedo hacer?
6/21/2007 at 1:18 am
Sonia y Supermuka: los elementos de control HTML, especialmente los botones y selects, son difíciles de diseñar con CSS (o cualquier otra técnica) ya que, en algunos casos, están bajo el control del sistema operativo en lugar del browser. En Safari (Mac), por ejemplo, los botones de formulario son estilo Mac, sin importar el CSS que les pongamos. En IE, los selects son desplegados por Windows, antes que se despliegue el resto de la página. la idea de esto es que cada sistema tenga un estilo de controles consistentes entre una aplicación y otra, incluyendo los formularios web. Personalmente,creo que es una buena idea. Los elementos de control debieran ser lo más conencionales posibles para que el usuario no se pierda.
Dicho esto, Sonia, si quieres más control sobre los botones, en lugar de usar un Input (
<input type="submit" value="Enviar!" />, puedes usar la etiqueta “button”. Cumple la misma función que el input pero no ocupa el estilo gráfico del sistema operativo.<button id="mi-boton" type="submit">Enviar!</button>Ojo que
buttonlleva el texto como contenido, no como atributo (justamente para que lo puedas modificar con CSS, como cualquier otro texto).8/15/2007 at 5:08 am
En mi opinión modesta he de decir que los css se deben de usar para arrancar del código todo el formato de presentación y dejar nuestros archivos de páginas lo mas simple posible. Es decir optimizar nuestro código y gran parte de esto se logra con los css.