Autor

Yo mismo

Diario de Honduras - fotos de mi última gran aventura

Algunas fotos (ejemplo del tutorial Fotolog en PHP)

Artículos

W3Csites.com Mundocitas.com

Consejos, técnicas y trucos CSS

publicado el 10 de Mayo de 2005
actualizado el 13 de Mayo de 2006
Enlace permanente: http://www.marciobarrios.com/consejos-css

Con este artículo quería unir algunos conceptos básicos del diseño css con algunos trucos o técnicas que seguro que en algun momento u otro necesitaremos.

Mostrar Índice de contenidos

Siempre que tengas un error extraño en Explorer...
  1. Comprueba si es algo relacionado con la propiedad hasLayout
  2. Vete directo a Position is everything, lo más probable es que sufras un error típico de IE.

Nota: Existe un wiki en español que se dedica a traducir este listado, a ver si prospera: iebugs

Contendor de elementos flotados

Si tenemos un elemento contendor con un fondo o con bordes y dentro de éste tenemos uno o más elementos flotados sin limpiar(sin un clear) veremos que el elemento contenedor no se expande dependiendo de los floats que contiene, esto es debido a la falta de un clear, pero claro eso supone que deberíamos poner un div extra sin ningún significado estructural, para solventar este problema existen diferentes técnicas que al aplicarlas al elemento contenedor fuerzan a que éste se expanda dependiendo de los floats que contiene.

  1. Yo anteriormente usaba esta técnica, pero es incompatible con el superposicionamiento de capas que ahora está tan de moda (lightbox y derivados...), pero si no vais a superponer capas entonces es lo más sencillo:

    
html>body div.contendor{
	overflow:hidden;
}

* html div.contendor{
	height:1%;
}

div.contendor div.left {
	width: 45%;
	float: left;
}

div.contendor div.right {
	width: 45%;
	float: right;
}

    Como veis es muy sencilla, se trata de aplicar al elemento contendor un overflow:hidden en todos los navegadores excepto a IE y al IE un height:1%, simplemente tened en cuenta que al utilizar el elemento overflow tendréis problemas cuando intentéis superponer capas al estilo lightbox.

  2. Esta otra técnica está extraida de position is everything y a efectos prácticos hace lo mismo, un poco más larga y no tan intuitiva que la anterior pero almenos esta funciona en todos los casos.

    
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

    Solo hay que aplicar esta clase al elemento contendor.

Hack IE min/max-width

* html #container{
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}

Fijaos que los valores que comparamos no son exactamente los mismos, esto se debe a que si ponemos el mismo valor al redimensionar la pantalla se produce un efecto "congelado" en Explorer.

Fuente: Cameron Moll

hasLayout

Bien, ¿muchos se preguntarán qué es esto verdad? voy a intentar explicarlo lo más fácilmente posible. Este nombre tan "xic" es el nombre de una propiedad propietaria(válgase la redundancia) de Microsoft que tienen algunos elementos, puede adoptar el valor true o false y hace referencia a cómo el Explorer interpretará/dibujará/hará interaccionar/renderizará un elemento. Hay una serie de elementos que tienen activado el hasLayout por defecto pero la mayoría no, y existen una serie de reglas que permiten activar la propiedad internat hasLayout a los elementos, estas propiedades son:

  • float:left|right;
  • position: absolute
  • display: inline-block
  • width: cualquier valor
  • height: cualquier valor, generalmente se utiliza 1%
  • zoom: cualquier valor (propiedad no estándar)
  • writing-mode: tb-rl (propiedad no estándar)

Y para IE7 aparecen unas cuantas propiedades más:

  • overflow: hidden|scroll|auto
  • position: fixed
  • min-width: cualquier valor
  • max-width: cualquier valor
  • min-height: cualquier valor
  • max-height: cualquier valor

Total, ¿todo este rollo no sirve para mucho no? Yo recomiendo que cuando veáis que tenéis problemas de interpretación de CSS con Explorer en alguna regla en concreto, colocadle la propiedad height:1% (lo ideal sería colocar estas propiedades en un CSS a parte mediante comentarios condicionales de IE), y si sigue sin funcionar entonces ya podéis ir a position is everything, aunque ya os digo de antemano que os resolverá muchos problemas, parece una tontería pero os ahorrará mucho tiempo y dolores de cabeza.

Si queréis profundizar más sobre el tema leeros un artículo que habla sobre hasLayout y lo explica todo detallado.

Min-height hack

Para que funcione el min-height igual en todos los navegadores:


selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Fuente: Dustin Díaz

Elimina el borde punteado de los enlaces

con la regla outline:none aplicada a los enlaces conseguimos evitar este efecto que tanto daño hace al reemplazar imágenes (utilizando text-indent)

Colapso de margenes

Cuando los márgenes verticales de elementos de bloque con flujo normal se tocan "colapsan" entre sí, esto es algo que contempla el W3C aunque no todo el mundo está al día, es bueno saber cómo se interpretan estos márgenes para poder dominar a la perfección el posicionamiento de elementos.

Más información en la web de Andy Budd

Identa tus reglas

Para que nuestras reglas sean más legibles podemos identarlas según su profundidad, incluso yo recomiendo que se escriban todos los elementos padres para que sea más fácil su lectura.


h1{...
}
    h1 span{...
    }
        h1 span a.tal{...
        }

Más consejos de desarrollo en la web de Lokesh Dhakar.

El orden importa en las pseudoclases de los enlaces (solo en IE/Win)

Parece raro pero así es, si no colocas las pseudoclases del elemento a en un orden determinado, tendrás problemas en explorer. El orden es el siguiente: a:link, a:visited, a:hover, a:active. Acordaos de la regla LVHA. Si utilizais la pseudoclase :focus la regla cambia a LVHFA.

No utilices paddings con elementos de ancho fijo

Seguro que conocéis el famoso modelo de caja, bien pues debido a esto es recomendable no utilizar paddings en elementos con un ancho determinado, ya que deberéis utilizar algun hack para solucionarlo, y la verdad es que no hace falta, esto también pasa con los bordes, pero la realidad es que si una pagina varia de 2 píxeles por ejemplo no tiene porque descuadrarse nada. Imaginad que tenéis un div con un ancho fijo de 400px, pues si queréis que exista un espacio entre el contenido y un párrafo, en vez de colocarle un padding al div colocadle un margen al párrafo.

!important

Esta regla es muy útil sobre todo para cuando queramos colocar una hoja de estilos propia, en realidad da más prioridad sobre las otras reglas del mismo tipo, pero la realidad es que hoy por hoy !importan es ignorado por el explorer de windows (el navegador más utilizado), así que ten en cuenta esto al programar tus páginas css. Ejemplo:

#elem{ margin-top: 3.5em !important; margin-top: 2em }

Esto debería crear un margen superior de 3.5em, pero eso pasará en todos los navegadores excepto en IEWin.

Bordes redondeados en Mozilla

Esto más que una recomendación es una posibilidad (que la especificación de CSS3 ya ha contemplado), si queréis utilizar bordes redondeados mozilla tiene sus propias reglas para hacerlo (tened en cuenta que en el resto de navegadores los bordes serán cuadrados).

Reglas: -moz-border-radius-bottomleft, -moz-border-radius-botomright, -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius. Ejemplo:

#elem { moz-border-radius:10px }
Posicionar elemento en absoluto respecto a otro elemento

A veces es útil la posibilidad de posicionar elementos en absoluto pero no a la página, sino en absoluto respecto a un "contenedor". Lo único que tenemos que hacer es asignarle a ese contenedor la propiedad position:relative, y al elemento a posicionar (que tiene que estar dentro) tendrá como referencia el contenedor, así que si este elemento lo posicionamos mediante top:0 y left:0, lo posicionaremos en la esquina superior izquierda del contenedor.

Alinear verticalmente un elemento en línea

Esto que antes era tan fácil con la maquetación con tablas ahora en css no es tan fácil como parece, la propiedad vertical-align no funcionará como esperamos (a no ser que le asignemos la propiedad display:table al contenedor y utilizemos vertical-align:middle, cosa que no funciona con el explorer), así que tendremos que colocar al elemento un line-height(para navegadores estándares) y font-size(para el amigo Explorer) igual al alto del div para poder centrar verticalmente el contenido.Ejemplo:


div { 
	height: 100px; 
	border:1px solid red; 
	vertical-align:center; 
	line-height: 100px; 
	font-size:100px
}
Clases múltiples

Se pueden aplicar varias clases a un elemento, asi que imaginemos que tenemos un párrafo con margen a la izquierda y y texto centrado y otro párrafo con margen a la derecha y centrado. Creo que es más útil crear 3 clases para cada uno de los atributos que crear dos refiriéndote al párrafo 1 o al párrafo 2. Ejemplo:

en el xhtml:

<p class="marginleft centrado">este párrafo tiene margen a la izquierda y su contenido está centrado</p><p class="marginright centrado">Este párrafo tiene margen a la derecha y contenido también centrado</p>

en el css:


.marginleft{margin-left:10px} 
.centrado{text-align:center} 
.marginright{margin-right:10px}
Optimizando la CSS

Siempre es aconsejable reducir al máximo nuestro código ya que hay mucha gente que utiliza conexiones lentas o si tenemos muchas visitas ahorraremos en ancho de banda, en CSS yo personalmente recomiendo ante todo utilizar las reglas cortas (shorthands, explicadas con detalle más adelante), pero también podemos ahorrar unos bytes evitando poner el ; del la última propiedad de cada elemento o clase, intentando escribir las reglas seguidas (sin dar siempre al return) y evitando tabular, contra más grande sea nuestro CSS más ahorraremos haciendo estas pequeñas cosas.

Shorthand

Para optimizar nuestra CSS es recomendable utilizar las reglas cortas. Aquí os dejo la lista de las reglas cortas con las reglas a las que agrupan.
Nota: font-size y font-family son obligatorios en el shorthand font.

font
font-weight, font-style, font-variant, font-size, line-height, font-family
background
background-color, background-image, background-repeat, background-attachment, background-position
margin
margin-top, margin-right, margin-bottom, margin-left
padding
padding-top, padding-right, padding-bottom, padding-left
border-width
border-top-width, border-right-width, border-bottom-width, border-left-width
border-style
border-top-style, border-right-style, border-bottom-style, border-left-style
border-color
border-top-color, border-right-color, border-bottom-color, border-left-color
list-style
list-style-type, list-style-position, list-style-image
outline
outline-color, outline-style, outline-width
No mezcles contenido y presentación

Siempre que utilices elementos gráficos para decorar, es decir, que no tenga un significado semántico, utiliza CSS para mostrarlos (con la regla background), no los coloques directamente en tu XHTML, también os será útil alguna técnica para reemplazar texto por imagen.

Floats con width

Los floats sin width dan problemas de posicionamiento con Opera (versiones antiguas), además el W3C lo dice en su especificación, a los floats se les debe especificar un witdh obligatoriamente en todo tipo de elementos excepto a los elementos img, input, textarea, select y object.

Cuando tengas dudas, !valida!

Es normal que al programar CSS o XHTML tengamos dudas de muchos tipos, el validador del W3C nos puede dar las respuestas que necesitamos.

Desarrolla tu CSS para los navegadores más modernos

Contínuamente se van renovando los navegadores y no podemos quedarnos rezagados, debemos aprovechar todo el potencial de los navegadores más modernos y de CSS3, sin olvidar por desgracia a los antiguos (véase IE), pero cuando programamos nuestro CSS debemos probarlos antes de nada en las últimas versiones y después comprobarlos/ajustarlos en las más atiguas.

Evita el efecto de contenido sin estilo

Este problema se da en Internet explorer y es conocido como "Flash of Unstyled Content". Si sólo usas @import para aplicar estilos externos, más tarde o más temprano notarás ese efecto en Internet Explorer, consistente en que por un momento aparezca el contenido del HTML sin estilos. Para arreglarlo utiliza la etiqueta link para vincular tus estilos.

Al posicionar en columnas, vigila con los width

A veces los navegadores no interpretan del todo bien los porcentajes, incluso entre diferentes navegadores los pueden interpretar diferente, los errores de redondeo son causados porque cuando queremos hacer que 50% y 50% sean 100%, el resultado es 101%, lo cual hace que se descuadre nuestro layout. Trata de reducir ese 50% a 49%.

Haz las pruebas con CSS embebido; estrena con CSS importado

Si trabajas con la hoja de estilo embebida, incrustada en el fichero XHTML te evitarás problemas con el cacheo de los estilos, de tal modo que siempre se cargarán los estilos cada vez que recargues la página. Esto se recomienda especialmente cuando trabajes con equipos Apple. Pero para poner en producción el sitio web es mucho mejor cargar la hoja de estilos a través de @import o de <link> .

Utiliza bordes para hacer pruebas con la maquetación

Una regla universal como div {border: solid 1px red;}, puede jugar un papel de mucha utilidad a la hora de resolver y solucionar un problema con la maquetación del sitio web usando CSS. Añadir un borde a elementos específicos puede ayudarnos a identificar problemas de superposición de elementos y márgenes o espacios en blanco que no queremos, lo único que debemos tener en cuenta es el ancho de nuestros elementos(con elementos flotados), ya que los bordes nos añadirán dos píxeles y puede que nos rompan la estructura, simplemente réstaselos al elemento en cuestión.

Nombres de colores en CSS

Por ejemplo para depurar a mi me van genial, así fue como me aprendí la lista de los 16 nombres de colores estándar del W3C

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • yellow
No entrecomilles con comillas simples la ruta de las imágenes

Cuando establezcas una imagen de fondo no entrecomilles la ruta de la imagen. No es necesario y con IE5/Mac no se llevan bien.

Comentarios condicionales de Explorer

Siempre que debas utilizar hacks (intenta evitarlos...) o quieras utilizar reglas CSS para IE utiliza los comentarios condicionales de IE, así mantendrás este código sucio separado del código estándar. Ejemplo:

 
<!--[if IE]>
<style> 
	div.logo { margin-left: 10px; }
</style>
<![endif]-->
Ordena tus CSS

En una CSS de dimensiones considerables es imprescindible ordenar las reglas conforme algún criterio de manera que cuando quieras encontrar una regla en concreto no te cueste mucho, esto lo podemos conseguir poniendo nombres en los comentarios (/*MENU*/) como hacemos todos, pero esto tiene inconvenientes, ya que si el CSS es muy grande y utilicemos el buscador de nuestro editor para buscar "menu" seguramente encontraremos clases o ids, cuando en realidad queremos encontrar el principio del bloque donde hemos colocado las reglas para nuestro menú. Para arreglar esto os recomiendo que utilicéis algun simbolo no usual delante de la palabra como por ejemplo /*%MENU*/ asi lo encontraréis rápido. Por cierto, las divisiones de nuestro CSS las se podrian hacer de esta manera: Elementos (Modificación directa de tags), Clases genéricas (clases que centran, dan margen, etc.), Cabecera, Menu Navegacion, Cuerpo, Pie... y asi podriamos dividir nuestro CSS dependiendo del volumen de éste.

Divide y vencerás

Cuando nuestro CSS empieza a ser muy grande y tenemos problemas en buscar reglas que hemos escrito lo ideal es separar este CSS en otros más pequeños, podemos separarlo en secciones lógicas, como por ejemplo la cabecera, el contenido, tipografía, colores, formularios, etc. Luego simplemente deberemos importar (mediante la regla import) todas las CSS desde la CSS principal.

Vigila con las listas de enlaces en Internet Explorer

Cuando queramos hacer una lista de enlaces, hay veces que para más comodidad y vistosidad se coloca el atributo display:block al enlace de manera que la parte sensible del link ocupe todo el ancho del li, hasta aquí perfecto y si probamos este efecto con navegadores estándares el resultado es el que esperamos, en cambio al ver el resultado en el explorer nos daremos cuenta de que nos deja un espacio en blanco entre cada li, esto pasa porque hacemos un salto de línia entre el tag de cierre de un li y tag de obertura del siguiente, así que para solucionarlo debemos escribir la lista de esta manera.

<ul><li><a href="#">enlace1</a></li><li><a href="#">enlace2</a></li></ul>
Fondo en el body

Es bastante normal el poner fondos al body, se ve correctamente en todos los navegadores pero en el Explorer de Windows al redimensionar la página parece q un pixel se descoloca, incluso pasa sin redimensionar, es un pequeño bug sin demasiada importancia pero para tener en cuenta ya que seguramente podremos poner el mismo fondo en un div contenedor y no tendremos este problema.

Atributos a todos los elementos (selector universal)
* { margin:0; padding:0 }

Con esto conseguimos formatear todos los elementos, es muy útil con los margenes y paddings pero hay que tener cuidado porque seguro que nos llevamos una sorpresa al utilizar una lista (ul) por ejemplo, o cualquier otro elemento al que estemos acostumbrados a que tengan margen por defecto.

Centrar una web con ancho fijo

body { text-align:center }
div#estructura { 
	width:700px; 
	text-align:left; 
	margin:0 auto;
}

Así de fácil para centrar una web con un ancho fijo, el text-align:center del body sirve para el Explorer, al igual que el text-align:left de la estructura, para los navegadores estándares simplemente usamos el margin:0 auto.

CSS sólo para Explorer
* html #estructura{...}

Cuando por ejemplo ponemos * html {color:red} significa que cualquier elemento que contenga un html sera de color rojo, pero como el html es el root del documento todos los navegadores se saltarán la regla a excepción (como no) del explorer.

CSS sólo para navegadores estándares
html>#estructura {...}

Este selector de hijo nos indica que #estructura es hijo de html (¿cierto no? ;p ) y lo entienden todos los navegadores estándares. Internet Explorer no entiende este tipo de selectores.

Modelo de Caja (Modelo Tantek Celik )

div.content { 
	border:20px solid;
	padding:30px; 
	background: #ffc; 
	width:400px; 
	voice-family: "\"}\""; 
	voice-family:inherit; 
	width:300px; 
}
html>body .content { width:300px; }

IE interpreta diferente el modelo de caja, la especificación del W3C dice que el ancho se calcula en base al contenido (que por cierto es un poco ilógico), y como siempre ie hace las cosas a su manera. Con estas dos líneas voice-family: "\"}\"" y voice-family:inherit nos aprovechamos de un bug en IE5/Windows and IE5.5/Windows de manera que no lee las siguiente propiedades, de tal forma que ie tomará width:400px mientras que los naevgadores estándares tomarán width:300px. Para liarlo un poquito más Opera cuando no entiende algo no sigue leyendo así que tampoco llega a leer el width:300px pero como interpreta correctamente el modelo de caja escribimos otra regla (llamada "sea amable con opera") para que opera también tome un width:300px.
Nota: Internet Explorer 6.0 (Windows) con un doctype estricto interpreta correctamente el modelo de caja.

Alternativa más limpia al modelo de caja

Trenton Moss ( http://evolt.org/user/trenton/63174/index.html ) en un artículo( Ten CSS tricks you may not know ) muy interesante sobre trucos css (algunos de estos trucos también los trato en este artículo) nos deja este magnífico truco.

Mirad que fácil es conseguir la correcta interpretación del modelo de caja por parte de cualquier navegador (el mismo ejemplo que el anterior): 


#box{ 
	width: 300px; 
}

#box div{ 
	border: 20px; 
	padding: 30px; 
}

En el xhtml:

<div id="box"> <div> ... </div> </div>
Reemplazo de texto por imagen vía CSS

Para que el documento xhtml no pierda la estructura semántica lo ideal es que si queremos colocar una imagen como título lo hagamos desde CSS

<h1>Título</h1> 

h1 { 
	text-indent:-9999px;
	width:100px;
	height:100px;
	background: url(imagen.gif) no-repeat 
}

(Además así hacemos que los buscadores den más importancia a nuestro título)

Guión bajo para diferenciar entre navegadores(_)

Tres hechos

  • El guión bajo ("_") se permite como un identificador CSS en la especificación CSS2.1
  • Los navegadores deben ignorar las propiedades que no conocen
  • MSIE 5+ para Windows ignora el "_" al inicio de cualquier propiedad CSS

Por lo tanto, una definición CSS, como _color:red es:

  • Correcta de acuerdo a la especificación CSS 2.1. Puede que un validador de tipo 2.0 diga que está mal, pero que le vamos a hacer, es correcto
  • Ignorado por todos los browser, excepto WinIE
  • Tratado como color:red por WinIe

Es una variante del uso del slash invertido (Ej: \width ), pero es válido de acuerdo a las especificaciones de la W3C. Para tomar en cuenta, además del CSS condicional