CSS avanzadoCapítulo 1. Técnicas imprescindibles

1.1. Propiedades shorthand

1.2. La propiedad hasLayout de Internet Explorer

1.3. Limpiar floats

1.4. Elementos de la misma altura

1.5. Sombras

1.6. Transparencias

1.7. Sustitución de texto por imágenes

1.8. Sustitución de texto por Flash

1.9. Esquinas redondeadas

1.10. Rollovers y sprites

1.11. Texto

Capítulo 2. Buenas prácticas2.2. Comprobar el diseño en varios navegadores

2.3. Mejora progresiva

2.4. Depuración

2.5. Hojas de estilos

2.6. Rendimiento

2.7. Recursos imprescindibles

Capítulo 3. Selectores3.1. Selector de hijos

3.2. Selector adyacente

3.3. Selector de atributos

3.4. Pseudo-clases

3.5. Pseudo-elementos

3.6. Selectores de CSS 3

Capítulo 4. Propiedades avanzadas4.1. Propiedad white-space

4.2. Propiedad display

4.3. Propiedad outline

4.4. Propiedad quotes

4.5. Propiedad counter-reset

4.6. Propiedad counter-increment

4.7. Propiedad content

Capítulo 5. Frameworks5.1. El framework YUI

5.2. Primeros pasos con el framework YUI

5.3. Inicializando estilos con el framework YUI

5.4. Texto con el framework YUI

5.5. Layouts con el framework YUI

5.6. Otros frameworks

Capítulo 6. Técnicas avanzadas

PrintWhatYouLike on CSS avanzado http://www.printwhatyoulike.com/print?url=http://librosweb.es/css_avanzado/

1 de 2 19/11/2013 22:56

6.2. Mapas de imagen

6.3. Variables en las hojas de estilos

6.4. Estilos alternativos

6.5. Comentarios condicionales, filtros y hacks

6.6. Selector de navegador

PrintWhatYouLike on CSS avanzado http://www.printwhatyoulike.com/print?url=http://librosweb.es/css_avanzado/

2 de 2 19/11/2013 22:56

Capítulo 1. Técnicas imprescindiblesEl estándar CSS 2.1 incluye más de 100 propiedades de todo tipo para diseñar el aspecto de laspáginas HTML. No obstante, los diseños web más actuales muestran recursos gráficos que no sepueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografíaavanzada. Por ese motivo, es preciso que los diseñadores web profesionales conozcan lastécnicas imprescindibles para crear diseños web avanzados.

En las próximas secciones se muestran las siguientes técnicas imprescindibles:

• Propiedades shorthand para crear hojas de estilos concisas.

• La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos erroresde ese navegador.

• Limpiar floats, para trabajar correctamente con los elementos posicionados de forma flotante.

• Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de laspáginas.

• Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS 2.1.

• Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el diseñode las páginas.

• Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas.

• Técnicas para trabajar con el texto y la tipografía.

http://librosweb.es/css_avanzado/capitulo_1.html

1.1. Propiedades shorthandAlgunas propiedades del estándar CSS 2.1 son especiales, ya que permiten establecersimultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades sedenominan "propiedades shorthand" y todos los diseñadores web profesionales las utilizan.

La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho másconcisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia ladefinición formal de las seis propiedades shorthand disponibles en el estándar CSS 2.1.

Propiedad fontValores ( ( font-style || font-variant || font-weight )? font-size ( / line-height )? font-family )

| caption | icon | menu | message-box | small-caption | status-bar | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Permite indicar de forma directa todas las propiedades de la tipografía de untexto

Propiedad marginValores ( unidad de medida | porcentaje | auto ) {1, 4} | inherit

Se aplica a Todos los elementos salvo algunos casos especiales de elementos mostradoscomo tablas

Valor inicial -

Descripción Establece de forma directa todos los márgenes de un elemento

Propiedad paddingValores ( unidad de medida | porcentaje ){1, 4} | inherit

Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos decabeceras y grupos de pies de tabla

Valor inicial -

Descripción Establece de forma directa todos los rellenos de los elementos

http://librosweb.es/css_avanzado/capitulo_1/propiedades_shorthand.html

Propiedad borderValores ( border-width || border-color || border-style ) | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece el estilo completo de todos los bordes de los elementos

Propiedad backgroundValores ( background-color || background-image || background-repeat || background-

attachment || background-position ) | inherit

Se aplica a Todos los elementos

Valor inicial -

Descripción Establece todas las propiedades del fondo de un elemento

Propiedad list-styleValores ( list-style-type || list-style-position || list-style-image ) | inherit

Se aplica a Elementos de una lista

Valor inicial -

Descripción Propiedad que permite establecer de forma simultanea todas las opciones deuna lista

Si se considera la siguiente hoja de estilos:

p {

font-style: normal;

font-variant: small-caps;

font-weight: bold;

font-size: 1.5em;

line-height: 1.5;

font-family: Arial, sans-serif;

}

div {

margin-top: 5px;

margin-right: 10px;

http://librosweb.es/css_avanzado/capitulo_1/propiedades_shorthand.html

margin-bottom: 5px;

margin-left: 10px;

padding-top: 3px;

padding-right: 5px;

padding-bottom: 10px;

padding-left: 7px;

}

h1 {

background-color: #FFFFFF;

background-image: url("imagenes/icono.png");

background-repeat: no-repeat;

background-position: 10px 5px;

}

Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja deestilos anterior en sólo 10 líneas, manteniendo los mismos estilos:

p {

font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;

}

div {

margin: 5px 10px;

padding: 3px 5px 10px 7px;

}

h1 {

background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;

}

http://librosweb.es/css_avanzado/capitulo_1/propiedades_shorthand.html

1.2. La propiedad hasLayout de Internet ExplorerEl navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de erroresrelacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicasque aprovechan otros errores o características del navegador. Además, muchos errores sesolucionan gracias a la propiedad hasLayout de Internet Explorer.

En efecto, muchas soluciones de los errores de Internet Explorer consisten en "forzar a unelemento a que tenga un layout". El motivo es que para mostrar los elementos de una página, elnavegador Internet Explorer divide a todos los elementos en dos grupos:

• Los elementos cuyo tamaño y posición dependen de su elemento contenedor.

• Los elementos que establecen su propio tamaño y posición.

La mayoría de elementos de una página son del primer tipo, ya que sus elementos contenedores(normalmente el elemento <body>) determinan su tamaño y posición. Los elementos del segundotipo son los que Internet Explorer considera que tienen un layout.

Los elementos HTML que por defecto tienen un layout en Internet Explorer son:

• <html>, <body>

• <table>, <tr>, <th>, <td>

• <img>

• <hr>

• <input>, <button>, <select>, <textarea>, <fieldset>, <legend>

• <iframe>, <embed>, <object>, <applet>

• <marquee>

No obstante, algunas propiedades CSS provocan que el elemento tenga un layout y por tanto,activan la propiedad hasLayout. La siguiente tabla muestra todas las propiedades CSS y valoresque hacen que un elemento tenga un layout:

Propiedad Valores que activan la propiedadhasLayout Comentarios

position absolute, fixed fixed sólo en Internet Explorer7

http://librosweb.es/css_avanzado/capitulo_1/la_propiedad_haslayout_de_internet_explorer.html

Propiedad Valores que activan la propiedadhasLayout Comentarios

float left, right

display inline-block

width Cualquier valor que no sea auto

min-width Cualquier valor Sólo en Internet Explorer 7

max-width Cualquier valor Sólo en Internet Explorer 7

height Cualquier valor que no sea auto

min-height Cualquier valor Sólo en Internet Explorer 7

max-height Cualquier valor Sólo en Internet Explorer 7

zoom Cualquier valor que no sea normal

writing-

modetb-rl

overflow hidden, scroll, auto Sólo en Internet Explorer 7

Las propiedades zoom y writing-mode no se definen en ningún estándar de CSS porque sonpropietarias del navegador Internet Explorer. Si se utilizan estas dos propiedades, la hoja deestilos no pasa satisfactoriamente el proceso de validación.

Para quitar el layout a un elemento, es necesario establecer el valor por defecto de todas laspropiedades de la tabla anterior que hayan sido modificadas:

• width: auto, height: auto

• max-width: auto, min-width: auto

• position: static

• float: none

• overflow: visible

• zoom: normal

• writing-mode: lr-tb

http://librosweb.es/css_avanzado/capitulo_1/la_propiedad_haslayout_de_internet_explorer.html

Utilizando alguna de las propiedades CSS anteriores se han ideado numerosas soluciones paraforzar a que un elemento tenga un layout. Uno de los trucos más conocidos desde hace muchosaños es el famoso Holly hack (http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0) que soluciona un problema con un elemento posicionado deforma flotante aplicando la siguiente regla:

.selector {

height: 1%;

}

En el navegador Internet Explorer 6 se puede utilizar el truco del guión bajo y la propiedad height

para forzar a un elemento a que tenga layout:

.selector {

_height: 1%;

}

En Internet Explorer 7 se puede utilizar la propiedad min-height utilizando cualquier valor, inclusoel 0:

.selector {

min-height: 0;

}

Otra propiedad muy utilizada en Internet Explorer 7 es zoom, aunque no es una propiedadestándar de CSS:

.selector {

zoom: 1;

}

En las próximas secciones se presentan algunas técnicas que requieren forzar a que un elementotenga layout en Internet Explorer. Si quieres acceder a decenas de técnicas que hacen uso de lapropiedad hasLayout, puedes consultar el artículo On having layout (http://www.satzansatz.de/cssd/onhavinglayout.html). Microsoft también ha publicado un artículo llamado HasLayoutOverview (http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx) que explica lapropiedad hasLayout y sus implicaciones en el diseño de sitios web.

http://librosweb.es/css_avanzado/capitulo_1/la_propiedad_haslayout_de_internet_explorer.html

"HasLayout" OverviewAs of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For moreinformation, see Archived Content. For information, recommendations, and guidance regarding the currentversion of Internet Explorer, see IE Developer Center.

Markus MielkeMicrosoft Corporation

August 31, 2005

What is "HasLayout" and why is it important?There are several bugs in Internet Explorer that can be worked around by forcing "a layout" (an IE internal datastructure) on an element (like, dimensional bug fixes and Holly hack). Most users are not aware of theimplications of having "a layout" applied to an element. This document explains what happens when an elementhas a layout and what implications that has.

To begin with, there are two sets of elements.

1. Elements that rely on a parent element to size and arrange their contents2. Elements that are responsible for sizing and arranging their own contents

In general, elements in Internet Explorer's Dynamic HTML engine are not responsible for arranging themselves.A div or a p element may have a position within the source-order and flow of the document, but their contentsare arranged by their nearest ancestor with a layout (frequently body). These elements rely on the ancestorlayout to do all the heavy lifting of determining size and measurement information for them.

Note: The element that is responsible for sizing and positioning an element may be an ancestor, not just theelement's immediate parent.) The major benefits of each element not having its own layout are performanceand simplicity.

So what does "having a Layout" mean?• In short, having a layout means that an element is responsible for sizing and positioning itself and

possibly any child elements. (If a child element has its own layout, it sizes itself and its descendents,but the original layout positions the child.)

• Some elements have a "fixed" size or otherwise have special sizing constraints. They always havelayout—for example, buttons, images, inputs, selects, and marquee elements have always a native sizeeven if width and height are not specified.

• Sometimes elements that do not normally require layout information, like a div or a span, may haveproperties specified that force a layout to be applied in order to support the property—for example, theelement must have a layout in order to get scrollbars.

• Once a layout is applied the "hasLayout" flag is set. This property returns true if queried.Why is having a layout important?

• It constrains the element to a rectangular shape. That means content of the element cannot flowaround other boxes anymore, for example, floating elements can't impinge on elements with layoutboundaries in IE's engine.

• Elements that do have layout may establish a new block formatting context (9.4.1 in the CSS 2.1 spec)• Since layouts are an additional object with cached information, as well as participating in the sizing and

positioning algorithms, having a layout is not cheap—it causes increased memory usage and may causeperformance degradation.

• There are also auto-sizing side effects: an element with layout cannot "shrink to fit" its children, so forexample an absolute positioned box around an element with layout does not shrink to fit the layoutelement's children.

• A layout rectangle grows to the size of its content (height bug in IE 6)

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

• A lot of people have used layout to work around IE 6 bugs, particularly with relative positionedelements. However, relative positioned elements do not need a layout, and the side effects of having alayout may cause problems in this case.

Which elements always have a Layout?Broadly, any element that owns its extents and needs to maintain specific information and functionality toposition and render its contents into those extents.

• Images• Tables, TableRows, TableCells• HR• Input elements: text, button, file, select• Marquee• Framesets, Frames• Objects, applets, plugins• Absolute positioned elements• Floated elements• Inline-block elements• Filters (rotation, dropshadow, etc.)• Body (as well as HTML element in strict mode)

Which elements can get a Layout?• Block level elements with width or height specified under strict mode• Any element with width/height specified under compat mode• Elements that have the Zoom property set• Elements that are in edit mode• Elements that host to a viewlinked behavior• Layout-flow is different from parent layout flow (rtl to ltr)

Examples of Layout "Hacks"This link provides a list of known workarounds that are forcing a layout without visual changes. If you see oruse them, be aware of their implications. (Thanks to Ingo Chao and the editors for the list.)

Implications of "HasLayout"Scenario 1: Floating

Let's take a look at the following markup:

<div style="float:left; border: 2px solid red"> 123</div><span style="border: 2px solid blue">

The quick brown fox jumped over the lazy dog's back.The quick brown fox jumped over the lazy dog's back.The quick brown fox jumped over the lazy dog's back.The quick brown fox jumped over the lazy dog's back.The quick brown fox jumped over the lazy dog's back.

</span>

What do we expect?

• You notice that the text flows nicely around the left floated div, as expected.• The border is there to demonstrate the outline of the "box" around the span.

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

What happens when we apply "layout" to the span enclosing the text?

<style>.gainlayout {zoom: 1;}

</style>...<span class="gainlayout" style="border: 2px solid blue">

• The applied layout forces the span to become a rectangular box.• The text can no longer flow around the div. This is very important since it will destroy the expected

layout behavior of text (imagine you applied the Layout to a p tag).Scenario 2: Auto-sizing

<div style="position: absolute; background:red"><div>

123</div>

</div>

What do we expect?

• The first div is positioned absolutely in relationship to its containing block (in this case the viewport)and taken out of the flow.

• The red background "shrink-wraps" around "123", since the layout is determined by its parent theabsolute positioned div.

What happens if we apply "Layout" to the div enclosing the "123"?

<style>.gainlayout {zoom: 1;}

</style>

<div style="position: absolute; background:red"><div class="gainlayout">

123</div>

</div>

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

• The div now has ownership of its Layout and completely ignores any "requirements" of its parent.• We completely lost the "shrink wrap" behavior initiated by the parent. This is a side-effect you should

be aware of if you apply Layout on an element.Scenario 3: Position:relative

Now let's take a look at an example, where "hasLayout" is used to work around a bug.

<div style="position: relative; border: 2px solid blue"><div style="float:left; border: 2px solid red">

<img style="position: relative; border: 2px solid green; width:100px; height:100px"src="slider.jpg">

</div></div>

We would expect that IE would provide the following outcome.

• A collapsed blue line 4px solid (collapsed since its children are removed from the flow)• A red floated box that will contain a green bordered image

It should look like this.

In IE 6 you get a surprise.

What just has happened?

• The image, since it is positioned relative, relies on its parent layout to figure out where it should bepositioned.

• The parent layout is a left floated div, which "has Layout".• IE 6's relative positioned measurement code is very brittle (it's a bug and fixed in IE7) and its parent

layout makes a mistake in handing down measurement info to the image.• Note You also might have noticed that the blue collapsed line does not continue through the red line as

it should. This is the first draw back we will notice of "Has Layout". The floating element forms is ownlayout box and can not be impinged on by the blue div border. In this case it's an internal IE 6 bug.

Traditionally, we would try to work around this issue by forcing a layout.

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

<style>.gainlayout {zoom: 1;}

</style>

<div class="gainlayout" style="position: relative; border: 2px solid blue">

The outcome looks like this.

The good:

• Your image ends up where it should be. (The top level layout forces the correct measurements on tothe float and image.)

The bad:

• The "Layout" of the div has now unwanted side-effects.• ◦ The blue border is no longer collapsed as it should be but forms a "layout" box around the float

and image.◦ Any text that flowed around the float now will be blocked.◦ The perf hit in this scenario is minor but if you put 50 of these on a page. . .you get the point.

In this scenario, there is not much you could have done (besides maybe removing the unnecessary"position:relative" statements) We are not trying to discourage the use of "hasLayout" to work around IE 6 bugsbut just trying to explain the implications as well as other issues that you might cause by forcing it. Ideally, allthese issues should be fixed, if not in IE 7, then in future versions.

The Take-awayI've attempted to explain a little of the inner workings and side effects of the Trident "hasLayout" feature. I'velisted which elements have a built-in layout and when normal elements may get a layout. Finally, I havediscussed the implications of having a layout and gave examples of what happens to an element with layout.

Ideally, the user should not and need not know about this feature, since it is mainly used internally by IE toimplement CSS positioning. However, it has been discovered as a "cure" for some IE 6 measurement bugs. Thisfeature does not collide with the CSS specifications, since it is used internally to implement the spec (withadmittedly existing bugs). With that in mind, I wanted to cast some light on the implications of having a layout.

Additional information can be found at http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp.

AcknowledgementsI would like to thank the Web Standards Group (WaSP) for providing their support and feedback on this article.Especially, I like to thank Dean Edwards and Chris Wilson for their review. Thanks to Holly Bergevin, Ingo Chao,Bruno Fassino, John Gallant, Georg Sørtun, and Philippe Wittenbergh for the thorough discussion of this article.This article is meant to be an extension of community efforts to explain the "hasLayout" mystery with additionalinformation and clarifications. My thanks to everyone involved.

• http://www.satzansatz.de/cssd/onhavinglayout.html• www.positioniseverything.net• http://www.webmasterworld.com/forum83/6999.htm

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

Markus Mielke is a program manager on the Internet Explorer team.

http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

1.3. Limpiar floatsLa principal característica de los elementos posicionados de forma flotante mediante la propiedadfloat es que desaparecen del flujo normal del documento. De esta forma, es posible que algunoso todos los elementos flotantes se salgan de su elemento contenedor.

La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto.Como los elementos interiores están posicionados de forma flotante y el elemento contenedor nodispone de más contenidos, el resultado es el siguiente:

Figura 1.1 Los elementos posicionados de forma flotante se salen de su elemento contenedor

El código HTML y CSS del ejemplo anterior se muestra a continuación:

<div id="contenedor">

<div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis molestie turpis vitae ante.</div>

<div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla bibendum mi non lacus.</div>

</div>

#contenedor {

border: thick solid #000;

}

#izquierda {

float: left;

width: 40%;

}

#derecha {

float: right;

width: 40%;

}

http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html

La solución tradicional de este problema consiste en añadir un elemento invisible después detodos los elementos posicionados de forma flotante para forzar a que el elemento contenedortenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>.

De esta forma, si se añade un elemento <div> invisible con la propiedad clear de CSS en elejemplo anterior:

<div id="contenedor">

<div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis molestie turpis vitae ante.</div>

<div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla bibendum mi non lacus.</div>

<div style="clear: both"></div>

</div>

Ahora el elemento contenedor se visualiza correctamente porque encierra a todos sus elementos:

Figura 1.2 Solución tradicional al problema de los elementos posicionados de forma flotante

La técnica de corregir los problemas ocasionados por los elementos posicionados de formaflotante se suele denominar "limpiar los float".

Aunque añadir un elemento invisible corrige correctamente el problema, se trata de una soluciónpoco elegante e incorrecta desde el punto de vista semántico. No tiene ningún sentido añadir unelemento vacío en el código HTML, sobre todo si ese elemento se utiliza exclusivamente paracorregir el aspecto de los contenidos.

Afortunadamente, existe una solución alternativa para limpiar los float que no obliga a añadirnuevos elementos HTML y que además es elegante y muy sencilla. La solución consiste enutilizar la propiedad overflow de CSS sobre el elemento contenedor. El autor de la solución es eldiseñador Paul O'Brien (http://pmob.co.uk/) y se publicó por primera vez en el artículo SimpleClearing of Floats (http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/).

Si se modifica el código CSS anterior y se incluye la siguiente regla:

http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html

#contenedor {

border: thick solid #000;

overflow: hidden;

}

Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no esnecesario añadir ningún elemento adicional en el código HTML. Además del valor hidden,también es posible utilizar el valor auto obteniendo el mismo resultado.

Esta solución funciona correctamente en todas las versiones recientes de los navegadores,incluyendo Internet Explorer 7 y 8. No obstante, en las versiones anteriores de Internet Explorer esnecesario añadir cualquier propiedad CSS que obligue al navegador a considerar que el elementocontenedor ocupa sitio en la página.

Técnicamente, esta estrategia se conoce como forzar a que Internet Explorer active la propiedadhasLayout sobre el elemento. A continuación se muestran algunas técnicas sencillas paraconseguirlo:

/* Funciona correctamente con cualquier navegador */

#contenedor {

border: thick solid #000;

overflow: hidden;

width: 100%;

}

/* Funciona correctamente con cualquier navegador */

#contenedor {

border: thick solid #000;

overflow: hidden;

height: 1%;

}

/* La propiedad zoom no es parte del estándar CSS, por lo

que esta hoja de estilos no validaría */

#contenedor {

border: thick solid #000;

overflow: hidden;

zoom: 1;

}

/* El truco del guión bajo delante de las propiedades CSS sólo

lo interpreta correctamente la versión 6 de Internet Explorer */

#contenedor {

border: thick solid #000;

http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html

overflow: hidden;

_height: 1%;

}

De todas las soluciones anteriores, la más utilizada es la que establece la propiedad height: 1%,ya que normalmente es la que menos afecta al aspecto del elemento contenedor. Considerandotodo lo anterior, a continuación se muestra la solución definitiva para limpiar los floats, que escompatible con todos los navegadores y que hace que la hoja de estilos sea válida:

#contenedor {

border: thick solid #000;

overflow: hidden;

height: 1%;

}

#izquierda {

float: left;

width: 40%;

}

#derecha {

float: right;

width: 40%;

}

http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html

Simple Clearing ofFloatsWithout wanting to stray too deeply in Simon and Stuart’s technical CSS territory, I thought this

was worth noting.

For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that

really get to you. Clearing floated elements is a good example.

The Problem:

One of the simplest and most common layout structures involves the placing of a small, set-

width DIV — perhaps navigation, a quote or a bio — within a larger wrapping DIV that contains

the remaining content. In a markup this might be something like:

We can set the width of ‘#inner’ (let’s say ‘width:20%’), but, being a block level element, the main

content will always wrap beneath, unless we float it (either left or right). Here our classic

problem begins.

If ‘#inner’ is shorter than #outer, all is well.

However, if ‘#inner’ grows taller than it’s wrapping parent, it breaks through the bottom edge of

‘#outer’. It’s as if ‘#outer’ forgets it’s supposed to be keeping tabs on what ‘#inner’ is doing as

soon as you float it.

As we can’t always control the amount of content in these DIVs, it certainly presents a problem.

Here’s a typical example of the problem in action (http://www.sitepoint.com/examples/

clearing_floats/example1.php). (Thanks to Pixy for the neat little content-gen script).

The Solutions:

12345

<div id="outer"><div id="inner"> <h2>A Column</h2> </div><h1>Main Content</h1><p>Lorem ipsum</p>

</div>

http://www.sitepoint.com/simple-clearing-of-floats/

a) The Markup Method: The first and W3C-recommended approach is a little ugly – extra

markup. At the very end of your content, toss in a cleared element – typically something like

<br style="clear:both"/> . It’s the HTML equivalent of wedging matchsticks into your

window frame to jam a window open. This works, but ‘dirties your page’ with stuff that only

exist so it renders properly.

b) The Aslett/PIE Method: Less than 12 months ago Tony Aslett working with

PositionIsEverything.com came out with a new method (http://www.positioniseverything.net/

easyclearing.html) so diabolically clever that they had to have been sitting in a fake island

volcano, stroking a large white cat and laughing fiendishly when they thought of it.

You’ll need to read the tutorial to get the full story, but, in short, they use a little-known, rarely-

used pseudo class (:after) to place a hidden, cleared full-stop after the content. Combined with a

sprinkling of hacks, this works beautifully – but gives me a headache over my left eye when I

think about it.

c) The Ordered List Method: Last October Steve Smith from Orderlist.com published a slightly

simpler method (http://orderedlist.com/blog/articles/clearing-floats-the-fne-method/). Again,

read his tutorial to get the low-down, but in short, his method involves ‘Floating nearly

Everything’ (FnE), which naturally enough includes the outer DIV. This can have a considerable

effect on the way your design stacks and as Steve says ‘it takes a little more tweaking’ but in

general this method seems a little more robust to me.

d) That was my ‘current state of play’ until last week when SitePoint Forum’s own CSS Guru, Paul

O’Brien (http://pmob.co.uk/), nonchalantly pointed out that adding a ‘overflow:auto’ to the outer

DIV did the trick.

‘Rubbish’ I thought to myself.

Half an hour of testing later, I was amazed to find Paul was 100% correct – as this example

shows (http://www.sitepoint.com/examples/clearing_floats/example2.php). It seems that

reminding the outer DIV that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m

wrapping that thing, aren’t I?”.

This fact is so boringly simple that it’s hard to know if thousands of developers are well aware of

it, but never thought to mention it. I know I showed the example page to four CSS-savvy

SitePoint colleagues and all shock their heads, blinked slowly and said “Whaa…?” (or something

similar).

From my testing, it seems to work identically in virtually every browser. Even IE4 seems to love

it – only NS4 freaks out, and I’m not totally convinced a few hacks couldn’t get that working.

http://www.sitepoint.com/simple-clearing-of-floats/

We haven’t had time yet to thoroughly test this method under rigorous match conditions, but

so far there don’t seem to be any major drawbacks.

Certain combinations of margin and padding can force internal scrollbars. If you can’t ‘massage’

them away, we found ‘overflow:hidden’ has virtually the same effect without the scrollbars. The

only drawback of ‘hidden’ seems to be the cropping of some images if they’re placed lower in

the page.

Both issues seem very manageable.

Nice work, Paul.

http://www.sitepoint.com/simple-clearing-of-floats/

1.4. Elementos de la misma alturaHasta hace unos años, la estructura de las páginas web complejas se creaba mediante tablasHTML. Aunque esta solución presenta muchos inconvenientes, su principal ventaja es que todaslas columnas que forman la página son de la misma altura.

Normalmente, cuando se crea la estructura de una página compleja, se desea que todas lascolumnas que la forman tengan la misma altura. De hecho, cuando algunas o todas las columnastienen imágenes o colores de fondo, esta característica es imprescindible para obtener un diseñocorrecto.

Sin embargo, como el contenido de cada columna suele ser variable, no es posible determinar laaltura de la columna más alta y por tanto, no es posible hacer que todas las columnas tengan lamisma altura directamente con la propiedad height.

Cuando se utiliza una tabla para crear la estructura de la página, este problema no existe porquecada columna de la estructura se corresponde con una celda de datos de la tabla. Sin embargo,cuando se diseña la estructura de la página utilizando sólo CSS, el problema no es tan fácil desolucionar. Afortunadamente, existen varias soluciones para asegurar que dos elementos tenganla misma altura.

La primera solución es la más sencilla y la publicó el diseñador Alex Robinson en su artículo EqualHeight Columns - revisited (http://www.positioniseverything.net/articles/onetruelayout/equalheight).El truco consiste en añadir un espacio de relleno inferior (padding-bottom) muy grande a todaslas columnas y después añadirles un margen inferior negativo (margin-bottom) del mismotamaño.

#contenedor {

overflow: hidden;

}

#columna1, #columna2, #columna3 {

padding-bottom: 32767px;

margin-bottom: -32767px;

}

El valor utilizado en el espacio de relleno y en el margen inferior de las columnas debe ser tangrande como la altura esperada para la columna más alta. Para evitar quedarse corto, serecomienda utilizar valores a partir de 10.000 píxeles.

Los dos principales problemas que presenta esta solución son los siguientes:

• Se pueden producir errores al imprimir la página con el navegador Internet Explorer.

http://librosweb.es/css_avanzado/capitulo_1/elementos_de_la_misma_altura.html

• Si se utilizan enlaces de tipo ancla en cualquier columna, al pulsar sobre el enlace lascolumnas se desplazan de forma ascendente y desaparecen de la página.

Otra solución al problema de los elementos de la misma altura es la que presentó el diseñadorDan Cederholm en su célebre artículo Faux Columns (http://www.alistapart.com/articles/fauxcolumns/). Si la solución anterior consitía en engañar al navegador, esta segunda solución sebasa en engañar al ojo del usuario.

La solución de las columnas falsas consiste en establecer una imagen de fondo repetidaverticalmente en el elemento contenedor. Como el contenedor es tan alto como la columna másalta, su imagen de fondo da la sensación de que todas las columnas son de la misma altura.

Figura 1.3 Las columnas parecen de la misma altura porque el elemento contenedor muestra unaimagen de fondo repetida verticalmente

El principal inconveniente de esta técnica es que sólo se puede emplear cuando la estructura dela página es de anchura fija, es decir, cuando su diseño no es líquido y no se adapta a la anchurade la ventana del navegador.

Si el fondo de las columnas es simplemente un color y no una imagen, se puede utilizar unasolución alternativa planteada por el diseñador Douglas Livingstone en su técnica Bordered Colors(http://www.redmelon.net/tstme/3cols2/) y que se basa en el uso de las propiedades border-left

y border-right sobre la columna central de la estructura de la página. Una versión alternativa ymejorada de la técnica original se puede encontrar en Ordered Borders Layout(http://www.positioniseverything.net/ordered-borders-center.html).

Las dos soluciones planteadas hasta el momento consisten en trucos para engañar a losnavegadores y a los usuarios. A continuación se presenta la única solución técnicamente correctapara forzar a que dos elementos muestren la misma altura.

http://librosweb.es/css_avanzado/capitulo_1/elementos_de_la_misma_altura.html

La solución fue propuesta por el diseñador Roger Johansson en su artículo Equal height boxeswith CSS (http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/) y sebasa en el uso avanzado de la propiedad display de CSS.

En primer lugar, es necesario añadir un elemento adicional (<div id="contenidos">) en elcódigo HTML de la página:

<div id="contenedor">

<div id="contenidos">

<div id="columna1"></div>

<div id="columna2"></div>

<div id="columna3"></div>

</div>

</div>

A continuación, se utiliza la propiedad display de CSS para mostrar los elementos <div>

anteriores como si fueran celdas de una tabla de datos:

#contenedor {

display: table;

}

#contenidos {

display: table-row;

}

#columna1, #columna2, #columna3 {

display: table-cell;

}

Gracias a la propiedad display de CSS, cualquier elemento se puede comportar como una tabla,una fila de tabla o una celda de tabla, independientemente del tipo de elemento que se trate.

De esta forma, los elementos <div> que forman las columnas de la página en realidad secomportan como celdas de tabla, lo que permite que el navegador las muestre con la mismaaltura.

El único inconveniente de la solución anterior es que el navegador Internet Explorer 7 y susversiones anteriores no son capaces de manejar los valores más avanzados de la propiedaddisplay, por lo que en esos navegadores la página no muestra correctamente su estructura.

http://librosweb.es/css_avanzado/capitulo_1/elementos_de_la_misma_altura.html

Equal height boxes with CSSMany web designers really like the idea of being able to place two or more containers, or boxes, side byside and make them be of equal height, regardless of how much content is in each box. Many designersalso like to vertically center or bottom-align the contents of a container.

Traditionally, all that was needed to achieve that was to make each box a cell in a table row. We don’twant to use tables for layout anymore, however, so we need to find some other way. And that’s wherethe problems begin. Not because it isn’t possible to use CSS for the above effects, but because InternetExplorer doesn’t support it. So don’t blame CSS.

To prove that it’s actually very easy to create equal height columns with CSS, I’ve made a simple demo,consisting of three boxes that are displayed side by side. They all have the same height, and will adjustto the height of whichever box is tallest. The contents of one of the boxes is vertically centered.

The trick is to use the CSS properties display:table, display:table-row and

display:table-cell to make containers (in this case div elements) behave like table cells.

The basic XHTML structure looks like this:

<div class="equal"><div class="row">

<div class="one"></div><div class="two"></div><div class="three"></div>

</div></div>

Here is the CSS used to make this structure behave like a table:

.equal {display:table;

}.row {

display:table-row;}.row div {

display:table-cell;}

In the demo, I’ve used border-collapse:separate and border-spacing:10px; to add a bit of

space between the boxes. This is the equivalent of using the cellspacing attribute.

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Like I said, this does not work in Internet Explorer, but it works in all modern browsers I have testedin: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1.

More details of how CSS can be used to format tables can be found in Chapter 17 of the CSS 2specification. You may also want to take a look at Equal Columns with CSS by Gez Lemon.

Possibly related posts

• Equal height boxes with CSS, part II• Equal Columns with CSS• Full height sliding columns• Column swapping

Posted on May 30, 2004 in CSS

• Previous post: Budget Design• Next post: Non-latin Lorem Ipsum

Comments

1. May 30, 2004 by Tomas

It’s easily forgotten that CSS has great features like this one, and the :after and :before pseudo-elements, just because the most popular web browser, by a wide margin, doesn’t support them.

I can barely imagine what it would be like in a world where nobody used Internet Explorer, it’djust be Too Good To Be True.

2. June 1, 2004 by Christian Machmeier

Tomas: that’ll hopefully happen very soon.. the beauty and simplicity of CSS are too shiny “umsein Licht unter den Scheffel zu stellen” (german phrase, sorry for that. Means something like“to put its light under a bushel”). Roger: you’ve written a real cool article, can’t wait to readyour next one.

3. June 1, 2004 by Georg

I’ve been using “display: table” for a while, but it still isn’t of much use in the real worldbecause of IE. That aside, it sure will make life easier in the future.

4. August 12, 2004 by tswan

How does replicating the code of a table using div’s make this any better than just using atable? It still mixes presentation code with content, which was what css was supposed to enableus to move away from.

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

5. August 12, 2004 by Roger (Author comment)

tswan: It depends on what it is you are displaying. This method makes it possible to display thecontent in different ways without changing the markup. The demo is mostly meant as a proof ofconcept, and to show that equal height and vertical centering is possible with CSS.

6. August 12, 2004 by Vanderleun

Those who think IE is going to be going away anytime soon are in the dreamspace.

Check your logs. IE is, regretfully, going to be around for a long long time, if only throughinertia.

Not everybody using the web upgrades and modernizes browsers or operating systems orcomputers.

We’ll be dealing with IE for at least 10 years.

So the question is how do we make neat CSS numbers like this work with IE?

7. August 12, 2004 by Roger (Author comment)

Vanderleun: You’re right about IE continuing to haunt us for a long time, though this site onlyhas around 34% IE users. As for making IE do this without using a table, I don’t know. I guessif you toss in a bunch of JavaScript it’s possible that you could come up with something similar,but I doubt it’s worth it. In some situations, sending a different set of CSS rules to IE to stop itfrom breaking the whole page completely, an approach I describe in the follow-up to thisarticle, may be of use.

8. August 27, 2004 by Joe Koree

Just by surfing around in net I definitely found a very informal place with a lot of good stuff foreverybody. I will certainly visit your site again sometime. Really good work.

9. September 4, 2004 by David

There is no way any web designer who works with real clients would implement a techniquethat breaks in IE. How would one explain to the customer that “the site doesnt work for 70% ofthe users, but its their fault, not mine”.

I believe there are some ways to do inline boxes in CSS that stay equal in height, for exampleyou could use a extended faux column technique. But they wont look as neat as the one youprovided here Roger, but then again, IE support is still a must or I’ll loose my job.

10. September 4, 2004 by Roger Johansson (Author comment)

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

David: Probably not. It does depend on how badly it breaks, but I agree that this method can’treally be used in a lot of real world cases yet.

11. September 13, 2004 by Klaus

I started to use display: table-cell lately for all the more standards compliant browsers and thenuse Dynamic Properties to get IE to display things correct. The clue is, that these DynamicProperties cannot be turned off, even if all scripting is deactivated in IE!

In the above demo you don’t even need the div.row, it should work even without.

12. December 30, 2004 by Zach Blume

For the above 2 comments: Stop with the comment spamming!!

BTW, there are a few other ways, which I still cant figure out…http://www.positioniseverything.net/threecolbglong.html And I have no Idea how this onestays equal height: http://www.positioniseverything.net/piefecta-rigid.html

13. December 30, 2004 by Roger Johansson (Author comment)

Zach: Thanks for pointing out the spam. For some reason I’d missed those two comments.

The techniques you mention differ from what I describe here in that they use floats,background images, and wrapper divs. They also work in IE6, which this technique does not. Imade this demo to show how easy some things would be if it wasn’t for Internet Explorer.

Comments are disabled for this post (read why), but if you have spotted an error or have additionalinfo that you think should be in this post, feel free to contact me.

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Faux Columnsby DAN CEDERHOLM January 09, 2004

Published in CSS, Layout & Grids ∙ 83 Comments

A note from the editors:A note from the editors: While excellent for its time, this article may not reflect modern bestpractices.

One of the questions I get asked the most often regarding my personal site’s design is the

following:

How do you get the right column’s background color to extend all the way down the page?

It’s a simple concept, really — one that many of you may already be familiar with. But for those

who aren’t, the following technique can be a handy little trick.

Vertical stretch

One of the somewhat frustrating properties of CSS is the fact that elements only stretch

vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div> ,

the <div> will only expand down the page 200 pixels.

This becomes an interesting dilemma when you use <div> s to section your markup, then apply

CSS to create a columnar layout. One column may be longer than the other (see Figure 1).

Depending on the amount of content contained, it becomes difficult to create a layout with two

equally tall columns when a unique background color is desired for each column.

Figure 1

There are a few ways to make the columns appear equal in length, regardless of the content that

they contain. I’m sharing my particular solution (for use with an absolutely positioned layout),

which happens to be pretty darned ... simple. This same little trick is also used elsewhere,

including this very site.http://alistapart.com/article/fauxcolumns

The cheat

The embarrassingly simple secret is to use a vertically tiled background image to create the

illusion of colored columns. For SimpleBits, my background image looks something like Figure

2 (proportions changed for demonstration), with a decorative stripy thing on the left, a wide

white section for the content column, a 1 pixel border, and a light brown section for the right

column’s background followed by the reverse of the left side’s decorative border.

Figure 2

The whole image is no more than a few pixels tall, but when vertically tiled, it creates the

colored columns that will flow all the way down to the bottom of the page — regardless of the

length of content in the columns.

The CSS

This elementary CSS rule is added to the body element:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Essentially, we’re making the entire page’s background color grey and tiling it vertically only

( repeat-y ). The 50% 0 bit refers to the positioning of the background image — in this case,

50% from the left side of the browser window (resulting in a centered image) and 0 pixels from

the top.

Positioned columns

With the background image in place, my positioned layout sits on top, with padding and

margins set for the left and right columns, ensuring that they will line up in the right place —

within the faux columns created by the background image (see Figure 3).

http://alistapart.com/article/fauxcolumns

Figure 3>

It’s important to note that if borders, padding and margins are desired on either column, then

we must still make up for IE/Win’s botching of the box model with Tantek Çelik’s Box Model

Hack or Mid Pass Filter.

Alternatively, if borders or padding can be avoided altogether by just using margins instead,

then the the Box Model Hack will not be necessary. And if the column’s content is simply

sitting (transparently) on top of the tiled background, then it should be easy to avoid the hack.

Whatever floats your boat

While I use absolute positioning to create a two-column layout on my own site, equally fine

results can be achieved via the float property (as seen here at ALA).

The same idea applies: tile the background image, then float a column in position to overlay the

faux-column backdrop behind.

End notes

Also in Issue № 167

Elastic Design

by Patrick Griffiths

It’s a simple concept, but one that may alleviate one of the frustrations that designers

frequently encounter when building CSS-based layouts.

(Thanks to Jeffrey Zeldman for help in refining this article.)

http://alistapart.com/article/fauxcolumns

Introduction

In search of the One True LayoutPure CSS-based layouts have come a long way but they still have shortcomings [2]

that fail to address certain design goals without compromising the true separation ofcontent and presentation.

In short, the problematic design goals are these:

Total Layout FlexibilityThat is, the ability to order columns logically in the source while displaying them inany order desired. For any number of columns.

Equal Height ColumnsOr more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columnsDesigners face the choice of relying on elements being a particular height, resortingto tables or simply not bothering.

Towards a solutionThis article shows how to achieve each of these goals, and then how to combinethem, creating what could be called the One True Layout™ [3].

Problems with the Equal Height Columns methodSeveral problems have been found with the Equal Heights method, detailed inAppendix J.

Footnotes1. Miscellaneous remarks on the conventions used in this article can be found

in the final appendix.

2. Though obviously, table-based layouts have even greater shortcomings.Arguments about those shortcomings are well known and beyond the scopeof this article.?

3. To be ultra clear, there is no one true layout. I am actually referring tothe power to organise the underlying structure of your documents in ameaningful way, rather than the visual layout itself. I am not advocatingthree columns or whatever as the ultimate in design, nor am I claimingthat the particular document structure and naming conventions I've usedhere represent the final word in information architecture. Rather I'mtrying to show that such layouts do not require the kind of kludges ingeneral use that preclude other layouts. When freed from presentational-driven wrappers and non-logical ordering, a document can be styled anywhich way you like, be it as columns or frames or even just one longsausage. And when freed from the tyranny of presentational straitjackets,the structure of the document need only be considered with regard tosemantics and accessibility. And from such rich semantics flow the hooksto make applying visual design easier... As for the name, it's a feeble gagreferencing the original holy grail for CSS layouts as well as that othertimesink for nutters of a different persuasion, the one true cross. Just bethankful that I didn't write the article in full-on messianic millenial fevermode as I thought of doing. Yes, other layout techniques exist and mayeven be better for your needs - we'll get to those in the course of the

http://www.positioniseverything.net/articles/onetruelayout/index.html

article. And any mentions of trademarks are, sigh, jokes. All methodsdescribed here are released into the public domain.?

http://www.positioniseverything.net/articles/onetruelayout/index.html

Any Order ColumnsWhat?

A method for keeping columns (or more precisely, blocks of elements [2]) logicallyordered in the source while still providing the designer the ability to display them inany order whatsoever without the need for any additional non-semantic markup.

Why?

It's good for the usersBrowsers that do not make use of the CSS positioning information will present thecontent in the order that it is marked up. Consequently the ordering of content inthe source code is important as far as accessibilty [1] and assistive technologies areconcerned. [3]

It's good for youThe overriding rationale behind CSS is the separation of content and style - theremoval of non-semantic cruft and complete ordering flexibility theoretically allowsfor repurposing of content without the need for tweaking html.

Although this might be less useful for an individual's site where markup can bealtered to accomodate design changes, this is a huge win for systems based ontemplates where changing the html is either impossible or undesirable.

Furthermore it promises even greater customisability of a site for individual users.For instance, side columns could be swapped over or even placed on the the sameside (though whether this would be a good idea or not is debatable).

It's good for you and the usersSearch engine spiders/robots read web pages like this - they start at the top left,read across, and then move down. Consequently the ordering of content on a page isimportant as far as search engine algorithms are concerned. [4]

How?Through the magic of floats and (when necessary) negative margins. Each block isfloated in the following way:

1. Work out the rightmost point of any of the floated blocks that precede itin the source

2. Work out the desired leftmost point of the block

3. Subtract the rightmost point's value from the leftmost point's to give theblock's margin-left

If we want the column blocks of our layout to be the same width and ordered 2-1-3,the maths work out like this:

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

leftmost point rightmost point margin-left

Block 1 33% N/A 33 - 0 = 33%

Block 2 0% 67% (Block 1) 0 - 67 = -67%

Block 3 67% 67% (Block 1) 67 - 67 = 0%

Calculations for simple 2-1-3 ordering with respective widths, 33%, 34%and 33%

So given this HTML markup...

<div id="block_1">...

</div><div id="block_2">

...</div><div id="block_3">

...</div>

... we apply the following CSS:

#block_1{float: left;width: 34%;margin-left: 33%;}

#block_2{float: left;width: 33%;margin-left: -67%;}

#block_3{float: left;width: 33%;}

Units can be percentages if the layout is liquid, ems or pixels if fixed width. [5] [6]

Is it really that simple?Of course not. It never is, is it? This method runs head first into a peculiarity in thelayout engine of IE Win (5 and 6) - if block 1 is not the first column, it requires itsmargin-left to be divided by 2.

Investigating further, we find that the bug is triggered for any block n (where n isthe position of the block within the source code) if:

1. column positions 1 to n-1 are occupied by blocks 1 to n-1 (in any order)

2. block n occupies column position 2n or greater

Under such circumstances element n will require its margin-left to be reduced - theoverall number of columns appears to be irrelevant.

Keen readers will have noticed and been chomping at the bit to point out that thisis the dreaded IE Doubled Float-Margin Bug. Well spotted. The good news is that theusual fix works just fine.

All that is required is display: inline targeted at IE for the element in question. It'sonly the first such block in the source ordering that needs this "hand holding" andonce the fix is in, it magically sorts out any following elements which would otherwiseneed the fix.

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

So in the code example, block 1 is to appear as column 2 and triggers the bug,since its column position is equal to 2 times its source position [7]. Consequently weneed to add the following CSS:

* html #block_1{display: inline;}

→ Example of the basic Any Order technique (2-1-3 ordering) [8]

So it's very nearly that simple. Or rather it is that simple. It's actually possible tosimply set all the column elements to display: inline (as far as IE is concerned) withoutany unfortunate side effects and without any need to work out whether any of thecolumn blocks need the hand-holding or not. [9]

Wrapping things upAs things stand in the example, there's no wrapper/container element holding thecolumns together. More often than not, you're going to want or probably even needone. Most likely, if you want to apply a faux-columns style background to the columns(or utilise the techniques developed later in this article), there's the not-so trivialmatter of making sure that the container expands to fully contain the columns. Andso the simple method sketched out so far becomes a little messier again.

Over the years, several non-cruft-introducing methods have been invented to dealwith this. Unfortunately though, the overflow: hidden method causes everything to justblow up. And a bug in Firefox/Mozilla means that you can't use the simple floatedcontainer method, if, but only if, the longest column has actually been negativelyshifted. That's a pretty big if, though. Using display:table works fine for a pure anyorder solution, but I've not used it here because it runs into trouble later on.

Fortunately, the original (and still the best ;) EasyClearingTM works just fine, ifsomewhat more verbosely than the alternatives.

→ Example of the Any Order technique with containing element(2-1-3 ordering)

The method even holds up if you want to use direction: rtl. In that case you just switchright for left in the column float and margin declarations.

→ Example of the Any Order technique as a right-to-left layout

Danger, er, Alex Robinson!This method is, being a float-based method, prone to the usual float methodproblems. Because IE (both Win and Mac) violates the specs and expands elements tobe at least the width of the largest nested element, things can get funky. This meansthat unexpectedly wide images or long unbroken strings of text will cause havoc withthe layout.

NB. these problems are intrinsic to any float techniques in IE, and are not causedby the use of negativity itself, but because elements are being negatively shifted,an unexpected float wrap could cause some of those elements to be placed beyondthe left edge of the viewport. Consequently, particular care should be taken with thefollowing issues:

• italics

• the expanding box problem

• rounding errors when using ems or percentages

• quirky percentages in IE6's visual formatting mode

Other likely IE problems can be found at Position Is Everything's Explorer exposed!and Windows Explorer vs. the Standards. See also On having layout, the extremelythorough dissection of IE's layout engine quirks.

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

Where?

Works fully inIE Win 7 beta 2, IE Win 6, IE Win 5.5, IE Win 5.01, IE Mac 5, Operas 7, 8 and 9, Firefox1.5 [10] and 1.0, Netscape 8, Safari 1.03 (and up), OmniWeb 5

Doesn't work fully in

Netscapes 6 and 7

If the longest block has been negatively shifted under any circumstances (eitherdirectly or indirectly, so that it displays before any block that precedes it in thesource order), its height is ignored. Instead Netscape treats as longest the longestblock that has not been negatively shifted. This can cause any following elementsto not be cleared correctly. Apart from that massive stumbling block, it works justgreat.

Other Browsers

This technique does not work in Opera 6 or Netscape 4. As is. That's right, it's possibleto even make it work in those browsers if you really want to. That's so insane though,that I'm putting the details of how in this appendix.

Opera 5 is another matter - the blocks never become columns, stretching to fillthe width of the container and stacking up on top of each other just as if they wereregular unfloated blocks. Except that the column background colours don't show up.Well, if you must support Opera 5...

IE 4? I've got no idea. I can't get it to run on any of the Windows machines I've gotaccess to. I don't imagine that it will behave very well though. Or in IEs 2 or 3. OrNetscape 2 or 3.

When?The method is both robust and generic. It allows for proper logical source orderingwith the flexibility to layout in pretty much any manner. [11]

Alternative methodsHowever, it is certainly true that the columns can shift a pixel or two whenpercentages are used. If you can guarantee the longest column, the Ordered Absolutemethod gives more precision for percent-specified layouts.

And if you can bear a bit of javascript, Absolutely Positive, Shaun Inman's routinefor "clearing" absolutely positioned elements, offers a potentially much morepowerful method for achieving all this and more.

Tom Wright's CSS Negative Margins Algebra is another CSS-plus-negatively-margined-float approach that's more than worth a look. While perhaps not being asgeneric as this method, it does allow you to completely remove any interdependencebetween the positional CSS and the underlying semantics.

Existing methods

The original Source Ordered Columns [12] goes a long way towards satisfying the sameissues that the Any Order technique does, but it requires a semantically unnecessaryinner wrapping tag to group some of the columns together. This reliance on an innerwrapping tag also limits the number of possible column orderings. Removing theneed for the inner wrapper allows all possible orderings to be achieved (though theinner wrapper can serve other purposes. See Appendix H for the theory of possibleorderings.

Related methodsIt would be criminal not to mention Ryan Brill's Creating Liquid Layouts with NegativeMargins, Thierry Koblentz's neat riff on Ryan's original 3 columns fluid layout, DougLivingstone's CSS Columns and Position is Everything's Piefecta

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

Next (Equal Height Columns - revisited) →← Previous (Introduction)

All these methods provide a way for mixing pixel widths in liquid layouts. Avariation on the basic Any Order technique which can achieve the same results canbe found here.

Newer methodsBecause the web never sleeps...

Eric Meyer had a brainwave in the middle of a workshop and came up with Multi-Unit Any-Order Columns which does exactly what it says on the tin.

Matthew Levine went questing for a better way to mix pixel widths into liquidlayouts in In Search of the Holy Grail.

Liberté, Egalité...Now that we have the freedom to put our columns in any old order, let's move on tothat perennial CSS favourite, how to make them the same height.

Footnotes1. Tragically, the parlous state of web design and screen readers may already

have hardcoded users' expectations. See Source Order, Skip links andStructural labels for details.?

2. What do I mean by an element? Or by a tag? See Roger Johansson forenlightenment?

3. In my opinion, a CSS-based layout that orders its content just to achieve aparticular design is no better than an old skool table-based one. In fact atable-based design might (under some circumstances) be more accessiblesince current browsers can use well-established rules to intelligentlychange the display order, eg. Opera's Small-Screen Rendering for mobilesand PDAs.?

4. Though obviously this is no magic bullet substitute for actually havingrelevant content in the first place. For a more thorough explanation, readthe section entitled "Position Your Keywords" in this Search Engine Watcharticle. Some go so far as to claim that high quality markup will help boostyour rankings.?

5. If you need to mix units, head on over to the reimagining of the Holy Grailfor a solution after yet more browser pantsdom.?

6. The same principle can be worked from right to left, using float: rightinstead (simply switch right and left in the previous instructions).Moreover, left and right floats could be combined. This would have theadvantage of ensuring that the left and rightmost floated elements line upwith the edge of the wrapper div and also potentially reduce the numberof elements requiring negative margins (depending, of course, on just howmany columns are required and how they need to be ordered).?

7. Ultra keen readers will be wondering what happened to “column positions1 to n-1 are occupied by blocks 1 to n-1 (in any order)”. The answer is thatactually the "real" formula is column positions 0 to n-1 are occupied by blocks 0to n-1 (in any order) where ghost block 0 always fills ghost column slot 0. Butthat's a little confusing, isn't it??

8. Andrey Petrov wrote in to point out that this was bust in IE6 - the cause?Because it's in standards mode, IE6 works out the percentages based onthe entire body width, rather than the available space within in it. Thecure for this, which after all is just a demo, is to zap the body's marginand padding. And to set position: relative on #footer to prevent waywardpainting of its background colour.?

9. Not that things are that complex in any case. In three column layouts onlythe first block will ever need adjusting, and only if it's not to be the first

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

column. The same holds true for four column layouts with the singleexception that the second block would need adjusting instead of the firstblock if the first block was the first column and the second block was thefourth, ie. last column. However, as mentioned above, there's no harm injust applying display: inline to all the blocks and not having to botherthinking about any of this.?

10. Except for the betas and release candidate 1 of Firefox 1.5. See here fordetails. The same problem affects Camino 1.0a1.?

11. Blocks don't just have to be displayed as columns - they can be stacked oneach other or removed from the flow entirely. I ruminate more about thisin the appendix on theory. And there's no need for headers not to followthe main content either if they're not the actual content - Any VerticalOrder.?

12. For examples of the original source-ordered technique, see Five EasyCompanion Pieces, several layouts that were published simultaneouslywith Big John's essay. Sharp eyes will notice faux columns (and liquid onesat that) lurking amongst them.?

http://www.positioniseverything.net/articles/onetruelayout/anyorder.html

Equal Height Columns - revisited

Stop Press!Several problems have been found with this technique since publication. Thoseproblems are discussed in Appendix J

Huh?As an astute disciple of CSS, you are probably about to point out that there is a well-known tried and tested method for this (and as already mentioned earlier in thisarticle), the one popularised in Dan Cederholm's Faux Columns. If so, just wait - weare returning to the scene of the crime...

Who?The real credit for this technique belongs to Mark Challoner who had the crucialinsight - I have merely helped polish it to the point where you can see your boots init.

What?What it says on the tin - a method to make all columns appear to be the same height.But without the need for faux column style background images.

Why?Because equal height columns are a perfectly reasonable design goal. And the evenmore astute disciple will be nodding sagely, ruminating over the problems that flowfrom faux columns. Namely:

1. you have to change your background images any time you adjust thewidths of your columns

2. you have to do some weird and brain-hurting calculations if your design isnot a fixed-width pixel-based layout

3. you have to create background images in the first place, even if all youwant to do is apply a solid background colour (or heaven forbid, a simplegutter line)

4. you have to add an additional wrapping container div for each additionalfaux column you want

5. some layouts are quite simply impossible to achieve [1]

The most astute disciple is already one step ahead and is awaiting the pronouncementthat Faux Columns are dead. I wouldn't go that far - in fact, they probably remain theweapon of choice. However, the method about to be described certainly provides analternative that overcomes the problems above in some, if not all, circumstances.

How?The basic method works like this:

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

1. Blocks which will act as columns must be wrapped in a container element

2. Apply overflow: hidden to the container element

3. Apply padding-bottom: $big_value [2] to the column blocks, where $big_valueis a large enough value to guarantee that it's equal to or larger than thetallest column

4. Apply margin-bottom: -$big_value to the column blocks

What happens is that columns really become as tall as the content they contain plus$big_value thanks to the padding-bottom. The negative margin-bottom brings the flow ofthe document back to where the same point as where the padding-bottom began, andthe overflow: hidden on the containing element chops off the overflow[3]. Consequentlythe columns' presence on the page only appears to be the height of the containingelement and any background colour (or image for that matter) applied to the columnsdisplays for that height. Most crucially, the height of the page reflects what appearsto be on the page and does not dissappear into the scrolling distance.

Remarkably, IE Win doesn't actually need the overflow: hidden, but it causes noproblems so there is no need to hide it.

Beware though, browsers don't let you throw arbitrarily large values at them.They have limits. Exceed that limit and the columns will expand to the padding-bottom value and you'll end up wiuth some pretty long pages. Fortunately, we knowthe number of that limit (which is actually provided by Safari which is the mostconservative browser in this matter): 32767px. This should suffice for most cases(though feel free to use a smaller value) and yields us code like this:

#block_1, #block_2, #block_3{padding-bottom: 32767px;margin-bottom: -32767px;}

#wrapper{overflow: hidden;}

Now if you wanted to actually achieve a 0.5em padding-bottom on the column, thenyou'd need code like this: [4]

#block_1, #block_2, #block_3{padding-bottom: 32767px;margin-bottom: -32767px;padding-bottom: 1000em;margin-bottom: -999.5em;}

There seems to be a consensus that pixel values are usually a better bet for thistype of malarkey. So, unless you need to do something like the previous example,it's wisest to stick to pixel values - especially since an em-based value which mightseem fine at one font setting can end up breaking the browser's actual limit whenincreased.

The rough edgesOf course, it's only to be expected that things aren't quite that simple, and that we'llneed to polish things up before this is production-ready.

Safari

I'm not sure exactly which versions of Safari this effects, but the padding-bottomhas a ghost effect that, though the columns are painted correctly, links and formelements that follow the columns and that by rights should be above it, areunclickable. (Fixed as of 4 November 2005)

This problem can be overcome by setting position: relative on any of the necessaryelements. However, An unintended side-effect is that it cause such elements to

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

vanish in IE Wins, 5.01 and 5.5, so we need to prevent those browsers seeing theposition: relative.

For example, if we had an element with the id "affected_element", we would addthe following: [5]

* > #affected_element{position: relative;z-index: 1000;}

IE Mac 5

IE5 Mac gets the column heights right, but the height of the page ends up includingthe invisble padding. Whether or not you think this is acceptable is up to you, but asimple backslashed comment hack will prevent IE5 Mac from doing the whole equalheights expansion. Graceful degradation, baby...

/* Start Mac IE5 filter \*/#block_1, #block_2, #block_3

{padding-bottom: 32767px;margin-bottom: -32767px;}

/* End Mac IE5 filter */

Opera - take 1

Operas 7.0 through 7.2 don't actually chop off the extended columns at the rightplace. For sure they don't march off quite as far as the numbers would make you thinkthey would, but that's little comfort when you've got huge columns obliterating all intheir path.

Adding display: inline-block to the container element would solve this, but it wouldcause other problems to pop out from under the Opera bug carpet which are possiblyfixable, but life's just too short - the most robust solution is to add our old friendEasyClearing, and all's well again.

Apart from in IE Win 5.01, where the addition of the easy clearing causes the exactopposite to happen - ie. where before all was well, now the columns stretch off intothe distance. Because of Opera, mind. Fortunately, we can just add a float: left; and5.01 is happy again.

* html #wrapper{float: left;}

→ Example of the Equal Height Column technique (2-1-3ordering)

Opera - take 2

Opera 8 introduced a bit of a bug to its handling of overflow: hidden. So, even thoughthe easy clearing is enough to sort out the lesser Operas (though note that 7.54 worksjust fine without any "help"), we are again faced with columns that wouldn't look outof place in The Towering Inferno.

Fortunately, once more there is a fix. The large padding-bottom/negative margin-bottom routine needs to removed from the columns themselves and applied toelements within them instead.

The most obvious way to achieve this would be to set a class on the final elementin each of the columns, but that would be bad since a) you need to add the classin, and b) the class is essentially playing the same role as a clearing break element- since the class is actually a structural aid rather than saying anything about what'sactually within the element in question.

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

Better is to use the :after pseudo element which we can rely on since we'retargeting a modern browser. Rather than using padding-bottom, we use padding-topinstead, since we can't rely on visibility: hidden to hide the generated content. Becauseotherwise the generated content doesn't actually increase the height of the column,somewhat defeating its purpose.

Of course, removing the padding-bottom from the columns causes all the otherbrowsers to collapse the columns. We could hide the removal from IE Wins with achild descendant hack, but that wouldn't help Safari and Firefox. So we reach intoour box of tricks and pull out the @media query hack [6].

Here's what the addional Opera 8 code looks like:

/* Start Mac IE5 filter \*/#block_1, #block_2, #block_3

{padding-bottom: 32767px;margin-bottom: -32767px;}

/* End Mac IE5 filter */@media all and (min-width: 0px) {#block_1, *#block_2, #block_3

{padding-bottom: 0;margin-bottom: 0;}

#block_1:after, #block_2:after, #block_3:after{content: '[DO NOT LEAVE IT IS NOT REAL]';display: block;background: inherit;padding-top: 32767px;margin-bottom: -32767px;height: 0;}

}

→ Example of the Equal Height Column technique with a fix forOpera 8 (2-1-3 ordering)

Opera - take 3The good news is that the beta version of Opera 9 fixes the bug in Opera 8.Considering the relatively small proportion of Opera users and the likelihood of suchusers to upgrade often and early, it's probably OK to just leave out the Opera 8 fix.

On the other hand, if you want to figure out how to distinguish Operas 8 and 9, I'mnot going to stop you.

Where?

Stop Press!Just in case you missed the bit at the top of the page, several problems havebeen found with this technique since publication. Those problems are discussed inAppendix J

Works fully inIE Win 7 beta 2, IE Win 6, IE Win 5.5, IE Win 5.01, Operas 7, 8 and 9, Firefox 1.5 and1.0 [7], Netscape 8, Safari 1.03 (and up), (OmniWeb5.0?)

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

Next (Vertical Grids) →← Previous (Any Order Columns)

Doesn't work fully in

Netscapes 6 and 7

The longest column must not have been negatively shifted under any circumstancesotherwise we're in the same old boat of following elements not being clearedcorrectly as with the Any Order Columns method. But with an added twist. Since thecontaining element has been set to overflow: hidden, anything in the columns belowthe point that Netscape mistakenly believes is the endpoint of the columns is cut offand not displayed.

IE Mac 5

As mentioned previously, the method causes the page to expand to the "actual" heightof the columns. The choice is yours whether to accept that or to forego the equalheights in this superannuated browser, currently tottering around the edges interwebwaiting to be put out of its misery.

Operas 5 and 6

Do not understand the method at all. It is left as an exercise to the reader to figureout the necessary hacks to cope with those browsers if required.

When?This method is fairly robust, generic and nestable.

It can get a little gnarly under certain circumstances - in Operas and IE Win 5.01(see the expanded examples for details.)

Alternative methodsFaux Columns have already been discussed. Ingo Chao has a faux columnless two em-based columns with equal height.

Modern browsers hold out the promise of being able to use display:table to achievemuch the same effect. However once you have chosen that route you are stuck witha rigid table structure. There is no way you can reorder the column blocks. Moreover,browser support for positioning elements relatively or absolutely within a table cell,whether the cell actually a td, th or another element with display:table-cell) is non-existent except for some slight support in iCab 3.0. Apparently. Which puts you backto square one having to write markup that looks like a traditional table.

Breaking the gridlockNow that we have our revised mechanism for making columns the same height,it's time to turn our attention to how to position elements vertically within thosecolumns.

Footnotes1. Now I come to write this, of course I can't recall any, other than right

hand columns that are sized in ems.?

2. $big_value is a variable name, standing in for the actual value.?

3. This is why display: table is a no go for containing the floats. Safari justdoen't get on well with the combination of display: table and overflow:hidden. The end result is that the overflowing stuff simply isn't hidden.?

4. Of course, you could just as well insert another element into the block,apply the normal equal padding-bottom and negative margin-bottom to thatand just set the required padding-bottom on the outer element.?

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

5. The value of z-index doesn't have to be 1000. Depending on your designand whether you're using z-index elsewhere, you might need to use adifferent value.?

6. Currently only Operas 7.20 and up support media queries, which meansthat they work as a hack/filter. Personally I'm wary of this solution sinceit's more than likely that Safari and/or Firefox will support suchdeclarations in the not too distant future and then this will break. Thatwouldn't be necessarily be the end of the story though - we could turn tothe Fuzzy Specificity hack. Of course, it would probably be too much toexpect Opera to get fixed... The good news is that Opera 9b fixed thebug. ?

7. The presence of a relatively positioned element within any of the blockscauses weird scrolling effects when trying to select text in Firefox 1.0.This bug has been fixed in 1.5, but just so you know. Details in this [css-d]thread ?

http://www.positioniseverything.net/articles/onetruelayout/equalheight.html

Vertical GridsWhat?

A method enabling the vertical positioning of elements across grids/columns

Why?Because it's a perfectly reasonable demand that designers should be able to controlthe vertical as well as the horizontal axis.

Some may argue that designers shouldn't even have control over the horizontalaxis, but if you agree with that position what the hell are you doing reading thisarticle?

Still reading?

Get your tables onThe age old method for dealing with vertical positioning is to use tables. Stick whatneeds to be top aligned in cells in one row; what needs to be bottom-aligned goes inthe row that follows.

The good thing about the table-based way is that it works.

The bad things about the table-based way is that it forces the designer to separatelogically connected elements into an arbitrary source order dictated by the designalone. Which is bad from the semantic point of view but even worse from thepractical one, since it leads inexorably to the creation of gnarly, nested, hard-to-maintain tag soup.

It also means that bottom-aligned elements must appear below all the elementswithin the top-aligned block and not level with the last element within it as might bedesired. Or middle-aligned.

However, it does work and does so reliably which counts for a lot when it comes toweb development. It doesn't stop it being utterly dirty though.

I know how tall you areNo, not you. The elements within which I want to vertically align things.

This is the other more modern approach - as long as you know the height of thecolumn elements then you can just set position: relative on the column element andthen any elements within it just need position: absolute.

To know the height, you have to know that your content will be that height (eg.the only content in the "flow" will be images which are the same height across thecolumns - over which you then position your text and any other images) or that yourcontent will not make the element be higher than that and set the height attribute.

Which is fine so far as it goes, but as soon as you need any kind of vertical liquidity,then this approach breaks down. Which is why so many designers simply don't bother.

How?The problem with the modern approach is that it's not possible to guarantee theheight of the individual column blocks.

http://www.positioniseverything.net/articles/onetruelayout/verticalgrid.html

However, we can rely on the height of the containing element by applying anyof your favourite float clearing methods to ensure that the container element doesindeed contain the columns. After that, it's just a matter of applying position: relativeto the container element.

Now if we apply position: absolute to any element within the column blocks, it willbe vertically positioned relative to the container element.

Which gives us the ability to snap things to the bottom or middle of the grid acrossall the columns.

Of course, it also means that the element will be positioned relative to thecontainer tag horizontally as well.

This isn't a problem though if all we want to do is shift the element vertically. Aslong as we only set the element to appear at, say, bottom: 0 or top: 50%, then it willappear horizontally aligned with the column it's in. If we want to shift the elementfrom the left edge of the column, all that's needed is a suitable amount of margin-left.

The power of the rightBut what if we do want to offset the element from the column's right edge (whichtruth be told, is the most likely use for this)?

The simplest, if not the easiest, solution is to set individual right values, wherethose values are equal to 100 - the value of the rightmost point of the column. [1]

→ Example of the Vertical Grid technique (simple version with2-1-3 ordering)

A Night at the Phantom of the OperaIf you just looked at the previous example in Opera (7 or 8, forget about 6), you mighthave noticed that things are a little off.

First off, it fails to get the vertical positioning right at all if percentages are used.That's why the "L" Snaps are at the very top of the containing tag and don't start inthe middle as they ought to.

Adding float: left and an explicit width: 100% almost solves things, but not wellenough. Block 1's snap still floats to the top and none of the elements picks up on theheight: 50%. It looks like Opera is a hopeless case, and the best that can be achievedif Opera must be catered for is aligning to the absolute top or bottom using pixels orems.

Opera CrackersSecondly, the horizontal shifting works sometimes. That is sometimes it doesn't,failing to apply background colours and shifting the element less than it actuallyrequires. I can't figure out the cause of this monkey business at all (it doesn't appearto be the negative margins since it fails even more spectacularly when ordered 1-2-3)which means that there is no simple CSS fix. (And this is the case whether the layoutis percentage-, em- or pixel-based.)

Which means...

Duck Tag SoupWe need a markup fix. If we wrap the element we want positioned on the right, thatelement can be made to be the width of the column and then absolutely positionedon the right within it.

As if it's not bad enough that it's a markup fix (though since it's just an additonalwrapping tag, it's low down the scale of markup atrocities), we now run into thedifferent models that browsers use to calculate the width of nested absolutely-positioned elements. To be blunt, Opera and IE Win make it easy, but get it wrong(according to the standards, that is, but that's the only game in town).

So for Opera and IE Win all we need to do is:

http://www.positioniseverything.net/articles/onetruelayout/verticalgrid.html

.verticalalign{position: absolute;bottom: 0;width: 100%;}

.verticalalign p{position: absolute:right: 0;bottom: 0;}

NB. floating the inner element would probably do just as well in most situations

But because, Safari and Mozilla get it right, that would make the element-to-be-aligned 100% of the wrapping element. The correct value for the width in thosebrowsers is the actual width of their parent elements. So now we add:

.verticalalign{position: absolute;bottom: 0;width: 100%;}

#element_1 .verticalalign{width: 34%;}

#element_2 .verticalalign{width: 33%;}

#element_3 .verticalalign{width: 33%;}

Of course, .verticalalign is now too narrow in Opera and IE! So we plump them back upagain with a media query hack for Opera (subject to the same caveats as before), anda star html hack for IE. Hey presto!

/* hack for Opera 7+ */@media all and (min-width: 0px){.verticalalign

{width: 100% !important;}

}/* hack for IEs of all persuasions before IE7 */* html .verticalalign

{width: 100% !important;}

Opera - let's start all over againAs of the beta version of Opera 9, the position and dimensions of absolutelypositioned and fixed position elements are treated correctly when they are nestedinside each other (except for that vertical percentage thing mentioned above). Sonow the width: 100% gets applied as it should. Which screws things up big time.

As I said on the previous page, there is such a relatively small number of Operausers (who in all likelihood upgrade often and early), that it's probably OK to justleave out the Opera 8 fix.

http://www.positioniseverything.net/articles/onetruelayout/verticalgrid.html

Mind you, if you do want to figure out how to distinguish Opera 9 from previousversions, I'm really not going to stop you. Well, actually I am. You see, I've alreadygot one. CSS3 attribute selectors to the rescue!

/* hack for Opera 7+ */@media all and (min-width: 0px){.verticalalign

{width: 100% !important;}

/* But Opera 9 does it right, so CSS3 hax to the max */div[id^="wrapper"] #block_1 .verticalalign

{width: 34% !important;}

div[id^="wrapper"] #block_2 .verticalalign{width: 33% !important;}

div[id^="wrapper"] #block_3 .verticalalign{width: 33% !important;}

}

→ Example of the Vertical Grid technique (2-1-3 ordering)

Where?

Works fully inIE Win 7 beta 2, IE Win 6, IE Win 5.5, IE Win 5.01, Operas 7, 8 and 9, Firefox 1.5 and1.0, Netscape 7 and 8, Safari 1.03 (and up)

Doesn't work fully in

IE Mac 5

Pretty much works - but absolute positioning is flaky at the best of times in this tiredold workhorse

Netscape 6, Operas 5 and 6

Do not understand the method at all. It is left as an exercise to the reader to figureout the necessary hacks to cope with those browsers if required.

When?It's a bit finickity, but the technique is pretty sturdy unless you must support olderbrowsers.

You could instead reach for display:table but that results in, frankly, equivalent butless readable code than tables. And you can't then position elements absolutely withinthe table cells[2]. And even if the positioning was possible, you'd be stuck with theintial source ordering of the columns...

Of course, it should all be so much easier than this, as Eric Meyer laments in CSSGridlock.

Quest's EndThe individual pieces are in place - time to bring the holy bacon home.

http://www.positioniseverything.net/articles/onetruelayout/verticalgrid.html

Next (Putting it all together) →← Previous (Equal Height Columns -revisited)

Footnotes1. If you've forgotten what I'm talking about or came to this page directly go

back and read Any Order Columns now.?

2. Positioning elements absolutely in table-cells should work in theory, sinceposition:relative applies to any element. CSS 2.1 notes however, that thebehaviour is 'undefined for elements with display: table-*'. As PhilippeWittenbergh points out, with td {position: relative}, it does work... in iCab3.0 alone.?

http://www.positioniseverything.net/articles/onetruelayout/verticalgrid.html

Putting it all together

Back in the introduction, I made a rash claim - that I could conjure up a layout thatsatisfied:

• total layout flexibility

• equal height columns

• vertical placement of elements across grids

Now comes the magic moment. We've seen how to solve each of these problems inisolation. What happens if we just stick them all together?

Well, to cut to the chase, it works in all the browsers that the individual techniqueswork in. Except... and it almost makes me weep to say it. Except Firefox 1.0.

→ Example of the One True Layout™ (2-1-3 ordering)

Firefighting FirefoxThis time we've run into a delightful bug. If an element has position:relative andoverflow:hidden but no explicit height, then nested elements positioned absolutelywithin it vanish completely in Firefox 1.0. And until this is fixed, there is no CSSworkaround for it.

Stop Press!This bug has been fixed in Firefox 1.5. Indeed, it was fixed in the Gecko engine as ofversion 1.8b2.

It's time for another markup fix. We can't dispense with either the position:relative oroverflow:hidden, but we can remove the overflow from #wrapper and apply it to anotherelement that we put around it:

<div id="wrapper_extra"><div id="wrapper"><div id="element_1">

...<div class="verticalalign"><p>Snap 1</p></div>

</div><div id="element_2">

...<div class="verticalalign"><p>Snap 2</p></div></div><div id="element_3">

...

<div class="verticalalign"><p>Snap 3</p></div></div></div></div>

http://www.positioniseverything.net/articles/onetruelayout/combined.html

Next (Examples) →← Previous (Vertical Grids)

#wrapper_extra{position: relative;}

#wrapper{overflow: hidden;position: relative;}

This placates the mysterious Firefox bug, but causes IE to lose the plot. No matter,that's easy to fix:

* html #wrapper{position: relative;}

→ Example of the One True Layout™ with a fix for Firefox (2-1-3ordering)

Where?As previously noted, it works everywhere the individual techniques do. See AppendixB for all the gory details.

Show me the money shotWould sir care to peruse some more involved examples?

http://www.positioniseverything.net/articles/onetruelayout/combined.html

ExamplesYou'd probably feel cheated if I didn't roll out some more examples that give an ideaof how these techniques could be put into action. So without further ado: [1]

→ Interactive Demo

Add columns! Switch the order around! Turn methods on or off! Toggle units! Supportidiot browsers!

You call the shots.

→ Nested Rounded Corners

A pixel-based fixed width layout that shows just how crazy you can go repeatedlynesting the combined technique within itself.

Not only is this a layout that would be impossible to achieve with a table-based layout[2], but the source ordering is a joy compared to how you'd have to do it [3]

Of course, this version is somewhat overladen with hacks and additional markup. So,just to show how it could (nay, should and will) be, here's a slimmed down versionthat jettisons all the extraneous cruft. Of course, it only works in Safari... (andFirefox as of 1.5)

→ Boxes

http://www.positioniseverything.net/articles/onetruelayout/examples.html

A scalable em-based layout which is unremarkable other than the fact that it raisesyet more questions about Opera's positional abilities, and that it would be nigh onimpossible to achieve with Faux Columns.

→ Borders with backgrounds

A liquid percentage-based layout that is utterly unremarkable. Even Opera 8 doesn'trequire any particularly bizarre hacks.

Results for these examples can be found in Appendix C.

"Real world" examplesUnfortunately legal and intranet issues prevent me from showing you genuine workingsites using these methods. Consequently I've brewed up a couple of quick makeoversthat achieve much the same results as the orignals but using the now, all-too familartechniques.

→ Tucows design fragment

A retrofit of an existing design pattern achieved without touching the underlyingHTML.

→ BBC home page

Reimagined from the ground up as a scalable em-based layout without a table insight.

And finally...Yes, finally.

http://www.positioniseverything.net/articles/onetruelayout/examples.html

Next (Conclusion) →← Previous (Putting it all together)

Footnotes1. The makeovers aside, all these examples were made almost a year ago

and have only been retrofitted to cope with Opera 8. Now that thepositioning and overflow: hidden bugs have been fixed, the hacks to makeOpera 8 and under behave themselves trip Opera 9 up. Fortunately, waysand means exist to make things ok again, but it's probably just as sensibleto ignore older versions of Opera.?

2. Don't understand why? Go back and read the 'Why' of Vertical Grids again.?

3. Below is the table structure that would be required just to ape thebarebones of the One True Layout version. Of course, to actually go thewhole way and replicate the rounded corners and bottom alignment wouldbe that bit more complicated. And remember, any time you want toreorganise the order of the layout, you have to shuffle it all up again. Still,if you do want to go down that route, here's a load of table-basedexperiments I did way back in the day. You never know, they may come inhandy...?

Block 2 TopSource order = 2Colspan = 2

Block 1 TopSource order = 3Colspan = 2

Block 3 TopSource order = 4Colspan = 2

Block 2 BottomSource order = 6Colspan = 2

Block 1 BottomSource order = 7Colspan = 2

Block 3 BottomSource order = 8Colspan = 2

Block 6 TopSource order = 1Colspan = 2Rowspan = 3

Block 5 TopSource order = 9Colspan = 3

Block 4 TopSource order = 10Colspan = 3

Block 6 BottomSource order = 11Colspan = 2

Block 5 BottomSource order = 12Colspan = 3

Block 4 BottomSource order = 13Colspan = 3

Block 8 TopSource order = 14Colspan = 4

Block 7 TopSource order = 15Colspan = 4

Block 9 TopSource order = 5Colspan = 2Rowspan = 5

Block 8 BottomSource order = 16Colspan = 4

Block 7 BottomSource order = 17Colspan = 4

Block 9 BottomSource order = 18Colspan = 2

Schematic table illustrating complexity of recreating "Nested RoundedCorners" layout as a table

http://www.positioniseverything.net/articles/onetruelayout/examples.html

← Previous (Examples)

ConclusionThe Any Order and Vertical Grid techniques are fundamentally simple. Moreimportantly, they will carry on working for as long as browsers support CSS2.1. Allthat will change is the dropping some of the hacks which are only needed to helpthe current crop of browsers (Safari notwithstanding - and Gecko once they get thatregression bug fixed). That is, the techniques will improve over time. Why? Becausethese techniques do exactly what the specs say you can do.

On the other hand, the Equal Height technique is a kludge - despite the fact thatthe basic concept is solid and that any future browsers that are properly conformingwill support it (Or maybe not...). But it's only needed because display: table-celldoesn't allow for a) reordering the columns, or in today's mainstream browsers at anyrate, b) absolute or relative positioning.

Bits and bobsThere was a whole lot of stuff that didn't really fit in the article and has been shuntedinto appendices. Of these, the most interesting is probably the one on creating anyorder columns with liquid center and fixed-width sides. Seeing as people like thatkind of thing for some reason.

One step forward, two steps backwards...The techniques described in this article were almost completely worked out aroundChristmas 2004. Unfortunately by the time I got round to actually publish them, thebeta of Opera 8 had been released. It's only recently that I was able to spend the timeto figure out a fix for that.

And now the latest beta version of the Gecko engine is upon us and causing evenmore havoc. Well tough. This time I'm publishing. I refuse to be bowed once again bya browser's failing - especially where that failing is a reversal of previous correct CSSsupport.

and two more steps forwards...Opera 9 was released in beta the day before this article was first published. It fixesall the bugs mentioned throughout this article. And then the Mozilla team fixed thebug that screwed up the Any Order method and incorporated the fix at double quicktime on 2 November 2005. All's well that ends well.

Famous last wordsAll that's left to say, is "Rock on IE7"! [1]

... actually IE7 (as of beta 2) seems to pretty much work, though when zooming,things can go a bit awry if percentages have been used. The only tweaks needed seemto be those instances where * html has been used to hide the forcing of hasLayout onIE and where IE7 still needs it - eg. the plain vanilla vertical grids.

Footnotes1. That's sarcasm.?

http://www.positioniseverything.net/articles/onetruelayout/conclusion.html

Appendix A

AcknowledgementsWhen first working on the Any Order Columns method, I spent an entire eveningbarking up the wrong garden path trying to figure out a crack-fuelled formula thatwould cope with IE's margin shifting problems. However, as John Gallant pointed outto me, it was just the IE Doubled Float-Margin Bug. Without Big John pointing outwhat now seems hilariously obvious in hindsight, I would have abandoned the wholeexercise since my hacked-up approximations would never have done for "real world"usage. He also, as always, provided much encouragement and useful advice.

As noted in the course of the article, the Equal Height Columns method wasactually invented by Mark Challoner and posted to [css-d] in November 2004.Strangely that announcement passed by with barely a murmur. Possibly it wasbecause there were still some issues with the technique (though usually that spurs[css-d] into action). Mark and I continued to bash away at the technique until it waspolished into pretty much the form you see here. Indeed, it was Mark's crucial insightthat led me to embark on this whole mad crusade.

Thanks also to Ingo Chao, Bob Easton, Zöe Gillenwater, Eric Meyer, GunlaugSørtun, Ryan Thrash and Philippe Wittenbergh for help and comments at variousstages of this article's development.

Post-publicationMassive thanks to the Mozilla team for fixing the negatively-margined float bug inrecord time and getting the fix into Firefox 1.5.

Thanks also to: Andrey Petrov for reporting and suggesting fix for IE6 bug in basicdemo; Donna Casey for reporting the crazy text scroll problem that Firefox 1.0 haswith the Nested Rounded example and Ingo Chao for coming up with a simplifiedtest case and fix for it; Andrew Soderberg for pointing out the printing problems inIE; Bill Wallace and Chris W Parker for suggesting moving #footer's clear:both intothe core css and out of the ancillary css file; Rob Cochrane for spurring me on toadd support for direction:rtl; Philippe Wittenbergh (again) for creating copious testcases and pointing out the Opera 9 overflow:hidden behaviour change was for passingthe Acid 2 test; Ingo Chao (that man again) for half slaying the anchor problems inGeckos.

In chronological order, the following reported the problems with links to anchorswith equal height columns: Leevi Graham, Bryan Buchs, Vitaly, Xavier Guilbert, JustinWatt, Micah Wylde, Thoreau Lovell, Trevor Creech, Neil Drumm, Sebastiaan vanAchterbergh, Vince Bishop, joey3xRoadRunner, Michael Hickland, Jakub Wojtaszczyk,Eric Everman, Jennifer Hiller, Franck Bossy, Jörn Hofer, Keisuke Omi, StefanSchlachter, Jesse Scott, Christopher M Kelly, Ischa Gast and Kevin White.

http://www.positioniseverything.net/articles/onetruelayout/appendix/acknowledgements.html

Appendix B

Browser results for the methodsFor browsers which exist for different platforms, the results are the same unlessexpliclty mentioned.

Browser Any Order Equal Heights Vertical Grid Combined

IE Win 7 beta 2 pass pass fail (mild)[note]

pass

IE Win 6 pass pass pass pass

IE Win 5.5 pass pass pass pass

IE Win 5.01 pass pass pass pass

IE Mac 5.2 pass fail (mild)[note]

fail (mild)[note]

fail (mild)[note]

Firefox 1.5 pass pass pass pass

Firefox 1.0 pass pass pass pass [note]

Netscape 8.0 pass pass pass pass

Netscape 7.2,7.1, 7.0

pass [note] pass fail (mild)[note]

pass

Netscape 6.2,6.1

pass [note] pass [note] fail (severe)[note]

fail (severe)[note]

Netscape 6.0 fail (total)[note]

untested untested untested

Netscape 4.7 fail (fixable)[note]

untested untested untested

Opera 9.0(beta)

Pass Pass Pass[note] Pass

Opera 8.0, 8.5 pass pass pass pass

Opera 7.5 pass pass pass pass

Opera 7.2, 7.1,7.0

pass fail (severe)[note]

pass fail (severe)[note]

Opera 6 fail (fixable)[note]

fail [note] fail [note] fail [note]

Opera 5 fail (total)[note]

untested untested untested

Safari 2.0, 1.3,1.2, 1.03

pass pass pass pass

OmniWeb 5.0.1 pass pass pass pass

iCab 3.02beta pass pass pass pass

iCab 3.01beta pass pass fail (total)[note]

fail (total)[note]

Overview of browser behaviour

IE Win 7 beta 2

Vertical Grid Example as it stands failsSolution is to force get hasLayout applied to #wrapper, eg using

something like zoom: 1.

IE Mac 5.2

Equal Heights By not feeding IE Mac the padding- and margin-bottom values thatare behind the equal height, we get an acceptable degradation -

http://www.positioniseverything.net/articles/onetruelayout/appendix/methodresults.html

if IE Mac 5 really must be catered for, then it's nothing faux-columns suitably applied can't handleOn the other hand, if IE Mac 5 does get to see the padding- andmargin-bottom values, the failure is catascrophic as it makes thepage that height

Vertical Grid Snaps placed above wrapper div (despite being able to paintwrapper's background to the correct height)Solution is to not give IE Mac 5 the absolutely positioning for snapand to just let it take its place in the flow

Combined Now the snaps vanish entirelyThe fix is the same as the solution for snapped elements withoutequal columns

Firefox 1.0

Combined A bug when overflow: hidden and position: relative are declared on

the same element causes the unmodified markup to fail severelysince the snappers quite simply vanish#wrapper's overflow: hidden can't be removed since it's the lynchpin

that the equal heights method relies onHowever, by wrapping another div around #wrapper and movingposition: relative to it, everything is ok again.

It's annoying that this has to be done, but so far it's the onlyknown fix

Netscape 7.2, 7.1, 7.0

Any Order See article body for details

Vertical Grid Snaps placed correctly to the bottom of the wrapper div, however1em additional bottom margin sneaked into the wrapper div andso the snaps are 1em below the bottom of the longest column.But check the combined result...

Netscape 6.2, 6.1

Any Order Same caveat as for NS7

Equal Heights Some elements beneath the wrapper appear not to be able toreceive clicks - the footer is ok so there you go

Vertical Grid Snaps vanish... and where they gos, nobody knows

Combined Netscape 6.1Since the snaps fail, unsurprisingly the combination fails too - theequal height stuff still works just fine

Netscape 6.0

Any Order Columns simply stack up on top of each other

Netscape 4.7

Any Order See the appendix that deals with older browsers.

Opera 9.0 (beta)

Vertical Grid To get Opera 9 and 8 to play together at the same time requiressome mundane if verbally spectacular and verbose hackery. Ofcourse, you could just drop support for Opera 8...

Opera 7.2, 7.1, 7.0

Equal Heights Percent works just fine.Pixels and ems go haywire and extend the columns.

http://www.positioniseverything.net/articles/onetruelayout/appendix/methodresults.html

Combined Percent also stops working in just the same manner as the equalheight failure.

Opera 6

Any Order See the appendix that deals with older browsers.Additionally, the em version makes the columns too narrow forsome reason

Equal Heights There's a rendering display problem (which is probably the causefor Mark's extra content wrapper div) when the page is left andreturned to (clicking back and forward, switching to another appand back again, but not reloading the page), everything ismagically ok!

Vertical Grid Horribly messyEach Snap extends from the bottom of its column to the bottom ofthe viewport (nice job on your positioning there Opera 6).

Combined The messiness of the snap placement, and the equal heights stopworking.But because of the overflow:hidden, the extended snaps are alsosubject to the magic of the equal height's "now you see it, nowyou don't" page revisit born againness

Opera 5

Any Order Columns don't even begin to be treated as such - they just stackup vertically, ie. as usual

iCab 3.0 beta

Vertical Grid The vertically positioned elements don't show up at all.Which is very odd since the examples work in iCab just fine.

Combined Still no sign of the vertically positioned elements.

http://www.positioniseverything.net/articles/onetruelayout/appendix/methodresults.html

Appendix C

Browser results for the examplesFor browsers which exist for different platforms, the results are the same unlessexpliclty mentioned.

Browser Nested RoundedCorners

Boxes Borders

IE Win 7 beta2 Pass Pass Pass

IE Win 6.0 Pass Pass Pass [note]

IE Win 5.5 Pass Pass Pass [note]

IE Win 5.01 Fail (mild) [note] Fail (moderate)[note]

Pass (?) [note]

IE Mac 5.2 Fail [note] Fail (mild) [note] Fail (mild) [note]

Firefox 1.5 Pass [note] Pass Pass

Firefox 1.0 Pass [note] Pass [note] Pass

Netscape 8.0 Pass Pass Pass

Netscape 7.2,7.1

Pass [note] Pass Pass

Netscape 7.0 Fail (mild) [note] Fail (mild) [note] Pass

Netscape 6.2 Fail [note] Fail (moderate)[note]

Fail (severe)[note]

Opera 9.0 (beta) Pass Fail (moderate)[note]

Pass [note]

Opera 8.5, 8.0 Pass Pass [note] Pass

Opera 7.5 Pass Pass [note] Pass

Opera 7.2 Fail (mild) [note] Pass [note] Fail (mild) [note]

Opera 7.1 Fail (mild) [note] Pass [note] Fail (severe)[note]

Opera 6.0 Fail (severe) [note] Fail (severe) [note] Fail (severe)[note]

Safari 2, 1.3,1.2

Pass Pass Pass

Safari 1.0 Pass Pass Fail (mild) [note]

iCab 3.0beta pass pass pass

Overview of browser behaviour

IE Win 6.0, 5.5

Borders Bizarrely needs adjustment to cater for slight but unexplainedright-hand corner background shift

IE Win 5.01

Rounded Fails to extend all the boxes to quite the absolute heightrequired

Boxes Extends side borders to bottom of page and truncates#block_3d though not its contents. On scrolling, the extendedborders vanish which means it's probably pos: rel related

Borders Basic hacks allow nice degradation that maintains thedecorative elements while forgoing the correct stretching of

Notes on individual browser behaviour

http://www.positioniseverything.net/articles/onetruelayout/appendix/exampleresults.html

the bottom boxes. Without those hacks the columns simplyvanish, presumably due to some pos:rel thing

IE Mac 5.2

Rounded Since it can't really cope with the snaps or corners it degradespositionally well enough, apart from div 9 which wrapsunderneath - nothing to do with the wrapping container sincegiving it extra space does not help.

Boxes Degrades nicely and as expected.

Borders Degrades nicely and as expected though requiring samebackground shifting as IE Win 6.0

Firefox 1.5b1, Camino 1.0a1

All Float positioning when negative margins are around is bust inthe beta versions and release candidate 1.

Firefox 1.0

All methods Also tested and passes in Firefox 0.8 and Mozillas 1.4, 1.5 and1.6

Rounded The presence of a relatively positioned element within any ofthe blocks causes weird scrolling effects when trying to selecttext. This bug has been fixed in 1.5, but just so you know.Details in this [css-d] thread.

Netscape 7.2, 7.1

All methods Strangely enough since I really would have expected these tofail

Netscape 7.0

Rounded Bottom right corner and snap inset upwards and leftwards.Mild failure, and probably hackable for working solutions.Following a machine crash, I no longer have a copy ofNetscape 7.0 and cannot track one down, so this might nolonger be true - but who cares?

Boxes Extremely close, but bottom bg painting extends beyond theborders of the bottom-most boxes

Netscape 6.2

Rounded Much the same as Netscape 7.0

Boxes Much the same as Netscape 7.0 but not quite as close

Borders An utter mess

Opera 9.0 (beta)

Boxes Final boxes only painted as far as bottom of verticallt alignedelements leaving ghostly space above bottommost border foreach column.

Borders To get Opera 9 and 8 to play together at the same timerequires some mundane if verbally spectacular and verbosehackery. Of course, you could just drop support for Opera 8...

Opera 8.5, 8.0

Boxes Weirdness going on when setting margin and padding, alongwith ems. Gets it basically right but the leftmost column isshunted rightwards and needs explicit surgery to rectifythings - which causes reload side-effect oddness in IEs.

Opera 7.54

http://www.positioniseverything.net/articles/onetruelayout/appendix/exampleresults.html

Boxes As with Opera 8

Opera 7.23

Rounded Top left rounded corners dissappear

Boxes As with Opera 8

Borders As with Opera 8

Opera 7.10

Rounded As with Opera 7.23

Boxes Bizarre! No overlong scrolling page!

Borders Bottom boxes overly extended

Opera 6.06

Rounded Block 1 disappears, most snaps vanish, bottom corners vanishor incorrectly placed

Boxes Block 3 covers the central column (Block 1), snaps and bottomborders all over the place

Borders Block 3 covers the central column (Block 1), snaps andborders not shifted to bottom.Potentially hackable to degrade nicely à la IE Mac 5...

Safari 1.0.3

Borders Top borders not drawn correctly

http://www.positioniseverything.net/articles/onetruelayout/appendix/exampleresults.html

Appendix D

Any Order Columns - Liquidcenter, fixed-width sidesaka The Holy Grail

We should be able to take the Any Order Columns technique, apply the relevantamount of margin-left and right to the main block and then neg the side columns intoposition. Something like this:

#block_1{float: left;margin-left: 15em;margin-right: 200px;}

#block_2{float: left;margin-left: -100%;width: 15em;}

#block_3{float: left;margin-left: -200px;width: 200px;}

In theory that's great, but it only actually works in Safari. To make it work (aftera fashion) in IE, Firefox and Opera requires expressions and other odd difficult tofathom kludges.

The solution is a wrapping element. The nice thing though, is it only has to wrapthe first block. The wrapping element is 100% wide and floated. Now we can applythose left and right margins on the first block to get it into place and the negging canproceed.

→ Semi-interactive example of the Any Order technique withfluid main column and fixed width ancillary columns

Hang on a minuteSome of the different scenarios need slightly different handling - but it's still a verysimple technique.

How different? Well the quirks are:

For orderings 3-2-1 and 2-3-1

Explorer needs the central column shifted over by the width of the left column,otherwise it buts up flat on the very left. Fortunately setting position: relative and itsleft value to the width of the left column does the job.

→ Example of the Any Order technique with fluid main columnand fixed width ancillary columns (3-2-1 ordering)

→ Example of the Any Order technique with fluid main columnand fixed width ancillary columns (2-3-1 ordering)

http://www.positioniseverything.net/articles/onetruelayout/appendix/holygrail.html

For ordering 2-1-3

#block_3 needs to be floated right (in all the other cases, all the floats are in thesame direction so this is the closest there is to a gotcha) Explorer overdoes the -100%negging and just requires a negative margin that is the same as its width

→ Example of the Any Order technique with fluid main columnand fixed width ancillary columns (2-1-3 ordering)

Works in...IEs 5.01, 5.5, 6.0 on the PC, Firefox 1, Operas 8, 7 (.02 though .54), and the latestSafari.

Wheels beginning to fall off...Netscape 7.2 fails to clear the footer properly.

IE5 on the mac gets a horizontal scroll bar that extends to where the width of thepage would be if the neg-floated elements had actually floated to the right of themain column. But it does work, so it's just an unfortunate side effect as far as I'mconcerned.

Opera 6 works, apart from 1-2-3 and its mirror 3-2-1. Not that it matters ;)However, it looks as if judicious Opera hacking could overcome this.

Doesn't work in...Unsurprisingly, Opera 5 doesn't display the columns as columns at all.

Fitness for public consumptionI presume that as with the non-fixed width ancillary columns, that this technique isa) nestable, b) possible with additional columns and c) amenable to the Equal HeightColumns method.

However, because I personally have no use for this type of layout, I have not testedthese presumptions.

No wrapper - slight returnOf course, another problem with not having a wrapper element around the first block,is that, since it is floated but has no explicit width, the block will only be as wideas its content makes it. If there's not enough content to expand the block to fill theavailable space, the margin-right will not reach the right hand edge of the viewportand the rest of the positioning will be out of wack.

Now we could assume that there will always be enough content to expand thingsjust so, or we could do something like:

#block_1:after{content: '.';display: block;float: left;width: 100%;height: 0;overflow: hidden;visibility: hidden;}

Nice try, but only Opera really gets it. Safari and Mozilla prefer something along theselines:

#block_1:after{content: '. . . . . . . . . . . . . . . . . . . .

http://www.positioniseverything.net/articles/onetruelayout/appendix/holygrail.html

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . .';display: block;height: 0;overflow: hidden;visibility: hidden;}

But Opera hates it with a passion. A solution could be fashioned out of this material,but really, until browsers get their act together, the additional wrapper is just somuch less of a drag...

http://www.positioniseverything.net/articles/onetruelayout/appendix/holygrail.html

Appendix E

Any Order Columns - analternative approach

Philippe Wittenbergh suggested a possible workaround for the Gecko 1.8b2 bug - andwhat do you know, it's the basis for a whole new alternative way of doing any ordercolumns. Up to a point.

How?Each column is still floated, but we:

1. add position: relative

2. substitute left for margin-left. The value of left for block n is worked out so:

1. determine the position of the leftmost edge of the block

2. add up the widths of any block that precedes it in the source

3. subtract the total of the widths from the leftmost edge

The following CSS gives us our standard 2-1-3 ordering:

#block_1{position: relative;float: left;width: 34%;left: 33%;}

* html #block_1{display: inline;}

#block_2{position: relative;float: left;width: 33%;left: -34%;}

#block_3{position: relative;float: left;width: 33%;}

→ Interactive example of the alternative Any Order technique

Half an alternativeThis works fine in modern browsers with the equal height method, but because of theposition: relative applied to the columns, it can never be souped up to be used as theunderlying chassis for the vertical grid.

Of course, if you don't have any need for vertical grid-style positioning, then it willdo just fine.

Somewhat less of an alternativeUnfortunately it doesn't work in IE Win 5.01 or 5.5. And adding equal heights into themix makes IE Win 6 lose the plot. Moreover IE Mac 5 pays no attention to the leftdeclarations. And the same goes for Safari 1.03.

http://www.positioniseverything.net/articles/onetruelayout/appendix/anyorderalternative.html

An alternative alternativeOn the other hand it works in all Netscapes back to 6.1 (and gets round the longestcolumn problem that occurs in some of them) and all versions of Opera back to 7.0. -feed the 'original' Any Order technique to all versions of IE and you've got the best ofboth worlds. Forgive me for leaving that for someone else to implement...

Where?

Browser Any Order Equal Heights

IE Win 6 pass fail [note]

IE Win 5.5 fail [note] fail [note]

IE Win 5.01 fail [note] fail [note]

IE Mac 5.2 fail [note] fail

Firefox 1.5 pass pass

Firefox 1.0 pass pass

Netscape 8.0 pass pass

Netscape 7.2, 7.1, 7.0 pass pass

Netscape 6.2, 6.1 pass pass

Netscape 6.0 fail [note] fail

Netscape 4.7 fail [note] fail [note]

Netscape 4.04 fail [note] fail

Opera 8.0, 8.5 pass pass

Opera 7.5, 7.2, 7.1, 7.0 pass pass

Opera 6 pass fail [note]

Opera 5 fail [note] fail

Safari 2.0, 1.3 pass pass

Safari 1.03 fail [note] fail [note]

OmniWeb 5.0.1 pass pass

iCab 3.0 beta pass pass

Overview of browser behaviour for alternative method

IE Win 6.0

Equal Heights The overflow: hidden does not do its magic and the columns are

painted into the distance.

IE Win 5.5, 5.01

Any Order Shifted elements are incorrectly positioned

Equal Heights Given the problems with the any ordering, the results are notpretty

IE Mac 5.2

Any Order The left declarations are completely ignored and the columns

display in source order

Netscape 6.0

Any Order Columns simply stack up on top of each other and no backgroundcolour is painted

Netscape 4.7

Any Order Background colours not painted but the positioning is preserved.Float clearing would need additional markup cruft.

http://www.positioniseverything.net/articles/onetruelayout/appendix/anyorderalternative.html

Equal Heights Columns vanish.

Netscape 4.04

Any Order Background colours not painted and columns just stack.

Opera 6

Equal Heights There's a rendering display problem (which is more sever in theMac than the Win version) that causes the columns to be paintedoverlong. The "usual" fixes of clicking back and forward orswitching to another app and back again don't work, but scrollingup and down make's everything magically ok!

Opera 5

Any Order Background colours not painted and columns just stack.

Safari 1.03

Any Order The left declarations are completely ignored and the columns

display in source order

Equal Heights The left declarations still don't work, but the column heights are

correctly painted.

http://www.positioniseverything.net/articles/onetruelayout/appendix/anyorderalternative.html

Appendix F

Any Vertical OrderIf you can guarantee the height of elements within a block, you can, within reason,reorder them vertically.

The following example is far from definitive - not least because even the modernbrowsers can't begin to agree on how to behave. But just to give a flavoursome ideaof what's possible and to remind me (or someone else) to properly investigate and seewho's right and who's wrong [1], here goes...

→ Semi-interactive example of vertically shifting blocks

Now elements within the main content or changing lists of links would probably betoo unpredictable to monkey around with in any case (as well as there being no sanereason why you would want to), but chunks like navigation and site identity have nobusiness appearing in the source before the real content and, unless their height isthat unpredictable, could easily be catered for.

For instance, but much more realistically than the examples linked to, atheoretical element, say #site_identity, could be last in the source and still rise to thetop:

body{margin-top: 4em;}

#site_identity{position: absolute:top: 0;height: 4em;}

There are other ways this kitty could be skinned, but if you don't do something alongthese lines in this day and age, you're committing a layout crime ;)

Footnotes1. All the variations work in Safari but I suspect that it's Firefox and its

Gecko-based relations that are on the money.?

http://www.positioniseverything.net/articles/onetruelayout/appendix/anyverticalorder.html

Appendix G

Any Order Columns for olderbrowsersNetscape 4

Rather than position each float relative to the overall rightmost point has beencleared, if any element has a negative margin-left applied to it, NN4 (4.7, for sure)treats all positive margin-lefts as starting from 0.

So we just need to negatively shift one element (by the amount that would beexpected from its desired position) and then set margin-left on the other elements asif they were absolutely positioned

NN4 Normal

Block 1 25 25

Block 2 75 25

Block 3 -100 -100

Block 4 50 -50

Adjusted margin-left values for Netscape 4 - 3-1-4-2 ordering, all widths25%

Of course, NN4 doesn't understand the easy clearing method, so a non-semanticclearing element would need to introduced to force the wrapper element's height.

Though this would work, NN4's application of colours and background images tofloated and absolutely positionned elements is notoriously flaky, so maintaining thelayout structure is the most you could seriously hope to achieve.

Opera 6Suffers from something similar but different to NN4.

Once the overall rightmost point has been cleared, it works from the precedingelement's rightmost point.

Op 6 Normal

Block 1 25 25

Block 2 25 25

Block 3 -100 -100

Block 4 25 -50

Adjusted margin-left values for Opera 6 - 3-1-4-2 ordering, all widths 25%

However, if you are so foolhardy as to try and do something with this information,know this also - Opera 6 has problems when using ems and makes the columns toonarrow for some reason.

http://www.positioniseverything.net/articles/onetruelayout/appendix/olderbrowsers.html

Appendix H

Notes on theoryOn possible orderings

Since the Any Order technique does not rely on wrapping elements, the blocks can bearranged in all possible combinations. For n columns, since any block can be in theposition of any column, that number is given by the simple formula n factorial or n!

eg. for n = 5, the possible orderings = 1 x 2 x 3 x 4 x 5 = 120

With the wrapping elements (as in the original Source Ordered Columns), thingsare more constrained. For each wrapping element we essentially end up with two subcolumns - two sub-columns means two possible combinations, giving us the formula,2n-1.

eg. for n = 5, the possible orderings = 2 x 2 x 2 x 2 = 16

As you can see, as the number of columns increases, the potential number ofcombinations increases far more rapidly for the Any Order technique.

More practically, wrapping elements can be used to good effect to enable groupsof blocks to be stacked vertically within, rather than as, columns, giving yet morepotential layout flexibility.

Number of Columns Source Order Columns Any Order Columns

2 2 2

3 4 6

4 8 24

5 16 120

6 32 720

7 64 5040

8 128 40320

Possible combinations for the different methods

On faux columns and wrappersUntil enough browsers support multiple backgrounds on a single element, n-2wrapping elements are required to hold the necessary background images to createthe effect of n columns.

Unless, of course, the layout is a fixed pixel-width one, in which case a singlebackground image can be used for any number of columns.

http://www.positioniseverything.net/articles/onetruelayout/appendix/theory.html

Appendix I

Miscellaneous notesWhat's in a nameid/class?

Throughout this article and its assorted examples I use class names and ids such as#footer, #header, #block_1 and .verticalalignment. You shouldn't use identifiers like thisin the real world.

Take for example #header. What's in it? If, I'm guessing here, it actually containssite identity stuff like logos, #site-identity (or whatever you prefer) would be better.Disclaimer legalese in the "footer"? Then use someting more descriptive like #site-legal or #legal-mumbo-jumbo. Because you might want to place you site identity atthe bottom or doen the side, and then #header doesn't make any sense. It's the samereason really for not using class names like .red-bold-helvetica.

I'm using these names because this is an article with example code. In this casethey really are properly descriptive. Unless you're writing a similar article, usingsimliar names will not be so for you.

Hacks vs conditional commentsThroughout the article I use hacks to deal with IE Win - that's just the way I like to dothings. It also makes the example code here simmpler and clearer. And to be clearerstill about the intent of the code: it is example code. I do not recommend that youcut and paste it (see the remarks about class names and ids above), but rather thatyou write it yourself after understanding the principles behind the techniques.

So, feel free to use conditional comments or plain voodoo if you prefer. But pleasedon't bother telling me hacks are wrong etc...

Pixel perfectionThroughout the article, the working examples linked to are percentage-based.Consequently those examples, surprise surprise, are not pixel perfect and small gapswill occasionally (or rather, frequently) appear between the columns. One fix for sucha three column layout is to set just the backgrounds of the side columns and let thebackground of the wrapping element paint the central column.

Personally I would avoid such layouts in a real life production situation, but I feelthat it helps explain that the principles of the techniques better than using rigidpixel values. And others may not feel comfortable with grappling with the concept ofscalable em-based layouts. So precentages, it is.

"It's broken in my browser..."Yes, I know. Some of the examples have incorrect wrapping in Internet Explorer. Atsome window sizes. It's caused by a rounding error, a known problem with Explorer. Ifyou read the section Danger Alex Robinson on the Any Order Columns page you'll seeit mentioned in passing.

Try resizing your browser - you should see the column jump back and forth from itscorrect position to where you see it now. If you must use percentages, the solutionis to feed Explorer a slightly smaller value for the problematic column, say 32.9%instead than 33%. I could have done that in the examples but frankly, what with thelength of the article and wanting to concentrate on the bare minimum to demonstratethings, I chose to not include such refinements. If you go to the interactive demo,you'll see that there's a message advising about reducing values if wrapping occurs.

For obvious reasons the problem doesn't occur at all with pixel-based designs. Andmuch less frequently with em-based ones, especially since I always make the wrapperjust that little bit wider than it needs to be.

Of course, if you've found another problem with the layout, please make haste tolet me know about it.

http://www.positioniseverything.net/articles/onetruelayout/appendix/notes.html

But what about...?There are plenty of things that could have been added to this article.

At over 10000 words, though, it's already a bit of a monster and only issuesthat arise as a direct consequence of techniques discussed here are addressed.However I have tried to point the reader towards the most common problems thatthese techniques share with other approaches. If you think I've made any appallingomissions, tell me about it.

http://www.positioniseverything.net/articles/onetruelayout/appendix/notes.html

Appendix J

Problems with the Equal HeightColumns method

Several issues have been discovered since publication which, depending on yourrequirements, can cause severe problems when using the equal height technique.

1. Linking to anchors in elements within the containing block

2. Selecting and scrolling in Gecko-derived browsers

3. Printing in Internet Explorer

Linking to anchors in elements within the containingblock

Linking to an anchor in any of the columns within the element that has been setto overflow: hidden causes the content of that column to shift upwards. In IE andFirefox, that is.

→ Example of anchors in the equal height method

ie. it's not the large padding that's casuing the problem (though obviously it is thetrigger of the behaviour)

A fix for IE

→ Fix for anchor problem in IE

IEs 6 and under are easy. Simply suppress the overflow: hidden on the containingwrapper element.

IE7b thought doesn't work since overflow:visible makes the overflow of the columns,well, visible. So we use an expression instead, making the columns the height of thecolumn container.

However, there are dragons here...

1. If we use the exact height of the wrapper, things can explode on first loador, absolutely without fail, when refreshing the page using F5. We can beworked around by taking a pixel off. Then the shorter columns are stillshorter requiring the footer to be shifted up a pixel for good measure.

2. Of course, it will fail utterly if the security level is such that expressionsdon't get evaluated or at the very least annoy the hell out of users with aprompt to allow the expressions to be evaluated...

So if you don't like those dragons, you might prefer to force IE7 into Quirks mode. [1]

No cure for Cancer...or rather, there appears to be no fix for Gecko-based agents. I had thought shiftingthe padding and negative margin to the top (like for the Opera 8 fix) would sort thingsout, but once Gecko knows that the box is larger than what's displayed the anchorshifting occurs.

Half a cure for Geckos

→ Half fix for anchor problem in Gecko

Ingo Chao has come up with a solution that works as long as certain conditions aremet - the trick is to apply position:absolute to the target.

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems.html

For anchors of the form <a name="target"></a>, this presents no problems. Ifthe target element can stand being absolutely positioned, everything will be ok.Obviously though, attempts to apply the same technique to an anchor which isactually an id on an element enveloping content will result in dismal failure. And formany off-the-peg blogs and CMSes, that's probably going to be the case.

Furthermore, the parent element of the target must not have position:relativeapplied to it, which also somewhat reduces the usefullness of the technique.

What the hell is going on?Weirdly, just to add spice to the whole over-egged pudding, when used in equalheights mode, Opera 9 doesn't shift. But with the following reduced test case, it does.

Two distinct behaviours can be seen in the previous reduced testcase.Behaviour A

the content shifts within the element to reveal the triggered anchorMozilla since 1.6a, IEs 5.01 through 6 and Opera 9b

Behaviour Bnothing happensas seen in Safari, IE Mac 5, Mozilla 1.5 and earlier, and Operas pre v 9

The question is, are current Geckos, IE and Opera 9 correct in their handling of theabove example? What do the specs say?

This value indicates that the content is clipped and that no scrollinguser interface should be provided to view the content outside theclipping region.

CSS 2.1, 11.1.1 Overflow: the 'overflow' property

So does that mean that the content can be scrolled (though no interface should beprovided) which is what Firefox and IE are doing, or does it mean that no scrollingshould occur? But how would the latter jive with scrolling the content via scripting(which is surely meant to be allowed)?

Sorry. Not fair. It's a bogus question. In the words of the editor of the CSS specs, IanHickson, "The spec doesn't define what happens with anchors." So, let's play detectiveand figure out when (and hopefully why) the behaviour changed in Mozilla and Opera.

For Opera, the answer is fairly easy to track down thanks to a note in the changeslog, under the heading "Acid2 Fixes"...

Elements with overflow:hidden; can scroll to anchors within them.

...which was done presumably (remember the specs say nothing about how an agentshould handle anchors) because unless they scrolled to the anchor on the test page,nothing would show at all and so they would fail the test at the first hurdle.

Safari has taken a different route to passing the test - by making the html elementscrollable when overflow property is set to hidden, but not doing so for any otherelement.

Of course there's nothing to say which of these paths (if either) is correct. There'snothing in the Acid2 guide reference that mentions testing for such behaviour and theonly comment about the use of overflow:hidden; on the html element is:

/* page setup */html { font: 12px sans-serif;

margin: 0; padding: 0; overflow: hidden;/* hides scrollbars on viewport, see 11.1.1:3 */

The Second Acid Test

...which leads us back to that section of the CSS specs which, er, has nothing to sayabout the treatment of anchors.

So how did the test get into Acid 2? What is its purpose? Fortunately a little birdwas able to tell me that Ian Hickson was the lead in constructing the Acid2 test. So

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems.html

I asked him why it was set up that way, with the content hidden and being scrolledto, and whether this was an intentional part of the test, or it just happened that waybecause that's how Mozilla and IE handled it

Hmm. I didn't think about how anchors interacted with theoverflow:hidden text and just assumed it would work. :-)

The reason I used overflow:hidden at all was to test make one ofthe browsers implement overflow:hidden on the root element, becauseauthors were complaining it wasn't supported (I don't remember whichone any more, probably Opera). Also, I needed to have scrolling to testfixed positioning, but I didn't want to show the scrollbar.

via personal correspondence

Incredibly dull downloading of many many copies of old versions, followed up bycombing through the bug tracking system eventually gave up the point where Mozillahad begun to scroll overflow:hidden, which in turn pointed to bug 221140 which getsus towards the heart of the matter.

The basic problem here is that 'scroll' and 'auto' have never worked ontable cells, and the working group decided to make 'hidden' work like'scroll' and 'auto', so now 'hidden' doesn't work either.

Bug 221140 - 'overflow: hidden' on table cells broken, comment #4

Of course, the question of exactly what and where the working group had decided ismoot. Let's have another look at our old friend 11.1.1, the overflow:hidden definition(remembering that it says nothing about how user agents should deal with anchors):

This value indicates that the content is clipped and that no scrollinguser interface should be provided to view the content outside theclipping region.

CSS 2.1, 11.1.1 Overflow: the 'overflow' property

Previously the same section had been:

This value indicates that the content is clipped and that no scrollingmechanism should be provided to view the content outside the clippingregion; users will not have access to clipped content. The size andshape of the clipping region is specified by the 'clip' property.

CSS 2, 11.1.1 Overflow: the 'overflow' property

Do these changes to 2.1 mean that Behaviour A is correct and were they introducedfor exactly such a situation?

Prodding Ian Hickson again, I got the following explanation:

It was changed in issue 1-16, around July-September 2003. But it wasmade in response to an W3c-internal-only comment, so that won't helpyou...

... I imagine the reasoning was "to make CSS compatible with the Web",which already behaved that way.

... It was probably more "browsers won't change their behaviour tomatch the spec because doing so would break Web pages, so we'llchange the spec to match the browsers instead". (This reasoning isthe thinking behind much of the changes to CSS2.1. Pragmatism isan important factor in the development of the CSS2.1 and HTML5specifications.)

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems.html

via personal correspondence

A bit of a mess...

So to sum up, the situation is happenstance yet quasi-official. That's how IE did it, sothe W3 working group and Mozilla followed suit. And Opera followed along later topass a test that reflected that status quo.

Consequently there's nothing to say that Safari's divergent behaviour (scroll onhtml element, no scroll on any other) isn't correct. Or what the behaviour should beif a box that overflow: hidden is applied to is tall enough to show all the content withinit, but there is additional padding-bottom beneath it...

La Chatte Noire example 1

La Chatte Noire example 2

And Bug 259615 - 'overflow: hidden' elements shouldn't be scrollable by the userprobably shouldn't really be a bug. But Bug 325942 shows that some of the Mozillateam think it should.

RecommendationsSorry, I don't have any recommendations. Really. It's up to you to decide what worksfor you, just like you should decide what browsers you should support. That said:

• Use of the method in situations like the Tucows example where thetechnique is used just for a component of the page will be solid. (ie. justplace any anchors you might need before or after the columns)

• Use for whole page layouts will be solid if you can guarantee that youwon't need to use named anchors within the columns.[2]

If you can't guarantee the absence of anchors, then you're probably going to be betteroff going with faux columns or a javascript-based solution.

Of course, if Mozilla supported multiple background images this would all beirrelevant... Or if Mozilla could apply position: absolute to generated contentproperly...

Selecting and scrolling in Gecko-derived browsersDrag to select content within the longest column and keep dragging downwards - ifthe bottom of column is above the bottom of the viewport there is no problem. If it'sbelow the bottom of the viewport then it keeps scrolling, shunting the content of allthe columns upwards and very rapidly at that so that in all likelihood it just vanishes.(It is possible to scroll it back if some of the content is still visible and selectable -but that's an academic point since in reality the average user is going to be just asfoobarred as if all the content had dissapeared)

Fixed as of Firefox 1.5 and Camino 1.0, so this is basically a non-issue.

Printing in Internet ExplorerA less serious problem (unless you're being bitten by it) is that it can cause printingproblems for IE. Depending on the exact values used for padding-bottom and margin-bottom, the content in the columns can shift upwards and even disappear entirely.The answer to this problem is to suppress the negative margin-bottom (andconsequently the padding-bottom too) in a print style sheet. You shouldn't be printingthe backgrounds in any case ;)

Do not ask for whom the bell tollsSo, the end result may be that the actual usefulness of the equal heights techniqueis in exposing flaws in certain rendering engines (whether it's Safari and Opera orExplorer and Gecko that get it wrong I leave for others to decide).

Fortunately for me, it's the technique that I'm least concerned about since there'salways Faux Columns to fall back on. And even more fortunately I covered myself inthe article by saying that Faux Columns would probably remain the weapon of choice;)

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems.html

Browser Shifts on anchortrigger

Scrolls on selectdrag

Firefox 1.5 Yes No

Firefox 1.07NS 7.2

Yes Yes

IE 6 Yes No

IE 5.01 (+ 5.5 ?) Yes No

Opera 9b Yes No

Opera 8.5, 8.0, 7.54, 7.23, 7.1, 6.06,5.11

No No

Safari 2.0, 1.03 No No

iCab 3.01 No No

IE 5.23 (Mac) No No

NS 7.1, 6.23, 6.1 No No

1. Alternatively there's an equally trivial fix for IE 5.01 and 5.5. Give thecolumn wrapper a height and then set the columns to be 100% high. IE 6would obviously be the same in Quirks mode, but in Standards mode thatdoesn't work. So we'd need to use the same type of expression as for IE7instead, making the columns the height of the column container, with allthe same caveats mentioned above. along with an additonal one thatchanging the font size can cause IE6 to go screwy. Of course, I don'trecommend this over the above-mentioned method, but just so you know.There might be a situation where you can't rely on expressions and don'tmind being in Quirks mode...?

2. Incidentally, a certain celebrated ascetic mad monk, er, usability expert,has decreed use of anchors considered harmful.?

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems.html

1.5. SombrasUna de las carencias del estándar CSS 2.1 más demandadas por los diseñadores es la posibilidadde mostrar sombras tipo "drop shadow" sobre cualquier elemento de la página. Por este motivo, lafutura versión CSS 3 incluirá una propiedad llamada box-shadow para crear este tipo de sombras.

A continuación se muestra la regla CSS 3 necesaria para crear una sombra gris muy difuminada yque se visualice en la esquina inferior derecha de un elemento:

.elemento {

box-shadow: 2px 2px 5px #999;

}

Desafortunadamente, esta propiedad sólo está disponible en los navegadores que más sepreocupan por los estándares. El navegador Safari 3 incluye la propiedad con el nombre -webkit-

box-shadow y Firefox 3.1 la incluye con el nombre -moz-box-shadow.

La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador detrabajo del módulo de fondos y bordes de CSS3 (http://dev.w3.org/csswg/css3-background/#the-box-shadow). A continuación se muestra su sintaxis simplificada habitual:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

• La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si elvalor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza haciala izquierda.

• La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra.Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza haciaarriba.

• La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuantomás grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombrase muestra como un color sólido.

• La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Sise establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza unvalor negativo, la sombra se comprime.

• El color indicado es directamente el color de la sombra que se muestra.

La siguiente regla CSS muestra una sombra en los navegadores Firefox y Safari:

.elemento {

-webkit-box-shadow: 2px 2px 5px #999;

http://librosweb.es/css_avanzado/capitulo_1/sombras.html

-moz-box-shadow: 2px 2px 5px #999;

}

Por su parte, el navegador Internet Explorer dispone de su propio mecanismo para crear sombras.La solución se basa en el uso de los filtros, un mecanismo que no forma parte del estándar deCSS y que permiten aplicar operaciones complejas a los elementos de la página. Entre los filtrosde Internet Explorer (http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx), seencuentra el filtro shadow (http://msdn.microsoft.com/en-us/library/ms533086(VS.85).aspx), quepermite mostrar una sombra en un elemento de la página.

Las opciones del filtro shadow son mucho más limitadas que las de la propiedad box-shadow. Susintaxis es la habitual de los filtros de Internet Explorer y las opciones son:

• color, establecido mediante el formato hexadecimal (ejemplo: #CC0000).

• direction, dirección hacia la que se desplaza la sombra. Su valor se indica en grados y sólose permiten los valores 0, 45, 90, 135, 180, 225, 270 y 315.

• strength, distancia en píxeles hasta la que se extiende la sombra.

A continuación se modifica la regla CSS anterior para incluir el filtro de Internet Explorer quemuestra una sombra similar:

.elemento {

-webkit-box-shadow: 2px 2px 5px #999;

-moz-box-shadow: 2px 2px 5px #999;

filter: shadow(color=#999999, direction=135, strength=2);

}

Lamentablemente, hasta que todos los navegadores más utilizados no incluyan la propiedad box-

shadow, la única forma de mostrar una sombra sobre un elemento de la página consiste en utilizarimágenes que simulan una sombra.

A continuación se detallan los pasos necesarios para mostrar una sombra sencilla sobre unaimagen:

1. Se crea una imagen del mismo tamaño que la imagen original y cuyo aspecto sea el de lasombra que se quiere mostrar.

2. Se añade un espacio de relleno a la imagen original en la posición en la que se quieremostrar la sombra. Si por ejemplo se quiere mostrar una sombra en la esquina inferiorderecha, se añade padding-right y padding-bottom.

http://librosweb.es/css_avanzado/capitulo_1/sombras.html

3. Utilizando la propiedad background, se añade la imagen de la sombra como imagen de fondode la imagen original. La imagen de fondo se coloca en la posición en la que se quieremostrar la sombra. En el caso de la sombra inferior derecha, la posición de la imagen defondo es bottom right.

La siguiente imagen muestra el resultado final y las imágenes utilizadas en el proceso:

Figura 1.4 Aplicando una sombra a una imagen

El código CSS necesario para conseguir este efecto se muestra a continuación:

img {

background: url("imagenes/sombra.png") no-repeat bottom right;

padding-right: 10px;

padding-bottom: 10px;

}

El principal inconveniente de esta técnica sencilla es que se deben crear tantas imágenes desombra como tamaños diferentes de imágenes haya en el sitio web. La solución a este problemaconsiste en crear una imagen de sombra muy grande y aplicarla a todas las imágenes. Esta nuevasombra debe tener un tamaño al menos tan grande como la imagen más grande que se vaya autilizar.

El problema de utilizar una imagen de sombra muy grande es que los bordes de la sombra noquedan tan bien como cuando se utiliza una imagen de sombra del mismo tamaño que la imagenoriginal:

Figura 1.5 Las imágenes de sombra muy grande producen bordes más feos

http://librosweb.es/css_avanzado/capitulo_1/sombras.html

La solución completa para crear sombras de cualquier tamaño y con bordes correctos implica eluso de más imágenes. Los siguientes recursos muestran cómo crear ese tipo de sombras:

• Shadowed Image (http://www.cssdesignpatterns.com/Chapter%2014%20-%20IMAGES/Shadowed%20Image/example.html): utiliza tres imágenes y tres elementos <div> para cadaimagen.

• CSS Drop Shadows II: Fuzzy Shadows (http://www.alistapart.com/articles/cssdrop2/): utilizados imágenes y dos elementos <div> para cada imagen.

• My contribution to the CSS shadow kerfuffle (http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html): el resultado es idéntico al obtenido mediante eldrop shadow de Photoshop, pero requiere cinco imágenes y cinco elementos <div> paracada imagen.

Si se quiere mostrar una sombra sobre elementos que no sea imágenes, la solución consiste enencerrar los contenidos con dos elementos <div> y aplicar la imagen de sombra sobre el primerode ellos:

#sombra {

background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;

padding-right: 15px;

padding-bottom: 15px;

width: 200px;

}

#sombra div {

background: #FFF;

width: 200px;

}

<div id="sombra">

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut diam metus,

venenatis ullamcorper, consequat sit amet, volutpat at, nulla. Nulla

sollicitudin metus.</div>

</div>

Las soluciones basadas en imágenes tienen la ventaja de que funcionan correctamente encualquier navegador. Sin embargo, complican innecesariamente el código HTML de la página ytienen limitaciones como la de tener que crear una nueva imagen cada vez que se quiere cambiarel color de la sombra.

http://librosweb.es/css_avanzado/capitulo_1/sombras.html

1.6. TransparenciasEl estándar de CSS 2.1 no incluye ninguna propiedad para controlar la opacidad de los elementosde la página. Sin embargo, la futura versión CSS 3 incluye una propiedad llamada opacity,definida en el módulo de colores de CSS 3 (http://www.w3.org/TR/css3-color/) y que permiteincluir transparencias en el diseño de la página.

A pesar de que falta mucho tiempo hasta que se publique la versión definitiva del estándar CSS 3,los navegadores que más se esfuerzan en cumplir los estándares (Firefox, Safari y Opera) yaincluyen la propiedad opacity en sus últimas versiones.

El valor de la propiedad opacity se establece mediante un número decimal comprendido entre0.0 y 1.0. La interpretación del valor numérico es tal que el valor 0.0 es la máxima transparencia(el elemento es invisible) y el valor 1.0 se corresponde con la máxima opacidad (el elemento escompletamente visible). De esta forma, el valor 0.5 corresponde a un elemento semitransparentey así sucesivamente.

En el siguiente ejemplo, se establece la propiedad opacity con un valor de 0.5 para conseguiruna transparencia del 50% sobre dos de los elementos <div>:

#segundo, #tercero {

opacity: 0.5;

}

#primero {

background-color: blue;

}

#segundo {

background-color: red;

}

#tercero {

background-color: green;

}

Si se visualiza el ejemplo anterior en el navegador Firefox, Safari u Opera, los elementos <div>

rojo y verde aparecen semitransparentes, tal y como se muestra en la siguiente imagen:

http://librosweb.es/css_avanzado/capitulo_1/transparencias.html

Figura 1.6 Creando elementos semitransparentes con la propiedad opacity

Desafortunadamente, la solución anterior no funciona en el navegador Internet Explorer 7 y susversiones anteriores porque no soportan la propiedad opacity. No obstante, el navegador InternetExplorer incluye un mecanismo llamado filtros, que no forman parte de ningún estándar de CSSpero que permiten solucionar esta limitación.

Los filtros permiten aplicar operaciones complejas a los elementos de la página. Los filtros deInternet Explorer (http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx) se dividen enestáticos y de transición. Los filtros estáticos (http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx) se utilizan básicamente para crear efectos gráficos sobre los elementos,normalmente imágenes. Entre los filtros estáticos se encuentra el filtro alpha(http://msdn.microsoft.com/en-us/library/ms532967.aspx), que permite controlar la opacidad de unelemento de la página.

La sintaxis completa del filtro alpha es muy compleja porque sus posibilidades son numerosas. Noobstante, la sintaxis necesaria para establecer solamente el nivel de transparencia de un elementoes muy sencilla:

#segundo, #tercero {

filter: alpha(opacity=50);

}

El valor de la opción opacity del filtro alpha se establece mediante un número enterocomprendido entre 0 (el elemento es invisible) y 100 (el elemento es completamente opaco). Elvalor 50 del ejemplo anterior hace que el elemento sea semitransparente.

A continuación se muestra la solución compatible con todos los navegadores para que unelemento de la página sea semitransparente:

selector {

opacity: 0.5;

filter: alpha(opacity=50);

}

http://librosweb.es/css_avanzado/capitulo_1/transparencias.html

Por último, recuerda que la propiedad filter es propietaria de Internet Explorer y no forma partede ningún estándar de CSS, por lo que regla anterior no pasa satisfactoriamente el proceso devalidación CSS.

http://librosweb.es/css_avanzado/capitulo_1/transparencias.html

1.7. Sustitución de texto por imágenesLa limitación más frustrante para los diseñadores web que cuidan especialmente la tipografía desus páginas es la imposibilidad de utilizar cualquier tipo de letra para mostrar los contenidos detexto. Como se sabe, las fuentes que utiliza una página deben estar instaladas en el ordenador odispositivo del usuario para que el navegador pueda mostrarlas.

Por lo tanto, si el diseñador utiliza en la página una fuente especial poco común entre los usuariosnormales, el navegador no encuentra esa fuente y la sustituye por una fuente por defecto. Elresultado es que la página que ve el usuario y la que ve el diseñador se diferenciancompletamente en su tipografía.

La consecuencia directa de esta limitación es que todos los diseñadores se limitan a utilizar laspocas fuentes que tienen casi todos los usuarios del mundo:

• Sistemas operativos tipo Windows: Arial, Verdana, Tahoma, Courier New, Times New Roman,Georgia. También está disponible una lista con todas las fuentes que incluye por defectocada versión de Windows (http://www.ampsoft.net/webdesign-l/windows-fonts-by-version.html).

• Sistemas operativos tipo Mac: Arial, Helvetica, Verdana, Monaco, Times.

• Sitemas operativos tipo Linux: incluyen decenas de fuentes, muchas de ellas versiones libresde las fuentes comerciales. También es posible instalar las fuentes más populares deWindows mediante el paquete Core Font (http://corefonts.sourceforge.net/).

Debido a la presencia mayoritaria de los sistemas operativos Windows y la disponibilidad demuchas de sus fuentes en otros sistemas operativos, la mayoría de diseñadores utilizanexclusivamente las fuentes más populares de Windows.

Afortunadamente, existen varias técnicas que permiten utilizar cualquier tipo de letra en el diseñode una página con la seguridad de que todos los usuarios la verán correctamente.

1.7.1. La directiva @font-faceLa única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva@font-face. Esta directiva se definió en el estándar CSS 2, pero desapareció en el estándar CSS2.1 que utilizan todos los navegadores de hoy en día. La futura versión de CSS 3 volverá a incluirla directiva @font-face en el módulo llamado Web Fonts (http://www.w3.org/TR/css3-webfonts/).

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_imagenes.html

La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte dela descripción se puede indicar la dirección o URL desde la que el navegador se puede descargarla fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de usode la directiva @font-face:

@font-face {

font-family: "Fuente muy rara";

src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf");

}

h1 {

font-family: "Fuente muy rara", sans-serif;

}

La directiva @font-face también permite definir otras propiedades de la fuente, como su formato,grosor y estilo. A continuación se muestran otros ejemplos:

@font-face {

font-family: Fontinsans;

src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");

font-weight: bold;

font-style: italic;

}

@font-face {

font-family: Tagesschrift;

src: url("fonts/YanoneTagesschrift.ttf") format("truetype");

}

Los ejemplos anteriores han sido extraídos de la página 10 Great Free Fonts for @font-faceembedding (http://opentype.info/demo/webfontdemo.html). Para ver el efecto de la directiva@font-face, debes acceder a esa página utilizando un navegador como Safari.

1.7.2. Soluciones FIRLas siglas FIR (Fahrner Image Replacement) abarcan decenas de técnicas similares que tratan deresolver el problema de utilizar cualquier tipo de letra en una página web. El propósito de estastécnicas es sustituir el texto normal por una imagen que contenga el mismo texto escrito con latipografía deseada. La primera técnica se presentó en el artículo Using Background-Image toReplace Text (http://www.stopdesign.com/articles/replace_text/).

Si se dispone de un título de sección <h1> que se quiere mostrar con una tipografía muy especial,se puede utilizar el siguiente código HTML y CSS para sustituirlo por una imagen:

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_imagenes.html

<h1><span>Lorem ipsum dolor sit amet</span></h1>

h1 {

width: 450px;

height: 100px;

background: #FFF url("/imagenes/titular.png") no-repeat top left;

}

h1 span {

display: none;

}

El código anterior muestra como imagen de fondo del elemento <h1> la imagen que contiene eltitular escrito con la tipografía deseada. Para sustituir el texto por la imagen, simplemente seoculta el texto mediante la propiedad display: none.

Aunque se trata de una de las técnicas FIR más sencillas, su principal problema es que el textooculto mediante display no lo leen correctamente los dispositivos lectores de páginas que utilizanlas personas con discapacidades visuales.

La evolución de la técnica anterior consiste en reemplazar la propiedad display por text-indent:

<h1>Lorem ipsum dolor sit amet</h1>

h1 {

width: 450px;

height: 100px;

background: #FFF url("/imagenes/titular.png") no-repeat top left;

text-indent: -5000px;

}

Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se quierereemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores normalesno muestran el texto y los lectores de páginas lo leen correctamente porque el texto no estáoculto.

El problema de la solución anterior es que si el navegador tiene activado CSS y desactivada lacarga de las imágenes, no se muestra nada. La solución consiste en volver a utilizar otro elemento<span> dentro del elemento que se quiere reemplazar:

<h1><span></span>Lorem ipsum dolor sit amet</h1>

h1 {

width: 450px;

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_imagenes.html

height: 100px;

position: relative;

}

h1 span {

background: #FFF url("/imagenes/titular.png") no-repeat top left;

position: absolute;

width: 100%;

height: 100%;

}

En esta solución, la imagen se muestra por delante del texto, por lo que aunque el texto no seoculta ni se desplaza, el usuario no puede verlo. El principal problema de esta técnica es que nose pueden utilizar imágenes con transparencias.

Por último, se muestra una versión simplificada de la solución anterior que presenta los mismosproblemas con las imágenes transparentes:

<h1><span>Lorem ipsum dolor sit amet</span></h1>

h1 {

width: 450px;

height: 100px;

background: #FFF url("/imagenes/titular.png") no-repeat top left;

}

h1 span {

position: relative;

z-index: -1;

}

El artículo Revised Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/) presenta otras técnicas FIR y discute sus problemas y limitaciones.

Independientemente de los problemas técnicos relacionados con CSS y los navegadores, elprincipal problema de las técnicas FIR anteriores es que se deben crear tantas imágenes comoelementos se quieran reemplazar. Aunque el proceso de creación de imágenes sea automático,es un proceso pesado cuando se quiere modificar por ejemplo el tamaño o tipo de letra utilizado.

1.7.3. Soluciones avanzadasLas soluciones basadas exclusivamente en CSS suelen presentar problemas con los lectores depáginas que utilizan las personas discapacitadas para navegar. Por ese motivo se han ideadootras soluciones basadas en diferentes lenguajes de programación.

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_imagenes.html

El programador Peter-Paul Koch ha creado una solución basada en JavaScript y que explica ensu artículo Image Replacement (http://www.quirksmode.org/dom/fir.html). Esta solución muestralas imágenes en todos aquellos navegadores que las soporten y muestra sólo el texto en cualquierotro caso. De esta forma, el texto original no se oculta de ninguna manera que pueda impedir a loslectores de páginas acceder a los contenidos.

Otras soluciones permiten crear de forma dinámica las imágenes que sustituyen al texto. Elproceso es muy complejo porque hay que considerar aspectos como el espacio máximo quepuede ocupar la imagen y los posibles saltos de línea en el texto. Existen multitud de solucionesde este tipo para diferentes lenguajes de programación, como por ejemplo el proyecto pcdtr(http://code.google.com/p/pcdtr/) para PHP.

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_imagenes.html

1.8. Sustitución de texto por FlashComo se explica en la sección anterior, las soluciones basadas en CSS para sustituir el texto porimágenes presentan problemas técnicos no resueltos: los lectores de páginas pueden no leer eltexto y los navegadores normales tienen problemas cuando no se pueden cargar las imágenes.

Además, estas soluciones basadas en CSS siempre tienen el inconveniente de que se debencrear todas las imágenes que sustituyen al texto. Si las imágenes se crean a mano, el proceso estedioso y poco flexible. Si las imágenes se generan dinámicamente, la aplicación web puede sufriruna penalización apreciable en su rendimiento.

La solución definitiva de todos los problemas de las soluciones basadas en CSS es la técnicasIFR (http://www.mikeindustries.com/blog/sifr/) (*Scalable Inman Flash Replacement//), quecombina CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquiertipografía deseada.

La versión de sIFR recomendada para su uso en sitios web es la versión sIFR 2(http://www.mikeindustries.com/blog/sifr/), ya que la versión sIFR 3 (http://wiki.novemberborn.net/sifr3) todavía se encuentra en período de pruebas.

A continuación se muestran los pasos que hay que seguir para sustituir el texto con la técnicasIFR:

1) Descarga la última versión disponible de los archivos de sIFR. Actualmente, la versión establees 2.0.7 y se puede descargar mediante el archivo comprimido sIFR2.0.7.zip(http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR-2.0.7.zip). Descomprime este archivo encualquier carpeta del sistema.

2) El segundo paso consiste en crear un archivo Flash que incluya la fuente que se va a utilizar enla sustitución. Abre el archivo sifr.fla con un editor de archivos de tipo Flash (como por ejemploel programa Flash Professional (http://www.adobe.com/es/products/flash/)). Si no dispones deningún editor de archivos Flash, más adelante se muestran varias herramientas y utilidadesalternativas.

Cuando se abre el archivo sifr.fla, sólo se ve un rectángulo blanco. Pincha dos veces sobreese rectángulo de forma que se muestre un texto. Selecciona el texto, modifica su fuente por latipografía que quieres utilizar en el diseño de tu página y guarda los cambios.

Si el texto que vas a sustituir contiene caracteres especiales o caracteres propios de algunosidiomas, debes añadir todos esos caracteres mediante la paleta de Propiedades del texto.

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_flash.html

3) Exporta el archivo Flash mediante la opción File > Export > Export Movie (o Archivo >Exportar). Una buena recomendación consiste en guardar el archivo con el mismo nombre deltipo de letra que incluye (arial.swf, verdana.swf, etc.). Una vez creado el archivo, guárdalo enun directorio del servidor en el que guardes todas las fuentes de sIFR (puedes llamar a estedirectorio fuentes/ por ejemplo).

4) sIFR necesita varios archivos CSS y JavaScript para funcionar. Copia el archivo sifr.js en lacarpeta de archivos JavaScript de tu servidor web (normalmente este directorio se llama js/).Copia los archivos CSS sIFR-screen.css y sIFR-print.css en la carpeta de archivos CSS de tuservidor web (normalmente este directorio se llama css/).

5) Todas las páginas en las que se sustituye el texto por Flash deben incluir los archivosJavaScript y CSS. Para ello, añade lo siguiente dentro de la sección <head> de la página:

<head>

...

<script src="js/sifr.js" type="text/javascript"></script>

...

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css"

media="screen" />

<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print"

/>

...

</head>

El valor de los atributos src y href debe contener la ruta completa (absoluta o relativa) hasta losarchivos JavaScript y CSS respectivamente.

También es posible añadir las reglas de los archivos CSS de sIFR en los archivos CSS propios dela página y así no tener que enlazar otros dos archivos CSS en cada página.

6) A partir de este momento ya es posible sustituir cualquier texto por Flash utilizandoinstrucciones JavaScript sencillas. A continuación se muestra el código JavaScript necesario paramostrar todos los titulares de la página con una tipografía propia:

if(typeof sIFR == "function"){

sIFR.replaceElement("h1", named({sFlashSrc: "../fuentes/mifuente.swf"}));

};

El código JavaSript anterior lo puedes colocar en cualquier parte de la página. Algunosdiseñadores prefieren colocarlo en la sección <head> donde se encuentran el resto de elementosde sIFR y otros diseñadores prefieren colocarlo justo antes de la etiqueta </body> de cierre de lapágina.

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_flash.html

La sustitución requiere que en la función replaceElement() se indique el selector CSS de loselementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en lasustitución. La única opción obligatoria se denomina sFlashSrc e indica la ruta completa hasta elarchivo .swf que contiene la tipografía deseada.

A continuación se muestra una tabla con todas las propiedades de sFIR:

Opción Descripción

sSelector

El selector del elemento o elementos que se quieren reemplazar. Se puedeindicar mediante esta opción o como primer argumento de la funciónreplaceElement(). Se pueden indicar varios selectores separándolos porcomas. Los selectores soportados son los de etiqueta, clase, id y el selectorde hijos.

sFlashSrcRuta completa hasta el archivo .swf que contiene la fuente utilizada. Siindicas la ruta de forma relativa, el origen es la propia página HTML.

sColorColor del texto indicado en formato hexadecimal, como por ejemplo #000000

o #CC0000

sLinkColor Color de los enlaces que puede contener el texto

sHoverColor Color del estado :hover de los enlaces que puede contener el texto

sBgColor Color de fondo del texto indicado en formato hexadecimal

nPaddingTop

nPaddingRight

nPaddingBottom

nPaddingLeft

Relleno superior, izquierdo, inferior e izquierdo del texto

sCaseTransformación del texto. El valor upper transforma el texto a mayúsculas; elvalor lower lo transforma a minúsculas

sWmode

Esta opción causa problemas en algunas versiones de algunosnavegadores, por lo que no se recomienda su uso. Si se le asigna el valortransparent, el Flash que sustituye al texto tiene un fondo transparente. Sise emplea el valor opaque, el Flash tiene un color de fondo sólido.

sFlashVars

Variables adicionales que pueden modificar el aspecto del texto sustituido.textalign=center centra el texto de forma horizontal. offsetleft=5desplaza el texto hacia la derecha los píxeles indicados por el número.offsetTop=5 desplaza el texto hacia abajo los píxeles indicados por elnúmero. underline=true muestra los enlaces subrayados en el estado:hover

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_flash.html

El siguiente ejemplo muestra los titulares de sección <h1>, <h2> y <h3> con el mismo tipo de letray color negro, mientras que sus posibles enlaces se muestran de color azul que cambia a rojocuando se pasa el ratón por encima del texto:

if(typeof sIFR == "function"){

sIFR.replaceElement("h1, h2, h3", named({sFlashSrc: "./sifr/vandenkeere.swf",

sColor: "#000", sLinkColor: "#336699", sHoverColor: "#CC0000"}));

};

Crear el archivo .swf con la fuente que se quiere mostrar es lo más costoso de la técnica sIFR.Además de ser un proceso manual, es necesario disponer de un editor de archivos Flash.Afortunadamente, debido a la popularidad de sIFR, se han publicado numerosas herramientaspara crear los archivos .swf necesarios:

• sIFR Generator (http://www.sifrgenerator.com/wizard.html): aplicación web que genera deforma rápida y sencilla el archivo .swf a partir de una fuente de tipo TrueType (extensión.ttf).

• sIFR Font Embedder (http://digitalretrograde.com/Projects/sifrFontEmbedder/): aplicación deescritorio que genera el archivo .swf a partir de la fuente seleccionada. Permite añadirfácilmente todos los caracteres especiales deseados. Requiere el uso de un programaexterno llamado swfmill y del framework .NET versión 2.0.

• Extensión para integrar sIFR en DreamWeaver (http://www.tecnorama.org/document.php?id_doc=70): extensión para el conocido entorno de desarrollo de sitios webDreamweaver. Permite configurar todas las opciones de sIFR de forma visual y creaautomáticamente los enlaces a los archivos CSS y JavaScript necesarios.

El principal problema de sIFR 2 es que emplea un algoritmo demasiado simple para determinar eltamaño con el que debe mostrar la letra del texto que sustituye. El algoritmo consiste en obtenerla anchura y altura del elemento sustituido y después probar diferentes tamaños de texto hastaque se encuentra el que mejor encaja en el sitio disponible.

Debido a este algoritmo tan simple, las fuentes sustituidas por sIFR 2 pueden ser demasiadoanchas o demasiado pequeñas comparadas con las originales. Como no existe ninguna opciónpara establecer de forma explícita el tamaño de letra del texto sustituido, los autores de sIFR 2sugieren modificar las propiedades letter-spacing y font-size del texto sustituido. La futuraversión sIFR 3 utiliza un algoritmo mucho más avanzado (http://novemberborn.net/sifr3/font-sizing)que permitirá un control preciso del tamaño de letra.

http://librosweb.es/css_avanzado/capitulo_1/sustitucion_de_texto_por_flash.html

1.9. Esquinas redondeadasEl actual estándar CSS 2.1 obliga a que todos los bordes de los elementos sean rectangulares.Esta limitación es una de las más criticadas por los diseñadores, ya que les impide crear bordescurvos o redondeados que se adapten mejor a sus diseños.

La futura versión CSS 3 incluye varias propiedades para definir bordes redondeados. Lapropiedad border-radius establece la misma curvatura en todas las esquinas y también sedefinen las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada esquina.

En cada propiedad se debe indicar obligatoriamente una medida y se puede indicaropcionalmente una segunda medida. Cuando se indica una sola medida, la esquina es circular ysu radio es igual a la medida indicada. Cuando se indican dos medidas, la esquina es elíptica,siendo la primera medida el radio horizontal de la elipse y la segunda medida su radio vertical.

Aunque faltan muchos años hasta que se publique la versión definitiva de CSS 3, los navegadoresque más se preocupan de los estándares ya incluyen soporte para crear esquinas redondeadas.El siguiente ejemplo muestra cómo crear esquinas redondeadas con los navegadores Safari yFirefox:

div {

-webkit-border-radius: 5px 10px; /* Safari */

-moz-border-radius: 5px 10px; /* Firefox */

}

La solución basada en CSS 3 es la más sencilla y la mejor técnicamente, pero hasta que todos losnavegadores no incluyan soporte para CSS 3, no es posible utilizar esta técnica para crearesquinas redondeadas.

Afortunadamente, las esquinas redondeadas son uno de los recursos más solicitados por losdiseñadores web y por eso se han definido decenas de técnicas para mostrarlas. Las técnicas seclasifican en: * Soluciones basadas en CSS y que no utilizan imágenes. * Soluciones basadas enCSS y que utilizan imágenes. * Soluciones basadas en JavaScript.

Las soluciones basadas exclusivamente en CSS y que no utilizan imágenes combinan HTML yCSS para engañar al ojo del usuario y hacerle creer que la esquina es redondeada.

El truco consiste en añadir varios elementos cuya longitud disminuye progresivamente para crearun perfil curvo. La siguiente imagen muestra el resultado final de esta técnica (izquierda), elnúmero de elementos necesarios para conseguirlo (centro) y un detalle ampliado de una esquina(derecha):

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

Figura 1.7 Esquinas redondeadas creadas con CSS y sin imágenes (resultado final y detalle decómo se consigue)

A continuación se muestra el código HTML y CSS necesarios para crear esquinas redondeadascon CSS y sin imágenes:

<div id="contenedor">

<b class="esquinas_superiores">

<b class="r1"></b>

<b class="r2"></b>

<b class="r3"></b>

<b class="r4"></b>

</b>

<!-- Aquí se incluyen los contenidos -->

<b class="esquinas_inferiores">

<b class="r4"></b>

<b class="r3"></b>

<b class="r2"></b>

<b class="r1"></b>

</b>

</div>

.esquinas_superiores, .esquinas_inferiores {

display: block;

}

.esquinas_superiores *, .esquinas_inferiores * {

display: block;

height: 1px;

overflow: hidden;

}

.r1 { margin: 0 5px; }

.r2 { margin: 0 3px; }

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

.r3 { margin: 0 2px; }

.r4 { margin: 0 1px; height: 2px; }

Para crear una esquina redondeada con esta técnica es necesario incluir muchos elementosHTML adicionales. Por ese motivo se utiliza la etiqueta <b>, que hace que el código HTML sigasiendo válido y su nombre sólo tiene una letra, por lo que aumenta lo mínimo posible el tamañodel código HTML.

Las reglas CSS anteriores hacen que los elementos <b> tengan sólo 1px de altura y que cada vezse hagan más cortos, ya que aumentan sus márgenes laterales de forma progresiva. Modificandoligeramente los margin de cada elemento se pueden crear esquinas con más o menos radio decuvatura. Además, también se pueden crear curvas sólo en una de las esquinas.

El principal problema de esta técnica es que no es sencillo cambiar la forma de la esquinaredondeada y que la curva es tan escalonada que los usuarios pueden apreciarlo.

La solución al segundo problema consiste en crear curvas que utilicen la técnica del anti-aliasingpara suavizar sus bordes. Esta técnica no es sencilla, ya que se debe tener en cuenta el radio decurvatura, el color de la curva y el color de fondo del elemento contenedor.

Algunas aplicaciones web generan automáticamente el código HTML y CSS necesarios a partir delos colores y el radio de curvatura deseado. A continuación se muestra el código HTML y CSSgenerados por la técnica Spiffy Corners (http://www.spiffycorners.com/):

<div>

<b class="spiffy">

<b class="spiffy1"><b></b></b>

<b class="spiffy2"><b></b></b>

<b class="spiffy3"></b>

<b class="spiffy4"></b>

<b class="spiffy5"></b></b>

<div class="spiffyfg">

<!-- Aquí se incluyen los contenidos -->

</div>

<b class="spiffy">

<b class="spiffy5"></b>

<b class="spiffy4"></b>

<b class="spiffy3"></b>

<b class="spiffy2"><b></b></b>

<b class="spiffy1"><b></b></b></b>

</div>

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

.spiffy{display:block}

.spiffy *{

display:block;

height:1px;

overflow:hidden;

font-size:.01em;

background:#000000}

.spiffy1{

margin-left:3px;

margin-right:3px;

padding-left:1px;

padding-right:1px;

border-left:1px solid #919191;

border-right:1px solid #919191;

background:#3f3f3f}

.spiffy2{

margin-left:1px;

margin-right:1px;

padding-right:1px;

padding-left:1px;

border-left:1px solid #e5e5e5;

border-right:1px solid #e5e5e5;

background:#303030}

.spiffy3{

margin-left:1px;

margin-right:1px;

border-left:1px solid #303030;

border-right:1px solid #303030;}

.spiffy4{

border-left:1px solid #919191;

border-right:1px solid #919191}

.spiffy5{

border-left:1px solid #3f3f3f;

border-right:1px solid #3f3f3f}

.spiffyfg{

background:#000000}

RoundedCornr (http://www.roundedcornr.com/) es otra aplicación web que permite generarautomáticamente el código HTML y CSS necesarios para crear esquinas redondeadasavanzadas.

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

Además de las esquinas redondeadas sencillas, muchos diseñadores quieren utilizar en sustrabajos esquinas complejas creadas a partir de imágenes. Una vez más, la futura versión CSS 3incluirá una propiedad llamada border-image para utilizar cualquier imagen como borde de unelemento.

Hasta que los navegadores no soporten CSS 3, la solución consiste en aplicar las imágenesmediante CSS y algunos elementos HTML especialmente preparados.

Esta técnica requiere en primer lugar crear las imágenes de cada una de las cuatro esquinas delelemento. Una vez creadas las imágenes, se añaden elementos en el código HTML. UtilizandoCSS, se muestran las esquinas redondeadas como imágenes de fondo de esos elementos HTML.

Los elementos HTML que se añaden pueden variar de una solución a otra, pero en general seañaden elementos <b> porque es una etiqueta de una sola letra:

<div id="contenedor">

<b class="superior">

<b></b>

</b>

<!-- Aquí se incluyen los contenidos -->

<b class="inferior">

<b></b>

</b>

</div>

Con el código HTML anterior, las reglas CSS necesarias para mostrar las imágenes de cadaesquina son muy sencillas:

b.superior { background:url("imagenes/esquina_superior_izquierda.png")

no-repeat; }

b.superior b { background:url("imagenes/esquina_superior_derecha.png")

no-repeat; }

b.inferior { background:url("imagenes/esquina_inferior_izquierda.png")

no-repeat; }

b.inferior b { background:url("imagenes/esquina_inferior_derecha.png")

no-repeat; }

Por último, cuando las esquinas redondeadas no utilizan imágenes, es más conveniente utilizarsoluciones basadas en JavaScript. La principal ventaja de esta técnica es que no es necesarioensuciar de forma permanente el código HTML con decenas de elementos de tipo <div> o <b>.Cuando el usuario carga la página, el código JavaScript crea en ese momento todos loselementos necesarios y los añade de forma dinámica al código HTML de la página.

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

Además, la otra gran ventaja de las soluciones basadas en JavaScript es que añaden decenas deelementos para crear bordes redondeados tan perfectos que son indistinguibles de los que sepueden crear con imágenes.

Algunas de las soluciones basadas en JavaScript más conocidas son jQuery Corner(http://www.malsup.com/jquery/corner/), jQuery Curvy Corners (http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery), jQuery Corners (http://www.atblabs.com/jquery.corners.html)y Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html).

El artículo CSS Rounded Corners Roundup (http://www.smileycat.com/miaow/archives/000044.php) compara decenas de técnicas para crear esquinas redondeadas basadas en CSS yJavaScript.

http://librosweb.es/css_avanzado/capitulo_1/esquinas_redondeadas.html

1.10. Rollovers y spritesSegún varios estudios realizados por Yahoo!, hasta el 80% de la mejora en el rendimiento de ladescarga de páginas web depende de la parte del cliente. En el artículo Performance Research,Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests (http://yuiblog.com/blog/2006/11/28/performance-research-part-1/) Yahoo! explica que generar dinámicamente el códigoHTML de la página y servirla ocupa el 20% del tiempo total de descarga de la página. El 80% deltiempo restante los navegadores descargan las imágenes, archivos JavaScript, hojas de estilos ycualquier otro tipo de archivo enlazado.

Además, en la mayoría de páginas web normales, la mayor parte de ese 80% del tiempo sededica a la descarga de las imágenes. Por tanto, aunque los mayores esfuerzos siempre secentran en reducir el tiempo de generación dinámica de las páginas, se consigue más y conmenos esfuerzo mejorando la descarga de las imágenes.

La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenesconsiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar laspropiedades CSS de las imágenes de fondo para mostrar cada imagen. Esta técnica se presentóen el artículo CSS Sprites: Image Slicing’s Kiss of Death (http://www.alistapart.com/articles/sprites)y desde entonces se conoce con el nombre de sprites CSS.

El siguiente ejemplo explica el uso de los sprites CSS en un sitio web que muestra la previsiónmeteorológica de varias localidades utilizando iconos:

Figura 1.8 Aspecto de la previsión meteorológica mostrada con iconos

La solución tradicional para crear la página anterior consiste en utilizar cuatro elementos <img> enel código HTML y disponer de cuatro imágenes correspondientes a los cuatro iconos:

<h3>Previsiones meteorológicas</h3>

<p id="localidad1"><img src="imagenes/sol.png" /> Localidad 1: soleado, máx:

35º, mín: 23º</p>

<p id="localidad2"><img src="imagenes/sol_nubes.png" /> Localidad 2: nublado,

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

máx: 25º, mín: 13º</p>

<p id="localidad3"><img src="imagenes/nubes.png" /> Localidad 3: muy nublado,

máx: 22º, mín: 10º</p>

<p id="localidad4"><img src="imagenes/tormentas.png" /> Localidad 4: tormentas,

máx: 23º, mín: 11º</p>

Aunque es una solución sencilla y que funciona muy bien, se trata de una solución completamenteineficiente. El navegador debe descargar cuatro imágenes diferentes para mostrar la página, porlo que debe realizar cuatro peticiones al servidor.

Después del tamaño de los archivos descargados, el número de peticiones realizadas al servidores el factor que más penaliza el rendimiento en la descarga de páginas web. Utilizando la técnicade los sprites CSS se va a rehacer el ejemplo anterior para conseguir el mismo efecto con unasola imagen y por tanto, una sola petición al servidor.

El primer paso consiste en crear una imagen grande que incluya las cuatro imágenes individuales.Como los iconos son cuadrados de tamaño 32px, se crea una imagen de 32px x 128px:

Figura 1.9 Creando un sprite de CSS a partir de varias imágenes individuales

Para facilitar el uso de esta técnica, todas las imágenes individuales ocupan el mismo sitio dentrode la imagen grande. De esta forma, los cálculos necesarios para desplazar la imagen de fondose simplifican al máximo.

El siguiente paso consiste en simplificar el código HTML:

<h3>Previsiones meteorológicas</h3>

<p id="localidad1">Localidad 1: soleado, máx: 35º, mín: 23º</p>

<p id="localidad2">Localidad 2: nublado, máx: 25º, mín: 13º</p>

<p id="localidad3">Localidad 3: muy nublado, máx: 22º, mín: 10º</p>

<p id="localidad4">Localidad 4: tormentas, máx: 23º, mín: 11º</p>

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

La clave de la técnica de los sprites CSS consiste en mostrar las imágenes mediante la propiedadbackground-image. Para mostrar cada vez una imagen diferente, se utiliza la propiedadbackground-position que desplaza la imagen de fondo teniendo en cuenta la posición de cadaimagen individual dentro de la imagen grande:

#localidad1, #localidad2, #localidad3, #localidad4 {

padding-left: 38px;

height: 32px;

line-height: 32px;

background-image: url("imagenes/sprite.png");

background-repeat: no-repeat;

}

#localidad1 {

background-position: 0 0;

}

#localidad2 {

background-position: 0 -32px;

}

#localidad3 {

background-position: 0 -64px;

}

#localidad4 {

background-position: 0 -96px;

}

La siguiente imagen muestra lo que sucede con el segundo párrafo:

Figura 1.10 Funcionamiento de la técnica de los sprites CSS

El párrafo tiene establecida una altura de 32px, idéntica al tamaño de los iconos. Después deañadir un padding-left al párrafo, se añade la imagen de fondo mediante background-image.Para cambiar de una imagen a otra, sólo es necesario desplazar de forma ascendente odescendente la imagen grande.

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

Si se quiere mostrar la segunda imagen, se desplaza de forma ascendente la imagen grande.Para desplazarla en ese sentido, se utilizan valores negativos en el valor indicado en la propiedadbackground-position. Por último, como la imagen grande ha sido especialmente preparada, sesabe que el desplazamiento necesario son 32 píxel, por lo que la regla CSS de este segundoelemento resulta en:

#localidad2 {

padding-left: 38px;

height: 32px;

line-height: 32px;

background-image: url("imagenes/sprite.png");

background-repeat: no-repeat;

background-position: 0 -32px;

}

La solución original utilizaba cuatro imágenes y realizaba cuatro peticiones al servidor. La soluciónbasada en sprites CSS sólo realiza una conexión para descargar una sola imagen. Además, losiconos del proyecto Tango (http://tango.freedesktop.org/) que se han utilizado en este ejemploocupan 7.441 bytes cuando se suman los tamaños de los cuatro iconos por separado. Por suparte, la imagen grande que contiene los cuatro iconos sólo ocupa 2.238 bytes.

Los sprites que incluyen todas sus imágenes verticalmente son los más fáciles de manejar. Si enel ejemplo anterior se emplea un sprite con las imágenes dispuestas también horizontalmente:

Figura 1.11 Sprite complejo que dispone las imágenes de forma vertical y horizontal

Aparentemente, utilizar este nuevo sprite sólo implica que la imagen de fondo se debe desplazartambién horizontalmente:

#localidad1, #localidad2, #localidad3, #localidad4 {

padding-left: 38px;

height: 32px;

line-height: 32px;

background-image: url("imagenes/sprite.png");

background-repeat: no-repeat;

}

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

#localidad1 {

background-position: 0 0;

}

#localidad2 {

background-position: -32px 0;

}

#localidad3 {

background-position: 0 -32px;

}

#localidad4 {

background-position: -32px -32px;

}

El problema del sprite anterior es que cuando una imagen tiene a su derecha o a su izquierdaotras imágenes, estas también se ven:

Figura 1.12 Errores producidos por utilizar un sprite complejo

La solución de este problema es sencilla, aunque requiere algún cambio en el código HTML:

<h3>Previsiones meteorológicas</h3>

<p id="localidad1"><img src="imagenes/pixel.gif" /> Localidad 1: soleado, máx:

35º, mín: 23º</p>

<p id="localidad2"><img src="imagenes/pixel.gif" /> Localidad 2: nublado, máx:

25º, mín: 13º</p>

<p id="localidad3"><img src="imagenes/pixel.gif" /> Localidad 3: muy nublado,

máx: 22º, mín: 10º</p>

<p id="localidad4"><img src="imagenes/pixel.gif" /> Localidad 4: tormentas, máx:

23º, mín: 11º</p>

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

El código anterior muestra uno de los trucos habituales para manejar sprites complejos. En primerlugar se añade una imagen transparente de 1px x 1px a todos los elementos mediante unaetiqueta <img>. A continuación, desde CSS se establece una imagen de fondo a cada elemento<img> y se limita su tamaño para que no deje ver las imágenes que se encuentran cerca:

#localidad1 img, #localidad2 img, #localidad3 img, #localidad4 img {

height: 32px;

width: 32px;

background-image: url("imagenes/sprite2.png");

background-repeat: no-repeat;

vertical-align: middle;

}

#localidad1 img {

background-position: 0 0;

}

#localidad2 img {

background-position: -32px 0;

}

#localidad3 img {

background-position: 0 -32px;

}

#localidad4 img {

background-position: -32px -32px;

}

Utilizar sprites CSS es una de las técnicas más eficaces para mejorar los tiempos de descarga delas páginas web complejas. La siguiente imagen muestra un sprite complejo que incluye 241iconos del proyecto Tango (http://tango.freedesktop.org/) y sólo ocupa 42 KB:

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

Figura 1.13 Sprite complejo que incluye 210 iconos en una sola imagen

La mayoría de sitios web profesionales utilizan sprites para mostrar sus imágenes de adorno. Lasiguiente imagen muestra el sprite del sitio web YouTube:

Figura 1.14 Sprite utilizado por el sitio web de YouTube

Los principales inconvenientes de los sprites CSS son la poca flexibilidad que ofrece (añadir omodificar una imagen individual no es inmediato) y el esfuerzo necesario para crear el sprite.

Afortunadamente, existen aplicaciones web como CSS Sprite Generator (http://spritegen.website-performance.org/) que generan el sprite a partir de un archivo comprimido en formato ZIP contodas las imágenes individuales.

http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html

1.11. Texto1.11.1. Tamaño de letraLa recomendación más importante cuando se trabaja con las propiedades tipográficas de CSSestá relacionada con el tamaño de la letra. La propiedad font-size permite utilizar cualquiera delas nueve unidades de medida definidas por CSS para establecer el tamaño de la letra. Sinembargo, la recomendación es utilizar únicamente las unidades relativas % y em.

De hecho, el documento CSS Techniques for Web Content Accessibility Guidelines 1.0(http://www.w3.org/TR/WCAG10-CSS-TECHS/) elaborado por el organismo W3C recomiendautilizar siempre esas unidades de medida para mejorar la accesibilidad de los contenidos web. Lasiguiente versión del documento (Techniques for WCAG 2.0 (http://www.w3.org/TR/WCAG20-GENERAL/)) aún se encuentra en proceso de elaboración, pero su borrador de trabajorecoge exactamente las mismas recomendaciones en lo que se refiere al texto.

Además de mejorar la accesibilidad de los contenidos de texto, las unidades de medida relativas %

y em hacen que las páginas sean más flexibles y se adapten a cualquier medio y dispositivo sinapenas tener que realizar modificaciones. Además, si se utilizan las unidades de medida relativases posible modificar todos los tamaños de letra del sitio de forma consistente e inmediata.

Aunque todos los diseñadores web profesionales conocen esta recomendación y utilizan sólo lasunidades % y em para establecer todos sus tamaños de letra, los diseñadores que comienzan atrabajar con CSS encuentran dificultades para comprender estas unidades y prefieren utilizar launidad px.

Si tienes dificultades para comprender la unidad em y prefieres establecer los tamaños de letramediante píxeles, puedes utilizar el siguiente truco. Como todos los navegadores establecen untamaño de letra por defecto equivalente a 16px, si se utiliza la siguiente regla CSS:

body {

font-size: 62.5%;

}

El tamaño de letra del elemento <body>, y por tanto el tamaño de letra base del resto deelementos de la página, se establece como el 62.5% del tamaño por defecto. Si se calcula elresultado de 16px x 62.5% se obtienen 10px.

La ventaja de establecer el tamaño de letra del <body> de esa forma es que ahora se puedenutilizar em mientras se piensa en px. En efecto, las siguientes reglas muestran el truco en lapráctica:

http://librosweb.es/css_avanzado/capitulo_1/texto.html

body {

font-size: 62.5%;

}

h1 {

font-size: 2em; /* 2em = 2 x 10px = 20px */

}

p {

font-size: 1.4em; /* 1.4em x 10px = 14px */

}

Como el tamaño base son 10px, cualquier valor de em cuya referencia sea el elemento <body>

debe multiplicarse por 10, por lo que se puede trabajar con em mientras se piensa en px.

1.11.2. Efectos gráficos1.11.2.1. Texto con sombraMostrar texto con sombra es otra de las limitaciones de CSS que más irritan a los diseñadores. Enrealidad, la versión CSS 2 incluía una propiedad llamada text-shadow para mostrar textos consombra. La versión CSS 2.1 que utilizan todos los navegadores de hoy en día elimina estapropiedad, aunque se vuelve a recuperar en la futura versión CSS 3.

En los navegadores que más se preocupan por los estándares ya es posible utilizar la propiedadtext-shadow de CSS 3:

h1 {

color: #000;

text-shadow: #555 2px 2px 3px;

}

La sintaxis de la propiedad text-shadow obliga a indicar dos medidas y permite establecer deforma opcional una tercera medida y un color. Las dos medidas obligatorias son respectivamenteel desplazamiento horizontal y vertical de la sombra respecto del texto. La tercera medida opcionalindica lo nítido o borroso que se ve la sombra y el color establece directamente el color de lasombra.

Las últimas versiones de los navegadores Firefox, Safari y Opera ya soportan la propiedad text-

shadow, aunque no siempre de forma fiel a la descripción del futuro estándar CSS 3.

Por otra parte, el navegador Internet Explorer no incluye la propiedad text-shadow, pero incluyeun mecanismo propio que se puede utilizar para crear un efecto parecido. Una vez más, lasolución se basa en el uso de los filtros de Internet Explorer (http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx). Concretamente, el filtro shadow (http://msdn.microsoft.com/en-us/

http://librosweb.es/css_avanzado/capitulo_1/texto.html

library/ms533086(VS.85).aspx) se puede emplear para crear una sombra sobre cualquierelemento, con la condición de que ese elemento tenga activada la propiedad hasLayout(http://www.librosweb.es/css_avanzado/capitulo1/la_propiedad_haslayout_de_internet_explorer.html).

La siguiente regla CSS muestra el filtro necesario para crear un efecto similar al del ejemploanterior:

h1 {

filter: shadow(color=#555555, direction=135, strength=2);

width: 100%; /* necesario para activar la propiedad hasLayout */

}

1.11.2.2. Texto con relleno gradiente o degradadoCombinando el texto con imágenes semitransparentes, se pueden lograr fácilmente efectosgráficos propios de los programas de diseño. A continuación se detalla cómo crear un texto quemuestra su color en forma de degradado o gradiente.

El truco consiste en mostrar por encima del texto una imagen semitransparente que simule elefecto degradado. La siguiente imagen muestra el esquema de la solución:

Figura 1.15 Mostrando texto avanzado gracias a una imagen semitransparente

En el esquema anterior, la imagen semitransparente se muestra en el interior de un cuadrado decolor negro para poder visualizar correctamente su aspecto real.

Si se dispone por ejemplo de un titular de sección <h1>, el primer paso consiste en añadir unelemento HTML adicional (normalmente un <span>) para mostrar la imagen semitransparente:

<!-- Elemento original -->

<h1>Lorem Ipsum</h1>

<!-- Elemento preparado para mostrar texto avanzado -->

<h1><span></span>Lorem Ipsum</h1>

http://librosweb.es/css_avanzado/capitulo_1/texto.html

Una vez preparado el código HTML, el truco consiste en mostrar la imagen semitransparentecomo imagen de fondo del elemento <span>. Además, ese elemento <span> se muestra pordelante del contenido de texto del elemento <h1> y ocupando toda su longitud:

h1 {

position: relative;

}

h1 span {

position: absolute;

display: block;

background: url("imagenes/gradiente.png") repeat-x;

width: 100%;

height: 31px;

}

Para conseguir diferentes acabados en el degradado del texto, se modifica la posición de laimagen de fondo mediante las propiedades background o background-position.

Utilizando este mismo truco pero con otras imágenes, se pueden conseguir efectos tanespectaculares como los que se pueden ver en los ejemplos del artículo CSS Gradient Text(http://www.webdesignerwall.com/demo/css-gradient-text/).

http://librosweb.es/css_avanzado/capitulo_1/texto.html

Capítulo 2. Buenas prácticas2.1. Inicializar los estilosCuando los navegadores muestran una página web, además de aplicar las hojas de estilo de losdiseñadores, siempre aplican otras dos hojas de estilos: la del navegador y la del usuario.

La hoja de estilos del navegador se utiliza para establecer el estilo inicial por defecto a todos loselementos HTML: tamaños de letra, decoración del texto, márgenes, etc. Esta hoja de estilossiempre se aplica a todas las páginas web, por lo que cuando una página no incluye ninguna hojade estilos propia, el aspecto con el que se muestra en el navegador se debe a esta hoja de estilosdel navegador.

Por su parte, la hoja de estilos del usuario es la que puede aplicar el usuario mediante sunavegador. Aunque la inmensa mayoría de usuarios no utiliza esta característica, en teoría esposible que los usuarios establezcan el tipo de letra, color y tamaño de los textos y cualquier otrapropiedad CSS de los elementos de la página que muestra el navegador.

El orden en el que se aplican las hojas de estilo es el siguiente:

Figura 2.1 Orden en el que se aplican las diferentes hojas de estilos

Por tanto, las reglas que menos prioridad tienen son las del CSS de los navegadores, ya que sonlas primeras que se aplican. A continuación se aplican las reglas definidas por los usuarios y porúltimo se aplican las reglas CSS definidas por el diseñador, que por tanto son las que másprioridad tienen.

NOTA CSS define la palabra reservada !important para controlar la prioridad de lasdeclaraciones de las diferentes hojas de estilos. Las reglas CSS que incluyen la palabra!important tienen prioridad sobre el resto de las reglas CSS, independientemente del orden enel que se incluyan o definan las reglas.

En caso de igualdad, las reglas !important de los usuarios son más importantes que las reglas!important del diseñador. Gracias a esta característica, si un usuario sufre deficienciasvisuales, puede crear una hoja de estilos CSS con reglas de tipo !important con la seguridadde que el navegador siempre aplicará esas reglas por encima de cualquier otra regla definidapor los diseñadores.

http://librosweb.es/css_avanzado/capitulo_2.html

El principal problema de las hojas de estilo de los navegadores es que los valores que aplican pordefecto son diferentes en cada navegador. Aunque todos los navegadores coinciden en algunosvalores importantes (tipo de letra serif, color de letra negro, etc.) presentan diferencias envalores tan importantes como los márgenes verticales (margin-bottom y margin-top) de lostítulos de sección (<h1>, ... <h6>), la tabulación izquierda de los elementos de las listas (margin-left o padding-left según el navegador) y el tamaño de línea del texto (line-height).

A continuación se muestra el código HTML de una página de ejemplo y seguidamente, unaimagen que muestra cómo la visualizan los navegadores Internet Explorer y Firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Reset</title>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<h2>Consectetuer adipiscing elit</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut consectetuer adipiscing elit</p>

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

<table summary="Lorem Ipsum">

<caption>Lorem Ipsum</caption>

<tr>

<th>Celda 1-1</th>

<th>Celda 1-2</th>

</tr>

<tr>

<td>Celda 2-1</td>

<td>Celda 2-2</td>

</tr>

</table>

</body>

</html>

http://librosweb.es/css_avanzado/capitulo_2.html

Figura 2.2 Visualización de una misma página en los navegadores Internet Explorer y Firefox

Como todas las hojas de estilo de los navegadores son diferentes, cuando un diseñador pruebasus estilos sobre diferentes navegadores, es común encontrarse con diferencias visualesapreciables. La solución a este problema es muy sencilla y consiste en borrar o resetear losestilos que aplican por defecto los navegadores.

Una de las formas más sencillas de neutralizar algunos de los estilos de los navegadores consisteen eliminar el margen y relleno a todos los elementos de la página para establecerlosposteriormente de forma individual:

* {

margin: 0;

padding: 0;

}

Aunque la regla CSS anterior se ha utilizado desde hace muchos años, se trata de una soluciónmuy rudimentaria y limitada. La solución completa consiste en crear una hoja de estilos CSS queneutralice todos los estilos que aplican por defecto los navegadores y que pueden afectar alaspecto visual de las páginas. Este tipo de hojas de estilos se suelen llamar "reset CSS".

A continuación se muestra la hoja de estilos reset.css propuesta por el diseñador Eric Meyer(http://meyerweb.com/):

/* v1.0 | 20080212 */

http://librosweb.es/css_avanzado/capitulo_2.html

html, 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,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* No olvides definir estilos para focus */

:focus {

outline: 0;

}

/* No olvides resaltar de alguna manera el texto insertado/borrado */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

http://librosweb.es/css_avanzado/capitulo_2.html

/* En el código HTML es necesario añadir cellspacing="0" */

table {

border-collapse: collapse;

border-spacing: 0;

}

El propio Eric Meyer recuerda que la hoja de estilos anterior es sólo un punto de partida que debeser adaptado por cada diseñador hasta obtener los resultados deseados. Utilizar una hoja deestilos de tipo reset es una de las buenas prácticas imprescindibles para los diseñadores webprofesionales.

http://librosweb.es/css_avanzado/capitulo_2.html

2.2. Comprobar el diseño en varios navegadores2.2.1. Principales navegadoresUna de las prácticas imprescindibles de los diseñadores web profesionales consiste en probar sutrabajo en varios navegadores diferentes. De esta forma, el diseñador puede descubrir los erroresde su trabajo y también los errores causados por los propios navegadores.

El número de navegadores y versiones diferentes que se deben probar depende de cadadiseñador. En el caso ideal, el diseñador conoce estadísticas de uso de los navegadores queutilizan los usuarios para acceder al sitio o aplicación web que está diseñando. Una buenapráctica consiste en probar los diseños en aquellos navegadores y versiones que sumen un 90%de cuota de mercado.

Cuando no se dispone de estadísticas de uso o el diseño es para un sitio web completamentenuevo, se debe probar el diseño en los navegadores más utilizados por los usuarios en general.Aunque no existe ninguna estadística completamente fiable y los resultados varían mucho de unpaís a otro, en general los siguientes navegadores y versiones suman más del 90% de cuota demercado: Internet Explorer 6, Internet Explorer 7, Firefox 2, Firefox 3, Safari 3, Opera 9 y GoogleChrome 1.

En primer lugar, los diseñadores web profesionales disponen de todos los navegadoresprincipales instalados en sus equipos de trabajo. Por lo tanto, si no lo has hecho ya, descarga einstala los siguientes navegadores:

• Firefox (http://www.mozilla-europe.org/es/firefox/): disponible para sistemas operativosWindows, Mac, Linux y en más de 45 idiomas.

• Opera (http://www.opera.com/download/): disponible para sistemas operativos Windows, Mac,Linux y en múltiples idiomas.

• Safari (http://www.apple.com/es/safari/): disponible solamente para sistemas operativosWindows y Mac.

• Google Chrome (http://www.google.com/chrome/?hl=es): disponible en más de 40 idiomas ypara Windows, Mac, Linux.

Respecto al navegador Internet Explorer, la mayoría de diseñadores trabajan en entornosWindows en los que ya está instalado por defecto. Si tienes la fortuna de trabajar con un sistemaoperativo tipo Linux, puedes instalar varias versiones de Internet Explorer mediante la aplicaciónIEs4Linux (http://www.tatanka.com.br/ies4linux/page/Main_Page). También es posible instalarvarias versiones de Internet Explorer en los sistemas operativos Mac OS X gracias a la aplicaciónies4osx (http://www.kronenberg.org/ies4osx/).

http://librosweb.es/css_avanzado/capitulo_2/comprobar_el_diseno_en_varios_navegadores.html

2.2.2. Probar el diseño en todos los navegadoresEn algunas ocasiones no es suficiente con probar los diseños sólo en los navegadores másutilizados, ya que el cliente quiere que su sitio o aplicación web se vea correctamente en muchosotros navegadores. Por otra parte, no es práctico que los diseñadores prueben sus trabajos endecenas de navegadores y versiones para cada sistema operativo.

Afortunadamente, existe una aplicación web gratuita que permite solucionar este problema. Laaplicación Browsershots (http://browsershots.org) prueba la página indicada en varias versionesdiferentes de cada navegador, crea una imagen de cómo se ve la página en cada uno de ellos ynos muestra esa imagen.

Aunque el proceso es lento y mucho menos flexible que probar la página en nuestros propiosnavegadores, el resultado permite al diseñador comprobar si su trabajo se ve correctamente enmultitud de navegadores y sistemas operativos. En la actualidad, Browsershots comprueba elaspecto de las páginas en 4 sistemas operativos y 72 navegadores diferentes.

2.2.3. Integrar Internet Explorer en FirefoxAlgunos diseñadores prueban continuamente sus diseños en los navegadores Internet Explorer yFirefox y después los comprueban en el resto de navegadores para corregir los últimos errores. Sieste es tu caso, puedes mejorar tu productividad gracias a una extensión de Firefox.

IE Tab (https://addons.mozilla.org/es-ES/firefox/addon/1419) es una extensión que se instala en elnavegador Firefox y hace que Internet Explorer se integre en Firefox. Una vez instalada, estaextensión permite ver las páginas con Internet Explorer dentro de Firefox.

Aunque resulta sorprendente, IE Tab hace que las páginas en Firefox se puedan ver medianteInternet Explorer, de forma que los diseñadores no tienen que cambiar constantemente denavegador y por tanto aumenta considerablemente su productividad.

2.2.4. Diferentes versiones de Internet ExplorerEl principal problema de los diseñadores web que quieren probar su trabajo en diferentesnavegadores y versiones es la imposibilidad de instalar varias versiones del navegador InternetExplorer en el mismo sistema operativo.

Aunque la empresa Microsoft, creadora de Internet Explorer, sigue sin resolver este problema, sehan publicado soluciones no oficiales para disponer de varias versiones de Internet Explorer en elmismo sistema operativo.

La primera solución propuesta fue el Browser Archive (http://browsers.evolt.org/), un repositorio denavegadores desde el que se pueden descargar versiones antiguas de decenas de navegadoresdiferentes, entre ellos Internet Explorer. Lamentablemente hace mucho tiempo que no se añadennuevas versiones, por lo que la última versión disponible de Internet Explorer es la 6.

http://librosweb.es/css_avanzado/capitulo_2/comprobar_el_diseno_en_varios_navegadores.html

Más recientemente se ha presentado IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), una aplicación descargable gratuitamente y que permite disponer de InternetExplorer 5.5, 6, 7 y 8 en un mismo sistema operativo. De esta forma, IETester es una de lasherramientas imprescindibles de los diseñadores web profesionales.

http://librosweb.es/css_avanzado/capitulo_2/comprobar_el_diseno_en_varios_navegadores.html

2.3. Mejora progresivaLa mejora progresiva ("progressive enhancement") es uno de los conceptos más importantes deldiseño web y a la vez uno de los más desconocidos. Su origen proviene de su concepto contrario,la degradación útil o "graceful degradation".

La degradación útil es un concepto propuesto hace décadas por el psicólogo inglés DavidCourtenay Marr. Aplicada al diseño web, la degradación útil significa que un sitio web siguefuncionando correctamente cuando el usuario accede con un navegador limitado o antiguo en elque no funcionan las características más avanzadas.

La mejora progresiva toma ese concepto y lo aplica de forma inversa. En el diseño web, la mejoraprogresiva significa que el sitio web dispone de características más avanzadas cuanto másavanzado sea el navegador con el que accede el usuario.

Muchos diseñadores web y muchos de sus clientes están obsesionados con que sus diseños sevean exactamente igual en cualquier versión de cualquier navegador. Aunque resultaprácticamente imposible conseguirlo, este tipo de diseñadores prefiere sacrificar cualquiercaracterística interesante de CSS de manera que las páginas se vean igual en cualquiernavegador.

La mejora progresiva propone que el diseño web se realice de la siguiente manera:

• En primer lugar, el diseño web debe permitir el acceso completo y correcto a toda lainformación de la página independientemente del tipo de navegador utilizado por el usuario.

• Después de cumplir el requisito anterior, se deben utilizar las características más modernasde CSS 2 e incluso de CSS 3, aunque sólo los usuarios con navegadores más modernossean capaces de disfrutarlas.

La técnica de la mejora progresiva es mucho mejor que las soluciones alternativas que utilizanalgunos diseñadores, como por ejemplo:

• Utilizar sólo las características de CSS que soporte correctamente el navegador obsoletoInternet Explorer 6, porque un gran número de usuarios siguen utilizándolo.

• Utilizar sólo las características de CSS que soporten correctamente navegadores limitadoscomo Internet Explorer 7, ya que es el navegador más utilizado por los usuarios.

• Olvidarse completamente de navegadores limitados como Internet Explorer 6 y 7, diseñandolos sitios web sólo para los navegadores más modernos.

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

A continuación se muestra la mejora progresiva en la práctica mediante un ejemplo publicado enel artículo Progressive Enhancement with CSS 3: A better experience for modern browsers(http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/).

El propósito del ejemplo es crear un menú de navegación que se ve más bonito cuanto másmoderno sea tu navegador. Como es habitual, el código HTML del menú se basa en una lista detipo <ul>:

<ul>

<li><a href="">Lorem Ipsum</a></li>

<li><a href="">Lorem Ipsum</a></li>

<li><a href="">Lorem Ipsum</a></li>

<li><a href="">Lorem Ipsum</a></li>

<li><a href="">Lorem Ipsum</a></li>

</ul>

El primer paso consiste en aplicar los estilos CSS básicos que interpretan correctamente todas lasversiones de todos los navegadores. Aunque estos estilos hacen que el menú tenga un aspectomuy básico, permiten el acceso correcto a todos los contenidos.

ul {

background-color: blue;

border-bottom: 1px dotted #999;

list-style: none;

margin: 15px;

width: 150px;

padding-left: 0;

}

li {

background-color: #FFF;

border: 1px dotted #999;

border-bottom-width: 0;

font: 1.2em/1.333 Verdana, Arial, sans-serif;

}

li a {

color: #000;

display: block;

height: 100%;

padding: 0.25em 0;

text-align: center;

text-decoration: none;

}

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

li a:hover { background-color: #EFEFEF; }

Las reglas CSS anteriores hacen que el menú de navegación tenga el siguiente aspecto en cadanavegador:

Figura 2.3 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 yOpera 9

Como se ve en la imagen anterior, incluso con unos estilos CSS tan básicos se producendiferencias visuales entre los navegadores. El motivo es que Internet Explorer 6 no es capaz demostrar un borde punteado de 1px de anchura y lo sustituye por un borde discontinuo.

El siguiente paso consiste en utilizar el selector de hijos (uno de los selectores avanzados deCSS) para añadir nuevos estilos:

body > ul { border-width: 0; }

ul > li {

border: 1px solid #FFF;

border-width: 1px 0 0 0;

}

li > a {

background-color: #666;

color: white;

font-weight: bold;

}

li:first-child a { color: yellow; }

li > a:hover{ background-color: #999; }

Ahora el primer elemento del menú de navegación se muestra con otro estilo y cuando el usuariopasa su ratón por encima de un elemento se muestra destacado:

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

Figura 2.4 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 yOpera 9

El navegador Internet Explorer 6 se queda atrás y sigue mostrando el menú con el mismoaspecto, ya que no es capaz de entender el selector de hijos. La mejora progresiva permite quelos usuarios de Internet Explorer 6 sigan accediendo a todos los contenidos y que el resto deusuarios vean un menú más avanzado.

A continuación se modifica la opacidad de los elementos del menú, de forma que el elementoseleccionado se vea más claramente:

li { opacity: 0.9; }

li:hover{ opacity: 1; }

En esta ocasión, el navegador que se queda atrás es Internet Explorer 7, ya que no incluyesoporte para esa propiedad de CSS. En el resto de navegadores se muestra correctamente elefecto:

Figura 2.5 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 yOpera 9

Otra posible mejora del menú consiste en añadir una sombra al texto del elemento seleccionadomediante la propiedad text-shadow de CSS:

li a:hover { text-shadow: 2px 2px 4px #333; }

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

Solamente los navegadores Safari y Opera soportan la propiedad text-shadow, por lo que elnavegador Firefox se queda atrás y no muestra esta mejora:

Figura 2.6 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 yOpera 9

Por último, utilizando los selectores de CSS 3 se va a alternar el color de fondo de los elementosdel menú para mejorar su visualización:

li:nth-child(2n+1) a {

background-color: #333;

}

li:nth-child(n) a:hover {

background-color: #AAA;

color: #000;

}

li:first-child > a:hover{ color: yellow; }

Solamente los navegadores Opera y Safari incluyen todos los selectores de CSS 3, por lo que elresultado final del menú en cada navegador es el que muestra la siguiente imagen:

Figura 2.7 Aspecto del menú en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 yOpera 9

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

Como se ha visto en este ejemplo, la mejora progresiva permite aprovechar todas lasposibilidades de CSS sin perjudicar a los navegadores obsoletos o limitados. Los usuarios deInternet Explorer 6 visualizan un menú muy básico adecuado para un navegador obsoleto, peroque les permite el acceso a todos los contenidos. Los usuarios de Internet Explorer 7 visualizan unmenú normal adecuado a las limitaciones de su navegador pero que también permite el acceso atodos los contenidos. Por último, los usuarios de los navegadores más avanzados (Opera y Safari)visualizan un menú avanzado que aprovecha todas las características disponibles en CSS.

http://librosweb.es/css_avanzado/capitulo_2/mejora_progresiva.html

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Progressive Enhancement with CSS 3:A better experience for modernbrowsersBy Peter Gasston

Introduction

The latest releases of cutting-edge browsers (such as Safari 3 and Opera 9.5) implement some of the decorative declarations fromthe proposed CSS 3 specification. Opacity, shadows and tiger-striping effects are now available without the use of JavaScript,server-side code or extra markup. But with some older browsers still in everyday use, it can be a little frustrating to think that youmight not get the chance to use them for another few years.

In this article I will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features inbrowsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that donot yet support those features.

The full code for the example featured in this article can be found here (progressive_enhancement_CSS3.zip).

What is progressive enhancement?

To understand the concept of progressive enhancement, you first need to understand the method of graceful degradation, which issummarised nicely by the following quote:

Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software inwhich advanced effects don't work.

Fluid Thinking, by Peter-Paul Koch (http://www.digital-web.com/articles/fluid_thinking/)

Graceful enhancement approaches the same methodology from the opposite direction; instead of providing fallback states toensure sites operate on less-than-optimal software, we take advantage of features in newer software in order to provide anenhanced experience, while ensuring that the basic state still works on older devices. This is, of course, the ideal way to implementthe new CSS 3 declarations.

An example

For this example, I'm going to build a simple navigation menu that will look a little prettier depending on the CSS support in yourfavourite browser.

I should note that in this example I'm using no graphics, no hacks, and no browser-specific prefixes; all the enhancements are usingstable, implemented declarations. Having said that, some of the choices I've made are specifically for example purposes, and maynot be best practice for production sites.

The Markup

I'm starting with a simple unordered list-based navigation menu, written in POSH:

<ul><li><a href="">Lorem Ipsum</a></li>

“

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

<li><a href="">Lorem Ipsum</a></li><li><a href="">Lorem Ipsum</a></li><li><a href="">Lorem Ipsum</a></li><li><a href="">Lorem Ipsum</a></li></ul>

The Baseline Style

I'm going to apply a baseline style that uses only simple descendant selectors. This will apply a border to each list item, and achange of background on mouseover. This should work in every graphical browser made in the last five or six years (and perhapseven older).

The CSS for this is straightforward:

ul {background-color: blue;border-bottom: 1px dotted #999;list-style: none;margin: 15px;width: 150px;}

li {background-color: #fff;border: 1px dotted #999;border-bottom-width: 0;font: 1.2em/1.333 Verdana, Arial, sans-serif;}

li a {color: black;display: block;height: 100%;padding: 0.25em 0;text-align: center;text-decoration: none;}

li a:hover { background-color: #efefef; }

The only oddity you might notice is the blue background on the <ul>; this will be explained later. With these styles, we have abaseline appearance which will display in IE6 as shown in Figure 1.

Figure 1: This baseline appearence will display in IE6 and other older browsers.

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Applying the Enhancements

IE7 was the first of the series of IE browsers to support all of the CSS 2.1 attribute selectors, which are also implemented in prettymuch every other browser release. We can use one of these - the child selector - to begin the process of enhancement. As IE6doesn't support the child selector, it will ignore the following rules:

body > ul { border-width: 0; }

ul > li {border: 1px solid #fff;border-width: 1px 0 0 0;}

li > a {background-color: #666;color: white;font-weight: bold;}

li:first-child a { color: yellow; }

li > a:hover { background-color: #999; }

With these rules added to the CSS, the list now looks like Figure 2:

Figure 2: The list now has coloured backgrounds and bolder text, and the first link is highlighted in a different colour.

IE7, Firefox, Safari and Opera all display like this.

Adding more emphasis

The next step is to add a little more emphasis, by using a property that IE doesn't recognise: Opacity. We don't need to use anyspecial selectors for this, as IE will simply ignore any properties it doesn't support:

li { opacity: 0.9; }

li:hover { opacity: 1; }

Figure 3 shows this property working in Opera; you can see that the list items inherit a blue tint from the background on the <ul>.On mouseover, each element becomes fully opaque.

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Figure 3: Adding opacity to our example.

You could, of course, use IE's filter property to gain the same effect in IE as well. For the purposes of the tutorial, I'll stick tostandard CSS, as filter is not standard therefore it won't validate.

Firefox 2 supports opacity, but with more recent browsers we can go even further. With Safari and Opera, we can decorate the textand hint at depth by using the text-shadow property:

li a:hover { text-shadow: 2px 2px 4px #333; }

As Figure 4 shows, the moused-over element now gains a little shadow and seems to stand out from the page slightly.

Figure 4: Adding text shadows with CSS3.

Finally, we can take advantage of Opera's full support for the new CSS 3 selectors and add one more layer of enhancement:alternating background colours using the nth-child selector:

li:nth-child(2n+1) a { background-color: #333; }

li:nth-child(n) a:hover {background-color: #aaa;color: #000;}

li:first-child > a:hover { color: yellow; }

Figure 5 shows Opera's tiger-striped menu.

Figure 5: A tiger-striped menu, created using nth-child.

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

The Result and Summary

Figure 6 is a side-by-side comparison of how the initial markup is viewed in IE6, IE7, Firefox, Safari and Opera, after applying theCSS rules used in this article. As you can see, as the browser's support for CSS becomes more sophisticated, the menu becomesmore styled and complicated, and using progressive enhancement, the menu remains usable even in six-year-old browsers.

Figure 6: The result in IE6, IE7, Opera and Firefox.

Of course, many browsers have a myriad other properties which I haven't used here but could easily be implemented, for exampleRGBA colours and SVG as background images. And Opera 9.5 is still only in pre-release at the moment, so who knows what else isto come?

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

2.4. DepuraciónInevitablemente, todos los diseñadores web cometen errores en los trabajos que realizan. En lamayoría de las ocasiones, los errores se descubren al probar el diseño en diferentesnavegadores. Además de mostrar los errores, los principales navegadores disponen deherramientas que permiten descubrir de forma sencilla la causa concreta del error.

Antes de que existieran estas herramientas avanzadas, el trabajo del diseñador era mucho máscomplicado, ya que no era fácil descubrir la causa exacta del error entre todas las posibles:

• El selector está mal escrito.

• Las propiedades están mal escritas o tienen valores no permitidos.

• Otros selectores tienen más prioridad y están sobreescribiendo una propiedad y/o valor.

• Las reglas y valores están bien escritos, pero los elementos no ocupan el espacio que asimple vista parece que están ocupando en la pantalla.

• El navegador tiene un error que impide mostrar correctamente la página.

Los diseñadores web idearon hace mucho tiempo soluciones ingeniosas para cada uno de losproblemas anteriores. En primer lugar, cuando no se está seguro de si todas las reglas CSS estánbien escritas, lo mejor es validar la hoja de estilos utilizando el validador CSS del W3C(http://jigsaw.w3.org/css-validator/).

Una vez descartado el error de sintaxis, el siguiente problema a resolver es por qué una reglaCSS no se aplica correctamente a un elemento. Una estrategia muy utilizada consistía en añadiralguna propiedad que sea visualmente significativa para comprobar si realmente el selector seestá aplicando. Poner todo el texto del elemento en negrita, aumentar mucho su tamaño de letra ycambiar el color de fondo eran algunas de las estrategias habituales. Cuando lo anterior noresultaba, se utilizaba directamente la palabra reservada !important para aumentar la prioridadde esa propiedad CSS.

Otro de los problemas habituales en el diseño web está relacionado con el espacio que ocupacada elemento en pantalla. Como los elementos por defecto no muestran ningún borde y su colorde fondo es transparente, no es posible conocer a simple vista el espacio que ocupa cadaelemento. Por lo tanto, cuando se posicionan elementos de forma flotante o cuando se establecenmárgenes, rellenos, alturas y anchuras máximas/mínimas, no es posible visualizar si el navegadorestá mostrando correctamente todos los elementos.

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

Para solucionar este problema la técnica habitual consistía en añadir un borde visible a loselementos. Como los bordes visibles ocupan sitio en pantalla, el problema de esta solución es quemodifica el propio diseño. La alternativa consistía en añadir un color de fondo diferente para cadaelemento. Otra posible alternativa es el uso de la propiedad outline de CSS, que añade un perfilen el contorno de un elemento pero no ocupa sitio y por tanto no modifica el diseño de la página.

Los navegadores modernos como Safari, Opera y Firefox incluyen el soporte de la propiedadoutline, mientras que el navegador Internet Explorer 7 no es capaz de mostrar perfiles en loselementos de la página. El diseñador Chris Page ha publicado un artículo llamado A Handy CSSDebugging Snippet (http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/index.html) en el que muestra unas reglas CSS que hacen uso de outline y permiten depurarfácilmente cualquier diseño sin utilizar herramientas avanzadas:

* { outline: 2px dotted red }

* * { outline: 2px dotted green }

* * * { outline: 2px dotted orange }

* * * * { outline: 2px dotted blue }

* * * * * { outline: 1px solid red }

* * * * * * { outline: 1px solid green }

* * * * * * * { outline: 1px solid orange }

* * * * * * * * { outline: 1px solid blue }

2.4.1. FirebugAl margen de soluciones manuales y técnicas más o menos ingeniosas, los diseñadores webprofesionales de hoy en día utilizan herramientas avanzadas para averiguar con precisión lacausa de los errores de diseño. De todas las herramientas disponibles, la mejor con muchadiferencia es Firebug (https://addons.mozilla.org/es-ES/firefox/addon/1843), una extensión delnavegador Firefox.

Firebug dispone de todas las utilidades que necesitan los diseñadores y programadores web ensu trabajo. Firebug es una herramienta gratuita, completa, fácil de utilizar y para la que se publicannuevas versiones de forma continua.

Después de instalar Firebug, en la esquina inferior derecha del navegador Firefox aparece unnuevo icono. Para acceder a Firebug, se puede pinchar con el ratón sobre ese icono o se puedepulsar directamente la tecla F12 después de cargar la página que se quiere depurar.

Firebug muestra su información dividida en los siguientes paneles: * Consola: muestra mensajesde error, notificaciones y otros tipos de mensajes. No es muy útil para los diseñadores web. *HTML: muestra el código HTML de la página y permite seleccionar los elementos, modificar suscontenidos y ver las reglas CSS que se le están aplicando. * CSS: muestra todas las hojas deestilos incluidas en la página y permite modificar sus valores. * Guión y DOM: paneles

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

relacionados con la programación JavaScript. No son muy útiles para los diseñadores web. * Red:muestra toda la información de todos los elementos descargados por la página (HTML,JavaScript, CSS, imágenes).

El primero de los paneles importantes para los diseñadores web es el panel HTML:

Figura 2.8 Panel HTML de Firebug

El panel HTML es el más utilizado por los diseñadores web, ya que muestra toda la informaciónde la página relacionada con HTML y CSS. En la parte izquierda del panel se muestra el códigoHTML de la página y en la parte derecha la información CSS.

Si se pulsa el botón "Inspeccionar" de la parte superior de Firebug, es posible seleccionar con elratón un elemento de la página web. Después de pinchar sobre cualquier elemento, en la parteizquierda se muestra el código HTML de ese elemento y en la parte derecha todas las reglas CSSque se le aplican.

Si se pulsa sobre el contenido de un elemento en la parte izquierda del panel HTML, se puedemodificar su valor y ver el resultado en tiempo real sobre la propia página web. Desde este mismopanel también es posible eliminar el elemento de la página.

La parte derecha del panel HTML es la más útil, ya que siempre muestra todas las reglas CSSque se aplican a un elemento de la página. Gracias a esta información es imposible dudar si unselector está bien escrito o si una regla CSS realmente se está aplicando a un elemento.

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

Además, como normalmente varias reglas CSS diferentes aplican valores diferentes a las mismaspropiedades de un mismo elemento, Firebug muestra tachadas todas las propiedades que enteoría se deben aplicar al elemento pero que no lo hacen porque existen otras reglas CSS conmás prioridad.

La parte derecha del panel HTML incluye otras utilidades interesantes como cuando se pasa elratón por encima de un color definido en formato hexadecimal y que hace que se vea realmentecuál es el color. Igualmente, al pasar el ratón por encima de una url() utilizada para incluir unaimagen, Firebug muestra de qué imagen se trata. Las reglas CSS que se muestran en la partederecha del panel HTML también se pueden modificar, eliminar y bloquear temporalmente.También es posible añadir nuevas propiedades a cualquier regla CSS.

Firebug muestra por defecto el valor de las reglas CSS tal y como se han establecido en las hojasde estilos. Sin embargo, muchas veces estos valores originales no son prácticos. ¿cuál es eltamaño de letra de un elemento con font-size: 1em? Sin más información es imposible saberlo.¿cuál es la anchura en píxeles de un elemento con la propiedad width: 60%? Imposible saberlosin conocer las anchuras de sus elementos contenedores.

Por todo ello, Firebug permite mostrar los valores que realmente utiliza Firefox para dibujar cadaelemento en pantalla. Pulsando sobre el texto Opciones de la parte derecha del panel HTML, sepuede activar la opción Show Computed Style:

Figura 2.9 Panel HTML de Firebug con la opción Show Computed Style

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

Después de activar esta opción, los tamaños de letra y anchuras se muestran en píxeles y semuestra el valor de todas las propiedades CSS del elemento, independientemente de si se hanestablecido de forma explícita o de si se trata de los valores por defecto que aplica el navegador.

Otra de las utilidades más interesantes del panel HTML es la información sobre la maquetacióndel elemento, que se puede mostrar pinchando sobre la pestaña Maquetación de la parte derechadel panel:

Figura 2.10 Pestaña Maquetación del panel HTML de Firebug

La opción Maquetación muestra la información completa del "box model" o modelo de cajas de unelemento: anchura, altura, rellenos, bordes y márgenes.

El otro panel más utilizado por los diseñadores web es el panel CSS, que muestra el contenido detodas las hojas de estilos que se están aplicando en la página y permite realizar cualquiermodificación sobre cualquier regla CSS viendo el resultado en tiempo real en la propia página:

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

Figura 2.11 Panel CSS de Firebug

Por último, el panel Red de Firebug permite ver toda la información sobre todos los elementos quese descarga el navegador para mostrar la página:

Figura 2.12 Panel Red de Firebug

Desde el punto de vista del diseñador, este panel se puede utilizar para mejorar el rendimiento dela página reduciendo el número de archivos CSS, reduciendo el número de imágenes de adornomediante los sprites CSS, reduciendo el número de peticiones HTTP realizadas al servidor yreduciendo el tamaño de los archivos.

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

2.4.2. Otras herramientas de depuraciónFirebug es la mejor herramienta para depurar el diseño de los sitios web, pero sólo está disponiblepara el navegador Firefox. Como la mayoría de errores en el diseño web sólo se producen en losnavegadores de la familia Internet Explorer, Firebug no se puede utilizar.

Afortunadamente, los creadores de Firebug han publicado una versión reducida y simplificada deFirebug compatible con el resto de navegadores. La versión reducida se denomina Firebug Lite(http://getfirebug.com/lite.html) y requiere el uso de JavaScript. Aunque se puede descargarFirebug Lite para utilizarlo desde nuestros propios servidores, la forma más sencilla de probarla esañadir el siguiente código en la página que se quiere depurar:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/

firebug-lite-compressed.js"></script>

El código anterior se puede colocar en cualquier zona de la página, aunque normalmente seincluye dentro de la sección <head>.

Por último, como las empresas que desarrollan los navegadores consideran que Firebug esinsuperable, desde hace un tiempo se dedican a copiar todas sus características. Internet Explorer8, Safari 3 y Opera 9 disponen de herramientas de depuración que son una réplica de Firebug.

Internet Explorer 8 ha denominado a su herramienta Developer Tools (http://msdn.microsoft.com/en-us/library/cc848894(VS.85).aspx), mientras que Opera la ha denominado Dragonfly(http://www.opera.com/products/dragonfly/) y en Safari está disponible desde el menúDesarrollo.

http://librosweb.es/css_avanzado/capitulo_2/depuracion.html

2.5. Hojas de estilosLas hojas de estilos reales de los sitios web profesionales suelen contener cientos de reglas yocupan miles de líneas. Por este motivo, es imprescindible seguir unas buenas prácticas al crearlas hojas de estilos para mejorar la producitivdad y reducir los posibles errores. A continuación semuestran algunas de las recomendaciones más útiles para crear hojas de estilos profesionales.

2.5.1. LlavesUno de los elementos básicos que los diseñadores web deben acordar es el tipo de llaves que seutilizan para encerrar la declaración de cada regla CSS. Aunque se utilizan muchos modelosdiferentes, a continuación se muestran los más populares.

Llave de apertura en la misma línea del selector y llave de cierre en una nueva línea para separarunas reglas de otras:

selector {

propiedad1: valor1;

propiedad2: valor2;

}

Una variante del modelo anterior consiste en mostrar cada llave en su propia línea, para separaraún más el selector de su declaración. Este modelo lo utilizan normalmente los programadoresweb:

selector

{

propiedad1: valor1;

propiedad2: valor2;

}

Por último, existe un modelo compacto que no crea nuevas líneas para las llaves. Aunque esmucho más compacto, normalmente es más difícil de leer:

selector {

propiedad1: valor1;

propiedad2: valor2; }

2.5.2. TabulacionesTabular el código facilita significativamente su lectura, por lo que tabular las propiedades CSS esuna de las mejores prácticas de los diseñadores web profesionales. Como conocen la mayoría deprogramadores, no es recomendable insertar tabuladores en el código, sino que se debenemplear 2 o 4 espacios en blanco.

/* Propiedades sin tabular */

selector {

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

propiedad1: valor1;

propiedad2: valor2;

}

/* Propiedades tabuladas con 2 espacios */

selector {

propiedad1: valor1;

propiedad2: valor2;

}

Extendiendo la práctica de tabular las propiedades, algunos diseñadores recomiendan tabulartambién las reglas CSS relacionadas. El siguiente ejemplo muestra tres reglas CSS relacionadasentre sí:

ul {

margin: 1em 0;

padding: 0;

}

ul li {

list-style-type: square;

}

ul li ul {

font-style: italic;

list-style-type: disc;

}

La recomendación consiste en tabular las reglas CSS que están relacionadas porque susselectores están anidados. Por tanto, la regla cuyo selector es ul li debería estar tabuladarespecto de la regla ul y de la misma forma la regla cuyo selector es ul li ul debería estartabulada respecto de ul li:

ul {

margin: 1em 0;

padding: 0;

}

ul li {

list-style-type: square;

}

ul li ul {

font-style: italic;

list-style-type: disc;

}

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

2.5.3. PropiedadesCuando se establece la misma propiedad en varios selectores diferentes pero relacionados, serecomienda escribir las reglas CSS en una única línea, para facilitar su lectura:

#contenedor #principal h1 { font-size: 2em; }

#contenedor #principal h2 { font-size: 1.8em; }

#contenedor #principal h3 { font-size: 1.6em; }

Cuando en el caso anterior las propiedades y/o selectores no ocupan el mismo sitio, se puedenutilizar espacios en blanco para crear una estructura similar a las columnas de una tabla:

h1 { color: #000; text-align: center; }

#principal h2 { color: #C0C0C0; font-size: 1.8em; }

#lateral blockquote { font-size: 0.9em; text-align: justify; }

Respecto al orden en el que se indican las propiedades en la declaración, algunos diseñadoresrecomiendan agruparlas por su funcionalidad:

selector {

position: absolute; /* propiedades de posicionamiento */

right: 0;

bottom: 10px;

width: 300px; /* propiedades de tamaño */

height: 250px;

color: #000; /* propiedades tipográficas */

font-size: 2em;

}

Otros diseñadores recomiendan ordenar alfabéticamente las propipedades para facilitar subúsqueda y evitar duplicidades:

selector {

bottom: 10px;

color: #000;

font-size: 2em;

height: 250px;

position: absolute;

right: 0;

width: 300px;

}

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

2.5.4. SelectoresLos selectores deben ser descriptivos para facilitar la lectura de la hoja de estilos, por lo que hayque poner especial cuidado en elegir el nombre de los atributos id y class. Además, aunqueaumenta el tamaño total de la hoja de estilos, se recomienda utilizar selectores lo más específicosposible para facilitar el mantenimiento de la hoja de estilos:

p.especial { ... } /* poco específico */

#contenedor #principal p.especial { ... } /* muy específico */

Por otra parte, cuando una regla CSS tiene varios selectores largos, es mejor colocar cadaselector en su propia línea:

#contenedor h1,

#contenedor #principal h2,

#contenedor #lateral blockquote {

color: #000;

font-family: arial, sans-serif;

}

2.5.5. OrganizaciónCuando una hoja de estilos tiene cientos de reglas, es recomendable organizarla en seccionespara facilitar su mantenimiento. Aunque existen muchas posibles organizaciones, en general seutilizan las siguientes secciones:

• Estilos básicos (estilos de <body>, tipo de letra por defecto, márgenes de <ul>, <ol> y <li>,estilos de los enlaces, etc.)

• Estilos de la estructura o layout (anchura, altura y posición de la cabecera, pie de página,zonas de contenidos, menús de navegación, etc.)

• Estilos del menú de navegación

• Estilos de cada una de las zonas (elementos de la cabecera, titulares y texto de la zona decontenidos, enlaces, listas e imágenes de las zonas laterales, etc.)

Si la hoja de estilos tiene muchas secciones, algunos diseñadores incluyen un índice o tabla decontenidos al principio del todo. En la hoja de estilos del sitio web mozilla.org(http://www.mozilla.org/css/base/content.css) utilizan la siguiente tabla de contenidos:

/* TOC:

Random HTML Styles

Forms

General Structure

Navigation

Quotations

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

Comments and Other Asides

Emphasis

Computers - General

Code

Examples and Figures

Q and A (FAQ)

Tables

Headers

Meta

Specific to Products Pages

*/

Otra recomendación relacionada con la organización de las hojas de estilos es la de utilizarsiempre los mismos nombres para los mismos elementos. Si observas las hojas de estilos de losdiseñadores profesionales, verás que siempre llaman #cabecera o #header o #hd a la cabecerade la página, #contenidos o #principal a la zona principal de contenidos y así sucesivamente.

Algunos de los atributos id más utilizados en los diseños web son: cabecera, cuerpo, pie,contenidos, principal, secundario, lateral, buscador, contacto, logo.

2.5.6. ComentariosSeparar las secciones de la hoja de estilos y otros bloques importantes es mucho más fácilcuando se incluyen comentarios. Por este motivo se han definido decenas de tipos diferentes decomentarios separadores.

El modelo básico sólo añade un comentario destacado para el inicio de cada sección importante:

/* ---------------------------------------*/

/* ---------->>> CONTENEDOR <<<-----------*/

/* ---------------------------------------*/

Otros diseñadores emplean diferentes comentarios para indicar el comienzo de las secciones y elde las partes importantes dentro de una sección:

/* -------------------------------------------------------------

CABECERA

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Logotipo

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Buscador

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

Combinando los comentarios y la tabulación de reglas, la estructura de la hoja de estilos estácompletamente ordenada:

/* -------------------------------------------------------------

CABECERA

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#cabecera {

...

}

/* Logotipo

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#cabecera #logo {

...

}

/* Buscador

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#cabecera #buscador {

...

}

http://librosweb.es/css_avanzado/capitulo_2/hojas_de_estilos.html

2.6. RendimientoAntes de su explicación detallada, se muestra a continuación la lista de estrategias útiles paramejorar el rendimiento de la parte de CSS de las páginas web:

• Utilizar sprites CSS para reducir el número de imágenes de adorno a una única imagen.

• No utilizar expresiones (expression()) en las hojas de estilos. El navegador Internet Explorerrevalúa continuamente el valor de las expresiones y puede penalizar el rendimiento de lapágina.

• No utilizar los filtros de Internet Explorer, ya que algunos filtros como AlphaImageLoader

bloquean la carga de la página hasta que no se descarga la imagen utilizada por el filtro.

• Enlazar hojas de estilos externas en vez de incluir los estilos en la propia página.

• Enlazar las hojas de estilos mediante <link> en vez de @import (en Internet Explorer lasreglas @import tienen el mismo efecto que enlazar los archivos CSS al final de la página).

• Reducir el número de archivos CSS de la página.

• Combinar si es posible todos los archivos CSS individuales en un único archivo CSS.

• Reducir el tamaño de las hojas de estilos comprimiendo los archivos con las herramientasdisponibles (CSS Tidy, YUI Compressor).

• Comprimir los archivos CSS en el servidor web antes de enviarlos al usuario.

Según los estudios realizados por Yahoo! y publicados en el artículo Performance Research, Part1: What the 80/20 Rule Tells Us about Reducing HTTP Requests (http://yuiblog.com/blog/2006/11/28/performance-research-part-1/), del tiempo total que el usuario espera hasta que la páginasolicitada se carga completamente, el 20% del tiempo corresponde a la parte del servidor(normalmente generar la página HTML de forma dinámica utilizado información de una base dedatos) y el 80% restante corresponde a la parte del cliente (normalmente descargar hojas deestilos CSS, archivos JavaScript e imágenes).

De esta forma, es mucho más fácil mejorar el tiempo de respuesta de la página mejorando elrendimiento de la parte del cliente. Como uno de los principales elementos de la parte del clienteestá formado por las hojas de estilos CSS, a continuación se indican algunas de las técnicas paramejorar su rendimiento.

http://librosweb.es/css_avanzado/capitulo_2/rendimiento.html

En primer lugar, en los estudios realizados por Yahoo! se demuestra que aproximadamente el20% de las páginas vistas de un sitio web no disponen de sus elementos guardados en la cachedel navegador del usuario. Esto supone que en el 20% de las páginas vistas, los navegadores delos usuarios se descargan todos sus elementos: imágenes, archivos JavaScript y hojas de estilosCSS.

La conclusión de lo anterior es que resulta mucho mejor reducir el número de archivos diferentes yno reducir el tamaño de cada archivo individual. El objetivo es reducir el número de peticionesHTTP que la página realiza al servidor para descargar todos los contenidos.

Los navegadores limitan el número de peticiones HTTP simultáneas que se pueden realizar a unmismo servidor. Aunque el número máximo de peticiones varía de un navegador a otro, el límitese encuentra entre 2 y 8. Por tanto, si el límite del navegador son 2 peticiones HTTP simultáneas,cuando el navegador realice 2 peticiones, la descarga de la página se bloquea hasta que algunade las peticiones concluya.

Como demuestran los estudios realizados por Yahoo!, la descarga de las páginas web se realiza asaltos, descargando cada vez 2, 4 o 6 elementos de la página. Por este motivo es fundamentalreducir el número de elementos de la página, entre ellos el número de hojas de estilos CSS, parareducir el número de peticiones HTTP necesarias.

La recomendación de reducir el número de hojas de estilos CSS entra en conflicto con larecomendación de modularizar el diseño CSS del sitio web separando de forma lógica todos susestilos en varios archivos individuales.

La solución consiste en combinar todos los archivos CSS individuales en un único archivo CSS.Aunque la hoja de estilos resultante tiene un tamaño muy grande, el número de peticiones HTTPrequeridas para la parte de CSS se reduce al mínimo posible.

El siguiente paso consiste en reducir el tamaño de esa única hoja de estilos grande. Como losarchivos CSS normales incluyen muchos espacios en blanco, nuevas líneas, comentarios ypropiedades no optimizadas, es muy sencillo reducir su tamaño de forma considerable eliminandotodos los elementos sobrantes.

Yahoo! ha desarrollado una herramienta llamada YUI compressor (http://developer.yahoo.com/yui/compressor/) que permite reducir de forma segura el tamaño de los archivos JavaScript y CSS. Suuso no es muy cómodo para los diseñadores web, ya que requiere el uso de Java y la línea decomandos.

Otra herramienta similar a la anterior es CSSTidy (http://csstidy.sourceforge.net/), que permitereducir el tamaño de los archivos CSS eliminando los elementos sobrantes (comentarios,espacios en blanco, nuevas líneas) y optimizando las reglas CSS (sustituir propiedades

http://librosweb.es/css_avanzado/capitulo_2/rendimiento.html

individuales por propiedades shorthand, utilizar la notación abreviada de números y colores, etc.)CSS Tidy es una herramienta gratuita disponible para todos los sitemas operativos, se puedeutilizar mediante la línea de comandos y también se puede integrar con el lenguaje deprogramación PHP.

Además de las herramientas descargables, existen aplicaciones online que permiten reducirfácilmente el tamaño del código CSS indicado. Una de las aplicaciones más conocidas es CleanCSS (http://www.cleancss.com/), que utiliza internamente CSS Tidy.

http://librosweb.es/css_avanzado/capitulo_2/rendimiento.html

2.7. Recursos imprescindiblesEl trabajo de los diseñadores web se visualiza a través de un navegador web la mayoría de lasocasiones. Por este motivo, los diseñadores siempre están limitados por las capacidades de losnavegadores. Además, los diseñadores también están expuestos a los errores que comete cadaversión de cada navegador.

De esta forma, es imprescindible disponer de recursos para conocer las limitaciones y errores decada navegador. A continuación se indica la localización de la documentación técnica oficial decada navegador.

Información técnica general para diseñadores y programadores web:

• Internet Explorer (http://msdn.microsoft.com/en-us/ie/default.aspx)

• Firefox (http://developer.mozilla.org/en/Main_Page)

• Safari (http://developer.apple.com/internet/safari/)

• Opera (http://www.opera.com/docs/specs/)

Información técnica específica de CSS:

• Internet Explorer (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx)

• Firefox (http://developer.mozilla.org/en/CSS_Reference)

• Safari (http://developer.apple.com/internet/safari/safari_css.html)

• Opera (http://www.opera.com/docs/specs/css/)

Al margen de las referencias oficiales, existen sitios como http://positioniseverything.net/ quepublican artículos técnicos sobre los errores más conocidos de cada navegador.

http://librosweb.es/css_avanzado/capitulo_2/recursos_imprescindibles.html

Capítulo 3. SelectoresConocer y dominar todos los selectores de CSS es imprescindible para crear diseños webprofesionales. El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, quepermiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementosdentro de una página web.

Utilizando solamente los cinco selectores básicos de CSS 2.1 (universal, de tipo, descendente, declase y de id) es posible diseñar cualquier página web. No obstante, los selectores avanzados deCSS 2.1 permiten simplificar las reglas CSS y también el código HTML.

Desafortunadamente, los navegadores obsoletos como Internet Explorer 6 y sus versionesanteriores no soportan este tipo de selectores avanzados, por lo que su uso no era común hastahace poco tiempo. Hoy en día, todos los navegadores más utilizados soportan los selectoresavanzados de CSS 2.1 y algunos de ellos también soportan la mayoría o todos los selectorespropuestos por la futura versión CSS 3.

http://librosweb.es/css_avanzado/capitulo_3.html

3.1. Selector de hijosSe trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento.Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el"signo de mayor que" (>).

Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro,independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe serhijo directo de otro elemento.

p > span { color: blue; }

<p>

<span>Texto1</span>

</p>

<p>

<a href="#">

<span>Texto2</span>

</a>

</p>

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> quesea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condicióndel selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendientepero no es hijo directo de un elemento <p>.

Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selectordescendente y el selector de hijos:

p a { color: red; }

p > a { color: red; }

<p>

<a href="#">Enlace1</a>

</p>

<p>

<span>

<a href="#">Enlace2</a>

</span>

</p>

http://librosweb.es/css_avanzado/capitulo_3/selector_de_hijos.html

El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a>

que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplicana los dos enlaces.

El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo deun elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace delejemplo anterior.

http://librosweb.es/css_avanzado/capitulo_3/selector_de_hijos.html

3.2. Selector adyacenteEl selector adyacente se emplea para seleccionar elementos que son hermanos (su elementopadre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis elsímbolo +. Si se considera el siguiente ejemplo:

h1 + h2 { color: red }

<body>

<h1>Titulo1</h1>

<h2>Subtítulo</h2>

...

<h2>Otro subtítulo</h2>

...

</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no alsegundo <h2>, ya que:

• El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así,los dos elementos <h2> cumplen la primera condición del selector adyacente.

• El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por loque este elemento <h2> también cumple la segunda condición del selector adyacente.

• Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, porlo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican losestilos de h1 + h2.

El siguiente ejemplo puede ser útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo laprimera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentrode un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, elselector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.

El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elementopadre debe ser el mismo. Si se considera el siguiente ejemplo:

p + p { color: red; }

http://librosweb.es/css_avanzado/capitulo_3/selector_adyacente.html

<p>Lorem ipsum dolor sit amet...</p>

<p>Lorem ipsum dolor sit amet...</p>

<div>

<p>Lorem ipsum dolor sit amet...</p>

</div>

En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:

• El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de lascondiciones de p + p

• El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por loque se cumplen las dos condiciones del selector p + p y el párrafo muestra su texto de colorrojo.

• El tercer párrafo se encuentra dentro de un elemento <div>, por lo que no se cumple ningunacondición del selector p + p ya que ni va precedido de un párrafo ni comparte padre conningún otro párrafo.

http://librosweb.es/css_avanzado/capitulo_3/selector_adyacente.html

3.3. Selector de atributosEl último tipo de selectores avanzados lo forman los selectores de atributos, que permitenseleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

• [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.

• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributollamado nombre_atributo con un valor igual a valor.

• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributollamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios enblanco en la que al menos una de ellas es exactamente igual a valor.

• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributollamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, peroque comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang queindican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */

a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" con el valor "externo" */

a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten

al sitio "http://www.ejemplo.com" */

a[href="http://www.ejemplo.com"] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" en el que al menos uno de sus valores

sea "externo" */

a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" sea igual a "en", es decir, todos los elementos en inglés */

*[lang=en] { ... }

http://librosweb.es/css_avanzado/capitulo_3/selector_de_atributos.html

/* Selecciona todos los elementos de la página cuyo atributo

"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */

*[lang|="es"] { color : red }

http://librosweb.es/css_avanzado/capitulo_3/selector_de_atributos.html

3.4. Pseudo-clases3.4.1. La pseudo-clase :first-childLa pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Si seconsidera el siguiente ejemplo:

p em:first-child {

color: red;

}

<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing

elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.

Praesent nulla ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p>

El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento yque se encuentre dentro de un elemento <p>. Por tanto, en el ejemplo anterior sólo el primer <em>se ve de color rojo.

La pseudo-clase :first-child también se puede utilizar en los selectores simples, como semuestra a continuación:

p:first-child { ... }

La regla CSS anterior aplica sus estilos al primer párrafo de cualquier elemento. Si se modifica elejemplo anterior y se utiliza un selector compuesto:

p:first-child em {

color: red;

}

<body>

<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing

elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>

<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing

elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>

<div>

<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing

elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>

</div>

</body>

El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentrendentro de un elemento <p> que sea el primer hijo de cualquier otro elemento.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html

El primer párrafo del ejemplo anterior es el primer hijo de <body>, por lo que sus <em> se ven decolor rojo. El segundo párrafo de la página no es el primer hijo de ningún elemento, por lo que suselementos <em> interiores no se ven afectados. Por último, el tercer párrafo de la página es elprimer hijo del elemento <div>, por lo que sus elementos <em> se ven de la misma forma que losdel primer párrafo.

3.4.2. Las pseudo-clases :link y :visitedLas pseudo-clases :link y :visited se pueden utilizar para aplicar diferentes estilos a losenlaces de una misma página:

• La pseudo-clase :link se aplica a todos los enlaces que todavía no han sido visitados por elusuario.

• La pseudo-clase :visited se aplica a todos los enlaces que han sido visitados al menos unavez por el usuario.

El navegador gestiona de forma automática el cambio de enlace no visitado a enlace visitado.Aunque el usuario puede borrar la cache y el historial de navegación de forma explícita, losnavegadores también borran de forma periódica la lista de enlaces visitados.

Por su propia definición, las pseudo-clases :link y :visited son mutuamente excluyentes, deforma que un mismo enlace no puede estar en los dos estados de forma simultánea.

Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados decolor morado, es habitual modificar los estilos para adaptarlos a la guía de estilo del sitio web:

a:link { color: red; }

a:visited { color: green; }

3.4.3. Las pseudo-clases :hover, :active y :focusLas pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de unelemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y:visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar acualquier elemento.

A continuación se indican las acciones del usuario que activan cada pseudo-clase:

• :hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador porencima de un elemento.

• :active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con elratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente

http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html

imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que losuelta.

• :focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando elelemento está seleccionado. Normalmente se aplica a los elementos <input> de losformularios cuando están activados y por tanto, se puede escribir directamente en esoscampos.

De las definiciones anteriores se desprende que un mismo elemento puede verse afectado porvarias pseudo-clases diferentes de forma simultánea. Cuando se pulsa por ejemplo un enlace quefue visitado previamente, al enlace le afectan las pseudo-clases :visited, :hover y :active.

Debido a esta característica y al comportamiento en cascada de los estilos CSS, es importantecuidar el orden en el que se establecen las diferentes pseudo-clases. El siguiente ejemplomuestra el único orden correcto para establecer las cuatro pseudo-clases principales en unenlace:

a:link { ... }

a:visited { ... }

a:hover { ... }

a:active { ... }

Los navegadores obsoletos como Internet Explorer 6 y sus versiones anteriores no son capacesde aplicar estas pseudo-clases a los elementos que no sean enlaces.

Por último, también es posible aplicar estilos combinando varias pseudo-clases compatibles entresí. La siguiente regla CSS por ejemplo sólo se aplica a aquellos enlaces que están seleccionadosy en los que el usuario pasa el ratón por encima:

a:focus:hover { ... }

3.4.4. La pseudo-clase :langLa pseudo-clase :lang se emplea para seleccionar elementos en función de su idioma. Losnavegadores utilizan los atributos lang, las etiquetas <meta> y la información de la respuesta delservidor para determinar el idioma de cada elemento.

Si se considera el siguiente ejemplo:

p { color: blue; }

p:lang(es) { color: red; }

Los párrafos del ejemplo anterior se ven de color azul, salvo los párrafos cuyo contenido estéescrito en español, que se ven de color rojo.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html

Como los navegadores actuales no son capaces de inferir el idioma de un elemento a partir de sucontenido, el uso de esta clase está muy limitado salvo que la página utilice de forma explícita losatributos lang:

<p lang="en">Lorem ipsum dolor sit amet...</p>

<div lang="fr">

<p>Lorem ipsum dolor sit amet...</p>

<p lang="es_ES">Lorem ipsum dolor sit amet...</p>

</div>

<p lang="en">Lorem ipsum dolor sit amet...</p>

<ul>

<li lang="fr">Lorem ipsum dolor sit amet...</li>

</ul>

La pseudo-clase :lang(xx) es muy diferente al selector de atributos [lang|=xx], tal y comomuestran las siguientes reglas:

*[lang|=es] { ... } /* selector de atributo */

*:lang(es) { ... } /* pseudo-clase */

<body lang="es">

<p>Lorem ipsum dolor sit amet...</p>

</body>

El selector *[lang|=es] selecciona todos los elementos de la página que tengan un atributollamado lang cuyo valor empiece por es. En el ejemplo anterior, solamente el elemento <body>

cumple con la condición del selector.

Por otra parte, el selector *:lang(es) selecciona todos los elementos de la página cuyo idiomasea el español, sin tener en cuenta el método empleado por el navegador para averiguar el idiomade cada elemento. En este caso, tanto el elemento <body> como el elemento <p> cumplen estacondición.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html

3.5. Pseudo-elementosLos selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes parapoder aplicar estilos a algunos elementos especiales. Si se desea por ejemplo cambiar el estilo dela primera línea de texto de un elemento, no es posible hacerlo con las utilidades anteriores.

La primera línea del texto normalmente es variable porque el usuario puede aumentar y disminuirla ventana del navegador, puede disponer de más o menos resolución en su monitor y tambiénpuede aumentar o disminuir el tamaño de letra del texto.

La única forma de poder seleccionar estos elementos especiales es mediante los pseudo-elementos definidos por CSS para este propósito.

3.5.1. El pseudo-elemento :first-lineEl pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento.Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:

p:first-line { text-transform: uppercase; }

Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos delas tablas.

Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:

div:first-line { color: red; }

p:first-line { text-transform: uppercase; }

<div>

<p>Lorem ipsum dolor sit amet...</p>

<p>Lorem ipsum dolor sit amet...</p>

<p>Lorem ipsum dolor sit amet...</p>

</div>

En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento<div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.

3.5.2. El pseudo-elemento :first-letterEl pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea detexto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primeraletra del texto de cada párrafo:

p:first-letter { text-transform: uppercase; }

Los signos de puntuación y los caracteres como las comillas que se encuentran antes y despuésde la primera letra también se ven afectados por este pseudo-elemento.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_elementos.html

Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos delas tablas.

3.5.3. Los pseudo-elementos :before y :afterLos pseudo-elementos :before y :after se utilizan en combinación con la propiedad content deCSS para añadir contenidos antes o después del contenido original de un elemento.

Las siguientes reglas CSS añaden el texto Capítulo - delante de cada título de sección <h1> y elcarácter . detrás de cada párrafo de la página:

h1:before { content: "Capítulo - "; }

p:after { content: "."; }

El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta enlos otros pseudo-elementos :first-line y :first-letter.

http://librosweb.es/css_avanzado/capitulo_3/pseudo_elementos.html

3.6. Selectores de CSS 3La futura versión CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas deselectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicacióndetallada se puede encontrar en el módulo de selectores de CSS 3 (http://www.w3.org/TR/css3-selectors/).

En primer lugar, CSS 3 añade tres nuevos selectores de atributos:

• elemento[atributo^="valor"], selecciona todos los elementos que disponen de eseatributo y cuyo valor comienza exactamente por la cadena de texto indicada.

• elemento[atributo$="valor"], selecciona todos los elementos que disponen de eseatributo y cuyo valor termina exactamente por la cadena de texto indicada.

• elemento[atributo*="valor"], selecciona todos los elementos que disponen de eseatributo y cuyo valor contiene la cadena de texto indicada.

De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:

/* Selecciona todos los enlaces que apuntan a una dirección de correo

electrónico */

a[href^="mailto:"] { ... }

/* Selecciona todos los enlaces que apuntan a una página HTML */

a[href$=".html"] { ... }

/* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra

"capítulo" */

h1[title*="capítulo"] { ... }

Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", quegeneraliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y seleccionael elemento2 que es hermano de elemento1 y se encuentra detrás en el código HTML. En elselector adyacente la condición adicional era que los dos elementos debían estar uno detrás deotro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.

Si se considera el siguiente ejemplo:

h1 + h2 { ... } /* selector adyacente */

h1 ~ h2 { ... } /* selector general de hermanos */

<h1>...</h1>

<h2>...</h2>

<p>...</p>

http://librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html

<div>

<h2>...</h2>

</div>

<h2>...</h2>

El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya que es elúnico que cumple que es hermano de <h1> y se encuentra justo detrás en el código HTML. Por suparte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la página salvo elsegundo. Aunque el segundo <h2> se encuentra detrás de <h1> en el código HTML, no sonelementos hermanos porque no tienen el mismo elemento padre.

Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora seutilizan :: en vez de : delante del nombre de cada pseudo-elemento:

• ::first-line, selecciona la primera línea del texto de un elemento.

• ::first-letter, selecciona la primera letra del texto de un elemento.

• ::before, selecciona la parte anterior al contenido de un elemento para insertar nuevocontenido generado.

• ::after, selecciona la parte posterior al contenido de un elemento para insertar nuevocontenido generado.

CSS 3 añade además un nuevo pseudo-elemento:

• ::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.

Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12nuevas, entre las cuales se encuentran:

• elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de quesea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo deun elemento, el quinto elemento de una lista, etc.

• elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empiezaa contar desde el último hijo.

• elemento:empty, selecciona el elemento indicado pero con la condición de que no tenganingún hijo. La condición implica que tampoco puede tener ningún contenido de texto.

http://librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html

• elemento:first-child y elemento:last-child, seleccionan los elementos indicados perocon la condición de que sean respectivamente los primeros o últimos hijos de su elementopadre.

• elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición deque sea el enésimo elemento hermano de ese tipo.

• elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado seempieza a contar desde el último hijo.

Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejaspara realizar selecciones avanzadas:

li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una

lista */

li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una

lista */

/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */

p:nth-child(4n+1) { ... }

p:nth-child(4n+2) { ... }

p:nth-child(4n+3) { ... }

p:nth-child(4n+4) { ... }

Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen laposición de las imágenes en función de la posición de la imagen anterior:

img:nth-of-type(2n+1) { float: right; }

img:nth-of-type(2n) { float: left; }

Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar paraseleccionar todos los elementos que no cumplen con la condición de un selector:

:not(p) { ... } /* selecciona todos los elementos de la página que no sean

párrafos */

:not(#especial) { ... } /* selecciona cualquier elemento cuyo atributo id no

sea "especial" */

Aunque todavía faltan muchos años hasta que la versión CSS 3 sustituya a la actual versión CSS2.1, los navegadores que más se preocupan por los estándares (Opera, Safari y Firefox) incluyensoporte para varios o casi todos los selectores de CSS 3.

Existe una herramienta llamada CSS Selectors test (http://www.css3.info/selectors-test/) quepermite comprobar los selectores que soporta el navegador con el que se hace la prueba.

http://librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html

Capítulo 4. Propiedades avanzadasEl estándar CSS 2.1 incluye 115 propiedades que abarcan el modelo de cajas (box model), latipografía, las tablas, las listas, el posicionamiento de los elementos, la generación de contenidosy los medios impresos y auditivos.

Aunque la mayoría de diseñadores web conocen y utilizan casi todas las propiedades de CSS 2.1,no siempre hacen uso de todas sus posibilidades. Algunas propiedades de CSS 2.1 han sidoinfrautilizadas hasta hace poco tiempo porque los navegadores no las soportaban.

Afortunadamente, los navegadores que más se preocupan por los estándares (Firefox, Safari yOpera) ya incluyen soporte completo de casi todas las propiedades de CSS 2.1, con la únicaexcepción de las propiedades relacionadas con los medios auditivos. Por su parte, InternetExplorer 8 promete que incluirá soporte completo de todas las propiedades de CSS 2.1.

http://librosweb.es/css_avanzado/capitulo_4.html

• normal • pre • nowrap

• pre-wrap • pre-line • inherit

4.1. Propiedad white-spaceDefinición Establece el tratamiento de los espacios en blanco

Valorespermitidos

Uno y sólo uno de los siguientes valores:

Valor inicial normal

Se aplica a Todos los elementos

Válida en medios visuales

Se hereda si

Definición enel estándar w3.org/TR/CSS21/text.html#propdef-white-space

El tratamiento de los espacios en blanco en el código HTML es una de las características másdesconcertantes para los diseñadores web que comienzan a crear páginas. A continuación semuestra cómo visualizan los navegadores dos párrafos de ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.

Aunque los dos párrafos anteriores se visualizan de la misma forma, en realidad su código HTMLes completamente diferente:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis

tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula

ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem.

Donec mollis nunc in leo.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor

id ornare ultrices, ligula ipsum tincidunt pede, et blandit

sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in

leo.</p>

http://librosweb.es/css_avanzado/capitulo_4/propiedad_white_space.html

El segundo párrafo contiene numerosos espacios en blanco y saltos de línea. Sin embargo, comolos navegadores eliminan automáticamente todos los espacios en blanco sobrantes, los dospárrafos se ven exactamente igual.

En el estándar HTML un "espacio en blanco" puede ser un salto de línea, un tabulador y unespacio en blanco normal. Los navegadores eliminan de forma automática todos los espacios enblanco sobrantes salvo el espacio en blanco que separa las palabras del texto.

La única excepción de este comportamiento es la etiqueta <pre> de HTML, utilizada para mostrartexto que ya tiene formato (su nombre viene de preformateado) y que por tanto respeta todos losespacios en blanco y todos los saltos de línea:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor

id ornare ultrices, ligula ipsum tincidunt pede, et blandit

sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.

El código HTML del ejemplo anterior es:

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor

id ornare ultrices, ligula ipsum tincidunt pede, et blandit

sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in

leo.</pre>

La propiedad white-space permite variar el comportamiento de los espacios en blanco. Elestándar CSS 2.1 define cinco modelos diferentes de tratamiento de espacios en blanco:

• normal: los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, eltexto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgandel elemento contenedor.

• pre: no se eliminan los espacios en blanco sobrantes y sólo se muestran los saltos de líneaincluidos en el texto original. Este comportamiento puede provocar que los contenidos detexto se salgan de su elemento contenedor.

• nowrap: se comporta igual que normal en los espacios en blanco, pero no añade saltos delínea en el texto original, por lo que los contenidos se pueden salir de su elementocontenedor.

• pre-wrap: se comporta igual que pre, pero se introducen los saltos de línea que seannecesarios para que los contenidos de texto nunca se salgan de su elemento contenedor.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_white_space.html

• pre-line: se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de líneaoriginales y se crean tantos saltos de línea como sean necesarios para que el contenido detexto no se salga de su elemento contenedor.

Como las explicaciones incluídas en el estándar CSS 2.1 pueden llegar a ser confusas, lasiguiente tabla resume el comportamiento de cada valor:

Valor Respeta espacios en blanco Respeta saltos de línea Ajusta las líneas

normal no no si

pre si si no

nowrap no no no

pre-wrap si si si

pre-line no si si

A continuación se muestra el efecto de cada modelo de tratamiento de espacios en blanco sobreun mismo párrafo que contiene espacios en blanco y saltos de línea y que se encuentra dentro deun elemento contenedor de anchura limitada:

[white-space: normal] Lorem ipsum dolor sitamet, consectetuer adipiscing elit. Vestibulumdictum. Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptoshymenaeos.

[white-space: pre] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent perconubia nostra, per inceptos hymenaeos.

[white-space: pre-wrap] Lorem ipsum dolor sitamet, consectetuer adipiscing elit.Vestibulum dictum. Class aptent tacitisociosqu ad litora torquent perconubia nostra, per inceptos hymenaeos.

[white-space: nowrap] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_white_space.html

[white-space: pre-line] Lorem ipsum dolor sitamet, consectetuer adipiscing elit.Vestibulum dictum. Class aptent taciti sociosquad litora torquent perconubia nostra, per inceptos hymenaeos.

Los valores más utilizados son normal, pre y pre-wrap. El valor normal se puede emplear porejemplo en un elemento <pre> que se quiere mostrar como si fuera un párrafo:

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor

id ornare ultrices, ligula ipsum tincidunt pede, et blandit

sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in

leo.</pre>

<pre style="white-space: normal">Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus fermentum,

tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede

suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</pre>

De la misma forma, el valor pre se puede emplear en un párrafo de texto que se quiere mostrarcomo si fuera un elemento <pre>:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</p>

<p style="white-space: pre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortorid ornare ultrices, ligula ipsum tincidunt pede, et blanditsem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</p>

Por último, el valor pre-wrap es muy útil cuando se quiere mostrar un texto de la forma más fielposible a su formato original (respetando espacios en blanco y saltos de línea) pero sin que elcontenido de texto se salga de su elemento contenedor.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_white_space.html

• inline • block • list-item

• run-in • inline-block • table

• inline-table • table-row-group • table-header-group

• table-footer-group • table-row • table-column-group

• table-column • table-cell • table-caption

• none • inherit

4.2. Propiedad displayDefinición Establece el tipo de caja generada por un elemento

Valorespermitidos

Uno y sólo uno de los siguientes valores:

Valor inicial iinline

Se aplica a Todos los elementos

Válida en all

Se hereda no

Definición enel estándar w3.org/TR/CSS21/visuren.html#propdef-display

La propiedad display es una de las propiedades CSS más infrautilizadas. Aunque todos losdiseñadores conocen esta propiedad y utilizan sus valores inline, block y none, las posibilidadesde display son mucho más avanzadas.

De hecho, la propiedad display es una de las más complejas de CSS 2.1, ya que establece eltipo de la caja que genera cada elemento. La propiedad display es tan compleja que casi ningúnnavegador es capaz de mostrar correctamente todos sus valores.

El valor más sencillo de display es none que hace que el elemento no genere ninguna caja. Elresultado es que el elemento desaparece por completo de la página y no ocupa sitio, por lo quelos elementos adyacentes ocupan su lugar. Si se utiliza la propiedad display: none sobre unelemento, todos sus descendientes también desaparecen por completo de la página.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

Si se quiere hacer un elemento invisible, es decir, que no se vea pero que siga ocupando elmismo sitio, se debe utilizar la propiedad visibility. La propiedad display: none se utilizahabitualmente en aplicaciones web dinámicas creadas con JavaScript y que muestran/ocultancontenidos cuando el usuario realiza alguna acción como pulsar un botón o un enlace.

Los otros dos valores más utilizados son block e inline que hacen que la caja de un elementosea de bloque o en línea respectivamente. El siguiente ejemplo muestra un párrafo y variosenlaces a los que se les ha añadido un borde para mostrar el espacio ocupado por cada caja:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum Donec mollis nunc in leo Vivamus fermentumComo el párrafo es por defecto un elemento de bloque ("block element"), ocupa todo el espaciodisponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio. Por su parte,los enlaces por defecto son elementos en línea ("inline element"), por lo que su caja sólo ocupa elespacio necesario para mostrar sus contenidos.

Si se aplica la propiedad display: inline al párrafo del ejemplo anterior, su caja se convierte enun elemento en línea y por tanto sólo ocupa el espacio necesario para mostrar sus contenidos:

[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum Donecmollis nunc in leo Vivamus fermentumPara visualizar más claramente el cambio en el tipo de caja, el siguiente ejemplo muestra unmismo párrafo largo con display: block y display: inline:

[display: block] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quistellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede,et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.

[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellusvulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, etblandit sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.De la misma forma, si en los enlaces del ejemplo anterior se emplea la propiedad display: block

se transforman en elementos de bloque, por lo que siempre empiezan en una nueva línea ysiempre ocupan todo el espacio disponible en la línea, aunque sus contenidos no ocupen todo elsitio:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

[display: block] Lorem ipsum

[display: block] Donec mollis nunc in leo

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

[display: block] Vivamus fermentum

Uno de los valores más curiosos de display es inline-block, que crea cajas que son de bloquey en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera debloque, pero respecto a los elementos que la rodean es una caja en línea.

El enlace del siguiente ejemplo es de tipo inline-block, lo que permite por ejemplo establecerleun tamaño mediante la propiedad width:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem

pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.

[display: inline-block,width: 25%] Quisquesemper, magna sedpharetra tincidunt,quam urna dapibusdolor, a dignissim semneque id purus. Etiamluctus viverra nisi.

Integer lobortis accumsan felis. Cras venenatis. Morbi cursus, tellus vitae iaculis pulvinar, turpisnibh posuere nisl, sed vehicula massa orci at dui. Morbi pede ipsum, porta quis, venenatis et,ullamcorper in, metus. Nulla facilisi. Quisque laoreet molestie mi. Ut mollis elit eget urna.

Si tu navegador soporta el valor inline-block, el ejemplo anterior se debe visualizar de formasimilar a la siguiente imagen:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

Figura 4.1 Ejemplo del valor inline-block de la propiedad display

Otro de los valores definidos por la propiedad display es list-item, que hace que cualquierelemento de cualquier tipo se muestre como si fuera un elemento de una lista (elemento <li>). Elsiguiente ejemplo muestra tres párrafos que utilizan la propiedad display: list-item parasimular que son una lista de elementos de tipo <ul>:

•Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

•Sed non sem quis tellus vulputate lobortis.

•Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pedesuscipit pede.

A continuación se muestra el código HTML del ejemplo anterior:

<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.</p>

<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus

vulputate lobortis.</p>

<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id

ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit

pede.</p>

Los elementos con la propiedad display: list-item son exactamente iguales que los elementos<li> a efectos de su visualización, por lo que se pueden utilizar las propiedades de listas comolist-style-type, list-style-image, list-style-position y list-style.

Otro de los valores curiosos de la propiedad display es run-in, que genera una caja de bloque ouna caja en línea dependiendo del contexto, es decir, dependiendo de sus elementos adyacentes.El comportamiento de las cajas de tipo run-in se rige por las siguientes reglas:

• Si la caja run-in contiene una caja de bloque, la caja run-in se convierte en una caja debloque.

• Si después de la caja run-in se encuentra una caja de bloque (que no esté posicionada deforma absoluta y tampoco esté posicionada de forma flotante), la caja run-in se convierte enuna caja en línea en el interior de la caja de bloque.

• En cualquier otro caso, la caja run-in se convierte en una caja de bloque.

El siguiente ejemplo muestra una misma caja de tipo run-in que se visualiza de forma muydiferente en función del tipo de caja que existe a continuación:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

[display: run-in] Lorem ipsum [display: block] dolor sit amet, consectetuer adipiscing elit.

[display: run-in] Lorem ipsum [display: inline] dolor sit amet, consectetuer adipiscing elit.El código HTML y CSS del ejemplo anterior se muestra a continuación:

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display:

run-in]</strong> Lorem ipsum</p>

<p style="display: block; border: 2px solid #000;"><strong>[display:

block]</strong> dolor sit amet, consectetuer adipiscing elit.</p>

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display:

run-in]</strong> Lorem ipsum</p>

<p style="display: inline; border: 2px solid #000;"><strong>[display:

inline]</strong> dolor sit amet, consectetuer adipiscing elit.</p>

En la actualidad sólo la última versión del navegador Opera es capaz de mostrar correctamente elejemplo anterior, tal y como muestra la siguiente imagen:

Figura 4.2 Ejemplo del valor run-in de la propiedad display

El estándar CSS 2.1 incluye un ejemplo del posible uso del valor run-in. En este ejemplo, untítulo de sección <h3> crea una caja run-in, de forma que cuando va seguido de un párrafo, eltitular se mete dentro del párrafo:

<h3 style="display: run-in">Lorem ipsum dolor sit amet</h3>

<p>Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id

ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.

Nulla cursus porta sem. Donec mollis nunc in leo. Integer lobortis accumsan

felis.</p>

El resto de valores de la propiedad display están relacionados con las tablas y hacen que unelemento se muestre como si fuera una parte de una tabla: fila, columna, celda o grupos de filas/columnas. Los valores definidos por la propiedad display son inline-table, table-row-group,table-header-group, table-footer-group, table-row, table-column-group, table-column,table-cell, table-caption.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

Aunque los valores relacionados con las tablas son los más avanzados, también son los que peorsoportan los navegadores. A continuación se muestra un ejemplo con tres párrafos de texto queestablecen la propiedad display: table-cell:

[display: table-cell]Lorem ipsum dolor sitamet, consectetueradipiscing elit. Maecenasnon tortor. Vestibulumante ipsum primis infaucibus orci luctus etultrices posuere cubiliaCurae; Sed fermentumlorem a velit.

[display: table-cell] Inmolestie suscipit libero.Cras sem. Nunc non telluset urna mattis tempor.Nulla nec tellus a quamhendrerit venenatis.Suspendisse pellentesqueodio et est. Morbi sed nislsed dui consequatsodales.

[display: table-cell] Morbi sed nisl seddui consequat sodales. Vivamus ornarefelis nec est. Phasellus massa justo,ornare sed, malesuada a, dignissim a,nibh. Vestibulum vitae nunc at lectuseuismod feugiat. Nullam eleifend. Classaptent taciti sociosqu ad litora torquentper conubia nostra, per inceptoshimenaeos. In ut ipsum.

La propiedad display: table-cell hace que cualquier elemento se muestre como si fuera unacelda de una tabla. Como en el ejemplo anterior los tres elementos <p> utilizan la propiedaddisplay: table-cell, el resultado es visualmente idéntico a utilizar una tabla y tres elementos<td>.

Si utilizas un navegador con soporte completo de CSS 2.1, el ejemplo anterior se visualiza tal ycomo muestra la siguiente imagen:

Figura 4.3 Ejemplo del valor table-cell de la propiedad display

Como los valores relacionados con las tablas hacen que cualquier elemento que no sea una tablase muestre y comporte como si lo fuera, se pueden utilizar para crear los layouts de las páginas.Hace años, la estructura de las páginas se definía mediante tablas, filas y columnas. Esta solucióntiene innumerables desventajas y por eso todos los diseñadores web profesionales crean laestructura de sus páginas mediante CSS y elementos <div>.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

No obstante, las tablas tienen algunas ventajas en su comportamiento respecto a los elementos<div> posicionados de forma absoluta o flotante. La principal ventaja es que todas las celdas deuna fila siempre tienen la misma altura, por lo que si se utilizan tablas no se sufre el problema delas columnas de página con diferente altura.

Además, la estructura creada con una tabla nunca se rompe, ya que las celdas de datos nunca sevisualizan una debajo de otra cuando la ventana del navegador se hace muy pequeña. Sinembargo, cuando se define la estructura mediante elementos <div> posicionados es posible quela página se rompa y alguna columna se muestre debajo de otros contenidos.

Utilizando la propiedad display de forma avanzada es posible crear una estructura de página quesea semánticamente correcta, esté diseñada exclusivamente con CSS y que se comporteexactamente igual que como lo hacen las tablas.

El siguiente código HTML corresponde a la estructura de una página con tres columnas:

...

<div id="contenedor">

<div id="contenidos">

<div id="secundario">

Curabitur rutrum...

</div>

<div id="principal">

Lorem ipsum dolor sit amet...

</div>

<div id="lateral">

Nam erat massa...

</div>

</div>

</div>

...

Utilizando las siguientes reglas CSS y la propiedad display es posible hacer que los elementos<div> anteriores se comporten como si fueran elementos <tr> y <td>:

#contenedor {

display: table;

border-spacing: 5px;

}

#contenidos {

display: table-row;

}

#principal, #secundario, #lateral {

display: table-cell;

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

#principal {

width: 60%;

}

#secundario, #lateral {

width: 20%;

}

El elemento #contenedor se visualiza como una tabla porque se le aplica la propiedad display:

table. De esta forma, se pueden aplicar al elemento #contenedor propiedades exclusivas de lastablas como border-spacing. El elemento #contenidos se visualiza como si fuese una fila detabla (etiqueta <tr>). En su interior se encuentran las tres columnas de la página que sevisualizan como si fueran tres elementos <td> gracias a la propiedad display: table-cell.

A continuación se muestra el resultado obtenido al aplicar estas reglas CSS al código HTMLanterior:

Curabiturrutrum eros arisus. Cumsociis natoquepenatibus etmagnis disparturientmontes,nasceturridiculus mus.In molestiesuscipit libero.Cras sem.Nunc nontellus et urnamattis tempor.Nulla nectellus a quamhendreritvenenatis.Suspendissepellentesqueodio et est.

Lorem ipsum dolor sit amet, consectetueradipiscing elit. Maecenas non tortor. Vestibulumante ipsum primis in faucibus orci luctus etultrices posuere cubilia Curae; Sed fermentumlorem a velit. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Proin sodales, enimin volutpat vehicula, leo turpis vehicula magna,ut rutrum arcu lorem ac pede. Curabitur rutrumeros a risus. Cum sociis natoque penatibus etmagnis dis parturient montes, nascetur ridiculusmus. In molestie suscipit libero. Cras sem. Nuncnon tellus et urna mattis tempor. Nulla nec tellusa quam hendrerit venenatis. Suspendissepellentesque odio et est. Morbi sed nisl sed duiconsequat sodales. Donec porta porta ligula.Nam erat massa, blandit in, dapibus sit amet,vestibulum et, augue. Suspendisse ac risus.Duis semper fringilla sem. Praesent augue arcu,scelerisque nec, ornare malesuada, posuere a,neque. Nullam nulla nisi, ultrices quis, adipiscingnon, varius ut, dui. Nulla viverra pellentesquesem.

Nam eratmassa, blanditin, dapibus sitamet,vestibulum et,augue.Suspendisseac risus.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

La estructura de la página del ejemplo anterior está diseñada exclusivamente con CSS pero secomporta como si fuera una tabla. Todas las columnas de la página tienen la misma altura sinnecesidad de recurrir a ningún truco y la página nunca se rompe por muy pequeña que se haga laventana del navegador.

Si visualizas esta página con un navegador que soporte correctamente la propiedad display deCSS 2.1, el ejemplo anterior se ve tal y como muestra la siguiente imagen:

Figura 4.4 Ejemplo de los valores table, table-row y table-cell de la propiedad display

Por último, aunque el estándar CSS 2.1 establece que el valor por defecto de la propiedaddisplay es inline, todos los navegadores obvian esta recomendación y asignan por defecto elvalor block a los elementos de bloque y el valor inline a los elementos en línea.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_display.html

4.3. Propiedad outlineDefinición Establece algunas o todas las propiedades de todos los perfiles de los

elementos

Valorespermitidos

Alguno o todos los siguientes valores y en cualquier orden:

• outline-color

• outline-style

• outline-width

Valor inicial Cada propiedad define su propio valor por defecto

Se aplica a Todos los elementos

Válida en medios visuales, interactive

Se hereda no

Definición enel estándar w3.org/TR/CSS21/ui.html#propdef-outline

La propiedad outline es una de las "propiedades shorthand" que define CSS y que se utilizanpara establecer de forma abreviada el valor de una o más propiedades individuales. En este caso,se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los perfiles de un elemento.

Aunque es cierto que guarda muchas similitudes con la propiedad border, en realidad sediferencian en algunos aspectos muy importantes:

1. Los perfiles no ocupan espacio, mientras que los bordes normales sí.

2. Los perfiles pueden tener formas no rectangulares.

Desde el punto de vista del diseño, la primera característica es la más importante. Los perfiles uoutline siempre se dibujan "por encima del elemento", por lo que no modifican la posición o eltamaño total de los elementos.

En el siguiente ejemplo se muestran dos cajas; la primera muestra un borde muy grueso y lasegunda muestra un perfil de la misma anchura:

div { border: 5px solid #369; }

div { outline: 5px solid #369; }

http://librosweb.es/css_avanzado/capitulo_4/propiedad_outline.html

El perfil de la segunda caja se dibuja justo por el exterior de su borde. Aunque visualmente no loparece, el perfil y el borde no se encuentran en el mismo plano. De esta forma, el perfil no se tieneen cuenta para calcular la anchura total de un elemento y no influye en el resto de elementoscercanos.

La segunda característica importante de los perfiles pueden tener formas no rectangulares. En elsiguiente ejemplo se muestra un texto muy largo encerrado en una caja muy estrecha, lo queprovoca que el texto se muestre en varias líneas:

span {border: 2pxsolid #369; }Ejemplo detexto largoque ocupavarias líneas

span {outline: 2pxsolid #369; }Ejemplo detexto largoque ocupavarias líneasEl primer texto se encierra con un borde que produce un resultado estético poco afortunado. Cadalínea muestra un borde superior e inferior, aunque sólo la primera y última líneas cierran el bordelateralmente.

Mientras tanto, el segundo texto se encierra con un perfil. Como indica su nombre, la propiedadoutline perfila los contenidos del elemento y los encierra con una forma no rectangular. Noobstante, si visualizas esta misma página en diferentes navegadores, verás que todos losnavegadores dibujan el perfil de forma diferente, al contrario de lo que sucede con el borde.

Por este motivo, al contrario que los bordes, no existe el concepto de perfil izquierdo o perfilsuperior. El perfil de un elemento es único y sus propiedades son idénticas para cada uno de loscuatro lados.

Como sucede con muchas propiedades de tipo shorthand, el orden en el que se indican losvalores de la propiedd outline es indiferente:

div { outline: 1px solid #C00; }div { outline: solid 1px #C00; }

http://librosweb.es/css_avanzado/capitulo_4/propiedad_outline.html

div { outline: #C00 1px solid; }div { outline: #C00 solid 1px; }La propiedad outline no requiere que se indiquen las tres propiedades que definen el estilo delos perfiles. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto deesa propiedad.

En el siguiente ejemplo sólo se indica el estilo del perfil, por lo que el navegador asignaautomáticamente el valor medium a su grosor y el color se escoge para que tenga el máximocontraste con el fondo de la página:

div { outline: solid; }En el siguiente ejemplo se omite el grosor del perfil, por lo que el navegador le asignaautomáticamente el valor medium:

div { outline: solid blue; }No obstante, como el valor por defecto del estilo de un perfil es none, si no se indicaexplícitamente el estilo del perfil, el resultado es que el navegador no muestra ese perfil:

div { outline: 2px blue; }El grosor del perfil se puede establecer de cualquiera de las diferentes formas de indicar unamedida en CSS. El color también se puede establecer de alguna de las diferentes formas deindicar un color en CSS, con la particularidad del valor invert que selecciona el color que tengamás contraste con el color de fondo. Por último, el estilo del perfil se establece con los mismosvalores que los que se utilizan en la propiedad border-style.

Aunque la propiedad outline es infinitamente menos utilizada que la propiedad border, la hasvisto muchas más veces de las que crees. Si pulsas repetidamente la tecla del tabulador en unapágina web, el navegador va seleccionando de forma secuencial todos los elementos pinchableso seleccionables: enlaces, botones, controles de formulario, etc.

Para indicar el elemento que está seleccionado, el navegador muestra un perfil muy fino de 1px

de ancho, de estilo punteado y del color que más contrasta con el color de fondo de la página. Enla mayoría de las páginas web, el perfil que se muestra por defecto es outline: 1px dotted

#000.

Los navegadores más avanzados incluyen una pseudo-clase llamada :focus que permiteestablecer el estilo de los elementos seleccionados. Utilizando la propiedad outline junto con:focus se puede modificar el estilo por defecto del navegador:

<style type="text/css">

:focus { outline: 2px solid red; }

</style>

http://librosweb.es/css_avanzado/capitulo_4/propiedad_outline.html

Si pruebas a pulsar repetidamente la tecla Tabulador en una página que incluya la regla CSSanterior, verás que el navegador selecciona secuencialmente los enlaces de la página y muestraun perfil continuo de color rojo para indicar el elemento que está seleccionado en cada momento.

De hecho, según el estándar oficial, ese es el propósito para el que se crearon los perfiles: indicarde forma clara el elemento (botón, enlace, otros controles de formulario) que está seleccionado encada momento.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_outline.html

4.4. Propiedad quotesDefinición Establece los caracteres utilizados para mostrar las comillas

Valorespermitidos

Uno y sólo uno de los siguientes valores:

• Un número par de cadenas de texto

• none

• inherit

Valor inicial Depende de cada navegador

Se aplica a Todos los elementos

Válida en medios visuales

Se hereda si

Definición enel estándar w3.org/TR/CSS21/generate.html#propdef-quotes

La propiedad quotes sólo tiene sentido cuando se utiliza junto con la propiedad content y lospseudo-elementos :after y :before. La propiedad quote se puede emplear para establecer loscaracteres que se utilizan al mostrar las comillas en un elemento.

Por defecto, cuando se utiliza la propiedad content junto con los valores open-quote y close-

quote, el navegador muestra unas determinadas comillas. Por tanto, si se considera el siguientecódigo HTML y CSS:

blockquote:before { content: open-quote; }

blockquote:after { content: close-quote; }

<blockquote>Lorem ipsum dolor sit amet...</blockquote>

El navegador muestra el ejemplo anterior de la siguiente forma:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.Si utilizas un navegador moderno con soporte de la propiedad quotes, el ejemplo anterior sevisualiza como muestra la siguiente imagen:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_quotes.html

Figura 4.5 Ejemplo de la propiedad quotes

La imagen anterior corresponde al navegador Firefox. Como el estándar CSS 2.1 no indica lascomillas que se deben utilizar por defecto, se pueden producir diferencias visuales en cadanavegador.

La propiedad quotes se utiliza para establecer de forma explícita las comillas que debe utilizar elnavegador y por tanto, neutraliza las posibles diferencias entre navegadores. Las comillas siemprese indican por pares, siendo la primera la comilla de apertura y la segunda la comilla de cierre.

El siguiente ejemplo modifica el anterior para utilizar las comillas « y »:

blockquote {

quotes: "«" "»";

}

blockquote:before { content: open-quote; }

blockquote:after { content: close-quote; }

<blockquote>Lorem ipsum dolor sit amet...</blockquote>

Ahora, el navegador muestra el ejemplo anterior de la siguiente forma:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.Si se visualiza esta página con un navegador que soporte la propiedad quotes, el ejemplo anteriorse visualiza como muestra la siguiente imagen:

Figura 4.6 Ejemplo de la propiedad quotes

La propiedad quotes permite indicar un número ilimitado de pares de comillas. Cuando sólo sedefine un par, se muestran siempre que se utilice open-quote y close-quote. Cuando se definenvarios pares, se van alternando cada vez que se muestran unas comillas dentro de otro elementoque ya tiene comillas. Cada comilla se separa de las demás mediante un espacio en blanco, por loque no debe utilizarse una coma o cualquier otro caracter de separación.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_quotes.html

El siguiente ejemplo define dos pares de comillas en cada elemento de modo que se alternan lascomillas cada vez que un elemento se encuentra dentro de otro elemento que también muestracomillas:

blockquote, span {

quotes: "«" "»" '"' '"';

}

blockquote:before, span:before {

content: open-quote;

}

blockquote:after, span:after {

content: close-quote;

}

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non

sem quis tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id

ornare ultrices, ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit

pede.</span> Nulla cursus porta sem. Donec mollis nunc in leo.</blockquote>

Las reglas CSS anteriores indican que el navegador debe utilizar diferentes comillas cuando elnivel de anidamiento sea diferente:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.En el ejemplo anterior, tanto <blockquote> como <abbr> establecen dos pares de comillas.Cuando uno de estos dos elementos se encuentre dentro de otro elemento que ya muestracomillas, la propiedad quotes indica que se debe utilizar el segundo par de comillas en vez delprimero. Por lo tanto, si utilizas un navegador que soporta la propiedad quotes, el ejemplo anteriorse visualiza de la siguiente forma:

Figura 4.7 Ejemplo de la propiedad quotes

Los valores de la propiedad quotes se indican mediante cadenas de texto. Una cadena de textoes un conjunto de uno o más caracteres encerrados por las comillas dobles (") o las comillassimples (``'). Si la cadena contiene comillas dobles, se encierra con las comillas simples yviceversa. Si una cadena de texto tiene tanto comillas simples como dobles, las comillasproblemáticas se modifican y se les añade la barra invertida \ por delante:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_quotes.html

/* Comillas simples encerradas por comillas dobles */

.selector { quotes: "'" "'"; }

/* Comillas dobles encerradas por comillas simples */

.selector { quotes: '"' '"'; }

/* Comillas simples y dobles encerradas por comillas dobles */

.selector { quotes: "\"" "\"" "'" "'"; }

/* Comillas simples y dobles encerradas por comillas simples */

.selector { quotes: '"' '"' '\` '\`; }

Como las comillas se indican mediante cadenas de texto, no están limitadas a un solo carácter.En el siguiente ejemplo se utilizan unas comillas poco habituales formadas por varios caracteres:

blockquote, span {

quotes: "«««" "»»»" "--" "--";

}

blockquote:before, span:before {

content: open-quote;

}

blockquote:after, span:after {

content: close-quote;

}

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non

sem quis tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id

ornare ultrices, ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit

pede.</span> Nulla cursus porta sem. Donec mollis nunc in leo.</blockquote>

Las reglas CSS anteriores producen el siguiente resultado en el navegador:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputatelobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sempede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.En un navegador con soporte de la propiedad quotes, el ejemplo anterior se visualiza de lasiguiente forma:

Figura 4.8 Ejemplo de la propiedad quotes

http://librosweb.es/css_avanzado/capitulo_4/propiedad_quotes.html

Utilizando el pseudo-selector :lang() es posible incluso definir diferentes tipos de comillas enfunción del idioma del contenido:

blockquote:lang(en) { quotes: '"' '"' "'" "'" } /* comillas para inglés */

blockquote:lang(es) { quotes: "«" "»" '"' '"' } /* comillas para español */

La propiedad quotes define otro valor llamado none que hace que no se muestre ninguna comillacuando se utiliza el valor open-quote y close-quote de la propiedad content.

Por último, el estándar de CSS 2.1 recomienda utilizar directamente los códigos definidos en elestándar ISO 10646 para indicar la comilla que se quiere utilizar.

De esta forma, las dos siguientes reglas CSS son equivalentes:

blockquote, abbr {

quotes: "«" "»" "'" "'";

}

blockquote, abbr {

quotes: "\00AB" "\00BB" "\0027" "\0027";

}

La siguiente tabla recoge las comillas más utilizadas y sus códigos correspondientes:

Carácter Código ISO 10646

" 0022

' 0027

‹ 2039

› 203A

« 00AB

» 00BB

‘ 2018

’ 2019

“ 201C

” 201D

„ 201E

http://librosweb.es/css_avanzado/capitulo_4/propiedad_quotes.html

4.5. Propiedad counter-resetDefinición Inicializa el valor de uno o más contadores

Valorespermitidos

Uno y sólo uno de los siguientes valores:

• Uno o más nombres de contadores seguidos opcionalmente por un númeroentero cada uno

• none

• inherit

Valor inicial none

Se aplica a Todos los elementos

Válida en all

Se hereda no

Definición enel estándar w3.org/TR/CSS21/generate.html#propdef-counter-reset

La propiedad counter-reset se emplea para controlar la numeración automática de CSS 2.1 quese utiliza en las funciones counter() y counters() de la propiedad content.

El funcionamiento básico de la propiedad counter-reset es sencillo, pero su flexibilidad y lacombinación con otras propiedades y funciones de CSS pueden complicar mucho suinterpretación.

En el caso más sencillo, la propiedad counter-reset indica el nombre de un contador seguidoopcionalmente por un número entero que indica el valor al que se inicializa el contador:

body {

counter-reset: numero_capitulo 0;

}

La regla CSS anterior hace que se inicialice a 0 un contador llamado numero_capitulo cuando elnavegador encuentre el elemento <body>. Si el contador no existía, el estándar CSS 2.1 indicaque se crea cuando se encuentre el primer elemento <body>, es decir, al principio de la página.

La regla CSS anterior se puede emplear para crear el contador que se utiliza posteriormente enlas propiedades counter-increment y content:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_reset.html

body {

counter-reset: numero_capitulo 0;

}

h1:before {

content: "Capítulo " counter(numero_capitulo);

counter-increment: numero_capitulo 1;

}

Cuando se inicializa y se actualiza el valor de un contador en un mismo elemento, primero seinicializa su valor y después se actualiza según la propiedad counter-increment.

Si no se indica el número entero opcional, los navegadores suponen que vale 0, por lo que lassiguientes reglas CSS son equivalentes a las anteriores:

body {

counter-reset: numero_capitulo;

}

h1:before {

content: "Capítulo " counter(numero_capitulo);

counter-increment: numero_capitulo 1;

}

La propiedad counter-reset también cumple con el comportamiento en cascada de laspropiedades CSS, por lo que en el siguiente ejemplo:

p {

counter-reset: parrafos;

}

...

p {

counter-reset: elementos;

}

Las reglas CSS anteriores provocan una colisión en el valor de la propiedad counter-reset.Según las normas de resolución de colisiones, en este caso gana la última regla y los elementosde tipo <p> sólo inicializan el valor del contador elementos.

Además de inicializar el valor de los contadores a 0, también es posible inicializarlos a cualquierotro valor entero positivo o negativo, tal y como muestra el siguiente ejemplo:

body {

counter-reset: numero_capitulo -1;

}

h1:before {

content: "Capítulo " counter(numero_capitulo);

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_reset.html

counter-increment: numero_capitulo;

counter-reset: numero_seccion -1;

}

La propiedad counter-reset también permite indicar varios contadores para inicializarlos deforma simultánea:

h1 {

counter-reset: numero_seccion numero_tabla numero_imagen;

}

La regla CSS anterior inicializa a 0 los contadores numero_seccion, numero_tabla ynumero_imagen cada vez que se encuentra un elemento <h1> en la página. También es posibleindicar diferentes valores iniciales para cada contador:

h1 {

counter-reset: numero_seccion 0 numero_tabla -1 numero_imagen -1;

}

Además, también es posible indicar el mismo contador más de una vez en la propiedad counter-

reset. En este caso, se realizan todas las inicializaciones en el orden indicado:

p {

counter-reset: parrafos parrafos -1 parrafos 3;

}

p {

counter-reset: parrafos parrafos -1 parrafos 3 parrafos;

}

La primera regla del ejemplo anterior inicializa el valor del contador parrafos a 3, mientras que lasegunda regla inicializa el contador parrafos a 0. Como el navegador procesa las inicializacionesen el mismo orden indicado, la única que se tiene en cuenta es la última.

Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran lassiguientes reglas CSS:

div {

counter-reset: numero_parrafo;

}

div p:before {

content: "Parrafo " counter(numero_parrafo) " ";

counter-increment: numero_parrafo;

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_reset.html

La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez queencuentra un elemento <div>. De esta forma, si la regla CSS anterior se aplica al siguiente códigoHTML:

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

En el ejemplo anterior, el navegador crea automáticamente tres contadores diferentes pero con elmismo nombre (numero_parrafo). Cada vez que se encuentra un elemento <div>, el navegadorcrea o inicializa un contador llamado numero_parrafo, por lo que todos los párrafos del ejemploanterior disponen de la misma numeración (1, 2 y 3).

Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedadescounter-reset, counter-increment y content, el resultado es el que muestra la siguienteimagen:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_reset.html

Figura 4.9 Ejemplo de las propiedades counter-reset, counter-increment y content

Los elementos ocultos mediante la propiedad display (display: none) no pueden modificar elvalor de los contadores, mientras que los elementos ocultos mediante la propiedad visibility

(visibility: hidden) si que los actualizan:

p.oculto {

display: none;

counter-reset: parrafos; /* No se inicializa porque el elemento

se ha ocultado mediante display: none */

}

p.invisible {

visibility: hidden;

counter-reset: parrafos; /* Se inicializa a 0 porque el elemento

se ha hecho invisible con visibility: hidden */

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_reset.html

4.6. Propiedad counter-incrementDefinición Actualiza el valor de uno o más contadores

Valorespermitidos

Uno y sólo uno de los siguientes valores:

• Uno o más nombres de contadores seguidos opcionalmente por un númeroentero cada uno

• none

• inherit

Valor inicial none

Se aplica a Todos los elementos

Válida en all

Se hereda no

Definición enel estándar w3.org/TR/CSS21/generate.html#propdef-counter-increment

La propiedad counter-increment se emplea para controlar la numeración automática de CSS 2.1que se utiliza en las funciones counter() y counters() de la propiedad content.

El funcionamiento básico de la propiedad counter-increment es sencillo, pero su flexibilidad y lacombinación con otras propiedades y funciones de CSS pueden complicar mucho suinterpretación.

En el caso más sencillo, la propiedad counter-increment indica el nombre de un contadorseguido opcionalmente por un número entero que indica la cantidad en la que se incrementa:

h1 {

counter-increment: numero_capitulo 1;

}

La regla CSS anterior hace que se incremente en una unidad el valor de un contador llamadonumero_capitulo cada vez que la página incluya un elemento <h1>. Si el contador no existía, elestándar CSS 2.1 indica que cuando se encuentre el primer elemento <h1>, se crea el contador,se inicializa al valor 0 y posteriormente se actualiza su valor según la propiedad counter-

increment indicada.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_increment.html

Este contador básico se puede emplear para añadir una numeración automática a los elementos<h1> de la página:

h1:before {

content: "Capítulo " counter(numero_capitulo);

counter-increment: numero_capitulo 1;

}

Cuando se actualiza y se utiliza el valor de un contador en un mismo elemento, primero seactualiza su valor y después se utiliza en la propiedad content.

Si no se indica el número entero opcional, los navegadores suponen que vale 1, por lo que lasiguiente regla CSS es equivalente a la anterior:

h1:before {

content: "Capítulo " counter(numero_capitulo);

counter-increment: numero_capitulo;

}

Además de incrementar el valor de los contadores, también es posible decrementarlo o nomodificarlo. El siguiente ejemplo amplía el anterior para no incrementar el valor del contador enalgunos elementos <h1> especiales:

h1:before {

content: "Capítulo " counter(numero_capitulo);

counter-increment: numero_capitulo;

}

h1.especial {

counter-increment: numero_capitulo 0;

}

No obstante, si se quiere inicializar un contador para que vuelva a valer 0 o cualquier otro valornumérico, es preciso utilizar la propiedad counter-reset.

La propiedad counter-increment también permite indicar varios contadores para actualizarlos deforma simultánea:

p {

counter-increment: elementos parrafos especial 2;

}

La regla CSS anterior incrementa en una unidad el valor de los contadores elementos y parrafos

cada vez que se encuentra un elemento <p> en la página. Además, incrementa en 2 unidades elvalor de otro contador llamado especial cada vez que encuentra un elemento <p>.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_increment.html

También es posible indicar el mismo contador más de una vez en la propiedad counter-

increment:

p {

counter-increment: elementos parrafos especial 2 parrafos elementos 3;

}

En el ejemplo anterior, cada vez que se encuentra un elemento <p> en la página se incrementa 4

unidades el valor del contador elementos, 2 unidades el valor del contador parrafos y 2 unidadesel valor del contador especial.

Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran lassiguientes reglas CSS:

div {

counter-reset: numero_parrafo;

}

div p:before {

content: "Parrafo " counter(numero_parrafo) " ";

counter-increment: numero_parrafo;

}

La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez queencuentra un elemento <div>. De esta forma, si la regla CSS anterior se aplica al siguiente códigoHTML:

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<div>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_increment.html

En el ejemplo anterior, el navegador crea automáticamente tres contadores diferentes pero con elmismo nombre (numero_parrafo). Cada vez que se encuentra un elemento <div>, el navegadorcrea o inicializa un contador llamado numero_parrafo, por lo que todos los párrafos del ejemploanterior disponen de la misma numeración (1, 2 y 3).

Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedadescounter-increment, counter-reset y content, el resultado es el que muestra la siguienteimagen:

Figura 4.10 Ejemplo de las propiedades counter-increment, counter-reset y content

Los elementos ocultos mediante la propiedad display (display: none) no modifican el valor delos contadores, mientras que los elementos ocultos mediante la propiedad visibility

(visibility: hidden) si que los actualizan:

p.oculto {

display: none;

counter-increment: parrafos; /* No se actualiza porque el elemento

se ha ocultado mediante display: none */

}

p.invisible {

visibility: hidden;

counter-increment: parrafos; /* Se actualiza porque el elemento

se ha hecho invisible con visibility: hidden

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_increment.html

*/

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_counter_increment.html

▪ string ▪ uri ▪ counter

▪ attr ▪ open-quote ▪ close-quote

▪ no-open-quote ▪ no-close-quote

4.7. Propiedad contentDefinición Genera contenido de forma dinámica

Valorespermitidos

Existen cuatro opciones diferentes para establecer el valor o valores de estapropiedad:

1. Uno o más de los siguientes valores:

2. normal

3. none

4. inherit

Valor inicial normal

Se aplica a Solamente a los pseudo-elementos before y after

Válida en all

Se hereda no

Definición enel estándar w3.org/TR/CSS21/generate.html#propdef-content

La propiedad content es una de las propiedades CSS más poderosas y a la vez máscontrovertidas. La propiedad content se emplea para generar nuevo contenido de forma dinámicae insertarlo en la página HTML. Como CSS es un lenguaje de hojas de estilos cuyo únicopropósito es controlar el aspecto o presentación de los contenidos, algunos diseñadoresdefienden que no es correcto generar nuevos contenidos mediante CSS.

En primer lugar, el estándar CSS 2.1 indica que la propiedad content sólo puede utilizarse en lospseudo-elementos :before y :after. Como su propio nombre indica, estos pseudo-elementospermiten seleccionar (y por tanto modificar) la parte anterior o posterior de un elemento de lapágina.

El siguiente ejemplo muestra cómo añadir la palabra Capítulo delante del contenido de cadatítulo de sección <h1>:

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

h1:before {

content: "Capítulo ";

}

Los pseudo-elementos :before y :after se pueden utilizar sobre cualquier elemento de lapágina. El siguiente ejemplo añade la palabra Nota: delante de cada párrafo cuya clase CSS seanota:

p.nota:before {

content: "Nota: ";

}

Combinando las propiedades content y quotes con los pseudo-elementos :before y :after, sepueden añadir de forma dinámica comillas de apertura y de cierre a todos los elementos<blockquote> de la página:

blockquote:before {

content: open-quote;

}

blockquote:after {

content: close-quote;

}

blockquote {

quotes: "«" "»";

}

Los contenidos insertados dinámicamente en un elemento son a todos los efectos parte de esemismo elemento, por lo que heredan el valor de todas sus propiedades CSS.

Los dos valores más sencillos de la propiedad content son none y normal. En la práctica, estosdos valores tienen el mismo efecto ya que hacen que el pseudo-elemento no se genere.

El siguiente valor que se puede indicar en la propiedad content es una cadena de texto. En elestándar CSS 2.1, una cadena de texto es un conjunto de uno o más caracteres encerrados porlas comillas dobles (") o las comillas simples (``'). Si la cadena contiene comillas dobles, seencierra con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas simplescomo dobles, las comillas problemáticas se modifican y se les añade la barra invertida \ pordelante:

p:before {

content: "Contenido generado \"dinámicamente\" mediante CSS. ";

}

#ultimo:after {

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

content: " Fin de los 'contenidos' de la página.";

}

Las cadenas de texto sólo permiten incluir texto básico. Si se incluye alguna etiqueta HTML en lacadena de texto, el navegador muestra la etiqueta tal y como está escrita, ya que no las interpreta.Para incluir un salto de línea en el contenido generado, se utiliza el caracter especial \A

El siguiente valor aceptado por la propiedad content es una URL, que suele utilizarse para indicarla URL de una imagen que se quiere añadir de forma dinámica al contenido. La sintaxis esidéntica al resto de URL que se pueden indicar en otras propiedades CSS:

span.especial:after {

content: url("imagenes/imagen.png");

}

Otros valores que se pueden indicar en la propiedad content son open-quote, close-quote, no-open-quote y no-close-quote. Los dos primeros indican que se debe mostar una comilla deapertura o de cierre respectivamente. Las comillas utilizadas se establecen mediante la propiedadquotes:

blockquote { quotes: "«" "»" '"' '"' }

blockquote:before {

content: open-quote;

}

blockquote:after {

content: close-quote;

}

Los valores no-open-quote y no-close-quote se utilizan para no mostrar ninguna comilla en eseelemento, pero incrementando el nivel de anidamiento de las comillas. De esta forma se puedeevitar mostrar una comilla en un determinado elemento mientras se mantiene la jerarquía decomillas establecida por la propiedad quotes.

Uno de los valores más avanzados de la propiedad content es attr(), que permite obtener elvalor de un atributo del elemento sobre el que se utiliza la propiedad content. En el siguienteejemplo, se modifican los elementos <abbr> y <acronym> para que muestren entre paréntesis elvalor de sus atributos title:

abbr:after, acronym:after {

content: " (" attr(title) ")"

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

El valor de la propiedad content anterior en realidad es la combinación de tres valores: * Cadenade texto " (", que es el paréntesis de apertura tras el cual se muestra el valor del atributo title. *Atributo title del elemento obtenido mediante attr(title) * Cadena de texto ")", que es elparéntesis de cierre que se muestra detrás del valor del atributo title.

Si el elemento no dispone del atributo solicitado, la función attr(nombre_del_atributo) devuelveuna cadena de texto vacía. Utilizando attr() solamente se puede obtener el valor de los atributosdel elemento al que se aplica la propiedad content.

La función attr() es muy útil por ejemplo para mostrar la dirección a la que apuntan los enlacesde la página:

a:after {

content: " (" attr(href) ")";

}

Los últimos valores que se pueden indicar en la propiedad content son los contadores creadoscon las propiedades counter-increment y counter-reset. Los contadores más sencillos semuestran con la función counter(nombre_del_contador). El siguiente ejemplo crea doscontadores llamado capitulo y seccion para utilizarlos con los elementos <h1> y <h2>:

body {

counter-reset: capitulo;

}

h1 {

counter-reset: seccion;

}

h1:before {

content: "Capítulo " counter(capitulo) ". ";

counter-increment: capitulo;

}

h2:before {

content: counter(capitulo) "." counter(seccion) " ";

counter-increment: seccion;

}

En el ejemplo anterior, se crea e inicializa su valor a 0 un contador llamado capitulo cuando seencuentre el elemento <body>, es decir, al comienzo de la página. Además, se crea e inicializa suvalor a 0 otro contador llamado seccion cada vez que se encuentra un elemento <h1> en lapágina.

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

Posteriormente, se añade de forma dinámica a los elementos <h1> y <h2> el contenido generadomediante los contadores. Los elementos <h1> utilizan el contador capitulo y lo incrementan enuna unidad cada vez que lo utilizan. Los elementos <h2> utilizan los dos contadores para generarun contenido que muestra su numeración completa. Además, los elementos <h2> actualizan elvalor del contador seccion.

Cuando un mismo elemento inicializa/actualiza un contador y lo utiliza en la propiedad content,en primer lugar se inicializa/actualiza y después, el valor actualizado es el que se utiliza mediantecounter().

Además de mostrar el valor de un contador básico, la función counter() permite indicar el estilocon el que se muestra el valor del contador. La lista de estilos permitidos son los mismos que losde la propiedad list-style-type.

El siguiente ejemplo modifica el anterior para mostrar el valor de los contadores en númerosromanos:

body {

counter-reset: capitulo;

}

h1 {

counter-reset: seccion;

}

h1:before {

content: "Capítulo " counter(capitulo, upper-roman) ". ";

counter-increment: capitulo;

}

h2:before {

content: counter(capitulo, upper-roman) "." counter(seccion, upper-roman) " ";

counter-increment: seccion;

}

Los estilos de los contadores también se pueden emplear para no mostrar el valor de loscontadores en algunos elementos:

p {

counter-increment: parrafos;

}

p:before {

content: counter(parrafos);

}

#especial p:before {

content: counter(parrafos, none);

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

Aunque el valor de los contadores siempre es númerico, también es pueden emplear estilosgráficos como square, disc o circle:

h2 {

counter-increment: seccion;

}

h2:before {

content: counter(seccion, disc);

}

La función counter() solamente muestra el valor de un contador. Por su parte, la funcióncounters() se utiliza para mostrar de forma simultánea el valor de todos los contadoresasociados con el elemento. Como se explica en la descripción de las propiedades counter-

increment y counter-reset, los contadores se pueden anidar y un mismo elemento puede tenerasociados varios contadores diferentes con el mismo nombre.

El siguiente ejemplo muestra unas reglas CSS que crean un contador para los elementos de unalista <ol>:

ol {

counter-reset: elemento;

list-style-type: none;

}

li:before {

content: counter(elemento) ". ";

counter-increment: elemento;

}

Si se considera el siguiente código HTML:

<ol>

<li>Elemento</li>

<li>Elemento</li>

<li>Elemento

<ol>

<li>Elemento</li>

<li>Elemento

<ol>

<li>Elemento</li>

<li>Elemento</li>

<li>Elemento</li>

</ol>

</li>

<li>Elemento</li>

</ol>

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

</li>

<li>Elemento</li>

</ol>

Si se aplican las reglas CSS al código HTML anterior, se crean tres contadores diferentes con elmismo nombre (elemento) y el resultado es el que muestra la siguiente imagen:

Figura 4.11 Ejemplo de la propiedad content

Sin embargo, si se utiliza la función counters() en las reglas CSS anteriores:

ol {

counter-reset: elemento;

list-style-type: none;

}

li:before {

content: counters(elemento, '. ') ". ";

counter-increment: elemento;

}

Ahora, el aspecto que muestra la lista de elementos es el de la siguiente imagen:

Figura 4.12 Ejemplo de la propiedad content

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

En el ejemplo anterior, cada vez que se encuentra un elemento <ol> se crea un contador llamadoelemento. Por este motivo, los elementos <li> anidados se ven afectados por varios contadoresllamados elemento. La función counter() sólo muestra el valor del contador que afecta másdirectamente al elemento, mientras que la función counters() muestra todos los contadoresempezando desde el más externo hasta llegar al más interno.

El segundo argumento de la función counters() es una cadena de texto que se emplea paraseparar los valores de los diferentes contadores. CSS 2.1 no permite utilizar diferentesseparadores para cada nivel jerárquico.

Por último, la función counters() también permite indicar el estilo con el que se muestra el valorde los contadores. De esta forma, el siguiente ejemplo modifica el anterior para mostrar el valor detodos los contadores en números romanos:

ol {

counter-reset: elemento;

list-style-type: none;

}

li:before {

content: counters(elemento, '. ', upper-roman) ". ";

counter-increment: elemento;

}

http://librosweb.es/css_avanzado/capitulo_4/propiedad_content.html

Capítulo 5. FrameworksLos frameworks se utilizan en el ámbito de la programación de aplicaciones desde hace décadas.Recientemente han comenzado a utilizarse para programar y diseñar aplicaciones web, por lo queya existen decenas de frameworks para CSS.

Genéricamente, un framework es un conjunto de herramientas, librerías, convenciones y buenasprácticas que pretenden encapsular las tareas repetitivas en módulos genéricos fácilmentereutilizables.

De la misma forma, un framework CSS es un conjunto de herramientas, hojas de estilos y buenasprácticas que permiten al diseñador web olvidarse de las tareas repetitivas para centrarse en loselementos únicos de cada diseño en los que puede aportar valor.

¿Qué aporta a un diseñador descubrir en cada diseño que debe neutralizar los estilos por defectoque aplican los navegadores? ¿Qué aporta un diseñador que se dedica continuamente a resolverlos mismos problemas que se producen al crear layouts complejos? ¿Por qué el diseñador sededica a tareas y problemas que han sido resueltos satisfactoriamente hace mucho tiempo?

Los frameworks CSS más completos incluyen utilidades para que el diseñador no tenga quetrabajar en ningún aspecto genérico del diseño web. Por este motivo, es habitual que los mejoresframeworks CSS incluyan herramientas para:

• Neutralizar los estilos por defecto que aplican los navegadores. Se trata de la habitual hoja deestilos reset.css que todos los diseñadores profesionales utilizan.

• Manejar correctamente el texto, de forma que todos los contenidos se vean exactamenteigual en todos los navegadores y que sean adaptables para mejorar su accesibilidad ypermitir su acceso en cualquier medio y/o dispositivo.

• Crear cualquier estructura compleja o layout de forma sencilla, con la seguridad de quefunciona correctamente en cualquier versión de cualquier navegador.

Actualmente existen decenas de frameworks CSS, tal y como se recoge en la página List of CSSframeworks (http://en.wikipedia.org/wiki/List_of_CSS_frameworks) de la Wikipedia. En lassiguientes secciones se explica detalladamente el framework YUI creado por Yahoo!

http://librosweb.es/css_avanzado/capitulo_5.html

5.1. El framework YUIEl framework o librería YUI (http://developer.yahoo.com/yui/) (Yahoo! User Interface) es unconjunto de utilidades y controles escritos en JavaScript que se utilizan para crear aplicacionesweb dinámicas complejas. Además, la librería YUI incluye varias utilidades relacionadas con CSS,por lo que también se considera un framework CSS.

Yahoo! distribuye gratuitamente la librería YUI en forma de software libre y bajo la licencia BSD(http://developer.yahoo.com/yui/license.html), que permite utilizar YUI para proyectos de cualquiertipo, incluso comerciales.

Lo mejor de YUI es que cuenta con el respaldo de Yahoo!, que utiliza su librería en muchas desus miles de millones de páginas vistas diarias. Además, YUI cuenta con una gran documentaciónque incluye cientos de ejemplos de uso.

YUI se ejecuta correctamente en todos los navegadores modernos e incluso en algún navegadorobsoleto. El soporte de los navegadores se puede consultar en la lista de los navegadoressoportados por YUI (http://developer.yahoo.com/yui/articles/gbs/), que se actualizaperiódicamente. A continuación se muestra la lista de navegadores soportados en cada sistemaoperativo:

• Windows XP: Firefox 2 y 3, Internet Explorer 6 y 7, Opera 9.5

• Windows Vista: Firefox 3, Internet Explorer 7

• Mac OS X 10.5: Firefox 2 y 3, Opera 9.5, Safari 3.1

http://librosweb.es/css_avanzado/capitulo_5/el_framework_yui.html

5.2. Primeros pasos con el framework YUIPara empezar a trabajar con YUI, lo primero que debes hacer es descargar la librería completa.Desde la página principal de YUI (http://developer.yahoo.com/yui/) se puede pulsar directamentesobre el botón Download YUI para que nos redirija automáticamente hasta la página de descarga.La versión de YUI que se utiliza actualmente es la 2, aunque la versión en pruebas de YUI 3 ya seha publicado. YUI 2 se descarga mediante un archivo comprimido que ocupa unos 10 MB.

Una vez descargado, descomprime el archivo en cualquier directorio del sistema y verás queincluye varios directorios. De todos ellos, los más importantes para el programador y diseñadorson los siguientes:

• docs/: incluye más de 300 páginas de documentación y ayuda sobre todos los componentesde YUI

• examples/: incluye casi 300 ejemplos de uso de todos y cada uno de los componentes deYUI

• build/: incluye todos los archivos JavaScript y CSS que se deben incluir en las páginas queutilizan YUI

5.2.1. Componentes CSS del framework YUILa librería YUI incluye los siguientes cuatro componentes de CSS que se pueden utilizar de formaseparada, conjunta o combinada de cualquier forma:

• reset.css: conjunto de estilos que eliminan y neutralizan todas las inconsistencias en elestilo por defecto que aplican los navegadores a los elementos HTML.

• base.css: conjunto de estilos que se pueden aplicar después de neutralizar los estilos pordefecto del navegador y que muestran cada elemento HTML de forma adecuada.

• fonts.css: conjunto de estilos que permiten mostrar el texto con un tamaño consistente encualquier navegador.

• grids.css: conjunto de estilos que permiten crear cientos de layouts o estructuras de páginascomunes.

Los componentes CSS de YUI funcionan tanto en el modo quirks como en el modo standards delos navegadores. No obstante, YUI recomienda activar el modo standards utilizando el siguienteDOCTYPE en las páginas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html

5.2.2. Enlazando los archivos del framework YUITodas las páginas que hacen uso de los componentes de la librería YUI deben enlazar susarchivos. La arquitectura de YUI es tan modular que permite enlazar únicamene los archivos quenecesita cada página y no todos los archivos de la librería, lo que mejora el rendimiento de laaplicación.

Si sólo quieres utilizar uno de los componentes CSS de YUI, solamente debes enlazar una hojade estilos mediante la etiqueta <link>. Si por ejemplo sólo se quiere utilizar el componentereset.css para inicializar todos los estilos del navegador, los pasos necesarios son lossiguientes:

1) Copia el archivo reset.css que se encuentra en el directorio build/reset al directorio en elque guardas todas tus hojas de estilos CSS.

2) Enlaza la hoja de estilos reset.css en tus páginas utilizando la siguiente etiqueta <link>:

<link rel="stylesheet" type="text/css" href="css/reset.css">

El valor del atributo href debe contener la ruta completa (absoluta o relativa) hasta el archivo CSSenlazado.

Aunque esta forma de enlazar los recursos CSS de YUI es la más sencilla, también es la másineficiente. El motivo es que los archivos CSS originales incluyen comentarios, espacios enblanco, saltos de línea y otros elementos que aumentan innecesariamente el tamaño de losarchivos.

Por este motivo, sólo se recomienda el uso de los archivos CSS normales cuando el diseñador seencuentra diseñando la página y puede necesitar consultar el contenido de los archivos CSS deYUI. Cuando la página se encuentra terminada, la recomendación es utilizar los archivos CSScomprimidos que proporciona YUI.

Los archivos comprimidos se encuentran en los mismos directorios que los archivos CSSnormales. La única diferencia es que los archivos comprimidos añaden el prefijo -min en sunombre, indicando que se trata de una versión minimizada de los archivos CSS normales.

Siguiendo con el ejemplo anterior, para enlazar la versión comprimida de la hoja de estilosreset.css se debe utilizar la siguiente etiqueta <link>:

<link rel="stylesheet" type="text/css" href="css/reset-min.css">

Si se utilizan varios componentes CSS de YUI, se sigue el mismo razonamiento para enlazartodas las hojas de estilos. El siguiente ejemplo muestra el caso en el que se utilizan las hojas deestilos reset.css, fonts.css y grids.css:

http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html

<link rel="stylesheet" type="text/css" href="css/reset-min.css">

<link rel="stylesheet" type="text/css" href="css/fonts-min.css">

<link rel="stylesheet" type="text/css" href="css/grids-min.css">

Como es muy habitual enlazar varias hojas de estilos a la vez, YUI proporciona un métodoalternativo para hacerlo de forma mucho más eficiente. En concreto, YUI proporciona las hojas deestilos reset-fonts.css y reset-fonts-grids.css por ser las combinaciones de hojas de estilosmás habituales. De esta forma, el ejemplo anterior se puede rehacer utilizando una sola etiqueta<link>:

<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

La hoja de estilos reset-fonts-grids.css combina las versiones comprimidas de las tres hojasde estilos individuales. Además de la reducción en el tamaño total del archivo, la gran ventaja esque sólo se realiza una petición al servidor, en vez de las tres peticiones necesarias en el ejemploanterior.

Por último, existe otra forma aún más eficiente de enlazar los componentes CSS necesarios.Desde hace unos meses, Yahoo! ofrece la posibilidad de enlazar gratuitamente las hojas deestilos CSS desde sus propios servidores. En efecto, nuestras páginas pueden descargar losarchivos de YUI directamente desde los servidores de Yahoo! y de forma completamente gratuita.

A continuación se muestra la etiqueta <link> necesaria para descargar las mismas hojas deestilos del ejemplo anterior directamente desde los servidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/reset-fonts-grids/reset-fonts-grids.css">

Si sólo se emplean por ejemplo los componentes reset.css y base.css, las etiquetas necesariasse muestran a continuación:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/reset/reset-min.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/base/base-min.css">

Aunque deducir las direcciones completas de cada componente CSS es trivial, YUI proporcionauna herramienta gráfica llamada YUI: Configuration and Hosting (http://developer.yahoo.com/yui/articles/hosting/) que genera automáticamente las etiquetas <link> de los componentes CSSseleccionados.

Las ventajas de utilizar los propios servidores de Yahoo! para servir los archivos de YUI sonnumerosas:

http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html

• Yahoo! dispone de miles de servidores repartidos por todo el mundo y la descarga se realizasiempre desde el servidor más cercano al usuario. De hecho, los servidores que proporcionaYahoo! son exactamente los mismos que utiliza Yahoo! en sus aplicaciones.

• Yahoo! sirve todos sus archivos comprimidos mediante el servidor web y con la informaciónprecisa para que el navegador los almacene en su cache local. La compresión reduce eltamaño de los archivos CSS hasta un 60% y el control de la cache evita que el usuario tengaque descargar repetidamente el mismo archivo.

• Los servidores de Yahoo! son infinitamente más potentes y fiables que cualquier servidor webpropio. Además, la velocidad de transmisión de los archivos también es infinitamente másrápida que la conseguida con cualquier conexión de red propia.

• El servicio es completamente gratuito y permite enlazar cualquier versión actual o pasada dela librería YUI.

http://librosweb.es/css_avanzado/capitulo_5/primeros_pasos_con_el_framework_yui.html

5.3. Inicializando estilos con el framework YUIEl primer componente CSS de YUI es reset.css, una hoja de estilos utilizada para neutralizar losestilos que aplican por defecto los navegadores a todos los elementos HTML.

A continuación se muestra el contenido completo de reset.css:

/*

Copyright (c) 2008, Yahoo! Inc. All rights reserved.

Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

version: 2.5.2

*/

html{color:#000;background:#FFF;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,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;}

li{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;font-variant:normal;}

/* to preserve line-height and selector appearance */

sup {vertical-align:text-top;}

sub {vertical-align:text-bottom;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/*to enable resizing for IE*/

input,textarea,select{*font-size:100%;}

/*because legend doesn't inherit in IE */

legend{color:#000;}

Al contrario que las hojas de estilo de tipo reset de otras librerías y frameworks, el archivoreset.css solamente neutraliza los estilos que aplica por defecto el navegador. El cambio másevidente que provoca el reset.css de YUI es que el texto de todos los elementos se muestra conel mismo aspecto. No importa si se trata de un párrafo <p>, una etiqueta <strong> o un título desección <h1>, ya que el reset.css anterior hace que todos se vean igual. Por tanto, las páginas alas que sólo se aplica la hoja de estilos reset.css no están preparadas para mostrarlas a losusuarios.

Las hojas de estilo reset.css de otros frameworks neutralizan los estilos por defecto y depuésaplican unos estilos adecuados para poder mostrar correctamente las páginas: cada título desección tiene un tamaño mayor que el siguiente, los elementos <strong> se ven en negrita, losmárgenes son adecuados para separar los contenidos de texto, etc.

http://librosweb.es/css_avanzado/capitulo_5/inicializando_estilos_con_el_framework_yui.html

YUI dispone de otro componente CSS llamado base.css para aplicar unos estilos adecuados alas páginas que han sido neutralizadas mediante reset.css. Por lo tanto, una página a la que sele aplican las hojas de estilos reset.css y base.css ya están listas para mostrarse a los usuarios,a falta de la personalización del aspecto que realice posteriormente el diseñador.

El contenido de la hoja de estilos base.css de YUI se muestra a continuación:

/*

Copyright (c) 2008, Yahoo! Inc. All rights reserved.

Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

version: 2.5.2

*/

/* base.css, part of YUI's CSS Foundation */

h1 {

font-size:138.5%;

}

h2 {

font-size:123.1%;

}

h3 {

font-size:108%;

}

h1,h2,h3 {

margin:1em 0;

}

h1,h2,h3,h4,h5,h6,strong {

font-weight:bold;

}

abbr,acronym {

border-bottom:1px dotted #000;

cursor:help;

}

em {

font-style:italic;

}

blockquote,ul,ol,dl {

margin:1em;

}

ol,ul,dl {

margin-left:2em;

}

ol li {

list-style: decimal outside;

}

http://librosweb.es/css_avanzado/capitulo_5/inicializando_estilos_con_el_framework_yui.html

ul li {

list-style: disc outside;

}

dl dd {

margin-left:1em;

}

th,td {

border:1px solid #000;

padding:.5em;

}

th {

font-weight:bold;

text-align:center;

}

caption {

margin-bottom:.5em;

text-align:center;

}

p,fieldset,table,pre {

margin-bottom:1em;

}

input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}

Después de aplicar reset.css todos los contenidos de texto de la página se muestran con untamaño de letra de 16px. La hoja de estilos base.css hace que los títulos de sección <h1>, <h2> y<h3> se muestren más grandes que el resto de texto y también hace que se muestren en negrita.Otros de los estilos comunes que establece base.css son los marcadores que muestran loselementos de las listas, los bordes de las celdas de tabla y los márgenes verticales y laterales delos elementos.

La mayoría de páginas creadas con los componentes CSS de YUI utilizan reset.css y base.css,por lo que es común que incluyan las siguientes etiquetas <link>:

<link rel="stylesheet" type="text/css" href="css/reset-min.css">

<link rel="stylesheet" type="text/css" href="css/base-min.css">

Recuerda que también puedes enlazar estas mismas hojas de estilos directamente desde losservidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/reset/reset-min.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/base/base-min.css">

http://librosweb.es/css_avanzado/capitulo_5/inicializando_estilos_con_el_framework_yui.html

5.4. Texto con el framework YUIEl manejo del texto es una de las grandes ventajas aportadas por el uso del framework. Definir laspropiedades del texto de la forma que indica YUI asegura que tus páginas se ven exactamenteigual en cualquier versión de cualquier navegador. Además, garantiza que las propiedades deltexto de tus páginas serán consistentes y que los contenidos de texto se adaptan perfectamente acualquier medio y/o dispositivo.

En primer lugar, el tercer componente CSS de YUI es fonts.css, una hoja de estilos tan sencillacomo se muestra a continuación:

/*

Copyright (c) 2008, Yahoo! Inc. All rights reserved.

Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

version: 2.5.2

*/

body {font:13px/1.231

arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

table {font-size:inherit;font:100%;}

pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}

Después de aplicar reset.css, base.css y fonts.css, las páginas muestran el texto normal conun tamaño de letra de 13px y un interlineado de 16px. Los títulos <h1> se muestran con un tamañode 18px, los títulos <h2> con un tamaño de 16px y los títulos <h3> con un tamaño de 14px.Además, todos los elementos de texto se muestran con el tipo de letra Arial o similar, salvo loselementos <code> y <pre> que se muestran con una fuente de ancho fijo.

YUI recomienda establecer todos los tamaños de letra utilizando el porcentaje como unidad demedida, porque asegura que el texto se muestra de forma más consistente que al utilizar la unidadem. Como el tamaño de letra base establecido por fonts.css es 13px, esta medida es la quecorresponde al valor 100%. Utilizando una sencilla operación se puede obtener el porcentajecorrespondiente a cualquier tamaño en píxeles. La siguiente tabla muestra algunos de los valoresmás comunes:

Para obtener este tamaño en píxeles... ...utiliza el siguiente valor de porcentaje

10px 77%

11px 85%

12px 93%

13px 100%

http://librosweb.es/css_avanzado/capitulo_5/texto_con_el_framework_yui.html

Para obtener este tamaño en píxeles... ...utiliza el siguiente valor de porcentaje

14px 108%

15px 116%

16px 123.1%

17px 131%

18px 138.5%

19px 146.5%

20px 153.9%

21px 161.6%

22px 167%

23px 174%

24px 182%

25px 189%

26px 197%

Por lo tanto, si se quiere modificar por ejemplo el tamaño de letra de los párrafos y de los títulosde sección <h1> y <h2>, debes utilizar las siguientes reglas en tu hoja de estilos propia:

p {

font-size: 123.1%; /* equivale a 16px */

}

h1 {

font-size: 182%; /* equivale a 24px */

}

h2 {

font-size: 167%; /* equivale a 22px */

}

h3 {

font-size: 153.9%; /* equivale a 20px */

}

De la misma forma, también es posible modificar el tipo de letra de cualquier elemento de lapágina. Las siguientes reglas hacen que los párrafos se muestren con un tipo de letra Georgia osimilar y los títulos de sección con un tipo de letra Verdana o similar:

http://librosweb.es/css_avanzado/capitulo_5/texto_con_el_framework_yui.html

p {

font-family: Georgia, "Times New Roman", Times, serif;

}

h1, h2, h3, h4, h5, h6 {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Para hacer uso de los estilos proporcionados por el componente fonts.css es necesario que laspáginas enlacen esa hoja de estilos:

<link rel="stylesheet" type="text/css" href="css/fonts-min.css">

Recuerda que también puedes enlazar esta misma hoja de estilos directamente desde losservidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/fonts/fonts-min.css">

Por último, como es muy común utilizar todos los componentes CSS de forma simultánea, YUIincluye una hoja de estilos que combina todas las hojas de estilos individuales. Además de reducirel tamaño total de los archivos, disponer de una sola hoja de estilos reduce el número depeticiones realizadas al servidor. Para utilizar la hoja de estilos completa sólo es necesario utilizarla siguiente etiqueta <link>:

<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

La hoja de estilos completa también se puede enlazar directamente desde los servidores deYahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/reset-fonts-grids/reset-fonts-grids.css">

http://librosweb.es/css_avanzado/capitulo_5/texto_con_el_framework_yui.html

5.5. Layouts con el framework YUIEl último componente CSS de YUI es grids.css, una hoja de estilos sencilla que permite crearmás de 1.000 layouts diferentes. Diseñar layouts con YUI es muy sencillo y tiene la ventaja de quetodos los diseños se ven exactamente igual en cualquier versión de cualquier navegador.

5.5.1. Primeros pasosYUI recomienda utilizar un DOCTYPE que asegure que el navegador muestra sus contenidos enel modo standards en vez del modo quirks. De hecho, Yahoo! utiliza el siguiente DOCTYPE entodos los sitios diseñados con YUI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

No obstante, ten en cuenta que el DOCTYPE anterior corresponde a una página HTML y portanto, no es válido si utilizas XHTML en tus páginas. Si se quiere emplear YUI en páginas XHTMLpuedes utilizar uno de los dos siguientes DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Antes de crear layouts con el componente grids.css, es necesario enlazar su hoja de estilos:

<link rel="stylesheet" type="text/css" href="css/grids-min.css">

La hoja de estilos también se puede enlazar directamente desde los servidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/grids/grids-min.css">

El componente grids.css depende de los valores iniciales establecidos por el componentefonts.css, por lo que también es necesario enlazar este último. Como las páginas diseñadas conYUI también utilizan el componente reset.css, es habitual utilizar la hoja de estilos global queincluye estos tres componentes individuales:

<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

Para obtener el máximo rendimiento también es posible enlazar esta hoja de estilos completadirectamente desde los servidores de Yahoo!:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/

build/reset-fonts-grids/reset-fonts-grids.css">

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

5.5.2. Página, plantilla y rejillaYUI recomienda utilizar la siguiente estructura general en las páginas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc">

<div id="hd">

<!-- contenidos de la cabecera -->

</div>

<div id="bd">

<!-- contenidos principales de la página -->

</div>

<div id="ft">

<!-- contenidos del pie de página -->

</div>

</div>

</body>

</html>

La página se divide en tres partes:

• Cabecera (#hd): zona en la que se incluyen normalmente los elementos invariantes de lapágina tales como el logotipo, el buscador y el menú principal de navegación.

• Cuerpo (#bd): zona en la que se incluyen todos los contenidos específicos de la página. Setrata de la zona más importante y la que suele tener una estructura más compleja.

• Pie (#ft): zona en la que se incluyen otros elementos invariantes de la página que son demenor importancia, tales como el aviso de copyright, enlaces a las secciones de contacto,privacidad, términos y condiciones y otros elementos que dependen del tipo de página.

La división anterior es la más recomendada porque es la que YUI utiliza por defecto. Además, setrata de una división válida para la inmensa mayoría de sitios web y ayuda a estructurar loscontenidos de la página de forma lógica. No obstante, dividir las páginas de esta forma no esobligatorio y YUI permite crear layouts sin utilizar esta estructura.

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

Los nombres utilizados como identificador de cada elemento (#hd de header o cabecera, #bd debody o cuerpo y #ft de footer o pie) también se pueden modificar, aunque los valores indicadosanteriormente son los únicos que funcionan sin realizar ningún cambio. Además, como sonvalores muy cortos, permiten crear reglas CSS muy concisas.

Antes de diseñar layouts con YUI es necesario comprender las partes en las que YUI divide laestructura de una página:

Figura 5.1 Página, plantilla y rejilla en los layouts de YUI

YUI divide la estructura de una página en tres partes:

• Página: establece la anchura total de la página y su comportamiento (anchura fija o variable).Utiliza los selectores #doc, #doc2, #doc3 y #doc4.

• Plantilla: establece la división en columnas del cuerpo de la página. Utiliza los selectores.yui-b, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5 y .yui-t6.

• Rejilla: establece las divisiones internas de cada columna. Utiliza los selectores .yui-u,.yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf.

5.5.3. PáginaLa primera parte de la estructura de la página es la propia página, concretamente su anchura y sucomportamiento. YUI incluye por defecto cuatro tipos de páginas que corresponden a los diseñosmás utilizados hoy en día:

Selector Características de la página Recomendada para

#doc Centrada, anchura 750px Resolución de 800x600 o superior

#doc2 Centrada, anchura 950px Resolución de 1024x768 o superior

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

Selector Características de la página Recomendada para

#doc3 Anchura 100% Cualquier resolución

#doc4 Centrada, anchura 974px Resolución de 1024x768 o superior

NOTA El diseño #doc3 en realidad no ocupa el 100% de la página, ya que incluye 10px demargen izquierdo y otros 10px de margen derecho. De esta forma se evita que los contenidosde la página puedan llegar a invadir el espacio ocupado por el propio navegador. No obstante,si quieres eliminar estos márgenes laterales tan sólo debes añadir la siguiente regla CSS en lahoja de estilos propia de la página: #doc3 { margin: auto; }

Para utilizar una u otra página, sólo es necesario cambiar el atributo id del elemento <div> queencierra todos los contenidos. El ejemplo mostrado anteriormente utiliza el selector #doc,correspondiente a una página de anchura fija de 750px:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc"> <!-- 750px, centrada -->

...

</div>

</body>

</html>

Si se quiere modificar la página anterior para que su anchura sea del 100%, sólo es necesariomodificar ligeramente el selector del elemento <div> que encierra a todos los contenidos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc3"> <!-- 100% -->

...

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

</div>

</body>

</html>

Aunque los cuatro tipos de página incluídos en YUI corresponden a los diseños más utilizados,también es posible crear una anchura de página completamente personalizada. Como lasanchuras de página en YUI se establecen mediante la unidad de medida em, el proceso requiererealizar alguna operación matemática.

Para obtener la anchura en em, divide la anchura deseada en píxeles por 13. Para el navegadorInternet Explorer es preciso dividir la anchura en píxeles por 13.3333. Si por ejemplo se quiereestablecer una anchura de página de 1300px, el cálculo que se debe realizar es el siguiente:

• Navegador Internet Explorer: 1300 / 13.3333 = 97.50. Por tanto, la anchura de página es97.50em.

• Resto de navegadores: 1300 / 13 = 100. Por tanto, la anchura de página es 100em.

Una vez calculada la anchura en em, se utiliza la siguiente regla CSS para crear el tamaño depágina propio:

#doc-propio {

text-align:left; /* obligatorio */

margin:auto; /* para centrar la página */

width: 100em; /* resto de navegadores */

*width: 97.50em; /* navegador Internet Explorer */

min-width: 1300px; /* opcional, pero recomendada */

}

La propiedad text-align: left es obligatoria para mostrar el texto alineado a la izquierda, yaque en la hoja de estilos grids.css el elemento <body> establece la propiedad text-align:

center;. La propiedad margin: auto sólo es necesaria si se quiere centrar la página respecto dela ventana del navegador.

La anchura de todos los navegadores menos Internet Explorer se establece directamentemediante la propiedad width. En el caso de Internet Explorer, su anchura se establece medianteun hack muy conocido que hace que sólo Internet Explorer interprete la propiedad *width. Estapropiedad *width siempre se debe incluir después de la propiedad width.

Por último, la propiedad min-width es opcional, pero se recomienda establecerla con el mismovalor de la anchura en píxeles. Su función es evitar que la estructura de la página se rompacuando la ventana del navegador reduce su tamaño.

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

5.5.4. PlantillaEl siguiente nivel en el que divide YUI la estructura de una página es la plantilla, que está formadapor las columnas de contenidos de la página. Normalmente, las páginas disponen de una zonacentral de contenidos y otra zona lateral con otros contenidos secundarios.

YUI permite crear estructuras de páginas con dos columnas de diferentes anchuras y endiferentes posiciones (izquierda o derecha). En primer lugar se definen las columnas de la páginamediante lo que YUI llama bloques. Cada bloque se crea mediante un elemento <div> con laclase yui-b. En el siguiente ejemplo se supone que la página está formada por dos columnas, porlo que se crean dos bloques dentro del cuerpo de la página:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc">

<div id="hd"><!-- cabecera --></div>

<div id="bd">

<!-- cuerpo -->

<div class="yui-b">...</div>

<div class="yui-b">...</div>

</div>

<div id="ft"><!-- pie --></div>

</div>

</body>

</html>

Indicar que la página tiene dos bloques no es suficiente, ya que también es necesario indicar cuálde los dos bloques es el principal. Para ello, se encierra el bloque principal con otro elemento<div> cuyo id es yui-main:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc">

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

<div id="hd"><!-- cabecera --></div>

<div id="bd">

<!-- cuerpo -->

<div id="yui-main">

<div class="yui-b">

<!-- bloque principal -->

</div>

</div>

<div class="yui-b">

<!-- bloque secundario -->

</div>

</div>

<div id="ft"><!-- pie --></div>

</div>

</body>

</html>

NOTA La forma en la que está diseñado YUI permite que el orden en el que se definen susbloques en el código HTML sea independiente a su visualización. Algunos diseñadoresprefieren colocar el lateral secundario lo antes posible dentro del código HTML, ya que sueleincluir el menú de navegación y por razones de accesibilidad y de SEO es recomendable queaparezca lo antes posible. Con YUI es posible incluir el bloque secundario en primer lugar en elcódigo HTML con la seguridad de que se visualizará correctamente en la posición establecida.

Después de crear los bloques de la página y después de indicar cuál es el bloque principal, elsiguiente paso consiste en utilizar la plantilla adecuada para establecer las anchuras de cadabloque y su posición. YUI incluye por defecto seis tipos de plantillas, que corresponden a losdiseños más comunes y están preparados para mostrar los formatos publicitarios más utilizados:

Selector Características de los bloques

.yui-t1 Lateral de 160px a la izquierda

.yui-t2 Lateral de 180px a la izquierda

.yui-t3 Lateral de 300px a la izquierda

.yui-t4 Lateral de 180px a la derecha

.yui-t5 Lateral de 240px a la derecha

.yui-t6 Lateral de 300px a la derecha

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

NOTA Existe una séptima plantilla especial que utiliza el selector .yui-t7 y que se puedeemplear en las páginas que no están divididas en columnas o bloques.

Si la página ya ha definido sus bloques, utilizar una plantilla u otra es tan sencillo como modificarel valor de la clase del elemento <div> que encierra a todos los contenidos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc" class="yui-t"> <!-- plantilla con el lateral izquierdo de 160px -->

<div id="hd"><!-- cabecera --></div>

<div id="bd">

<!-- cuerpo -->

<div id="yui-main">

<div class="yui-b">

<!-- bloque principal -->

</div>

</div>

<div class="yui-b">

<!-- bloque secundario -->

</div>

</div>

<div id="ft"><!-- pie --></div>

</div>

</body>

</html>

A continuación se modifica la página anterior para utilizar la plantilla que muestra el lateral a laderecha y con una anchura de 300px:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc" class="yui-t6"> <!-- plantilla con el lateral derecho de 300px -->

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

<div id="hd"><!-- cabecera --></div>

<div id="bd">

<!-- cuerpo -->

<div id="yui-main">

<div class="yui-b">

<!-- bloque principal -->

</div>

</div>

<div class="yui-b">

<!-- bloque secundario -->

</div>

</div>

<div id="ft"><!-- pie --></div>

</div>

</body>

</html>

Las plantillas ofrecidas por YUI son las más utilizadas en el diseño web, pero en muchasocasiones las páginas presentan otras estructuras más complejas. Cuando la estructura estádividida en más columnas, no se utilizan las plantillas, sino que se define directamente una rejilla.

5.5.5. RejillaEl tercer elemento que forma la estructura de las páginas en YUI es la rejilla, que permite realizardiseños mucho más complejos que los que se realizan úncamente con las plantillas. La estructuraen rejilla se puede utilizar junto con las plantillas o de forma independiente.

Las rejillas permiten crear divisiones muy complejas y se definen mediante dos elementos:

1. El contenedor de la rejilla establece el tipo de división.

2. Las unidades son los elementos individuales en los que está dividida la rejilla.

La rejilla más utilizada y más sencilla es .yui.g, que divide un elemento en dos partes iguales. Elcódigo HTML necesario es el siguiente:

<div class="yui-g">

<div class="yui-u"></div>

<div class="yui-u"></div>

</div>

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

El elemento <div class="yui-g"> crea una nueva división o rejilla. Como se trata de una divisiónen dos partes iguales, en su interior se deben definir dos unidades mediante <div class="yui-

u"></div>. Además, YUI obliga a indicar explícitamente cuál de las dos unidades es la primeramediante la clase first. De esta forma, el código correcto del ejemplo anterior se muestra acontinuación:

<div class="yui-g">

<div class="yui-u first"></div>

<div class="yui-u"></div>

</div>

La siguiente tabla muestra las seis rejillas incluidas por defecto en YUI y sus características:

Selector Tipo de división

.yui.g 2 unidades a partes iguales (1/2, 1/2)

.yui.gb 3 unidades a partes iguales (1/3, 1/3, 1/3)

.yui.gc 2 unidades (2/3, 1/3)

.yui.gd 2 unidades (1/3, 2/3)

.yui.ge 2 unidades (3/4, 1/4)

.yui.gf 2 unidades (1/4, 3/4)

Utilizando varias de las rejillas predefinidas es posible crear estructuras de página muy complejas.El siguiente ejemplo muestra el código de una página cuyo cuerpo está dividido en dos columnasen su parte superior y en tres columnas en su parte inferior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/

strict.dtd">

<html>

<head>

<title>Página diseñada con YUI</title>

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">

</head>

<body>

<div id="doc" class="yui-t7">

<div id="hd"><!-- cabecera --></div>

<div id="bd">

<!-- cuerpo -->

<div id="yui-main">

<div class="yui-b"><!-- bloque principal -->

<!-- rejilla 1/2, 1/2 -->

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

<div class="yui-g">

<div class="yui-u first"></div>

<div class="yui-u"></div>

</div>

<!-- rejilla 1/3, 1/3, 1/3 -->

<div class="yui-gb">

<div class="yui-u first"></div>

<div class="yui-u"></div>

<div class="yui-u"></div>

</div>

</div>

</div>

<div class="yui-b"><!-- bloque secundario -->

</div>

</div>

<div id="ft"><!-- pie --></div>

</div>

</body>

</html>

Combinando las rejillas básicas se pueden obtener otro tipo de rejillas muy utilizadas. La rejilla 1/4, 1/4, 1/4, 1/4 se puede obtener combinando dos rejillas 1/2, 1/2:

...

<div id="bd">

<!-- cuerpo -->

<div id="yui-main">

<div class="yui-b"><!-- bloque principal -->

<!-- rejilla 1/2, 1/2 -->

<div class="yui-g">

<div class="yui-u first">

<!-- rejilla 1/2, 1/2 -->

<div class="yui-g">

<div class="yui-u first"></div>

<div class="yui-u"></div>

</div>

</div>

<div class="yui-u">

<!-- rejilla 1/2, 1/2 -->

<div class="yui-g">

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

<div class="yui-u first"></div>

<div class="yui-u"></div>

</div>

</div>

</div>

</div>

</div>

<div class="yui-b"><!-- bloque secundario -->

</div>

</div>

...

</div>

...

Crear estructuras complejas con YUI es realmente sencillo aunque requiere de un período deaprendizaje. Por ese motivo, para los diseñadores que están empezando puede ser de utilidad laherramienta YUI: CSS Grid Builder (http://developer.yahoo.com/yui/grids/builder/) que permiteconfigurar la estructura de la página de forma gráfica.

http://librosweb.es/css_avanzado/capitulo_5/layouts_con_el_framework_yui.html

5.6. Otros frameworksYUI (http://developer.yahoo.com/yui/) no es el único framework CSS disponible, pero si es el máscompleto. El motivo es que YUI ni siquiera es un framework CSS, sino que es una completalibrería de componentes listos para crear aplicaciones web dinámicas. YUI incluye decenas deutilidades de todo tipo para facilitar la programación con Javascript, incluye componentesprediseñados listos para utilizar, herramientas para comprimir el código JavaScript y el códigoCSS, componentes para facilitar el diseño web con CSS y otros muchos componentes de todotipo.

Además de YUI, existen muchos otros frameworks que facilitan el diseño de páginas web conCSS. Aunque no son tan completos como YUI, cuentan con la ventaja de que sólo sonframeworks CSS, por lo que están mucho más especializados.

A continuación se indican los tres frameworks más populares al margen de YUI:

• 960 Grid System (http://960.gs/): su nombre proviene de 960px, que es la anchura para la queoptimiza el diseño de los layouts. Este framework divide los 960px de anchura de la página en12 o 16 columnas de 60px y 40px de anchura respectivamente y les añade un margenizquierdo y derecho de 20px a cada columna. El archivo comprimido del framework tambiénincluye una plantilla de papel en formato PDF y plantillas para los programas Fireworks,OmniGraffle, Photoshop y Visio.

• YAML (http://www.yaml.de/): su nombre proviene de "Yet Another Multicolumn Layout" y esuno de los frameworks más completos. Soporta todas las versiones de todos losnavegadores, incluyendo navegadores tan obsoletos como Internet Explorer 5. Ladocumentación de YAML está formada por un libro en formato PDF de más de 110 páginas.Al igual que YUI, el framework YAML también dispone de una herramienta llamada YAMLBuilder (http://builder.yaml.de/) que permite configurar gráficamente la estructura de la página.

• Blueprint (http://blueprintcss.org/): framework muy similar en concepto a 960 Grid System, yaque por defecto la página tiene una anchura de 950px dividida en 24 columnas de 30px deancho y 10px de márgenes laterales.

http://librosweb.es/css_avanzado/capitulo_5/otros_frameworks.html

Capítulo 6. Técnicas avanzadas6.1. Imágenes embebidasSegún los estudios realizados por Yahoo! el tiempo de carga de una página media depende en un80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuariosdedican la mayor parte del tiempo a descargar imágenes, archivos JavaScript, hojas de estilosCSS y otros recursos externos.

Por este motivo, las mejoras en la parte del cliente generan muchos más beneficios que lasmejoras en la parte del servidor. De todos los elementos de la parte del cliente, las imágenes sonnormalmente las que más penalizan el rendimiento. Además del peso de cada imagen, elrendimiento se resiente porque cada imagen requiere realizar una petición al servidor. Como losnavegadores tienen un límite de conexiones simultáneas con el servidor (entre 2 y 8), la descargade una página con muchas imágenes se bloquea continuamente.

Como ya se explicó en las secciones anteriores, la solución para mejorar el rendimiento de lasimágenes consiste en combinarlas en una imagen grande llamada sprite CSS y utilizar lapropiedad background-image en cada elemento HTML.

Además de los sprites CSS existe otra técnica que permite embeber o incluir las imágenes en lapropia página HTML u hoja de estilos CSS. La técnica se suele denominar "imágenes embebidas"o "imágenes en línea".

Normalmente, en las hojas de estilos y páginas HTML sólo se indica la URL de la imagen quedebe descargar el navegador. En la técnica de las imágenes embebedidas no se indica la URL,sino que se incluyen directamente los bytes de la imagen, para que el navegador pueda mostrarlade forma inmediata.

Los datos de la imagen se incluyen mediante un esquema especial llamado data:, de la mismaforma que las URL se indican mediante el esquema http:, las direcciones de correo electrónicomediante el esquema mailto:, etc. El esquema data: se define en el estándar RFC 2397(http://www.ietf.org/rfc/rfc2397.txt) y su sintaxis es la siguiente:

data:[<mediatype>][;base64],<data>

El atributo <mediatype> corresponde al tipo de contenido de los bytes que se incluyen. Los tiposde contenido están estandarizados y los que utilizan habitualmente las imágenes son: image/gif,image/jpeg y image/png. Si no se indica el tipo de forma explícita, el navegador supone que estext/plain, es decir, texto normal y corriente.

http://librosweb.es/css_avanzado/capitulo_6.html

El valor base64 es opcional e indica que los datos de la imagen se han codificado según elformato base64. Si no se indica este valor, el navegador supone que los bytes de la imagen noestán codificados.

A continuación se muestra el ejemplo de una imagen HTML (<img>) que no se indica medianteuna URL sino que se incluyen sus bytes directamente en la página:

<!-- Imagen externa que el navegador debe descargar desde el servidor -->

<img alt="Icono de un libro" width="16" height="16" src="/imagenes/

icono_libro.png" />

<!-- Imagen embebida que el navegador puede mostrar directamente porque ya

dispone de sus bytes -->

<img alt="Icono de un libro" width="16" height="16" src="data:image/png;base64,iV

BORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHd

hcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC

4AsoPoGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA

3FZCAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYP

HkGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzpw

4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV3VI

4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acCoJhjn

ZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkhkcywZqQ

QlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035mxIkLq0dhD

w5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII=" />

El atributo src de la imagen del ejemplo anterior utiliza el esquema data: para incluir en la páginalos bytes de la imagen. El valor image/png indica que los datos corresponden a una imagen enformato PNG. El valor base64 indica que los datos incluidos están codificados según el formatobase64.

Aunque el ejemplo anterior funciona correctamente, como todos los datos se incluyen en el propiocódigo HTML, el navegador no puede hacer uso de la caché para reutilizarlos posteriormente. Elresultado es que el número de peticiones HTTP se reduce drásticamente, pero aumentasignificativamente el tamaño de todas las páginas HTML.

El siguiente paso consiste en utilizar las imágenes embebidas en las hojas de estilos CSS, deforma que se mantengan las ventajas del ejemplo anterior y se solucionen todas sus desventajas.Para embeber las imágenes en CSS se sigue la misma estrategia que en HTML, ya que sólo esnecesario sustituir la URL por el esquema data:, tal y como muestra el siguiente ejemplo:

/* Imagen externa que el navegador debe descargar desde el servidor */

ul#menu li { background: #FFF no-repeat center center url("/imagenes/

icono_libro.png"); }

http://librosweb.es/css_avanzado/capitulo_6.html

/* Imagen embebida que el navegador puede mostrar directamente porque ya dispone

de sus bytes */

ul#menu li {

background: #FFF no-repeat center center url("data:image/png;base64,iVBORw0KGgo

AAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQW

RvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC4AsoP

oGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA3FZ

CAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYPH

kGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzp

w4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV

3VI4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acC

oJhjnZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkh

kcywZqQQlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035m

xIkLq0dhDw5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII=");

}

La ventaja de utilizar las imágenes embebidas en CSS es que sólo aumenta el tamaño de lashojas de estilos y no el de todas las páginas HTML del sitio. Además, los navegadores guardan ensu cache las hojas de estilos completas, por lo que el aumento en su tamaño no penaliza enexceso el rendimiento global de la descarga de páginas.

El proceso de codificación de los bytes de las imágenes según el formato base64 es una tareamás propia de programadores web que de diseñadores web. Si conoces por ejemplo el lenguajede programación PHP puedes utilizar la siguiente instrucción:

$bytesCodificados = base64_encode(file_get_contents("/ruta/hasta/la/

imagen.png"));

Si no dispones de conocimientos de programación, puedes utilizar alguna de las herramientasonline que codifican directamente los contenidos del archivo indicado:

• Base64 encoder/decoder (http://www.motobit.com/util/base64-decoder-encoder.asp)

• Binary File to Base64 Encoder / Translator (http://www.greywyvern.com/code/php/binary2base64)

Las principales ventajas de la técnica de las imágenes embebidas son las siguientes:

• Reduce drásticamente el número de peticiones HTTP, lo que mejora notablemente elrendimiento.

• Permite guardar una página HTML completa en un único archivo HTML (embebiendo todassus imágenes en su hoja de estilos o en el propio código HTML).

http://librosweb.es/css_avanzado/capitulo_6.html

• Mejora el rendimiento de las peticiones HTTPS en las que las imágenes no se guardan en lacache.

Por contra, sus desventajas son considerables:

• El esquema data: sólo funciona en los navegadores modernos que se preocupan de losestándares (Firefox, Safari y Opera). Internet Explorer 6 y 7 no son capaces de procesar elesquema data:. Internet Explorer 8 asegura que permitirá utilizar data:, pero solamente paraembeber imágenes en CSS.

• El proceso completo es lento y poco flexible, ya que es necesario codificar las imágenes enbase64 y recodificarlas cada vez que se quieren modificar.

• Las imágenes embebidas aumentan considerablemente el tamaño de la hoja de estilos CSS.Además, la codificación base64 también aumenta mucho el tamaño de los datos de la imagenrespecto a sus bytes originales.

• Los navegadores limitan el tamaño máximo de los datos que se pueden embeber mediantedata:. Algunos navegadores como Opera permiten unos 4.000 bytes de datos, mientras queel navegador Firefox permite hasta 100.000 bytes por cada data:.

http://librosweb.es/css_avanzado/capitulo_6.html

6.2. Mapas de imagenLos mapas de imagen se llevan utilizando desde los orígenes de HTML. Combinando lasetiquetas <map> y <area> junto con el atributo usemap de la etiqueta <img> es posible definirdiferentes zonas pinchables dentro de una misma imagen.

Hoy en día los mapas de imagen HTML han sido sustituidos por otras soluciones como Flash, queson más fáciles de utilizar y disponen de más posibilidades. No obstante, recientemente hasurgido un nuevo tipo de mapa de imagen creado sólo con CSS.

Estos mapas de imagen CSS no suelen utilizarse para definir zonas pinchables dentro de unaimagen, sino que se emplean para mostrar información adicional y comentarios sobre lasdiferentes zonas de una imagen. El sitio de fotografía Flickr (http://www.flickr.com/) utiliza losmapas de imagen para mostrar notas y comentarios de los usuarios. Otros sitios web comoFacebook (http://www.facebook.com/) utilizan los mapas de imagen para que los usuariosetiqueten las fotografías indicando el nombre de las personas que aparecen en cada una.

A continuación se explican los pasos necesarios para crear un mapa de imagen exclusivamentecon CSS similar a los de Flickr y Facebook.

En primer lugar, selecciona la imagen en la que se van a mostrar las notas. En este ejemplo seutiliza una imagen de la fotógrafa visualpanic (http://www.flickr.com/photos/visualpanic/) que sepuede utilizar libremente y que está disponible en Flickr (http://www.flickr.com/photos/visualpanic/233508614/):

Figura 6.1 Imagen original en la que se va a mostrar el mapa de imagen

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

El funcionamiento del mapa de imagen terminado es el que muestra la siguiente secuencia deimágenes:

Figura 6.2 Funcionamiento del mapa de imagen creado con CSS

La imagen por defecto no muestra ninguna zona activa. Cuando el usuario pasa el ratón porencima de cualquier parte de la imagen, se muestra el recuadro de todas las zonas activasdisponibles. Además, cuando el usuario pasa el ratón por encima de una zona activa, se muestrael comentario asociado.

El código HTML del mapa de imagen creado con CSS varía mucho en función de la soluciónutilizada. Aunque algunas soluciones crean varios <div> y tablas por cada nota/comentario, eneste ejemplo se simplifica al máximo el código HTML y sólo se utiliza un elemento <div> y unalista <ul>:

<div class="mapa_imagen">

<img src="imagenes/mar.jpg" />

<ul class="notas">

<li id="nota1"><p>Todo el mar es suyo :)</p></li>

<li id="nota2"><p>¡Me encanta este color azul!</p></li>

<li id="nota3"><p>Dan ganas de tirarse...</p></li>

</ul>

</div>

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

El elemento <div class="mapa_imagen"> encierra todos los elementos que forman el mapa deimagen (la imagen original y las notas/comentarios). Los comentarios se incluyen mediante unalista no ordenada <ul>, en la que cada elemento <li> es un comentario.

El elemento <div> y la lista <ul> deben utilizar el atributo class y no id porque en una mismapágina puede haber varios mapas de imagen. Por su parte, los elementos <li> de cadacomentario deben utilizar atributos id, ya que cada comentario se muestra en una posición únicay tiene unas dimensiones únicas de anchura y altura.

La clave de los mapas de imagen CSS consiste en posicionar cada <li> de forma absolutarespecto de la imagen y asignarles una anchura/altura adecuadas. Posteriormente, se emplea lapseudo-clase :hover para mostrar/ocultar elementos cuando el usuario pasa el ratón por encima.

1) Posicionar de forma absoluta cada nota:

div.mapa_imagen {

position: relative

}

ul.notas li {

position: absolute;

}

2) Aplicar los estilos básicos a las notas (borde blanco y sin adornos de lista):

ul.notas li {

border: medium solid #FFF;

list-style: none;

}

3) Ocultar por defecto las notas y mostrarlas cuando se pasa el ratón por encima de la imagen:

ul.notas li {

display: none;

}

div.mapa_imagen:hover ul.notas li {

display: block;

}

4) Aplicar los estilos básicos al texto de las notas y posicionarlo debajo de cada nota:

ul.notas li p {

position: absolute;

top: 100%;

background: #FFF;

opacity: 0.65;

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

margin: 10px 0 0 0;

padding: 0.3em;

}

5) Ocultar por defecto el texto de las notas y mostrarlo cuando se pasa el ratón por encima de lanota:

ul.notas li p {

display: none;

}

ul.notas li:hover p {

display: block;

}

6) Establecer la posición y dimensiones de cada nota:

ul.notas li#nota1 {

width: 140px; height: 110px; top: 130px; left: 345px;

}

ul.notas li#nota2 {

width: 30px; height: 200px; top: 10px; left: 10px;

}

ul.notas li#nota3 {

width: 60px; height: 60px; top: 200px; left: 150px;

}

Aplicando las reglas CSS anteriores el mapa de imagen CSS ya funciona correctamente en losnavegadores Firefox y Safari. Desafortunadamente, los navegadores Internet Explorer y Operatienen errores que impiden que el ejemplo funcione correctamente. El problema reside en que loselementos <li> tienen un fondo transparente y tanto Internet Explorer como Opera tienenproblemas con la pseudo-clase :hover sobre estos elementos.

La solución consiste en añadir un fondo (color o imagen) sobre los elementos <li>. Como lo únicoimportante es añadir un fondo, independientemente de si el fondo es real o no, la siguiente reglaCSS es suficiente:

ul.notas li {

background: url("esta_imagen_no_existe");

}

El código CSS completo del mapa de imagen que funciona en todos los navegadores es elsiguiente:

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

div.mapa_imagen {

position: relative

}

ul.notas li {

list-style: none;

display: none;

position: absolute;

border: medium solid white;

background: url("esta_imagen_no_existe");

}

div.mapa_imagen:hover ul.notas li {

display: block;

}

ul.notas li p {

margin: 10px 0 0 0;

padding: .3em;

display: none;

background: #FFF;

opacity: 0.65;

position: absolute;

top: 100%;

}

ul.notas li:hover p {

display: block;

}

ul.notas li#nota1 {

width: 140px; height: 110px; top: 130px; left: 345px;

}

ul.notas li#nota2 {

width: 30px; height: 200px; top: 10px; left: 10px;

}

ul.notas li#nota3 {

width: 60px; height: 60px; top: 200px; left: 150px;

}

El resultado final es el que muestra la siguiente imagen:

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

Figura 6.3 Mapa de imagen con todas sus zonas activadas

http://librosweb.es/css_avanzado/capitulo_6/mapas_de_imagen.html

6.3. Variables en las hojas de estilosLa mayoría de diseñadores web profesionales creen que CSS carece de un mecanismofundamental para facilitar su trabajo: las variables en las hojas de estilos. Cuando se define unahoja de estilos como la siguiente:

#cabecera {

background-color: #369;

color: #FFF;

}

#contenidos h1, #contenidos h2 {

color: #369;

}

a {

color: #557E29;

}

span {

background-color: #557E29;

}

Los buenos diseñadores utilizan en sus trabajos un número muy reducido de colores quecombinan entre sí para diseñar cada elemento de la página. De esta forma, en las hojas de estilosprofesionales se repiten una y otra vez los mismos valores. No obstante, CSS no permite definirvariables para almacenar los valores que se utilizan constantemente.

Si el diseñador quiere modificar el color verde #557E29 de la hoja de estilos anterior, ¿cómocambia todas las apariciones de ese color verde en la hoja de estilos? Modificar ese color deforma manual es un proceso tedioso y demasiado lento. Afortunadamente, los editores de textodisponen de herramientas para sustituir un valor por otro, aunque tampoco es una soluciónóptima.

Por otra parte, también es común diseñar sitios web idénticos o muy similares en los que sólocambia su aspecto definido con CSS. En este caso, es habitual que un sitio web se diferencie deotro solamente en algunos pocos valores de su hoja de estilos CSS. La solución consistenuevamente en modificar todos los valores de colores y tipos de letra para modificar el aspecto delsitio web.

Los problemas anteriores se podrían resolver fácilmente si CSS permitiera definir variables comoen la siguiente hoja de estilos:

$colorAzul = #369;

$colorVerde = #557E29;

#cabecera {

background-color: $colorAzul;

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

color: #FFF;

}

#contenidos h1, #contenidos h2 {

color: $colorAzul;

}

a {

color: $colorVerde;

}

span {

background-color: $colorVerde;

}

En la hoja de estilos anterior, el diseñador puede cambiar el tono de verde o de azul haciendo unsolo cambio en la hoja de estilos y con la seguridad absoluta de que se modifican todos loselementos de la página y no se comete ningún error.

No obstante, si la hoja de estilos anterior se quiere reutilizar para otros diseños con colorescompletamente diferentes, el nombre de las variables anteriores no sería correcto. Por ello, lo máscorrecto sería crear variables cuyo nombre no incluya información sobre su aspecto:

$colorPrincipal = #369;

$colorSecundario = #557E29;

#cabecera {

background-color: $colorPrincipal;

color: #FFF;

}

#contenidos h1, #contenidos h2 {

color: $colorPrincipal;

}

a {

color: $colorSecundario;

}

span {

background-color: $colorSecundario;

}

Lamentablemente, CSS no permite utilizar variables en las hojas de estilos. Por este motivo sehan desarrollado varias soluciones que hacen uso del servidor web y de los lenguajes deprogramación de servidor para incluir variables en las hojas de estilos CSS.

La solución más sencilla consiste en utilizar el mecanismo SSI (Server Side Includes) de losservidores web Apache y Microsoft IIS. A continuación se muestra el proceso completo para elservidor web Apache 2.2:

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

1) Modificar el archivo de configuración de Apache: dependiendo de tu instalación puede ser elarchivo general de configuración httpd.conf o el archivo de configuración .htaccess

En cualquier caso, es necesario añadir las siguientes opciones de configuración:

Options +Includes

AddType text/css .scss

AddOutputFilter INCLUDES .scss

La configuración anterior le indica al servidor web que los archivos cuya extensión sea .scss sonarchivos CSS de servidor y que por tanto, se deben procesar antes de enviarlos al usuario.

Para que los cambios en la configuración sean efectivos, no olvides reiniciar el servidor web.

2) Crear la hoja de estilos y guardar el archivo con extensión .scss

3) Añadir las variables a la hoja de estilos utilizando la siguiente sintaxis:

Para definir la variable:

<!--#set var="nombre_de_la_variable" value="valor_de_la_variable" -->

Para utilizar la variable

<!--#echo var="nombre_de_la_variable" -->

Siguiendo con la hoja de estilos de los ejemplos anteriores, el resultado es el que se muestra acontinuación:

<!--#set var="colorPrincipal" value="#369" -->

<!--#set var="colorSecundario" value="#557E29" -->

#cabecera {

background-color: <!--#echo var="colorPrincipal" -->;

color: #FFF;

}

#contenidos h1, #contenidos h2 {

color: <!--#echo var="colorPrincipal" -->;

}

a {

color: <!--#echo var="colorSecundario" -->;

}

span {

background-color: <!--#echo var="colorSecundario" -->;

}

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

Si no se quiere utilizar otra extensión para los archivos CSS procesados por el servidor, es posiblehacer uso de la directiva XBitHack, tal y como se explica en la documentación oficial de Apache2.2 sobre SSI (http://httpd.apache.org/docs/2.2/howto/ssi.html).

6.3.1. Lenguajes de programación de servidorLa solución alternativa al uso de las directivas SSI del servidor web consiste en emplear unlenguaje de programación de servidor. Aunque se trata de una técnica diferente, también se basaen procesar las hojas de estilos en el servidor antes de enviarlas al usuario.

Los detalles técnicos de la solución dependen del lenguaje de programación utilizado, pero elmecanismo que se utiliza es idéntico en todos los casos. A continuación se muestra un ejemploque hace uso del lenguaje de programación PHP.

Para incluir variables en las hojas de estilos CSS, se crea un archivo con extensión .php y seutiliza la sintaxis que se muestra en el siguiente ejemplo:

<?php

header('content-type:text/css');

$nombre_variable1 = 'valor_variable1';

$nombre_variable2 = 'valor_variable2';

echo <<<FINCSS

selector {

propiedad1: $nombre_variable1;

propiedad2: $nombre_variable2;

}

FINCSS;

?>

Siguiendo con la hoja de estilos de los ejemplos anteriores, el archivo PHP completo es elsiguiente:

<?php

header('content-type:text/css');

$colorPrincipal = '#369';

$colorSecundario = '#557E29';

echo <<<FINCSS

#cabecera {

background-color: $colorPrincipal;

color: #FFF;

}

#contenidos h1, #contenidos h2 {

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

color: $colorPrincipal;

}

a {

color: $colorSecundario;

}

span {

background-color: $colorSecundario;

}

FINCSS;

?>

Por último, cuando enlaces la hoja de estilos generada con este método, no olvides utilizar laextensión .php en el nombre del archivo de la hoja de estilos:

<link type="text/css" rel="stylesheet" href="/css/estilos.php" />

6.3.2. CSS como lenguaje de programaciónLas soluciones que permiten utilizar variables en las hojas de estilos han evolucionado de talmanera que alguna de ellas permite utilizar CSS como si fuera un lenguaje de programación. Unade estas soluciones es CSS Cacheer (http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer), ideada por el diseñador Shaun Inman.

En primer lugar, CSS Cacheer permite utilizar variables en las hojas de estilos, aunque en estasolución se denominan "constantes":

@constants {

nombre_de_la_constante: valor_de_la_constante;

}

selector {

propiedad: const(nombre_de_la_constante);

}

CSS Cacheer también permite definir unos estilos base que se reutilizan en diferentes elementos:

@base(tipografia_basica) {

font-family: Arial, sans-serif;

line-height: 1.5;

}

p {

based-on: base(tipografia_basica);

font-size: 110%;

}

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

h1 {

based-on: base(tipografia_basica);

font-size: 200%;

}

CSS Cacheer es tan avanzado que permite incluso anidar selectores como se muestra en elsiguiente ejemplo:

ul {

propiedad1: valor1;

li {

propiedad2: valor2;

}

}

Si se procesan las reglas CSS anteriores con CSS Cacheer, el resultado es el siguiente:

ul {

propiedad1: valor1;

}

ul li {

propiedad2: valor2;

}

http://librosweb.es/css_avanzado/capitulo_6/variables_en_las_hojas_de_estilos.html

6.4. Estilos alternativosLa mayoría de sitios web disponen de una o varias hojas de estilos CSS que se aplicanautomáticamente al cargar cada página en el navegador. En realidad, el estándar HTML/XHTMLpermite definir varias hojas de estilos CSS alternativas en una misma página.

De esta forma, el usuario puede seleccionar el estilo con el que se muestra la página entre unaserie de estilos definidos por el diseñador web. En ocasiones los estilos alternativos se empleanpor pura estética, por ejemplo para ofrecer temas y esquemas de colores diferentes en un sitioweb. Sin embargo, el uso más adecuado de los estilos alternativos es la mejora de la accesibilidadofreciendo hojas de estilos que faciliten el acceso a los contenidos para las personasdiscapacitadas.

Las hojas de estilos CSS que se enlazan en una página HTML mediante la etiqueta <link>

pueden ser de tres tipos:

• Permanentes ("persistent"): las hojas de estilos que se aplican siempre.

• Preferentes ("preferred"): las hojas de estilos alternativas que se aplican por defecto.

• Alternativas ("alternate"): las hojas de estilos alternativas que el usuario puede seleccionar.

Las hojas de estilos permanentes se aplican siempre independientemente del resto de hojas deestilos definidas o de la hoja de estilo alternativa utilizada por el usuario. Para indicar que una hojade estilos CSS es permanente, se utiliza el atributo rel="stylesheet" y no se establece elatributo title en la etiqueta <link>:

<link rel="stylesheet" type="text/css" href="css/estilos.css" />

<link rel="stylesheet" type="text/css" href="css/otros_estilos.css" />

En el ejemplo anterior, las dos hojas de estilos CSS se aplican siempre independientemente delmedio y de otras posibles hojas de estilos definidas por la página.

Las hojas de estilos preferentes son las hojas de estilos alternativas que se aplican por defecto.Por lo tanto, si el usuario no selecciona explícitamente otra CSS alternativa, en la página tambiénse aplican las hojas de estilos preferentes. Para indicar que una hoja de estilos CSS espreferente, se utiliza el atributo rel="stylesheet" y se establece el atributo title en la etiqueta<link>:

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/

estilos.css" />

http://librosweb.es/css_avanzado/capitulo_6/estilos_alternativos.html

La hoja de estilos enlazada en el ejemplo anterior se aplica en la página siempre que el usuariono seleccione otra hoja de estilos alternativa. El estándar HTML/XHTML permite crear grupos dehojas de estilos preferentes. Si dos o más hojas de estilos enlazadas tienen el mismo título, elnavegador considera que forman parte de un grupo y las aplica de forma conjunta:

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/

estilos1.css" />

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/

estilos2.css" />

Las etiquetas <link> del ejemplo anterior enlazan dos hojas de estilos diferentes con el mismovalor en su atributo title, por lo que el navegador considera que forman un grupo. Como se tratade hojas de estilos preferentes (porque tienen un atributo rel="stylesheet" y un atributo title

no vacío) el navegador aplica todas las hojas de estilos del grupo a no ser que el usuarioseleccione explícitamente otra hoja de estilos alternativa.

El siguiente ejemplo incluye hojas de estilos permanentes y preferentes:

<link rel="stylesheet" type="text/css" href="css/estilos1.css" />

<link rel="stylesheet" type="text/css" href="css/estilos2.css" />

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/

estilos3.css" />

<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/

estilos4.css" />

Las dos primeras hojas de estilos del ejemplo anterior son de tipo permanente, por lo que elnavegador las aplica siempre. Las otras dos hojas de estilos son de tipo preferente, por lo que elnavegador también las aplica a menos que el usuario seleccione otras hojas de estilo alternativas.

El último tipo de hojas de estilos son las alternativas, que sólo se aplican si el usuario lasselecciona explícitamente. Para indicar que una hoja de estilos CSS es alternativa, se utiliza elatributo rel="alternate stylesheet" y se establece el atributo title en la etiqueta <link>:

<link rel="alternate stylesheet" title="Estilo alternativo" type="text/css"

href="css/estilos.css" />

La hoja de estilos del ejemplo anterior no se aplica en la página a menos que el usuario laseleccione entre todas las hojas de estilos alternativas. Esta característica no está disponible entodos los navegadores, por lo que los diseñadores no deben suponer que el usuario podráutilizarla.

En los navegadores como Firefox y Opera, cuando una página dispone de varias hojas de estilosalternativas, el usuario puede acceder a todas ellas y seleccionar la que desee a través del menúVer > Estilo o Ver > Estilo de página.

http://librosweb.es/css_avanzado/capitulo_6/estilos_alternativos.html

Si se considera una página HTML que enlaza las siete hojas de estilos siguientes:

<link rel="stylesheet" type="text/css" href="css/estilos1.css" />

<link rel="stylesheet" type="text/css" href="css/estilos2.css" />

<link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/

estilos3.css" />

<link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/

estilos4.css" />

<link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/

estilos5.css" />

<link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/

estilos6.css" />

<link rel="stylesheet" title="Estilo alternativo 3" type="text/css" href="css/

estilos7.css" />

Inicialmente, las hojas de estilos que se aplican en la página son:

• Las dos primeras hojas de estilos (estilos1.css y estilos2.css) por ser de tipo permanentey que por tanto, se aplican bajo cualquier circunstancia.

• Las dos siguientes hojas de estilos (estilos3.css y estilos4.css) por ser de tipo preferentey que por tanto, se aplican siempre que el usuario no seleccione explícitamente otro tipo dehoja de estilos alternativa.

Si el usuario utiliza un navegador avanzado (Firefox, Opera) y pulsa sobre el menú Ver > Estilo,se muestran las siguientes opciones:

• Estilo alternativo 1, seleccionado por defecto y que hace que se apliquen las hojas deestilos estilos3.css y estilos4.css y se dejen de aplicar el resto de hojas de estilosalternativas.

• Estilo alternativo 2, que hace que se apliquen las hojas de estilos estilos5.css yestilos6.css y se dejen de aplicar el resto de hojas de estilos alternativas, incluyendo lashojas de estilos preferentes estilos3.css y estilos4.css.

• Estilo alternativo 3, que hace que se aplique la hoja de estilos estilos7.css y se dejende aplicar el resto de hojas de estilos alternativas, incluyendo las hojas de estilos preferentesestilos3.css y estilos4.css.

Por último, recuerda que independientemente del tipo de hoja de estilos enlazada, losnavegadores también tienen en cuenta los medios (atributo media) al aplicar cada hoja de estilosen cada dispositivo con el que accede el usuario.

http://librosweb.es/css_avanzado/capitulo_6/estilos_alternativos.html

6.5. Comentarios condicionales, filtros y hacks6.5.1. Comentarios condicionalesEn ocasiones, cuando se diseña un sitio web, es preciso aplicar diferentes reglas y estilos enfunción del navegador. De esta forma, se pueden corregir los errores y limitaciones de unnavegador sin afectar al resto de navegadores.

Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo llamado "comentarioscondicionales", que todavía incluyen las versiones más recientes como Internet Explorer 8, y quepermite aplicar diferentes estilos CSS según la versión del navegador.

La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de HTML:

<!-- Comentario normal de HTML -->

<!--[if expresion]> Comentario condicional <![endif]-->

La sintaxis de los comentarios condicionales permite que su contenido se ignore en cualquiernavegador que no sea de la familia Internet Explorer.

Las expresiones se crean combinando identificadores, operadores y valores. El único identificadordefinido es IE, que permite crear el comentario condicional más simple:

<!--[if IE]>

Este navegador es cualquier versión de Internet Explorer

<![endif]-->

El operador más sencillo definido por los comentarios condicionales es el operador de negación(!), que se indica delante de una expresión para obtener el resultado contrario:

<!--[if !IE]><!-->

Este navegador es cualquiera salvo Internet Explorer

<!--<![endif]-->

Si se quiere restringir el alcance del comentario condicional a una única versión de InternetExplorer, se puede indicar directamente el número de la versión:

<!--[if IE 5.5]>

Este navegador es Internet Explorer 5.5

<![endif]-->

<!--[if IE 6]>

Este navegador es Internet Explorer 6

<![endif]-->

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

<!--[if IE 8]>

Este navegador es Internet Explorer 8

<![endif]-->

Además de las versiones específicas, también es posible restringir los comentarios condicionalesa un grupo de versiones de Internet Explorer mediante los operadores "menor que" (lt), "mayorque" (gt), "menor o igual que" (lte), "mayor o igual que" (gte).

<!--[if lt IE 7]>

Este navegador es cualquier versión anterior a Internet Explorer 7

<![endif]-->

<!--[if lte IE 6]>

Este navegador es Internet Explorer 6 o cualquier versión anterior

<![endif]-->

<!--[if gt IE 7]>

Este navegador es cualquier versión más reciente que Internet Explorer 7

<![endif]-->

<!--[if gte IE 8]>

Este navegador es Internet Explorer 8 o cualquier versión más reciente

<![endif]-->

Por último, también se pueden utilizar otros operadores más complejos similares a los que sepueden encontrar en los lenguajes de programación. El operador AND (&) combina dosexpresiones para crear una condición que sólo se cumple si se cumplen las dos expresiones. Eloperador OR (|) también combina dos expresiones y crea condiciones que se cumplen cuando almenos una de las dos expresiones se cumple. También se pueden utilizar paréntesis para crearexpresiones avanzadas:

<!--[if !(IE 7)]>

Este navegador es cualquier versión diferente a Internet Explorer 7

<![endif]-->

<!--[if (IE 7) | (IE 8)]>

Este navegador es Internet Explorer 7 o Internet Explorer 8

<![endif]-->

<!--[if (gt IE 5) & !(IE 8)]>

Este navegador es cualquier versión más reciente que Internet Explorer 5 pero

que no sea Internet Explorer 8

<![endif]-->

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

<!--[if (gte IE 5) & (lt IE 8)]>

Este navegador es Internet Explorer 5 o cualquier versión más reciente que sea

anterior a Internet Explorer 8

<![endif]-->

Las principales ventajas de los comentarios condicionales son:

• Compatibilidad con cualquier navegador, ya que el resto de navegadores consideran que loscomentarios condicionales son comentarios normales de HTML e ignoran su contenido.

• No requiere el uso de lenguajes de programación como JavaScript, aunque se puedecombinar con este tipo de técnicas para detectar dinámicamente el tipo y versión denavegador.

NOTA Basándose en la idea de los comentarios condicionales, se ha desarrollado una técnicaque permite crear hojas de estilos condicionales que aplican diferentes propiedades en funciónde la versión del navegador. Esta técnica se denomina Conditional CSS (http://www.conditional-css.com/) y requiere procesar las hojas de estilos en el servidor antes de servirlas a losusuarios. Los lenguajes de programación de servidor soportados son PHP, C y C++.

6.5.2. Filtros y hacksLos filtros y hacks es otra de las técnicas disponibles para aplicar diferentes estilos y reglas CSSen función del navegador que visualiza los contenidos. Al contrario que los comentarioscondicionales, los filtros y hacks constituyen una forma poco elegante y técnica de solucionar esteproblema.

La idea de los filtros y hacks consiste en aprovechar los errores y carencias de los navegadorespara ocultar los estilos CSS que no se deben aplicar en ese navegador. El siguiente ejemplomuestra uno de los hacks más antiguos y conocidos que aprovecha un error en las versionesobsoletas de Internet Explorer:

#elemento {

width: 300px;

voice-family: "\"}\"";

voice-family: inherit;

width: 250px;

}

html > body #elemento {

width: 300px;

}

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

Internet Explorer 5 y 5.5 no interpretan correctamente el modelo de cajas de CSS, por lo que nomuestran los elementos con la misma anchura que el resto de navegadores. Si se quiere realizarun diseño con el mismo aspecto en cualquier navegador, es preciso utilizar propiedades diferentespara Internet Explorer 5/5.5 y el resto de navegadores.

Entre los muchos errores de Internet Explorer 5/5.5 se encuentra la imposibilidad de procesarcorrectamente la declaración voice-family: "\"}\"";. Por tanto, las reglas CSS anteriores seinterpretan de la siguiente forma en cada navegador:

/* Internet Explorer 5/5.5 */

#elemento {

width: 300px;

}

/* Internet Explorer 6 */

#elemento {

width: 300px;

width: 250px;

}

/* Resto de navegadores */

#elemento {

width: 300px;

width: 250px;

}

html > body #elemento {

width: 250px;

}

El resultado final del hack anterior es que Internet Explorer 5/5.5 aplica un valor de 300px a lapropiedad width y el resto de navegadores aplican un valor de 250px. Si se tienen en cuenta losmárgenes, bordes y rellenos, el elemento se muestra con el mismo aspecto en cualquiernavegador.

Algunos filtros y hacks son mucho más sencillos que el mostrado anteriormente. De hecho,existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada versión deInternet Explorer. El primer filtro es * html, que aplica las reglas CSS a las versiones de InternetExplorer anteriores a la 7:

p {

color: red;

}

* html p {

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

color: blue;

}

Si se añade * html delante del selector de cualquier regla CSS, esa regla sólo se aplica a losnavegadores de la familia Internet Explorer anteriores a la versión 7. De esta forma, en el ejemploanterior los párrafos de la página se muestran de color azul en los navegadores Internet Explorer5, 5.5 y 6, mientras que se muestran de color rojo en el resto de navegadores.

Otro de los hacks más utilizados es _ (guión bajo) que hace que una propiedad sólo se aplique alos navegadores de la familia Internet Explorer anteriores a la versión 7:

p {

color: red;

_color: blue;

}

La regla CSS anterior muestra los párrafos de la página de color rojo en cualquier navegadorsalvo en los navegadores Internet Explorer 5, 5.5 y 6, donde se muestran de color azul.

Por último, también existe el hack * (asterisco) que hace que una propiedad sólo se aplique en losnavegadores de la familia Internet Explorer anteriores a la versión 8:

p {

color: red;

*color: blue;

}

En el ejemplo anterior, los párrafos de la página se muestran de color azul en cualquier navegadorde la familia Internet Explorer cuya versión sea anterior a la 8 y se muestran de color rojo encualquier otro navegador.

Se puede consultar la lista completa de filtros y hacks para cada navegador y cada versión en elsitio web http://centricle.com/ref/css/filters/

El uso de los filtros y hacks siempre debe considerarse como el último recurso para conseguir quelos diseños tengan el mismo aspecto en cualquier navegador. Como los filtros y hacks se basanen aprovechar errores de los navegadores, su principal problema es que no garantizan sufuncionamiento con las versiones más modernas de los navegadores. Además, los filtros y hackscomplican el código CSS y lo hacen más difícil de leer y de mantener.

La mejor alternativa a los filtros y hacks es el uso de comentarios condicionales. Si no es posibleel uso de comentarios condicionales, es preferible que el diseño de la página muestre ligerasdiferencias visuales en cada navegador.

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

Afortunadamente, la importancia de los filtros y hacks es cada vez menor, ya que todos losnavegadores modernos solucionan los graves errores de sus versiones anteriores e introducenmenos errores nuevos.

http://librosweb.es/css_avanzado/capitulo_6/comentarios_condicionales_filtros_y_hacks.html

6.6. Selector de navegadorLos selectores de navegador permiten aplicar reglas CSS a navegadores específicos. Aunque setrata de una idea similar a los comentarios condicionales, su gran ventaja es que funcionan encualquier navegador y que no se limitan a seleccionar solamente el navegador.

El siguiente ejemplo muestra cómo aplicar diferentes reglas CSS en función del navegadorutilizando los selectores de navegador:

.ie p { ... } /* estilos de los párrafos en Internet Explorer */

.ie6 p { ... } /* estilos de los párrafos en Internet Explorer 6 */

.ff3 p { ... } /* estilos de los párrafos en Firefox 3 */

Como CSS no incluye por defecto los selectores de navegador, se debe recurrir a solucionesbasadas en el lenguaje de programación JavaScript. Una de estas soluciones ha sido creada porel diseñador Rafael Lima y se denomina CSS Browser Selector (http://rafael.adm.br/css_browser_selector/).

La solución de CSS Browser Selector consiste en ejecutar un pequeño código JavaScript cuandose carga la página de forma que se añada una clase en el elemento <html> en función delnavegador utilizado por el usuario.

El primer paso consiste en añadir el siguiente código JavaScript en la sección <head> de lapágina:

<head>

...

<script type="text/javascript">

/*

CSS Browser Selector v0.2.7

Rafael Lima (http://rafael.adm.br)

http://rafael.adm.br/css_browser_selector

License: http://creativecommons.org/licenses/by/2.5/

Contributors: http://rafael.adm.br/css_browser_selector#contributors

*/

var css_browser_selector = function() {

var ua=navigator.userAgent.toLowerCase(),

is=function(t){return ua.indexOf(t) != -1;},

h=document.getElementsByTagName('html')[0],

b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie

ie'+RegExp.$1):is('firefox/2')?'gecko ff2':is('firefox/3')?'gecko

ff3':is('gecko/')?'gecko':is('opera/9')?'opera opera9':/opera

(\d)/.test(ua)?'opera

opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit

safari':is('mozilla/')?'gecko':'',

http://librosweb.es/css_avanzado/capitulo_6/selector_de_navegador.html

os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';

var c=b+os+' js'; h.className += h.className?' '+c:c;

}();

</script>

...

</head>

Una vez añadido el código anterior, cada vez que un usuario accede a la página se añade unaclase al elemento <html> que indica el navegador y sistema operativo utilizados:

/* navegador Firefox3, sistema operativo Windows, JavaScript habilitado */

<html class="gecko ff3 win js" ...>

/* navegador Internet Explorer, sistema operativo Windows, JavaScript habilitado

*/

<html class="ie ie8 win js" ...>

/* navegador Firefox 3, sistema operativo Linux, JavaScript habilitado */

<html class="gecko ff3 linux js" ...>

Las siguientes tablas muestran las clases que añade CSS Browser Selector en función delnavegador y sistema operativo:

Clase Sistema Operativo

win Cualquier versión de Windows

linux Cualquier versión y/o distribución de Linux

mac Cualquier versión de Mac OS

Clase Navegador

ie Cualquier versión de Internet Explorer

ie5 Internet Explorer 5

ie6 Internet Explorer 6

ie7 Internet Explorer 7

ie8 Internet Explorer 8

gecko Cualquier versión de Mozilla, Firefox y Camino

ff2 Firefox 2

http://librosweb.es/css_avanzado/capitulo_6/selector_de_navegador.html

Clase Navegador

ff3 Firefox 3

opera Cualquier versión de Opera

opera8 Opera 8

opera9 Opera 9

konqueror Cualquier versión de Konqueror

webkit, safari Cualquier versión de Safari y Shiira

Además, también se añade la clase js cuando el navegador tiene activado el soporte deJavaScript.

Como todos los valores anteriores se añaden como clase de <html>, en los navegadores quesoportan correctamente los estándares es posible combinar varias clases para restringir aún másel alcance del selector:

/* estilos de los párrafos en Firefox 3 de Windows */

.ff3.win p { ... }

/* estilos de los párrafos en Firefox 3 de Linux */

.ff3.linux p { ... }

/* estilos de los párrafos en Firefox 3 de Mac OS */

.ff3.mac p { ... }

La versión más reciente de CSS Browser Selector se puede obtener a través del repositoriohttp://github.com/rafaelp/css_browser_selector/ donde también se encuentra una versióncomprimida para mejorar ligeramente el rendimiento.

http://librosweb.es/css_avanzado/capitulo_6/selector_de_navegador.html