Hexagonal Alien

Sticky Footer: o cómo poner el pie de página en su sitio

noreply@blogger.com (LuisFran) — Sat, 21 Jan 2017 18:24:00 +0000

En diseño, un sticky footer es un pie de página que se queda "pegado", independientemente de la cantidad de contenido, a la parte inferior de la ventana del navegador. Con esto evitamos que nuestro diseño se rompa al aparecer el pie de página en mitad del documento, cuando el propio documento tiene poco contenido. No debemos confundirlo con un pie de página que se queda fijo y es visible a lo largo de todo el documento, eso es arena de otro costal.

Hay varias formas de hacerlo, y cada una de ellas con sus pros y sus contras. De momento voy a pasar por alto el uso de Grid Layout, por la escasa compatibilidad que aún existe en los diferentes navegadores, aunque es probablemente una de las mejores y más limpias formas de conseguirlo. Así que no perdamos el tiempo y ¡al lío!.

Sticky footer con márgenes negativos

Esta es la forma más elemental de conseguir nuestro objetivo y quizás la más compatible, pero con una gran pega, necesitamos dar un alto concreto a nuestro pie de página, y como supongo que ya sabrás, los altos fijos son algo que se debe evitar en diseño web.

Realmente hay tres variantes usando márgenes negativos, en función de como usemos el elemento que evita el solapamiento, cuando el contenido es lo suficientemente amplio para enviar por sí sólo al pie de página a su sitio. A fondo sólo voy a explicar la primera de ellas, en las otras dos sólo será necesario ver las modificaciones necesarias para evitar el solapamiento.

Contenedor + elemento auxiliar

La forma de conseguir un sticky footer con márgenes negativos es relativamente sencilla. Hay que tener en cuenta que lo que desconocemos en todo momento es el alto de los elementos de la web y el alto del viewport (zona visible del navegador donde se muestra el documento), por tanto no podemos calcular cuanto tenemos que desplazar el pie de página para ponerlo en su sitio.

Para ello necesitamos englobar todo el contenido, excepto el pie de página, en un contenedor auxiliar al que daremos el valor min-height: 100%. Ahora tenemos el pie de página justo por debajo del viewport. Esto podemos corregirlo usando márgenes negativos (en el contenedor o en el pie de página), pero para ello necesitamos saber el valor exacto del alto del pie de página, lo que nos obliga a darle un valor concreto, que es la gran pega de este método.

Si visualizamos un documento con poco contenido y usando este método justo hasta este punto concreto, todo parece funcionar correctamente. Sin embargo, si hay contenido suficiente para empujar el pie de página hasta su lugar correcto, veremos que se produce un solapamiento. Para ello deberemos de usar un elemento auxiliar que situaremos dentro del contenedor y al final de todo el contenido, con un alto del mismo valor que el del pie de página.


<div id="contenedor">
    <header>
        contenido
    </header>
    <main>
        contenido
    </main>
    <div id="push"></div>
</div>
<footer>
    contenido
</footer>


html, body {
    height: 100%;
}

#contenedor {
    min-height: 100%;
    margin-bottom: -8em;
}

footer, #push {
    height: 8em;
}

Doble contenedor

Para este caso cambiaremos el elemento auxiliar, por otro contenedor, teniendo así una estructura de dos elementos contenedores anidados. El primer contenedor tendrá los mismo parámetros que en el caso anterior y el segundo, que es el que envuelve el contenido directamente, un padding-bottom de valor igual al alto del pie de página.


<div id="contenedor">
    <div id="contenedor-auxiliar">
        <header>
            contenido
        </header>
        <main>
            contenido
        </main>
    </div>
</div>
<footer>
    contenido
</footer>


html, body {
    height: 100%;
}

#contenedor {
    min-height: 100%;
    margin-bottom: -8em;
}

#contenedor-auxiliar {
    padding-bottom: 8em;
}

footer {
    height: 8em;
}

Contenedor + box-sizing

Este último caso es realmente una variación del segundo, ya que cambiando el modelo de cajas mediante box-sizing: border-box no necesitamos el segundo contenedor, podemos darle un padding-bottom de valor igual a el alto del pie de página directamente al contenedor principal, con lo que nos ahorramos algo de marcado en html.


<div id="contenedor">
    <header>
        contenido
    </header>
    <main>
        contenido
    </main>
</div>
<footer>
    contenido
</footer>


* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#contenedor {
    min-height: 100%;
    margin-bottom: -8em;
    padding-bottom: 8em;
}

footer {
    height: 8em;
}

Sticky footer con display:table

Un elemento cualquiera con una height: 100% tiende a ocupar el 100% del alto de su contenedor padre, independientemente de si hay o no otros elementos. Esto, que en ocasiones puede resultar útil, es lo que en los ejemplos anteriores nos obligaba a corregir la posición del pie de página con un margen negativo.

También, este comportamiento es lo que nos hace fijar tanto al elemento html como al elemento body a un height: 100%. Es lógico, puesto que necesitamos que nuestro contenedor principal ocupe el 100% del viewport, y para ello sus ancestros deben tener también esa medida. La explicación es muy sencilla, el elemento html es el elemento raíz, por tanto no tiene elemento padre, tomando como valor de referencia el wieport.

Este comportamiento afecta a todos los elementos de tipo bloque (recuerda que básicamente hay dos tipos de elementos, si consideramos únicamente el display externo, de bloque y en línea), que bien pueden ser los que definimos mediante diplay: block, display: table e incluso display: flex.

Para este caso concreto lo que nos importa es el comportamiento de las tablas, para ser exactos, de como se comportan los elementos que hay en el interior de una tabla. Un elemento definido con display: table se comporta, en lo referente a un alto del 100%, tal cual lo haría uno definido con display:block, pero no los elementos internos, que podemos definir con una serie de propiedades display para que se comporten como si de una tabla "real" se tratase.

Una tabla tiene un comportamiento específico, y si no se le asigna ningún valor al alto y al ancho, esta tiende a ocupar el mismo espacio que ocupan los elementos que contiene. No es algo que nos convenga, por tanto debemos dar a nuestro elemento contenedor un height: 100% y un widht: 100%. A nuestro contenido le asignaremos un display: table-row para que se comporte como si de una fila se tratase, y aquí es de donde proviene la magia. Si le asignamos un height: 100% tiende a ocupar el 100% del espacio disponible, no el 100% de su elemento contenedor. Esto es lo que realmente nos interesa, puesto que de esta forma no necesitamos corregir la posición del pie de página con márgenes negativos (debemos englobar tanto contenido como pie de de página dentro de un mismo elemento contenedor). Tampoco es necesario fijar una altura al pie de página, podemos dejarlo con medidas fluidas, que es como se debe hacer.

Eso sí, no todo son ventajas, hay una pequeña pega. Hay algunos elementos dentro de una tabla que no soportan determinadas propiedades, en concreto, a una fila no le podemos dar valor a padding, si necesitamos hacer esto debemos usar un contenedor auxiliar. Si estás interesado en saber como se comportan las tablas más a fondo, puedes leer el artículo Table Formatting publicado en Site Point.


<body>
    <header>
        contenido
    </header>
    <main>
        <div class="contenedor">
            contenido
        </div>
    </main>
    <footer>
        contenido
    </footer>
</body>


html, body {
  height: 100%;
  margin: 0;
}

body {
  display: table;
  width: 100%;
}

main {
  height: 100%;
  display: table-row;
}

.contenedor {
  padding: 1em;
}

Sticky footer con flexbox

La forma de hacerlo con display: flex es muy parecida ha cuando usamos display: table. Necesitamos un contenedor principal (también podemos usar el mismo body), para englobar todos los elementos de la página (cabecera, contenido, pie de página ...), dar a los elementos html y body un valor de alto del 100% (ya sabes para que) y distribuir el espacio disponible para que este sea ocupado por el contenido.

Cuando hacemos que un elemento sea flexible, todos sus hijos pasan a comportarse de una manera concreta, en función a las propiedades que hayamos definido en este. A su vez, sus hijos disponen también de unas pocas propiedades que de otra forma no estarían disponibles para su uso. De entre estas últimas propiedades hay una que nos interesa, flex-grow que nos permite distribuir el espacio libre disponibles entre los elementos contenidos dentro de un elemento flexible de la forma en que queramos.

La gran ventaja de usar flexbox frente a display:table es que nos podemos ahorrar el contenedor extra que necesitamos en caso de querer usar alguna propiedad que display:table-row no soporta, como por ejemplo padding. Por el resto es todo igual, nada de márgenes negativos y podemos tener un pie de página con medidas fluidas.


<body>
    <header>
        encabezado
    </header>
    <main>
        contenido
    </main>
    <footer>
        pie de página
    </footer>
</body>


html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

Details y Summary: efecto acordeón nativo de HTML5

noreply@blogger.com (LuisFran) — Sat, 08 Oct 2016 17:58:00 +0000

Imagen de Andreshuco.

Este Septiembre ha sido mucho más duro de lo esperado. Nuevo trabajo, nuevos estudios, las niñas empiezan al cole ..., y al final me he ido quedando sin tiempo para escribir. Así que una vez dejado atrás Septiembre y tantos cambios, mejor retomamos las buenas costumbres con un post sobre un par de interesantes elementos interactivos de HTML5, que ya hacía algún tiempo me rondaba por la cabeza.

Los elementos details y summary son de esos elementos de HTML5 poco extendidos y por tanto poco conocidos. La excesiva avalancha de posts sobre los elementos semánticos (de la cual yo también soy responsable), ha dejado de lado ciertos elementos que aportan funciones muy interesantes, y que si bien todo esto se puede hacer con Javascript, ¿a quién no le apetece ahorrarse unas cuantas líneas de código?.

Cómo funcionan Details y Summary

Lo primero de todo es ponernos en situación, y bien podría ir a la especificación sobre elementos interactivos, pero para este caso en concreto no creo que sea necesario, pues details no es mas que un widget que permite ocultar contenido y a demanda del usuario mostrarlo. Vamos, que es el típico efecto toggle o de acordeón.

Como complemento a details tenemos el elemento summary, que necesariamente debe ser hijo suyo, y muestra un resumen o leyenda que complementa la información que estamos ocultando. Es un elemento opcional, así que si prescindimos de él será el navegador quien decida el texto a mostrar, por ejemplo "detalles".

Seguro que sólo con lo que te he contado hasta ahora ya se te han ocurrido ejemplos de uso. ¿Tal vez para un spoiler?, ¿o quizás para la ficha técnica de un producto en una tienda online?. Ambas son soluciones sencillas con el uso de estos elementos, pero teniendo en cuante que tanto details como summary admiten otros elementos como hijos suyos, no sólo texto, y además está permitido el anidamiento de varios elementos details, esto da alas a diseñar, por ejemplo, un menú desplegable, y da igual el número de niveles que necesitemos, el ahorro de código es sustancial.

Hay una última particularidad en el elemento details, y es cómo el navegador o agente de usuario conoce el estado de dicho elemento. Se hace de forma binaria, con el atributo open, que se añade al elemento cuando su estado es expandido y se elimina cuando su estado se encuentra colapsado. Por tanto esto nos permite cambiar su estado inicial si añadimos este atributo en el HTML.

Con un ejemplo, seguro que entiendes mejor toda la parrafada que te he soltado hasta ahora:

Aquí hay mucho más de lo que parece

No, no es magia, sólo es HTML5.


<details>
    <summary>Aquí hay mucho más de lo que parece</summary>
    No, no es magia, sólo es HTML5.
</details>

Un poco de estilo

Aprovechando el atributo open podemos cambiar el aspecto de details cuando este se encuentra expandido con CSS, mediante el selector de atributo.

Lo ideal sería poder darle también estilo a ese triángulo que el navegador genera y que rota para indicar si su estado desplegado o colapsado. Los navegadores Webkit tienen un elemento para esto ::-webkit-details-marker que nos permite cambiar algunos estilos, como el color, el fondo y el tamaño. Sin embargo, a día de hoy, no es posible reemplazar ese triángulo. Aún así, nada nos impide ocultarlo aprovechando este pseudo-elemento y reemplazarlo usando ::before o ::after, o usar alguno de los trucos que has aprendido leyendo este blog.

Soporte en navegadores

Este sea quizás el punto por el cual estos dos elementos no está muy extendidos. Hasta hace bien poco el soporte era únicamente por parte de Chrome, Opera y Safari. A fecha de este artículo Firefox también les da soporte a partir de la versión 49. Por contra, tanto IE como Edge siguen sin darles soporte.

Puedes consultar la página de caniuse para estar al tanto del soporte de estas propiedades en cuanto a navegadores.

¿Y qué hay de la accesibilidad?

La accesibilidad es uno de los puntos negros cuando usamos ciertos tipos de controles, sobre todo cuando somos nosotros los que creamos dichos controles.

En este caso, estamos usando una función nativa de HTML5, y es por tanto el navegador el que nos da soporte para que todo funcione correctamente, con lo cual la accesibilidad también está pensada.

En navegación por teclado el elemento details es accesible con la tecla tabulador y la información oculta puede ser desplegada o colapsada tanto con la tecla enter, como con la barra espaciadora. Todo son ventajas.

El box model y la propiedad box-sizing

noreply@blogger.com (LuisFran) — Sat, 10 Sep 2016 15:33:00 +0000

Imagen de Carsten ten Brink.

El box model, o modelo de cajas, es uno de los pilares básicos para comprender el funcionamiento de CSS. Suele traer de cabeza a los que se inician con las hojas de estilo en cascada, y en ocasiones también a los no tan iniciados. Su entendimiento es la base para conseguir un layout sólido, sin miedo alguno a que en algún punto este se rompa.

Con el tiempo el box model se ha ido quedando un poco desactualizado, y lo que antes era sólo una cuestión de entendimiento y unos pocos cálculos, con los layouts actuales se ha ido convirtiendo en una auténtica pesadilla. De ahí, que en CSS3 se incluyera la propiedad box-sizing, que nos permite cambiar la forma en que se calculan las dimensiones de las cajas y nos hace la vida mucho más sencilla.

¿Qué es una caja?

En HTML todos los elementos generan una caja que los contiene y sobre esta actúan los estilos que damos con CSS. Cada caja tiene una particularidad, en función del tipo de elemento que sea (generalmente son elementos en línea o de bloque), lo que redunda en como se relaciona con otros elementos.

Una caja se define mediante las propiedades width, height, padding, border y margin. En conjunto conforman el box model o modelo de caja.

Calculando las dimensiones de una caja

Por defecto, el ancho de una caja se calcula mediante la suma de width, padding horizontal y border horizontal. Para el alto haríamos lo mismo, pero con height y la suma de los valores verticales. También hay que tener en cuenta el margin respecto al espacio que dicha caja ocupa en el documento, aunque realmente no compute para el cálculo del ancho o alto de la caja.

Así, si por ejemplo le damos a una caja un width de 30em y un height de 20em, con un padding de 2em y un border de 0.1em, la anchura de la caja es 30 + 0.1 + 2 + 2 + 0.1 = 34.2em y no 30em que es lo que declaramos como ancho para la caja con la propiedad width. De la misma forma calculamos el alto de la caja que nos da 24.2em y no 20em.

Este es el modelo de caja tradicional, donde lo que definimos con width y height es el espacio reservado para el contenido, y todos los demás valores se añaden a él para conformar el tamaño final de la caja generada. Es todo una cuestión de estandarización, pues así se acordó en el documento de la W3C Box model, para que todos los navegadores calculasen los tamaños de las cajas de la misma forma. Aunque como siempre en esto de las estandarizaciones hay alguna oveja negra, en este caso Microsoft y sus Ies.

No tiene por qué gustarte, de hecho hay bastantes detractores, pero así es el box model y con él se ha trabajado durante años. Por suerte hay forma de cambiarlo, mediante la propiedad box-sizing. Y digo por suerte, porque cuando trabajábamos con layouts fijos, sólo era cuestión de entender bien el box model y realizar unos pocos cálculos, para que todo saliese tal y como esperábamos. Sin embargo con los layouts de hoy en día, donde todas la medias son relativas y se trabaja mucho con porcentajes, la cosa no es tan sencilla.

Cierto que se puede hacer un layout responsive con el modelo de cajas tradicional, pero en ese caso todas la medidas deben ir en porcentajes, y hay que hacer muy bien los cálculos sin dejarnos nada, o al final en algún punto, se romperá. Y esto puede que sea un gusto personal, pero a mí no me entusiasma para nada dar el valor de un borde en porcentaje. Me gusta que los bordes tengan siempre el mismo tamaño, y no que se vean o muy finos en dispositivos pequeños o muy gruesos para tamaños de pantalla grandes, con lo cual lo mejor es cambiar el modelo de caja.

Box-sizing: cambiando el modelo de caja

La propiedad box-sizing nos permite cambiar el modelo de caja tradicional, y se puede declarar para cualquier elemento que soporte las propiedades width y height. Ah, por cierto, no se hereda.

Tiene cuatro valores posibles:

content-box: Es el valor por defecto, vamos el modelo de caja tradicional. El borde y margen interior (padding) se dibujan por fuera del alto y ancho de la caja (se suman).
padding-box: El margen interior, relleno o padding se dibuja dentro. Esto significa que el padding no modifica el tamaño de la caja, por contra resta el espacio disponible para el contenido. El espacio para el contenido es el alto y ancho menos el paddind. Actualmente no está soportada por ningún navegador, aunque sí en algunas versiones anteriores de Firefox.
border-box: El relleno y el borde se dibujan dentro del alto y del ancho. Con lo cual para calcular el tamaño disponible para el contenido dentro de la caja deberemos restar border y padding de widht y height. Lo realmente interesante es que ahora el borde y el relleno no modifican el tamaño de la caja.
inherit: El elemento toma el valor de box-sizing declarado en su padre o ancestro más próximo.

Usando box-sizing

Generalmente cuando usamos box-sizing queremos hacerlo para todo el documento, lo cual nos lleva ha realizar algún tipo de "reset". El primer reset para usar esta propiedad es así de sencillo:


* {
    box-sizing: border-box;
}

Funciona bastante bien, pero no tener en cuenta los pesudoelementos puede darnos alguna que otra sorpresa desagradable. Así que no tardó en aparecer una versión actualizada de este reset:


*, *:before, *:after {
    box-sizing: border-box;
}

Es otro buen reset, pero el uso del selector * complica el cambio del modelo de caja a content-box o padding-box en algún punto del CSS. Lo que nos lleva a este último reset, que se apoya en la herencia para cambiar el modelo de caja en todo el documento, lo que también facilita posibles cambios en puntos concretos:


html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

Como bien te podrás imaginar, estos reset no me los he inventado yo, me los han chivado en CSS-Tricks, en un artículo de Marie Mosley dedicado a Box Sizing.

Cómo posicionar un elemento en el borde izquierdo de la pantalla: un caso práctico

noreply@blogger.com (LuisFran) — Sat, 27 Aug 2016 14:14:00 +0000

Imagen de Quinn Dombrowski - modificada.

De vez en cuando me doy de bruces con un caso que aunque a priori parece muy sencillo, termina complicándose hasta el punto de no saber por donde atajarlo. Para este caso concreto, por más que he buscado, rebuscado y leído, no he encontrado una solución a la que dar crédito, salvo la que vamos a ver en el artículo de hoy.

Bien parece un caso simple, y de hecho lo es, si se trabaja con las herramientas adecuadas y no confundes el funcionamiento de algunas de la propiedades o valores que vamos a usar. Sin embargo es un caso específico, en que jugamos con márgenes automáticos, por tanto desconocemos completamente las medidas. Así que mejor vamos al lío.

Poniéndonos en situación

Lo primero de todo es ver el layout con el que vamos a trabajar. De hecho no nos hace falta verlo al completo, sólo una parte que es la que bien podría ser una entrada de cualquier blog.

Tenemos por tanto un elemento padre, que contiene una entrada, con su encabezado y sus párrafos. Todo ello diseñado según el nuevo dogma, sí, responsive o fluido, como prefieras llamarlo.

Este es el problema principal para el posicionamiento de nuestro elemento, que para este caso va a ser el h1 del artículo, ya que no conocemos ninguna medida concreta, y esto es lo que realmente lo complica todo. El código html es el siguiente:


<article>
    <h1>Título</h1>
    <p>Contenido</p>
    <p>Más contenido</p>
</article>

Ahora vamos añadir css muy básico, para que quede claro el punto de partida. Todo es fluido, por lo tanto article ocupará el 100% del ancho de la pantalla en dispositivos pequeños, menos unos márgenes a izquierda y derecha para evitar que el texto quede pegado a los extremos de la pantalla, que los daremos mediante padding.

Cuando el dispositivo sea mayor, article no puede ser tan grande como todo el ancho de la pantalla, ya que líneas de texto muy largas pierden legibilidad. Por tanto, lo suyo es limitar su anchura mediante max-width y centrarlo con márgenes automáticos.

En cuando al encabezado y los párrafos no hay mucho que decir, son elementos de bloque y por tanto ocupan el 100% de su padre, y supongo que ya vas adivinando donde está el problema.


.article {
    max-width: 50em;
    margin: 0 auto;
    padding: 0 1em;
}

h1, p {
    margin: 1.25em 0;
}

La primera tentativa

Lo lógico y según van las cosas es pensar en un posicionamiento absoluto, pero hay un problema, el solapamiento. Un elemento posicionado de forma absoluta, como supongo ya sabes, se sale del flujo normal del programa y pasa a ocupar la esquina superior izquierda de su elemento contenedor. Por contra, el resto de elementos se sitúan de la misma forma que si h1 no existiese, por tanto el encabezado y el primer párrafo acabarían solapándose.

Cierto que esa no es la posición que buscamos, ya que lo queremos en el extremo izquierdo, pero nada nos asegura que su anchura vaya a ser tan pequeña para que no sobrepase lo márgenes automáticos de article, y en dispositivos de pequeña pantalla pasaría sí o sí.

Además no sabemos la altura del encabezado, por tanto no podemos dar un margen superior al primer párrafo para evitar el solapamiento. Se podría calcular, en función al tamaño de la fuente, pero nada nos garantiza que el texto vaya a ocupar una sola línea. Es lo que ocurre con diseños fluidos.


h1 {
    position: absolute;
    left: 0;
}

Por tanto esto, no es lo que buscamos.

Acercándonos a la solución

Si no podemos usar una posición absoluta para luego mover el elemento, existen otras dos formas para hacerlo y que se mantenga el espacio que este debería ocupar: con una posición relativa o bien usando la propiedad transform con la función translate().


/*primera solución*/
h1 {
    position: relative;
    left: -x;
}

/*segunda solución*/
h1 {
    transform: translateX(-x);
}

El problema radica en que no sabemos cuanto tenemos que mover el encabezado a la izquierda. Con el elemento posicionado de forma relativa no nos sirve el valor cero para la propiedad left, ya que a diferencia de un elemento posicionado de forma absoluta, un elemento posicionado de forma relativa mantiene su posición de la misma forma que si estuviese posicionado de forma estática (que es el valor por defecto).

Además toma su referencia para el desplazamiento en función al lugar donde está ubicado, y no a la esquina superior izquierda de la pantalla como lo hace un elemento posicionado de forma absoluta (siempre que no tenga algún ancestro posicionado de forma absoluta o relativa).

Por tanto un elemento posicionado de forma relativa con los valores a cero de left y top se queda en el mismo punto en que estaba.

Así que tanto para el caso de que posicionásemos el elemento de forma relativa, como si pensamos moverlo mediante la función translate(), necesitamos saber cuanto vamos a moverlo hacia la izquierda, y sin ninguna medida concreta, la cosa se complica.

Y por fin, la solución

Como ya comenté al principio del artículo, no he encontrado ningún artículo, ni ninguna referencia para solucionar este problema, al menos no de forma directa. Por suerte soy un hambriento lector de todo tipo de artículo sobre CSS, y no hacía mucho que había leído uno de Chris Coyier en el que daba una serie de formas para conseguir que un elemento sobrepasase los límites de su contenedor. El artículo, Full Width Containers in Limited Width Parents.

Aunque evidentemente no es una solución directa a nuestro problema, si que se parece en cierta forma. En varias de las soluciones que se dan en este artículo manejan las unidades de viewport, que son la clave para calcular el desplazamiento de nuestro elemento.

Vamos a repasar que es lo que sabemos: con las unidades de viewport, en todo momento sabemos cuando mide a lo ancho la pantalla del navegador, y también sabemos lo que mide a lo ancho nuestro encabezado. Sí, ocupa del 100% de su contenedor. También conocemos el padding que usamos para evitar que el texto se sitúe demasiado cerca de los bordes de la pantalla en dispositivos pequeños, pero este dato es irrelevante.

Y ahora, lo que no sabemos: desconocemos la distancia, tanto a la izquierda como a la derecha, de nuestro contenedor (article) respecto a los bordes del navegador.

Con todo esto ya podemos calcular el desplazamiento a la izquierda. El tamaño del viewport horizontal menos el tamaño del elemento que queremos mover, nos da el valor de los huecos vacíos que tenemos a derecha e izquierda (esto incluye margin y padding). Por tanto la mitad de este valor, es la distancia que debemos mover nuestro objeto, para situarlo justo en el borde izquierdo de la pantalla.


/*Posicionar elemento en borde izquierdo*/
h1 {
    transform: translateX(calc((-100vw + 100%)/ 2));
}

Podemos hacer exactamente lo mismo para desplazar el elemento hacia la derecha, sin embargo las unidades de viewport no tienen en cuenta las barras de desplazamiento, y el calculo de un viewport 100 lo hace sin ella. Esto hace que el elemento se sitúe como si no existiese esa barra de desplazamiento, lo que al final se traduce en un "overflow" y la aparición de la nada deseada barra de desplazamiento horizontal.

Por supuesto se puede arreglar. Como no sabemos el ancho de la barra de desplazamiento vertical, y dudando que sea el mismo para todos los navegadores, el problema podemos solucionarlo con overflow-x. Además, hay que tener en cuenta que no todos lo navegadores muestran por defecto la barra de desplazamiento vertical, generalmente los navegadores de dispositivos móviles la tienen ocultan y sólo la muestran cuando nos desplazamos, con lo cual jugar con overflow-x es la mejor solución.


/*Posicionar elemento en borde derecho*/
body {
    overflow-x: hidden;
}

h1 {
    transform: translateX(calc((100vw - 100%)/ 2));
    padding-right: 1em; /*para evitar que se nos corte el texto*/
}

Este no ha sido el típico artículo que suelo publicar en el blog, pero ante las complicaciones que encontré para realizar algo, en principio tan simple, me pareció apropiado comentarlo por si puede serle útil a alguien. Además, de paso, aprovecho para aclarar ciertos conceptos e ir introduciendo en el blog las unidades viewport, que si bien no creo que sean el paradigma para el diseño responsive, en ciertas ocasiones nos vienen muy bien.

7 formas de ocultar elementos con CSS

noreply@blogger.com (LuisFran) — Sat, 13 Aug 2016 17:19:00 +0000

Imagen de Andie Linn - modificada.

Es muy sencillo ocultar un elemento con CSS, sólo debemos escoger la propiedad adecuada y aplicarla. ¿Pero realmente sabemos que es lo que está ocurriendo?, porque no es lo mismo hacer opacity: 0 que display: none, de hecho difieren bastante. Según que técnica usemos tendrá unos u otros efectos, pero no sólo sobre él mismo, sino que también puede afectar al resto de elementos posteriores a él.

En este artículo vamos a ver 7 formas de ocultar un elemento con CSS y también veremos que es lo que realmente hace la propiedad que usemos para tal efecto. ¿Se compromete o no la accesibilidad?, ¿qué pasa con la navegación por teclado?, y porqué no, ¿hay algún efecto negativo en cuanto a SEO?. Todas estas preguntas deberemos hacérnoslas para elegir la forma idónea para ocultar un elemento.

Opacity

La propiedad opacity nos permite controlar el grado de transparencia de un elemento. Si la ponemos a cero hace que desaparezca de la vista del usuario, pero a efectos del layout el elemento sigue ocupando el mismo espacio que si fuese totalmente opaco.

El elemento que ocultamos de esta forma sigue respondiendo a las acciones del usuario (un enlace sigue siendo clicable), recibe el foco si usamos la navegación por teclado y será leído por cualquier screen reader. A todos los efectos el elemento sigue ahí, lo único que ha cambiado es que ahora es transparente.


.oculto {
    opacity: 0;
}

Visibility

La propiedad visibility con el valor hidden nos permite ocultar un elemento, de hecho de una forma muy parecida a la propiedad opacity aunque con alguna diferencia sustancial.

Al igual que ocurre con la propiedad opacity el elemento que ocultamos toma su lugar dentro del layout. La gran diferencia es que el usuario no puede interactuar con el elemento. Además el elemento no recibe el foco en la navegación por teclado y no es accesible de cara al uso de screen readers.


.oculto {
    visibility: hidden;
}

Display

Si le aplicamos el valor none a la propiedad display conseguimos ocultar el elemento en el sentido estricto de la palabra. El elemento ocultado de esta manera no genera modelo de caja, con lo cual además de estar oculto a la vista, el elemento es sacado del flujo normal de programa. A efectos del resto de elementos, estos se comportan como si el elemento no existiese en el DOM.

Puesto que el elemento queda ocultado completamente, el usuario no puede interactuar con él, ni es accesible mediante la navegación por teclado, ni mucho menos va a ser anunciado por un screen reader. A todos los efecto hemos hecho que desaparezca, tanto él como sus descendientes.


.oculto {
    display: none;
}

Posicionar el elemento fuera de pantalla

Desplazar un elemento lo suficiente para que se salga de la pantalla (o viewport) siempre ha sido una de las formas clásicas de hacer desaparecer un elemento. Mediante la propiedad display con su valor position y alguna de las cuatro propiedades de colocación top, right, bottom o left, con un valor lo suficiente grande, podemos hacer desaparecer un elemento sacándolo del campo de visión.

Como lo único que hemos hecho es desplazar el elemento, este es accesible desde teclado, pudiendo recibir el foco, lo cual si se usa este tipo de navegación puede resultar confuso, ya que este desaparece también del campo de visión. Está en nuestras manos corregir este problema, haciendo por ejemplo que vuelva a aparecer el elemento cuando recibe el foco.

Ocultando el elemento de esta forma los screen readers pueden anunciarlo. En cuanto a la interacción del usuario con un elemento ocultado de esta forma, queda claro que no es posible, ni con ratón, ni mediante una pantalla táctil (como la de cualquier teléfono móvil). Sin embargo si que podemos interactuar con él mediante la navegación por teclado, ya que puede recibir el foco.


.oculto {
    position: absolute;
    top: -9999px;
}

Jugando con el tamaño

Si un objeto no tiene ninguna dimensión, está claro que no es visible. En CSS podemos poner los tamaños (width y height) de un elemento a cero y mágicamente este desaparece. Es aconsejable también poner a cero margin, padding y border, por si el elemento tuviese algún valor por defecto en alguna de estas propiedades.

Además es recomendable usar overflow:hidden para evitar desbordamientos y poner también a cero la propiedad line-height en elementos inline-block para evitar espacios no deseados que generan algunos navegadores.

Con este tipo de ocultación, creo que queda claro que no es posible que el usuario realice ninguna acción sobre el elemento, salvo por teclado, ya que el elemento puede recibir el foco. En teoría, un screen reader anunciaría el elemento, aunque al no haber testado este tipo de ocultación con ellos, no me atrevo a aventurar nada.


.oculto {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0; /* sólo en caso de elementos inline-block */
    overflow: hidden;
}

Clip

Realizar un recorte con la propiedad clip es también una buena forma de ocultar un elemento. Es tan sencillo como declarar las cuatro coordenadas con las que creamos la forma recortada, que según esta propiedad sólo puede ser un rectángulo, con un mismo valor. Para que sea accesible a los screen readers es recomendable no usar el valor cero, ya que algunos de ellos tienen problemas y pueden no anunciar el elemento.

Al igual que ocurre con otras formas de ocultar elementos no permite acción alguna por parte del usuario, salvo en la navegación por teclado, ya que puede recibir el foco.

Es una de las forma más usadas para ocultar un elemento cuando queremos mantener la accesibilidad, y no es porque lo diga yo, muchos expertos en accesibilidad así lo aseguran, como Olga Carreras, que en su artículo ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página, realiza un análisis de 5 técnicas para ocultar contenido desde el punto de vista de la accesibilidad.

Tan sólo un apunte más, el elemento debe estar posicionado de forma absoluta para permitir realizar un recorte mediante la propiedad clip, es una de la limitaciones de esta propiedad, sobre la que puedes leer más en el interesante artículo The CSS Clip Property de Louis Lazaris.


.oculto {
    position: absolute
    clip: rect(1px, 1px, 1px, 1px);
}

Clip-path

La propiedad clip-path viene a sustituir a la obsoleta propiedad clip (que se sigue usando para ocultación de elementos). A diferencia de la propiedad clip, clip-path permite más formas de recorte que un simple rectángulo, además de la aplicación de patrones de recorte mediante SVGs, tanto en línea como externos, aunque sobre esto ya hablamos en el artículo recortando con CSS.

Lo que nos interesa de clip-path en este caso, es la posibilidad de ocultar un elemento, y se hace de forma muy similar a como lo hicimos con clip. Para ello podemos usar cualquiera de las formas básica de CSS o un SVG, siempre que creemos una región de recorte de valor igual a cero. Esto no quiere decir que los valores sean igual a cero, tan sólo el valor de la región de recorte, de hecho al igual que ocurriese para la propiedad clip debemos evitar los valores a cero para mantener la accesibilidad.

A mi parecer la forma más sencilla de hacerlo es con la forma básica polygon, que nos permite crear cualquier tipo de polígono mediante pares de coordenadas. Lo único de debemos hacer es que estos pares de coordenadas tengan el mismo valor. Por cierto, se puede aplicar clip-path sobre cualquier elemento, no es necesario que esté posicionado de forma absoluta.


.oculto {
    clip-path: polygon(1px 1px, 1px 1px, 1px 1px);
}

¿Y qué pasa con el SEO?

Habrás notado que a pesar de ser una de la preguntas que me hacía en la introducción, no he hablado nada sobre SEO, y es que realmente no creo que ninguna de estas técnicas tenga ningún efecto negativo. A pesar de ello hay expertos que aseguran que las formas más fiables de cara al SEO son clip y clip-path, no deberíamos tener problemas con ninguna de las otras técnicas siempre que no ocultemos contenido con fines perniciosos.

Piénsalo fríamente, ¿tiene sentido algún tipo de penalización por parte de San Google cuando intentamos que nuestra web sea más accesible?, pues no. Es muy habitual ocultar contenido cuando complementamos enlaces del tipo "leer más", o cuando ocultamos el típico menú "saltar a". Ambas con soluciones para favorecer una mejor navegación a usuarios de screen readers, y que generalmente son ocultados porque no ofrecen ninguna ventaja en una navegación tradicional.

Así que cuando ocultes contenido, en cuando a SEO, mas que pensar en la forma de ocultarlo, piensa si lo que estás ocultando lo haces para mejorar la accesibilidad, la navegación, o algún punto importante de tu web, o sólo para que tus usuarios no vean que intentas engañar a Google, y no deberías tener ningún problema.

Ni tan fácil ni tan difícil: centrando con CSS

noreply@blogger.com (LuisFran) — Mon, 01 Aug 2016 07:00:00 +0000

Imagen de Aftab Uzzaman

El centrado en CSS es uno de los temas más recurrentes, y es que ¿quién no ha tenido algún percance con un elemento que quería centrar?, ¿quién no se ha dado de cabezazos contra la mesa?, o ¿quién no ha llegado a lanzar el teclado por la ventana?.

Si en alguna ocasión te ha ocurrido algo de esto, no desesperes, tan sólo preocúpate de recoger el teclado (lo vas a necesitar), del resto nos vamos a ocupar hoy en este artículo. Porque el centrado en CSS no es tan fácil, pero tampoco tan difícil.

Por regla general, a la hora de centrar un elemento, no tenemos en cuenta el modelo de caja con el que estamos trabajando, ni tampoco las propiedades definidas sobre dicho elemento. Esto nos lleva a cometer cierto tipo de errores que al final nos lleva irremediablemente a no conseguir centrar el elemento. En este artículo vamos a ver unas cuantas formas de centrado (que con el tiempo iré ampliando), para conseguir centrar un elemento en cualquier situación.

Centrado horizontal

Centrado horizontal de un elemento en línea

Un elemento en línea toma como valor la anchura de su contenido, con lo cual siempre y cuando el contenido del elemento tenga una anchura menor que la del padre del elemento, podemos centrarlo. ¿Y cómo?, pues con la propiedad text-align y su valor center aplicada sobre su padre.


.contenedor {
    text-align: center;
}

Este tipo de centrado también podemos usarlo si el elemento a centrar es inline-block.

Centrado horizontal de un elemento en bloque con anchura declarada

El caso más sencillo para centrar un elemento horizontalmente es conociendo su anchura, y nos da igual si sus medidas son fijas o relativas. Para ello sólo necesitamos el valor auto de la propiedad margin. Con esto conseguimos que el espacio del padre no ocupado por el hijo, se reparta equitativamente tanto a su izquierda como a su derecha.


.centrado {
    width: 12em;
    margin: 0 auto;
}

Centrado horizontal de un elemento de bloque sin anchura declarada: márgenes

Un elemento de bloque sin anchura declarada ocupa el 100% de su ancho disponible, con lo cual y a priori podrías pensar que no se puede centrar, pues no es así.

Jugando con sus márgenes podemos conseguir centrarlo, tan sólo necesitamos dar el mismo valor tanto a la izquierda como a la derecha, y voila, elemento centrado.


.centrado {
    margin-left: 1em;
    margin-right: 1em;
}

Centrado horizontal de un elemento sin anchura declarada: display:table

Un elemento con display:table se comporta exactamente igual a una tabla, y hay una propiedad muy interesante que nos interesa cuando intentamos centrar horizontalmente un elemento al cual no le hemos declarado un ancho. Una tabla amolda su ancho, siempre que sea posible, a su contenido.

Esta peculiaridad nos permite usar el margen automático a derecha e izquierda para poder centrarlo.


.centrado {
    display: table;
    margin: 0 auto;
}

También podríamos podríamos usar este centrado con un ancho declarado, aunque lo cierto es que no tiene mucho sentido hacerlo.

Centrado vertical

Centrado vertical de un elemento en línea

Este caso es muy común, sobre todo para elementos de texto, aunque vale para cualquier elemento en línea. Sólo hay que tener en cuenta que este elemento en línea debe estar contenido dentro de un elemento en bloque sin altura definida, como por ejemplo un texto dentro de un elemento p.

Un elemento en bloque sin altura definida toma como valor la misma que la de su contenido, por tanto para centrar verticalmente su contenido tan sólo es necesario darle un mismo valor a su padding superior e inferior.


p {
    padding-top: 2em;
    pading-bottom: 2em;
}

Centrado vertical de un elemento en línea que ocupa una sola línea

Este es un caso muy particular, y podría resolverse de la misma forma que el caso anterior, pero si conocemos la altura del elemento contenedor, podemos jugar con la propiedad line-height igualando su valor al de la altura del contenedor, y de esta forma el elemento en línea contenido aparecerá centrado verticalmente.


.contenedor {
    line-height: 5em;
    height: 5em;
}

Centrado vertical de un elemento con display:table

La propiedad display junto con su valor table nos permite jugar con una propiedad de CSS para centrar elementos de forma vertical, que no es ni mas ni menos que vertical-align.

Para ello necesitaremos un contenedor al que le aplicaremos display:table y un elemento a centrar con display: table-cell. Muchos puristas aseguran que es necesario un elemento intermedio con display:table-row, pero en realidad el centrado se realiza sin necesidad de él. ¡Ah!, y por mucho que te digan, realmente CSS no es semántico.


.contenedor {
    display: table;
}

.centrado {
    display: table-cell;
    vertical-align: middle;
}

Doble centrado

Hago esta clasificación para englobar propiedades que permiten centrar tanto horizontalmente como verticalmente, aunque también se pueden usar para centrar sólo verticalmente o sólo horizontalmente.

Doble centrado con medidas de padre e hijo conocidas: elemento posicionado

Si conocemos la altura y anchura tanto del padre como del hijo, podemos recurrir al posicionamiento para centrar el hijo, aplicando una simple fórmula: top = (altura del padre - altura del hijo) / 2 y left = (ancho del padre - ancho del hijo) / 2.


.contenedor {
    position: relative;
    widht; 6em;
    height: 8em;
}

.centrado {
    position: absolute;
    widht: 3em;
    height: 4em;
    top: 2em;
    left: 1em;
}

Doble centrado con medidas conocidas del elemento a centrar: márgenes negativos

Si únicamente conocemos las medidas del elemento a centrar el procedimiento es muy similar al caso anterior, pero en vez de aplicar la fórmula (de la que desconocemos datos) podemos jugar con márgenes negativos.


.contenedor {
    position: relative;
}

.centrado {
    position: absolute;
    top: 50%;
    left: 50%;
    widht: 6em;
    height: 4em;
    margin-top: -2em;
    margin-left: -3em;
}

Necesitamos usar márgenes negativos porque la referencia que tomamos del elemento es la esquina superior izquierda (borde superior y borde izquierdo), y lo que necesitamos es su centro. Es tan sencillo como mover el elemento (mediante márgenes negativos) hacia arriba y a la izquierda, concretamente la mitad de su alto y la mitad de su ancho.

Doble centrado con medidas desconocidas: transform

En ocasiones necesitamos realizar un doble centrado y no conocemos las medidas del elemento a centrar, y tampoco las del padre. En este caso la propiedad transform con su valor translate es todo lo que necesitamos.


.contenedor {
    position: relative;
}

.centrado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate (-50%, -50%);
}

El centrado se realiza con el mismo cálculo que usamos con los márgenes negativos, teniendo en cuenta que cuando usamos porcentajes con el valor translate estos toman como referencia el tamaño (heigth o width) del elemento sobre el que se aplica transform. Puedes leer más a fondo sobre la propiedad transform y este comportamiento en el documento de la W3C CSS Transforms Module Level 1.

Doble centrado con medidas desconocidas: propiedades left/top/rigth/bottom.

Esta es una forma muy original de realizar un doble centrado, que vi por primera vez en este JsFiddle, referenciado en el artículo Absolute Horizontal And Vertical Centering In CSS de Smashing Magazine. Simplemente pura magia.


.contenedor {
    position: relative;
}

.centrado {
    position: absolute;
    top: 0;
    rigth: 0;
    bottom: 0;
    left: 0;
}

Doble centrado con medidas desconocidas: Flexbox

La "caja flexible" de CSS3 hace que las cosas sean muy sencillas y el centrado no podía ser menos. Definimos un contenedor con la propiedad display:flex y todos sus hijos son obedientes cajas flexibles (¡todos al centro!, ¡ar!).


.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}

Doble centrado con medidas desconocidas: Flexbox y margin:auto

Una de las peculiaridades de Flexbox es como se comportan los elementos con esta propiedad cuando tiene algún margen en tamaño automático. Te aconsejo leas esta interesante artículo de Sam Provenza titulado Flexbox’s Best-Kept Secret y entenderás lo fácil que es hacer este centrado.


.contenedor {
    display: flex;
}

.centrado {
    margin: auto;
}

Recortando con CSS: clip-path

noreply@blogger.com (LuisFran) — Sat, 16 Jul 2016 14:13:00 +0000

Imagen de Barret Cook - modificada.

CSS y SVG tienen cada vez más cosas en común, y es que hay una clara tendencia a introducir nuevas propiedades en CSS que vienen directamente importadas de SVG. Entre ellas se encuentra clip-path, una operación que forma parte de la especificación de SVG desde 2000 y que ha sido trasladada a CSS, permitiéndonos realizar "recortes" sobre elementos HTML.

Pero, ¿qué es un recorte en CSS?

Un recorte (clipping) es una operación gráfica que permite ocultar partes de un elemento, bien sea de forma parcial o total. Las partes del elemento que son mostradas u ocultadas son determinadas por una "trayectoria de recorte" (clipping path).

Cuando definimos una "trayectoria de recorte", estamos creando una región dentro de la cual todo es visible, por contra, todo lo que está fuera de ella desaparece del lienzo o canvas. Esto no sólo incluye fondos, bordes o sombreados, sino también eventos del tipo hover o click.

A pesar de que el nuevo elemento creado mediante esta operación, tiene nuevas dimensiones sea o no rectangular, el resto de elementos fluyen dentro del documento de la misma forma que si no se le hubiese aplicado dicho recorte. Para conseguir que el resto del contenido fluya, en función de la nueva forma que hemos creado mediante la operación de recorte, debemos usar las propiedades para formas de CSS shape-outside o shape-inside especificadas en el documento de la W3C CSS Shapes. Si quieres profundizar algo más sobre el tema te invito a que leas el interesante artículo CSS Shapes de Sara Soueidan.

Clip-path no es lo mismo que clip

La propiedad clip de CSS2.1 es una antigua y restrictiva propiedad, que permitía realizar recortes únicamente mediante formas rectangulares sobre elementos posicionados de forma absoluta. Actualmente ha sido reemplazada por clip-path.

Sin embargo aún se sigue usando, ya que es una de las mejores formas de ocultar un elemento a la vista y que este siga siendo accesible.


.objeto {
  clip: rect(110px, 160px, 170px, 60px);
}

La forma de construcción del rectángulo también difiere de la forma en que se construye en clip-path mediante la forma básica inset(). Si quieres profundizar más en esta propiedad hay un buen artículo de Louis Lazaris sobre la propiedad clip, que además explica de forma gráfica cómo se calcula el rectángulo de recorte.

Sintaxis y uso de clip-path

La sintaxis correcta para el uso de esta propiedad es:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

Para esta primera toma de contacto con la propiedad clip-path vamos a obviar el valor geometry-box, que además es opcional, y centrarnos en lo sencillo que es crear un recorte bien sea mediante clip-source, que será un URL que especifica un elemento clipPath de un SVG en línea o externo, o bien mediante basic-shape, que será una de las formas básicas de CSS especificadas en el documento de la W3C CSS Shapes.

Es mucho más simple y directo de lo que parece:


/* referenciando una trayectoria de un SVG en línea clipPath */
clip-path: url(#path1); 

/* referenciando una trayectoria de un SVG externo */
clip-path: url(path.svg#path1);

/* usando una forma básica de CSS */
clip-path: polygon(...);

Formas básicas de CSS

En CSS y según la especificación que he mencionado anteriormente de la W3C, podemos crear cuatro formas geométricas básicas: círculos, elipses, rectángulos y polígonos de x lados. Estas formas básicas se pueden pasar como un valor a una propiedad como shape-outside, o a la propiedad clip-path, con el fin de cambiar el flujo de contenido entorno a ella o realizar un recorte, respectivamente.

Inset()

inset( <shape-arg>{1,4} [round <border-radius>]? )

La función inset() permite la creación de formas rectangulares. La primera parte de la función sigue las mismas reglas que la versión abreviada de la propiedad margin, permitiendo uno, dos o cuatro valores. Si se usan cuatro valores el orden es superior, derecha, inferior e izquierda y definen la distancia entre los lados del rectángulo creado con respecto a los bordes del elemento sobre el que se aplica la función.


.objeto {
    clip-path: inset(100px 100px 100px 100px);
}

En este ejemplo estamos creado un rectángulo cuyo lado superior está a 100px del lado superior de .objeto, el lado derecho a 100px del lado derecho, el lado inferior a 100px del lado inferior y el la izquierdo a 100px del lado izquierdo. En función del tamaño de .objeto el rectángulo será mayor o menor, pero siempre manteniendo las distancias fijadas sobre los bordes del objeto sobre el que lo aplicamos.

La segunda parte de la función es opcional y usa la forma abreviada de la propiedad border-radius con el fin de redondear las cuatro esquinas del rectángulo creado, tanto horizontal como verticalmente. Al igual que en la propiedad original border-radius puede tener de uno a ocho valores. Estos valores debe ir precedidos de la palabra clave reservada round.

La propiedad border-radius es una vieja conocida de este blog. A si que si no la dominas o necesitar refrescarte un poco la memoria no dudes en volver a leerte el artículo cómo redondear bordes con CSS.

Circle()

circle( [<shape-radius>]? [at <position>]? )

La función circle() se usa para crear círculos y ambos valores son opcionales. Si algunos de ambos valores se omite se tomará un valor por defecto marcado por el navegador.

El argumento shape-radius representa el radio del círculo, y no puede tomar valores negativos. Este argumento también puede tomar como valor dos palabras reservadas closest-side y farthest-side. La palabra reservada closest-side es el valor por defecto, tomando como valor la distancia más corta entre el centro del círculo y uno de los cuatro lados del elemento. La palabra reservada farthest-side toma como valor la distancia entre el centro del círculo y el lado más alejado respecto a este.

El argumento position representa el centro del círculo, que se calcula mediante dos coordenadas (x, y) con respecto a la esquina superior izquierda del elemento, y estos valores deben ir precedidos de la palabra clave reservada at.


.objeto {
    clip-path: circle(10px at 20px 30px);
}

En el ejemplo recortamos un círculo cuyo radio es de 10px y que está posicionado a 20px horizontalmente y 30px verticalmente de la esquina superior izquierda de .objeto.

Ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

La función ellipse() se usa para crear una elipse y toma la misma lista de argumentos que la función circle(), a excepción que en lugar de tomar un valor para el radio toma dos, un radio para el eje x y otro para el eje y, en ese orden en concreto.

Para el resto de valores que puede tomar y cómo funcionan sus argumento únicamente tienes que consultar lo detallado para la función circle().


.objeto {
    clip-path: ellipse(10px 20x at 10px 10px);
}

En el ejemplo recortamos una ellipse posicionada a 10px horizontalmente y 10px verticalmente, y cuyos radios son de 10px y 20px respectivamente.

Polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

La función polygon() se usa para construir formas complejas usando un número determinado de puntos. Estos puntos se definen mediante pares de coordenadas (<shape-arg> <shape-arg>). El primer argumento determina la posición x del punto y el segundo la posición y del mismo. La forma poligonal final se consigue uniendo la sucesión de puntos, para al final unir el último punto al primero de la sucesión. Cada par de coordenadas deber se separado mediante comas.

Adicionalmente a la sucesión de pares de coordenadas, la función polygon() admite un argumento opcional llamado fill-rule que especifica cómo tratar las áreas dentro de la forma poligonal que pueden cortarse consigo mismo. Para más información sobre este argumento puedes consultar la especificación de la W3C sobre fill-rule.


.objeto {
    clip-path: polygon(0 40px, 75px 0, 150px 40px, 150px 120px, 75px 200px, 0 120px);
}

En el ejemplo recortamos una forma compleja de 6 puntos, básicamente un hexágono, que si tienes paciencia para dibujarlo coordenada a coordenada te darás cuenta que es el mismo usado para crear el logo de Hexagonal Alien.

Compatibilidad en navegadores

La propiedad clip-path es relativamente nueva, de hecho pasó a "candidate recommendation" el 20 de Marzo de 2014, y ya sabemos lo lentas que van estas cosas.

El soporte es aún pobre, de hecho ni IE ni Edge la soportan aún, Firefox lo hace de forma parcial, y Chrome, Opera y Safary necesitan el prefijo -webkit-. Puedes mantenerte al tanto de la evolución de su compatibilidad en Can I use.

Sin embargo no está demás ir trasteando con la posibilidades que nos dan ciertas nuevas propiedades antes de que el soporte sea total, así no te pillará el toro y al menos tendrás una idea de como funcionan y de lo que puedes hacer con ellas.

¿Qué se puede hacer con clip-path?

Más abajo te dejo una lista de demos que usan la propiedad clip-path, para que veas lo que se puede hacer con ella y lo sencillo que es en comparación con otras técnicas:

Checkbox personalizada y accesible sólo con CSS

noreply@blogger.com (LuisFran) — Sat, 18 Jun 2016 11:12:00 +0000

Imagen de Oliver Tacke - modificada.

Con CSS podemos dar estilo a prácticamente cualquier elemento de nuestra web. Y digo prácticamente porque hay algunos elementos "rebeldes" que se nos resisten. Entre ellos se encuentran las checkboxes (casillas de verificación) y los botones de tipo radio.

Puede que en algunos diseños el estilo por defecto de una checkbox quede perfectamente integrado, pero en la mayoría de los casos no es así. Por ello se ha tendido a crear este tipo de controles con elementos div o span, perdiendo por el camino la semántica, la accesibilidad y teniendo que recurrir a javascript para darles la funcionalidad requerida.

En este tutorial vamos a ver una forma de conseguir dar estilo a una checkbox, manteniendo los aspectos básicos de este elemento y sin tener que recurrir a javascript, porque CSS3 es suficiente para suplir lo que debería ser un estándar, poder dar estilo a todos y cada uno de los elementos de HTML.

Malas prácticas a la hora de dar estilo

De forma recurrente se ha usado CSS inadecuadamente para dar estilo a determinados elementos. En general se han usado elementos genéricos y recurrido a técnicas innecesarias cuando frente a nosotros teníamos el elemento adecuado para hacerlo. Un ejemplo muy claro es la creación de botones bien mediante elementos div o span cuando para ello tenemos el elemento button.

Con este tipo de prácticas lo único que conseguimos es cargarnos de trabajo innecesario pues tenemos que dotar al nuevo elemento creado de su supuesta funcionalidad mediante javascript, asignarle un nuevo rol por medio de WAI-ARIA, y hacer que sea accesible mediante teclado con la propiedad tabindex. Como decía antes, trabajo innecesario, ya que usando el elemento correcto todo este trabajo ya está hecho.

La cosa cambia cuando ante nosotros tenemos un elemento al cual no es posible darle otro estilo mediante CSS, entonces parece inevitable el uso de técnicas que la propia W3C recomienda no usar. Si embargo con CSS3 y un poco de imaginación podemos conseguir nuestra meta y para ello sólo necesitamos usar el elemento input type="checkbox". ¿Pero cómo?.

Parece extraño que la solución para dar estilo a una checkbox, un elemento al que no podemos darle estilo mediante CSS, se usar la propia checkbox, pero ya hemos usado esta técnica en este blog, por ejemplo cuando creamos un icono animado estilo hamburguesa en CSS puro. Usando la conocida técnica del "checkbox hack".

Para ello vamos a necesitar una checkbox, una etiqueta label que de todas formas habría que usar para dar la información referente a la casilla de verificación y el pseudo-elemento :checked.

Una checkbox en CSS puro

Lo que vamos a hacer es muy sencillo. Vamos a usar la checkbox únicamente como una marcador binario, con lo cual vamos a ocultarla pues no nos sirve par nada mas, eso sí, hay que ocultarla correctamente para no perder la accesibilidad.

Después usaremos la etiqueta label, a parte de para dar la información referente a la checbox, para crear nuestra nueva checkbox, usando el pseudo-elemento :checked para dibujarla, bien seleccionada o de-seleccionada.

Vamos a comenzar con el marcado en HTML, que como verás es muy sencillo.


<div>
  <input type="checkbox" id="box1">
  <label for="box1">Checkbox 1</label>
</div>

Lo único a tener en cuenta en este marcado es asociar las etiquetas input y label mediante los atributos id y for. Ambos deben tener el mismo valor.

Lo primero en cuanto a estilo es eliminar algunos valores estándar, como los márgenes interiores y exteriores, y también cambiaremos el modelo de caja. Así trabajaremos más a gusto.


*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

El siguiente paso es ocultar nuestra checkbox, para esta caso vamos a usar la propiedad opacity, aunque también serviría clip. Y de paso vamos a dibujar la nueva checkbox valiéndonos de la etiqueta label.


div {
    position: relative;

    height: 2em;
    margin-bottom: 1em;
}

input[type*='checkbox'] {
    opacity: 0;
}

label {
    line-height: 2em;

    position: absolute;
    left: 0;

    margin-bottom: 10em;
    padding: 0 1.5em 0 2.5em;
}

label:before {
    font-size: 2em;
    line-height: .5em;

    position: absolute;
    left: 0;

    width: 1em;
    height: 1em;

    content: '';
    text-align: center;

    border: .2em solid #eb7260;
}

Con esto lo que nos queda es dibujar nuestra checkbox cuando su estado es seleccionada, para ello usaremos el pseudo-elemento :checked. Voy a usar Font-Awesome para dibujar la típica "uve" de selección, así que lo primero es referenciar esta fuente. Lo vamos a hacer directamente en nuestro CSS.


@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');

Y ahora dibujamos nuestra checkbox en el estado seleccionada.


input[type*='checkbox']:checked + label:before {
    font-family: FontAwesome;

    content: '\f00c';
}

Por último, y sólo para hacerla más accesible desde teclado, vamos a añadir un detalle más para saber en qué momento nuestra checkbox tiene el foco, valiéndonos nuevamente de uno de los iconos de Font-Awesome.


input[type*='checkbox']:focus + label:after {
    font-family: FontAwesome;

    position: absolute;
    right: 0;

    content: '\f177';
}

¿Es realmente accesible?

Para comprobarlo lo único que tenemos que hacer es ver lo que hemos hecho. Si te fijas bien estamos usando los mismos elementos que usaríamos si usásemos una checkbox por defecto, un elemento input type="checkbox" y un elemento label, con lo cual mantenemos la semántica.

En ningún momento perdemos la funcionalidad, ya que realmente usamos la checkbox en todo momento, tanto seleccionándola como deseleccionándola, tan sólo la hemos ocultado y aprovechamos la etiqueta label para volver a dibujarla, pero en realidad todo funciona igual que usando una checkbox por defecto.

Sigue siendo accesible por teclado y también será anunciada si usamos algún tipo de screenreader, puesto que sólo la hemos ocultado, y lo hemos hecho correctamente.

Y por último, hemos añadido un detalle más que ayuda a saber donde tenemos el foco si usamos la navegación mediante teclado, puesto que la representación del foco en los navegadores, en muchas ocasiones, es demasiado sutil para el usuario, sobre todo si usamos colores claros en nuestro diseño. Nunca está demás comprobar si realmente vemos donde está o no el foco usando la navegación por teclado.

Puedes ver un ejemplo con tres checkboxes para que veas que todo funciona tal y como he dicho en el pen que he preparado para este tutorial. Además así podrás trastear con él todo lo que quieras y ver las posibilidades que tienes para dar estilo a una checkbox.

See the Pen Custom & accessible checkbox in pure CSS by amram (@amram1977) on CodePen.

WAI-ARIA: haciendo la web más accesible

noreply@blogger.com (LuisFran) — Sat, 11 Jun 2016 14:02:00 +0000

Imagen de Frits Ahlefeldt-Laurvig.

No hace tanto que diseñar un sitio web accesible era sinónimo de soso o aburrido. Había que eliminar cualquier adorno que no cumpliese con la estricta semántica dada por HTML.

Por suerte hoy en día esto ya no es así (aunque hay quién aún lo piensa). WAI-ARIA nos ayuda a dar significado a esas partes de nuestro código que se salen de la semántica de HTML, dando apoyo a las aplicaciones de accesibilidad para que las personas que las usan comprendan nuestra web o aplicación.

¿Pero qué es en realidad WAI-ARIA?, ¿se debe usar en todas las etiquetas de HTML?, y aún más importante ¿qué es lo que no se debe hacer con esta tecnología?. A estas y seguramente otras preguntas voy a tratar de responder, en lo que pretende ser una aproximación a la accesibilidad web. ¿Te apuntas?.

¿Qué es WAI-ARIA?

WAI-ARIA (Web Accessibility Initiative – Accesible Rich Internet Applications), es una especificación de la W3C cuyo propósito es dar significado a aquellos elementos que no lo tienen, estableciendo roles para cada elemento, relacionándolos entre ellos, informando de su estado y facilitando los controles a través de teclado, dando así soporte a las APIs de accesibilidad.

Roles ARIA

El rol o funcionamiento de un elemento se añade al marcado HTML de igual forma que cualquier otro atributo, y define el tipo de elemento y para que sirve.

El nombre del rol debe ser uno de los definidos por la especificación WAI-ARIA y debe usarse de forma correcta. En el siguiente ejemplo, sugerimos que el contenido del elemento proporciona algún tipo de información sobre el elemento en el cual se encuentra contenido, lo que viene a ser un pie de página:


<div role="contentinfo">
    Esta web está diseñada por un alienígena loco por el CSS.
</div>

Atributos ARIA

Un atributo ARIA proporciona información específica sobre un objeto concreto y forma parte de la definición de la naturaleza de los roles. Tiene un comportamiento dinámico (no como el rol que no cambia), permitiendo definir las propiedades y estados de los elementos.

Realmente estos atributos se dividen en dos tipos: propiedades y estados. Sin embargo su diferencia es muy sutil, como tantas otras a las que tan acostumbrados nos tiene la W3C. La mayor diferencia es que las propiedades cambian menos que los estados. Si quieres profundizar un poco más puedes consultar el documento WAI-ARIA 1.0 (Propiedades y Estados Soportados).

Un ejemplo muy claro de los atributos ARIA, en este caso un estado, sería su uso para una checkbox, ya que esta posee dos estados: seleccionada y no-seleccionada. Para este ejemplo creamos una checkbox indicando que su estado por defecto es seleccionada:


<span role="checkbox" aria-checked="true">
</span>

ARIA también tiene reglas

Lo principal a tener siempre en mente es que no debemos usar WAI-ARIA para todo, de hecho cuanto menos WAI-ARIA uses mejor. Su finalidad está muy clara, por tanto esto es lo que debes hacer:

Usa elementos semánticos de HTML siempre que sea posible

Elementos de HTML5 como nav, header o footer llevan implícitos los roles ARIA role="navigation", role="banner" y role="contentinfo" respectivamente. Por tanto no hagas lo que yo he hecho en los ejemplos anteriores y en vez de <div role="contentinfo">, mejor usar footer. Es mucho más correcto. Eso sí, no hagas sobre-marcado, no es necesario añadir ningún role porque ya está implícito.

Para saber que roles lleva asociado cada elemento o que roles, estados o propiedades podemos usar en él siempre puedes consultar esta tabla de la W3C sobre las reglas de uso de los atributos ARIA.

Por ejemplo, vamos a hacer un botón con un elemento span y le daremos significado semántico mediante el rol apropiado:


<span class="boton" rol="button">
</span>

Con esto sólo conseguimos que por ejemplo un screenreader anuncie el elemento span como si fuese un botón, sin embargo para el navegador no tiene significado alguno. Lo que quiero decir con esto es que a fin de cuentas no es un botón real, falta darle el aspecto necesario para que se asemeje a uno, lo que haríamos con CSS. Pero hay más, porque tampoco es accesible desde teclado, con lo cual deberemos usar el atributo tabindex="0" para que este elemento pueda coger el foco. Lo lógico sería usar la etiqueta button y problema resuelto.

Un sólo rol por elemento

Un elemento de HTML sólo puede tener un rol. Un rol tiene un significado semántico de una u otra forma, por tanto un elemento no puede ser dos tipos de objetos diferentes. ¿Acaso puede una cabecera ser también un pie de página?.

Usa los roles con cabeza y elige siempre aquel que se aproxime más al funcionamiento de tu elemento.

No cambies la semántica de un elemento

Nunca (salvo casos excepcionales) uses un rol para contrarrestar el efecto del rol que lleva un elemento de forma implícita. En su lugar usa un elemento apropiado a lo que buscas, o sino es posible, siempre es preferible anidar elementos HTML.

Por ejemplo, pongamos que tengo una imagen como único elemento de la cabecera principal de una web, como puede ser un logo. Bien podría pensar en hacer lo siguiente:


<header rol="img">
</header>

Evidentemente no es correcto. Como comenté anteriormente no es posible tener más de un rol por elemento, por tanto el rol="banner" que implícitamente lleva asignado header queda reemplazado por el nuevo que le hemos asignado. Así de cara a cualquier tecnología de asistencia, header será anunciado como una imagen, mientras que para el navegador seguirá siendo una etiqueta header.

Lo correcto sería hacerlo hacerlo de la forma siguiente, donde queda claro que nuestra imagen, que es un logo corporativo, forma parte de la cabecera principal de la página.


<header>
    <img src="logo.gif" alt="Logo" />
</header>

Para información más detallada a cerca de como usar WAI-ARIA en HTML siempre puedes consultar el documento de la W3C Notas sobre el uso de ARIA en HTML.

Pseudo-elementos CSS: dando estilo a tu web

noreply@blogger.com (LuisFran) — Sat, 28 May 2016 15:04:00 +0000

Como supongo ya te habrás dado cuenta, soy un loco apasionado del CSS (además de un poco alienígena) y de todas las posibilidades que este nos ofrece. Cambio una y mil veces mis diseños, y los pseudo-elementos son la forma más rápida, sencilla y útil de conseguir darle ese toque original y de calidad que todos buscamos.

Son herramientas que nos permiten conseguir más fácilmente la separación entre estructura y presentación, lo que a fin de cuentas da una web mejor estructurada, semántica y más apetecible de cara a los buscadores. Y esto no sería posible sin el uso de pseudo-elementos.

Sintaxis, ¿dos o cuatro puntos?

Esta parece ser la duda existencial de todo desarrollador, y lo cierto es que no debiera serlo. En CSS3 se introdujo la variación de los cuatro puntos (::) para matizar la diferencia entre pseudo-elementos y pseudo-clases, que sólo llevan dos puntos, como por ejemplo :hover.

No obstante, los pseudo-elementos son anteriores a la tercera versión de CSS y por tanto su sintaxis anterior era la misma que la de las pseudo-clases, de ahí que se siga aceptando la antigua sintáxis. Por lo general se suele usar la sintáxis antigua de sólo dos puntos, sobre todo para dar mayor compatibilidad a nuestro código en navegadores antiguos.

::first-line

El pseudo-elemento ::first-line nos permite seleccionar la primera línea dentro de un elemento. Por ejemplo. la siguiente regla CSS nuestra la primera línea de un párrafo en color rojo:


p:first-line { color: red; }

Evidentemente podríamos haberlo hecho mediante una clase introducida directamente en nuestro HTML, pero imagínate el trabajo y "código sucio extra" si tenemos que hacerlo en multitud de párrafos.

Además esto sólo sería posible si el diseño es rígido, ya que si tenemos un diseño fluido o responsive, el tamaño de la primera línea variará en función del tipo del dispositivo donde se vea nuestra web, lo cual nos lleva al uso irremediable de ::first-line.

::first-letter

El pseudo-elemento ::first-letter selecciona la primera letra (también afecta a otros caracteres y signos de puntuación) del texto de un elemento. Puntualizar que este selector sólo puede usarse en elementos de bloque. Así, para la siguiente regla de CSS ponemos en mayúscula la primera letra de cada párrafo:


p:first-letter { text-transform: uppercase; }

Evidentemente, y al igual que ocurría con ::first-line podemos hacer lo mismo mediante una clase introducida en el HTML; sin embargo, nuestro código queda mucho más limpio y estructurado si hacemos uso de este pseudo-elemento.

::before y ::after

Sin duda alguna estos dos pseudo-elementos son la "crema de la tarta" de los selectores de CSS. Son una herramienta muy útil a la hora de dar estilo a nuestro documento, pero eso sí, hay que tener mucho cuidado según que cosas queremos hacer.

Los pseudo elementos ::before y ::after en combinación con la propiedad content nos permiten añadir contenido antes y después de contenido original de un elemento. Por ejemplo, la siguiente regla de CSS añade el texto "Capítulo - " delante de cada encabezado h1:


h1:before { content: "Capítulo - "; }

Como puedes ver es una herramienta poderosa, y que como suele pasar con estas cosas hay que utilizarla con cabeza y sumo cuidado. Ten en cuenta que el contenido debe ir siempre en el HTML a fin que pueda ser bien rastreado por los buscadores, con lo cual únicamente debemos usar estos elementos con fines estéticos, y si introducimos algún tipo de contenido que este no sea importante y que si se elimina no cambie el significado del contenido del elemento original.

Su uso está muy extendido, y más que usarlos como en el ejemplo de arriba, se usan por ejemplo para cambiar los iconos de una web por fuentes, introduciéndolas mediante una regla bien con ::before o :after como en este pen de Ricardo Prieto, o bien podríamos crear un triángulo con CSS y usarlo como indicador de elemento seleccionado en un menú. Esto ya es cosa de tu imaginación.

Spinner animado en CSS puro

noreply@blogger.com (LuisFran) — Sat, 14 May 2016 11:08:00 +0000

Imagen de matthew venn - modificada.

Después de recrear la clásica barra de progreso usando sólo CSS, hoy vamos a hacer lo propio con uno de los indicadores de carga más usados en aplicaciones, los spinners. Si bien durante mucho tiempo han sido imágenes de tipo GIF, con las nuevas propiedades de CSS, esto ha cambiado radicalmente y la tendencia es realizar este tipo de animaciones mediante código, que sin duda es mucho más liviano.

Por esta razón vamos a construir un spinner, que va a ser muy básico, pero que queda muy bien para cualquier proceso de carga. Va a constar de dos círculos incompletos que giran en sentidos opuestos y con el que espero que te hagas una idea de lo que podemos llegar a conseguir con las propiedades animation, keyframes y transform.

Dibujando los círculos incompletos

Dibujar un círculo en CSS es algo muy sencillo que ya hemos visto en el artículo sobre la propiedad border-radius y sus posibilidades. Aunque en esta caso concreto no buscamos exactamente dibujar un círculo, sino mas bien una circunferencia, con lo cual necesitamos usar los bordes del elemento div que usamos como constructor, pero no al completo, sino únicamente tres de ellos.

Para esto sólo tenemos que aplicar un border-radius del 50% para conseguir que los bordes se curven para formar la circunferencia y dar como color el valor transparent a uno de los 4 bordes para dar la sensación de que este desaparece.

Por último haremos lo mismo para el otro círculo que va a ir anidado en su interior, para lo cual usaremos el pseudo-elemento ::before y lo posicionaremos con position:absolute en el lugar exacto.


.spinner {
    position: relative;
    width: 6em;
    height: 6em;
    border-top: 1em solid #eb7260;
    border-right: 1em solid #eb7260;
    border-bottom: 1em solid #eb7260;
    border-left: 1em solid transparent;
    border-radius: 50%;
}

.spinner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4em;
    height: 4em;
    border-top: 1em solid #77c5f7;
    border-right: 1em solid #77c5f7;
    border-bottom: 1em solid #77c5f7;
    border-left: 1em solid transparent;
    border-radius: 50%;
}

Haciéndolos girar

Para la animación de los círculos vamos a necesitar las propiedades keyframes y animation con la ayuda de transform, así que sino las conoces muy bien te recomiendo leas el artículo que les dediqué a ellas, porque en este tutorial no vamos a ver como funcionan sino un ejemplo práctico de lo que podemos hacer con ellas.

El proceso es muy sencillo. Haremos que ambos círculos giren indefinidamente a lo largo del tiempo, y los haremos girar 360 grados a la derecha y 360 grados a la izquierda con la propiedad transform.

Sólo debemos tener en cuenta una cosa, y es que en el DOM el pseudo-elemento ::before se crea como hijo del div que usamos para crear el primer círculo, con lo que al animar este animaremos los dos al mismo tiempo. Para conseguir que nuestro segundo círculo gire en sentido contrario su tiempo de animación deber ser menor, ya que si es mayor girará en el mismo sentido aunque más despacio y si es igual, ambas animaciones se contrarrestarán y por tanto no girará.


.spinner {
    animation: loading 1s linear infinite;

}

.spinner:before {
    animation: loading2 .5s linear infinite;
}

@keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading2 {
    from {

        transform: rotate(0deg);
    }
    to {

        transform: rotate(-360deg);
    }
}

Es aconsejable que cuando uses las propiedades de animación uses los prefijos para asegurarte la compatibilidad en los diferentes navegadores, en el ejemplo no los he usado para no alargar tanto el código, pero en el pen que te dejo al final de este tutorial, sí.

See the Pen Spinner doble en CSS puro by amram (@amram1977) on CodePen.

Las pseudo-clases estructurales a fondo

noreply@blogger.com (LuisFran) — Sat, 07 May 2016 18:11:00 +0000

Tal y como prometí en el artículo dedicado a las pseudo-clases, hoy vamos a ampliar el apartado dedicado a las pseudo-clases estructurales, ya que las vimos muy por encima y en cuanto a las fórmulas creo que me quede muy, pero que muy escaso.

En el artículo de hoy vamos a verlas todas de nuevo, aunque mucho más detalladas, y sobre todo nos adentraremos en las fórmulas y todo lo que podemos conseguir con ellas, que por cierto no es poco. Así que no estaría de más que te aprovisionases antes en tu nevera, porque esto comienza ya.

Las fórmulas

Aunque pueda parecer un poco bestia, vamos a entrar directamente con el plato fuerte, las fórmulas. Para ello y aunque no vas a necesitar conocimientos previos sobre ciertas de las pseudo-clases estructurales, aunque sólo sea a nivel de definición, te recomendaría leyeses antes el artículo que le dediqué a las pseudo-clases, para que te hagas una idea global de lo que podemos conseguir con estas expresiones numéricas.

De todas las pseudo-clases estructurales sólo cuatro de ellas admiten una fórmula, y son: :nth-child(N), :nth-last-child(N), :nth-of-type(N) y :nth-last-of-type(N). (N) es el argumento que usan estas pseudo-clases para seleccionar el elemento o elementos a los que aplicarles los estilos, y puede ser una palabra reservada, un número entero, o una expresión numérica del estilo an+b.

La expresión an+b se compone de tres datos. El número a indica cada cuantos elementos queremos contar, el número b por dónde empezar a contar, y en número n actúa como un índice para recorrer los elementos y empieza por cero. Así por ejemplo para una expresión 3n+2, Empezaríamos a contar por el segundo elemento y lo haríamos de tres en tres. En este caso la expresión selecciona el segundo, quinto, octavo, décimo-primero, y así sucesivamente, elementos.

Es importante tener en cuanta que tanto a como b pueden tomar valores negativos, aunque sólo se aplican los valores resultante positivos de N (que es el argumento global). Jugar con valores negativos puede ser muy útil, ya que con sólo valores positivos no abarcamos todas las opciones. Imagínate que queremos seleccionar los cinco primeros elementos de una lista de diez, con valores sólo positivos es imposible, sin embargo aplicando valores negativos es bastante sencillo. La expresión para este caso sería -n+5.

Por último decirte que las fórmulas también se pueden simplificar, supongo que los has notado en el ejemplo anterior con la expresión -n+5 donde he omitido el valor de a. Los casos donde podemos hacer alguna simplificación son:

Cuando los valores de a y b con iguales o b es 0. En este caso podemos omitir el valor de b ya que por ejemplo 4n+4 y 4n+0 dan el mismo resultado que 4n. Si no me crees haz el cálculo.
Si a es igual a 1 también se puede omitir. Por ejemplo 1n+3 es lo mismo que n+3.
Si a es igual a 0, que indica que no vamos a seguir un patrón de repetición, sólo es necesario el valor de b. Por ejemplo 0n+3 es lo mismo que 3.

Lo último que nos queda es ver algún que otro ejemplo práctico, pero eso vamos a ir haciéndolo según detallemos cada pseudo-clase estructural, de ahí el empezar con las fórmulas. Lo que sí vamos a hacer es la estructura HTML con la que vamos a trabajar en los ejemplos, y que no va a ser otra cosa que un par de listas desordenadas y cuatro párrafos, todo ello contenido en un elemento article.


<article>
    <p>Texto 1</p>
    <p>Texto 2</p>
    <ul>
        <li>Objeto 1</li>
        <li>Objeto 2</li>
        <li>Objeto 3</li>
        <li>Objeto 4</li>
    </ul>
    <p>Texto 3</p>
    <p>Texto 4</p>
    <ul>
        <li>Objeto 5</li>
        <li>Objeto 6</li>
        <li>Objeto 7</li>
    </ul>
</article>

:root

La pseudo-clase :root permite seleccionar el elemento padre de mayor nivel dentro del DOM o árbol del documento. En la mayoría de los casos te encontrarás que :root selecciona el elemento html, aunque hay otras posibilidades ya que CSS se puede usar para estilar otro tipo de documentos, como SVG o XML, es cuyo caso el resultado sería diferente.

Sólo hay que tener en cuenta una cosa más, y es que el selector :root tiene una especificidad mayor que el selector html, y en caso de que ambos seleccionen el mismo elemento, :root prevalece sobre html.

:first-child

Esta pseudo-clase nos permite seleccionar un elemento que es el primer elemento contenido dentro de otro elemento, o lo que es lo mismo, el primer elemento hijo contenido en un elemento padre.

Vamos con un ejemplo apoyándonos en la estructura HTML anterior. Los que vamos ha hacer es seleccionar Objeto 1 y Objeto 5, que con esta pseudo-clase es así de sencillo: li:first-child.

:last-child

El selector :last-child selecciona un elemento que es el último elemento contenido dentro de otro elemento.

Como ejemplo vamos ahora a seleccionar los últimos elementos de las dos listas del código HTML, que son Objeto 4 y Objeto 7. El selector que necesitamos para ello es: li:last-child.

:nth-child(N)

La pseudo-clase :nth-child te permite seleccionar uno o varios elementos hijos en función a la posición que ocupan dentro de su padre de acuerdo a una fórmula o expresión numérica. Como ya hemos visto las expresiones numéricas a fondo ahora será más sencillo entender el ejemplo que te pongo a continuación.

Para este ejemplo vamos a cambiar un poco la dinámica, poniendo primero el código y viendo que es lo que estamos seleccionando. El código es el siguiente: p:nth-child(2n+1). Según la fórmula seleccionaremos los párrafos situados en la posición 1, 3, 5, 7, 9, etc. No tenemos tanto elementos, tan sólo 6 (los hijos de article) y no todos ellos son un párrafo.

También hay que tener en cuenta la forma en que se numeran los elementos hijos dentro del padre, del primero al último, quedando así: El primero, Texto 1; el segundo, Texto 2; el tercero, una lista desordenada; el cuarto, Texto 3; el quinto, Texto 4; por último el sexto, que otra vez es una lista desordenada. Por tanto, en este caso estamos seleccionando Texto 1 y Texto 4.

:nth-last-child(N)

No es una pseudo-clase nada compleja si se sabe usar bien :nth-child, ya que funciona exactamente igual salvo que comenzamos a contar desde el último elemento hasta el primero, por tanto los elementos se numeran de forma inversa.

Para este ejemplo no voy a cambiar nada con respecto al usado para :nht-child, para que así veas mejor su funcionamiento. Así que partiendo de la misma fórmula el código a usar es: p:nth-last-child(2n+1) y los párrafos a seleccionar según su posición siguen siendo 1, 3, 5, 7, 9, etc.

Lo único a tener en cuenta es que comenzamos desde el último elemento y terminamos en el primero, con lo cual numeramos de la siguiente forma: El primero, una lista desordenada; el segundo, Texto 4; el tercero, Texto 3; el cuarto, otra lista desordenada; el quinto, Texto 2; y por último Texto 1 que ocupa la sexta posición. Con lo cual estamos seleccionado Texto 3 y Texto 2.

:first-of-type

La pseudo-clase :first-of-type selecciona el primer elemento contenido dentro de otro y que a su vez es de un tipo determinado. Es muy parecido a first-child pero más específico.

Imaginemos que queremos seleccionar la primera de las listas desordenadas que tenemos en el ejemplo. Podríamos hacerlo si conocemos su posición exacta con :nth-child, pero también con :first-of-type y además no es necesario conocer su posición, ya que únicamente queremos seleccionar la primera de todas ellas. El código es así de sencillo: ul:first-of-type.

:last-of-type

Esta pseudo-clase selecciona el último elemento contenido dentro de otro y que a su vez es de un tipo determinado. Al igual que con la anterior pseudo-clase este se parece mucho a :last-child, pero mucho más específica.

Vamos a hacer lo mismo que en el anterior ejemplo, pero en vez de seleccionar la primera lista desordenada vamos a seleccionar la última. También podríamos usar otras pseudo-clases, pero con esta es suficiente. El código el que sigue: ul:last-of-type.

:nth-of-type(N)

La pseudo-clase :nth-of-type(N) selecciona un elemento hijo de un tipo determinado en función a la posición que ocupa dentro de su padre y de acuerdo a la expresión numérica que usemos.

Es muy similar a :nth-child(N) salvo que para la selección del elemento o elementos sólo numeramos aquellos que sean del mismo tipo, y no todos los elementos dentro del padre como ocurría con :nth-child(N).

Así para el ejemplo que estamos usando si aplicamos la misma fórmula que para :nth-child(N) que es 2n+1 y queremos seleccionar los párrafos el código que quedaría sería: p:nth-of-type(2n+1). Hay que tener en cuenta que sólo numeramos los párrafos, por tanto el primer elemento es Texto 1; el segundo, Texto 2; el tercero, Texto 3 y el cuarto, Texto 4. Por tanto y según este código de ejemplo estamos seleccionando Texto 1 y Texto 3.

:nth-last-of-type(N)

Esta es una pseudo-clase muy sencilla de dominar si conocemos bien :nth-of-type(N), ya que la única diferencia radica en que comenzamos a contar desde el último elemento del mismo tipo hasta el primero, por tanto los elementos se numeran de forma inversa.

Para este ejemplo vamos a usar la mista fórmula que usamos en el anterior, para ver mejor las diferencias. El código que vamos a usar es: p:nth-last-of-type(2n+1) y la numeración a tener en cuenta es: el primer elemento es Texto 4; el segundo, Texto 3; el tercero, Texto 2 y el cuarto, Texto 1. Como supongo ya has deducido los elementos que seleccionamos son Texto 4 y Texto 2.

Y hasta aquí ha llegado este artículo dedicado a las pseudo-clases estructurales, donde espero haber aclarado un poco su funcionamiento y también como se manejan las dichosas formulitas. También aprovecho para aconsejarte :nth Tester, una aplicación de CSS-Tricks, donde podrás trastear con las pesudo-clases del tipo :nth y sus fórmulas.

Cómo usar correctamente figure y figcaption

noreply@blogger.com (LuisFran) — Sat, 23 Apr 2016 15:14:00 +0000

En prensa, revistas y libros es muy común encontrarnos con imágenes, gráficos o fragmentos de código acompañados de una leyenda (un texto explicativo de dicho elemento). Hasta la aparición de HTML5 no era posible dar ningún carácter semántico a este tipo de elementos, ya que por ejemplo para un motor de búsqueda una imagen y la leyenda que la acompaña no tienen relación alguna. Además, y desde el punto de vista de diseño, debemos usar elementos adicionales para conseguir que la leyenda nos quede ajustada al elemento que queremos darle significado.

Las etiquetas figure y figcaption, vienen resolver estos problemas. En el aspecto semántico, al crear una figura que contiene una leyenda, este texto queda unido a dicha figura, aportándole un valor semántico. En cuanto a diseño, una leyenda se coloca bien arriba a la izquierda o abajo a la izquierda (según la situemos en el código) de la figura que hayamos creado, lo que simplifica el marcado HTML y también el CSS para lograr tal posicionamiento. Como todo son ventajas, ¿qué tal si las vemos un poco más a fondo?.

Las figuras son algo más que imágenes

El uso más común del elemento figure es con las imágenes (sobre todo acompañadas de una leyenda con figcaption), pero no es la única forma de usar este elemento.

Podemos usar el elemento figure para una imagen con o sin leyenda, para un fragmento de código, en un vídeo relacionado con el contenido o también en una cita. También debemos tener en cuenta que una figura puede contener más de un elemento, así podemos tener varias imágenes, varios vídeos o porqué no, imágenes y vídeos, siempre teniendo en cuenta que sólo podemos usar una leyenda, ya que esta se asocia a la figura que hemos creado.

No todos las imágenes tienen que ser figuras

Con lo que hemos visto hasta ahora podrías verte tentado en crear figuras con todas y cada una de la imágenes de tu web, pero no lo hagas, es un completo disparate. Un elemento figure, según la especificación de la W3C, representa una unidad de contenido, con una leyenda opcional, que si bien se relaciona con el flujo principal, su posición es independiente de este. Por ejemplo una imagen para ilustrar un texto, bien puede ir antes, después o incrustada dentro del mismo, y no cambia con ello su significado.

Por tanto, nunca se debe usar un elemento figure para elementos de navegación, bien sean imágenes o iconos, para logos o elementos gráficos de una cabecera, en definitiva, para ningún elemento cuya posición dentro del documento sea relevante.

¿Y qué pasa con la propiedad alt?

Puede parecer raro, pero no es la primera vez que me encuentro con una imagen sin su correspondiente alt por la sencilla razón de estar contenido dentro de una figura con su correspondiente leyenda. Es un error garrafal, primero porque alt es una propiedad obligatoria cuando usamos una etiqueta img según las especificaciones de la W3C y de WHATWG y segundo, porque en lo que respecta a accesibilidad, el atributo alt es una descripción de la imagen que se visualiza cuando esta no puede ser vista por el usuario.

Una leyenda es también un texto explicativo, pero en este caso de la figura (recuerda que una figura puede contener más de un elemento), y que si la figura contiene una única imagen, bien puede coincidir con el texto del atributo alt, aunque no es necesario que así sea. Hay que tener claro que son dos conceptos diferentes y que el uso de una leyenda no exime del uso de la etiqueta alt en la imagen o imágenes que usemos.

Uso de figure y figcaption

Como lo más sencillo es ver ejemplos de código, eso es lo que vamos a hacer. Voy a poner tres ejemplos, todos ellos basados en imágenes, aunque son perfectamente extrapolables a cualquier otro tipo de elemento.

Figure sin figcaption


<figure id="figura1">
    <img src="imagen1.jpg" alt="Una imagen">
</figure>

Figure con figcaption


<figure id="figura2">
    <img src="torre.jpg" alt="La torre Eiffel">
    <figcaption>Disfrutando de la torre Eiffel en mis vacaciones"</figcaption>
</figure>

Figure con varias imágenes

El elemento figcaption puede ir tanto al principio como al final de la figura, pero nunca entre los elementos que componen la figura.


<figure id="figura3">
    <figcaption>Mis dos hijas, Lucía y Alba</figcaption>
    <img src="lucia.jpg" alt="Mi hija Lucía">
    <img src="alba.jpg" alt="Mi hija Alba">
</figure>

Barra de progreso animada en CSS puro

noreply@blogger.com (LuisFran) — Sat, 09 Apr 2016 15:09:00 +0000

Después de ver lo sencillo que es crear animaciones en CSS con @keyframes y animation, como vimos en el artículo Animando con CSS3: keyframes y animation, hoy vamos a hacer una barra de progreso, una animación un poco más compleja, que como verás, al final no lo es tanto.

Las barras de progreso son de esos elementos que no suelen faltar en casi ninguna aplicación, y evidentemente las aplicaciones web no son menos. Tradicionalmente se han implementado mediante algún lenguaje de programación, generalmente Javascript, pero las funcionalidades de CSS3 son muchas, y con las nuevas implementaciones de HTML5 que nos permiten hasta crear videojuegos, una barra de progreso ligera y funcional es mucho mejor que las clásicas soluciones. Ya sabes, cuanto menos Javascript mejor.

La estructura

Para crear una barra de progreso no necesitamos mucho, así que nuestra estructura en HTML va a ser muy sencilla. Tan sólo vamos a usar tres etiquetas div, una como contenedor general, que también hará de barra global. La segunda será la que mostrará el progreso de forma gráfica, llenando poco a poco el contenedor. Y la última es sólo un capricho, ya que además de mostrar el progreso de forma gráfica, lo haremos de forma porcentual, y con algún truquillo CSS para que quede lo mejor posible.


<div id="contenedor">
  <div id="barra">
    <div id="texto"></div>
  </div>
</div>

Dibujando la barra

Ahora que ya tenemos nuestra estructura HTML es momento de ponernos a dibujar nuestra barra de progreso. Vamos a definir un alto y un largo para nuestro contenedor general, además le daremos un borde al que le asignaremos un color determinado, así ya tendremos nuestra barra. Después damos estilo a #barra, haciendo que ocupe el 100% del alto y dejando su ancho a cero, ya que inicialmente este será el valor a mostrar por la barra de progreso. Lógicamente le vamos a dar un color de fondo.

Sólo con lo anterior ya tendríamos dibujada nuestra barra de progreso, ahora viene "el capricho". Con nuestro contenedor #texto lo que vamos ha hacer es centrar su contenido tanto vertical como horizontalmente. El texto, como queremos que sea para mostrar un progreso no podemos tenerlo directamente en el HTML, así que lo inyectaremos mediante la propiedad content del pseudo-elemento ::after.


#contenedor {
    width: 25em;
    height: 4em;
    margin: 0 auto;
    border: 2px solid #eb7260;
}

#barra {
    width: 0;
    height: 100%;
    background: #eb7260;
}

#texto {
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    width: 12.5em;
    height: 100%;
    text-align: center;
    color: #eb7260;
    mix-blend-mode: multiply;
}

#texto:after {
    content: '0%';
}

Creando la animación

Lo primero que vamos a hacer es crear las @keyframes. Para la barra vamos a jugar con su ancho (width) para simular el efecto de una barra que se llena poco a poco, para lo cual únicamente necesitaremos dos estado, el inicial con width:0 y el final con width:100%.

Para las @keyframes de nuestro campo de texto vamos a necesitar algunos estados más, para al menos mostrar los estados 0%, 25%, 50%, 75% y 100%. Podemos añadir tantos como queramos, pero para este ejemplo será más que suficiente.


@keyframes progreso {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes porcentaje {
    0% {
        content: '0%';
    }
    25% {
        content: '25%';
    }
    50% {
        content: '50%';
    }
    75% {
        content: '75%';
    }
    100% {
        content: '100%';
    }
}

Por último nos quedan las propiedades de animación que hay que asignar a los elementos que vamos a animar, en nuestro caso #barra y #texto. No vamos a usar ningún valor complicado, tan sólo les daremos a ambas la misma duración (como es lógico), definiremos que el ritmo de la animación sea linear (sobre todo a causa de los porcentajes), y le daremos el valor infinito para la duración de la animación.


#barra {
    animation: progreso 5s linear infinite;
}

#texto:after {
    animation: porcentaje 5s linear infinite;
}

Como ves no es tan difícil hacer una barra de progreso animada, y eso que lo he complicado un poco con ese "caprichito". Tan sólo puntualizar un par de cosas. La primera es que es aconsejable usar los prefijos tanto para @keyframes como para animation, para no tener problemas con los navegadores, sobre todo es aconsejable el prefijo -webkit-.

La segunda es sobre una propiedad que he usado y que no es muy frecuente, mix-blend-mode, y que nos permite realizar diversos efectos mezclando los colores de un elemento con todo lo que tenga debajo. En este pen puedes hacerte una idea general de como funcionan sus valores. Además he creado un pen con la animación que hemos creado en este post, para que puedas trastear con ella todo lo que quieras.

See the Pen Barra de progreso animada sólo con CSS by amram (@amram1977) on CodePen.

Entendiendo las pseudo-clases de CSS

noreply@blogger.com (LuisFran) — Sat, 02 Apr 2016 14:04:00 +0000

En el anterior artículo sobre Selectores de CSS vimos muy por encima las pseudo-clases y los pseudo-elementos. Ambos selectores son grandes armas para dar estilo a nuestros documentos y conseguir buenos resultados con muy poco, por eso ahora es momento de verlos a fondo, aunque hoy únicamente vamos a ver las pseudo-clases.

No pretendo que los veamos todas, pero si al menos las más importantes y más usadas, o al menos las que a mi gusto son las más útiles. Vamos a por ello, y que no se diga que no eres capaz de seguir a un alienígena.

Las pseudo-clases, simplificando, son muy parecidas a un atributo class de HTML, eso sí, sin estar especificadas explícitamente en el marcado. Hay muchas, pero que muchas y a la par también hay un sin fin de formas de clasificarlas. La W3C tiene la suya propia, que puedes ver en el Editor's Draft y que comienzan a partir del apartado dedicado a las pseudoclases-lingüísticas.

En este artículo voy a usar una clasificación diferente, ya que como dije no voy a tocarlas todas, que no recuerdo muy bien donde la vi por primera vez (si lo recordase le pondría un enlace). Para las pseudo-clases que vamos a ver creo que es una clasificación muy acertada y que seguramente te ayudará a comprenderlas mejor.

Pseudo-clases relacionadas con enlaces

Las pseudo-clases :link y :visited fueron introducidas en la primera versión de CSS (también :active que veremos después), pero únicamente para un elemento a. Posteriormente en CSS2 esto cambió para que pudieran aplicarse a cualquier elemento.

Estas pseudo-clases nos permiten seleccionar un elemento en función al estado del enlace, si ha sido o no visitado con anterioridad, y evidentemente depende del historial del navegador en que visualicemos el documento. Su uso es muy sencillo y sólo hay una pega, y es que son mutuamente excluyentes, es decir no podemos combinarlas en un selector:


a:link, a:visited {
    color: blue;
}

a:link:visited {
    color: red;
}

En el ejemplo, el primer caso es totalmente válido, ya que lo que hacemos es dar el mismo estilo a a tanto si ha sido visitado como si no. El segundo caso por contra no es correcto, ya que aunque podemos combinar pseudo-clases para crear selectores más específicos, :link y :visited son mutuamente excluyentes, un enlace no puede estar sin visitar y a la vez haber sido visitado (pura lógica).

Dentro de esta clasificación también tenemos la pseudo-clase :target, que nos permite dar estilo a un elemento cuya id coincide con el identificador de fragmentos de la URL del documento (una URL que ternima con el signo "#" y un identificador). Por ejemplo si tenemos una url www.misitio.com/#inicio el selector que usaríamos sería #inicio:target.

Pseudo-clases dinámicas

Las pseudo-clases dinámicas seleccionan un elemento en función de un estado que ha sido alterado por la acción del usuario. Vamos a ver tres: :hover, :active y :focus, que son las más usadas. Las pseudo-clase :active fue introducida en la primera versión de CSS, al igual que :link y visited, y selecciona un elemento cuando esta ha recibido el foco, bien sea mediante teclado, ratón u otro tipo de entrada.

Las otras dos pseudo-clases, :hover y :active fuero introducidas en CSS2 junto con :lang y :first-child. La pseudo-clase :hover es quizás una de las más usadas. Nos permite seleccionar un elemento cuando el usuario designa este elemento con algún dispositivo de señalización, por ejemplo el puntero del ratón, sin necesidad alguna de activarlo.

La pseudo-clase :active selecciona un elemento cuando este está siendo activado por el usuario. Por ejemplo cuando el usuario presiona el botón del ratón y luego lo suelta, lo que produce un evento de tiempo muy corto.

El orden de la declaración en las pseudo-clases dinámicas, en función de lo que se desea lograr, es muy importante. El comportamiento que normalmente se usa, teniendo en cuenta también las pseudo-clases relacionadas con enlaces, es el siguiente:


a:link {
    declaraciones;
}

a:visited {
    declaraciones;
}

a:focus {
    declaraciones;
}

a:hover {
    declaraciones;
}

a:active {
    declaraciones;
}

Pseudo-clases para formularios

Son muchas las novedades que CSS3 ha incluido en cuando al tratamiento de formularios mediante pseudo-clases, que unidas a las de las versiones anteriores nos dan una completa lista para darles estilo de casi cualquier forma:

:enabled: Selecciona un campo de entrada input que está en su estado por defecto, habilitado y listo para ser usado.
:disabled: Selecciona un elemento input que contiene el atributo disabled.
:checked: Selecciona una checkbox cuyo estado es "comprobado". Es un recurso muy usado que permite además de dar estilo a las checkboxes, crear iconos animados y menús ocultos mediante el checkbox hack.
:requiered: Permite seleccionar un elemento input que contiene el atributo requiered.
:valid: Selecciona un elemento input cuyo campo de entrada es válido en función al valor del atributo type.
:invalid: Selecciona un elemento input cuyo campo de entrada es no válido en función al valor del atributo type.

Pseudo-clases estructurales

Estas pseudo-clases permiten seleccionar un elemento en función a su posición en el árbol del documento y a su relación con otros elementos.

:root: Selecciona el elemento raíz del documento. Generalmente es el elemento html.
:first-child: Selecciona el primer elemento hijo, independientemente del tipo, en un elemento padre.
:last-child: Muy parecido al anterior, pero en este caso selecciona el último elemento hijo en un elemento padre, con independencia de su tipo.
:nth-child(n): Esta pseudo-clase permite seleccionar un elemento hijo en función a la posición que ocupa dentro de un elemento padre. El valor (n) puede ser un valor entero (que selecciona un único elemento), una fórmula como por ejemplo (5n) que selecciona "cada quinto elemento (5, 10, 15, ...)" o una fórmula de compensación como por ejemplo (5n+1), donde también se permiten valores negativos.
:nth-last-child(n): Funciona de forma parecida a :nth-child pero lo hace contanto de forma inversa y empezando por el último elemento hijo.
:first-of-type: Selecciona el primer elemento hijo, de este tipo, en un elemento padre.
:last-of-type: Al igual que el anterior selecciona el último elemento hijo, de este tipo, en un elemento padre.
nth-of-type(n): Selecciona un elemento del tipo indicado en función a la posición que ocupa dentro del elemento padre indicada por el valor de (n), que como ya vimos puede ser un valor entero, una fórmula o una una fórmula de compensación.
nth-last-of-type(n): Selecciona el elemento de igual forma que :nth-of-type(n) pero cuenta hacia arriba desde el último elemento.

Esto tipo de pseudo-clases son quizás las más confusas de entender, por lo cual las veremos más a fondo en un artículo dedicado sólo a ellas, donde ampliaré su descripción y veremos las fórmulas de una forma más completa, todo ello con la ayuda de unos cuantos ejemplos.

Animando con CSS3: keyframes y animation

noreply@blogger.com (LuisFran) — Mon, 28 Mar 2016 06:50:00 +0000

Imagen de Juliana - modificada.

Las animaciones son un gran arma cuando intentamos captar la atención del usuario en aquellas zonas de la web que estimamos de vital importancia. Porque a fin de cuentas somos simples, muy simples, y nos encantan las cosas brillantes y todo aquello que se mueva.

En animación web siempre hemos tenido que recurrir a otros lenguajes para este tipo de usos, sobre todo Javascript, pero CSS3 ha cambiado todo esto. A parte de las animaciones simples que podemos realizar con transition, CSS3 nos da una herramienta mucho más potente, @keyframes, que nos permite realizar animaciones más complejas, con ciclos y la posibilidad de iniciarla y pararla. Por esto Javascript se ha ido relegando a un segundo plano. Así que no pierdas el tiempo, ha llegado el momento de crear animaciones con CSS3.

Las animaciones en CSS constan de dos grandes bloques:

Keyframes - con @keyframes definimos los estados y estilos de la animación.
Propiedades de la animación - en este bloque asignamos los @keyframes a una regla específica de nuestro CSS y definimos como va a ser animado el elemento de HTML seleccionado por nuestra regla.

Vamos a verlos con más detalle.

Las keyframes

Las keyframes son la parte fundamental de la animación. Con ellas definimos cómo se verá la animación en cada estado de la línea de tiempo (timeline). Cada @keyframes se compone de:

Nombre de la animación: Un nombre que describa la animación (esto es sólo un consejo) que luego va a ser usado en la propiedades de la animación mediante la propiedad animation-name.
Estados de la animación: cada animación debe poseer al menos dos estados, uno para el inicio y otro para el final. Estos estados se representan mediante un porcentaje, 0% para el inicio y 100% para el final, aunque para estos dos estados también podemos usar las palabras reservadas from y to. Entre medias podemos añadir tantos estados como queramos, siempre expresados en porcentajes.
Propiedades de CSS: Las propiedades de CSS definidas para cada estado de la animación en la línea de tiempo.

Para que quede más claro vamos con un ejemplo que iremos construyendo poco a poco en este tutorial. Va a ser algo muy sencillo, tan sólo una caja que se mueve de izquierda a derecha y viceversa, de forma infinita. Este es el @keyframes que vamos a usar:


@keyframes moving-box {
  0% {left:10%}
  100% {left:80%}
}

Las propiedades de la animación

Ahora que ya tenemos creado nuestro @keyframes tenemos que añadir las propiedades de la animación para darle funcionalidad. Como ya vimos con ellas haremos dos cosas: asignamos las @keyframes al elemento que queremos animar y definimos cómo será animado.

Las propiedades de la animación las asignaremos a una regla CSS del elemento que queremos animar. Como mínimo debemos definir al menos dos propiedades animation-name y animation-duration. Por supuesto hay más propiedades CSS, en concreto seis, lo que da un total de ocho propiedades. Vamos a verlas de forma resumida para que te hagas una idea de lo que podemos hacer con ellas:

animation-name: El nombre de la animación, que previamente hemos definido en las @keyframes.
animation-duration: Con esta propiedad definimos el tiempo que durará la animación, expresado bien en segundos(s) o en milisegundos(ms).
animation-timing-function: Define la curva de velocidad o ritmo de la animación. Podemos definirla con las palabras reservadas ease, linear, ease-in, ease-out, ease-in-out, initial e inherit, o de forma más compleja mediante la curva de Bézier. El valor por defecto (si no le damos otro) es ease. Si en alguna ocasión has trabajado con transition seguro que ya las conoces.
animation-delay: Permite definir cuando comenzará la animación. Si es un valor positivo la animación comenzará en el instante que hayamos especificado. Si por el contrario el valor es negativo, la animación comenzará inmediatamente, pero ya habrá pasado el tiempo que hayamos especificado, es decir, nos perderemos el trozo de animación correspondiente al tiempo que hayamos dado. El valor se puede expresar tanto en segundos(s) como en milisegundos(ms). La propiedad animation-delay es muy útil cuando queremos concatenar varias animaciones.
animation-iteration-count: Aquí definimos el número de veces que la animación se va a ejecutar. Los valores que puede tomar son:
- #: Un valor numérico (por defecto es 1).
- infinite: La animación se repite de forma recursiva.
- initial: Establece el número de iteraciones en el valor predeterminado.
- inherit: Hereda el valor de su padre.
animation-direction: Especifica si la animación se ejecutará hacia adelante, hacia atrás o en ciclos alternos (hacia adelante y hacia atrás). Los valores que puede tomar son:
- normal: Es el estado por defecto. La animación se ejecuta hacia adelante y en cada ciclo vuelve a empezar desde el estado inicial (0%).
- reverse: La animación se ejecuta hacia atrás, por tanto en cada ciclo empieza desde su estado final (100%).
- alternate: La animación cambia de sentido en cada ciclo. Así en los ciclos impares lo hará hacia adelante y el los ciclos pares lo hará hacia atrás.
- reverse-alternate: Parecido al estado anterior pero justo al revés. En los ciclos impares lo hará hacia atrás y en los ciclos pares hacia adelante.
animation-fill-mode: Especifica si los estilos de la animación son visibles antes o después que esta comience. Por defecto la animación no afecta a los estilos del elemento antes que esta comience o una vez que esta haya terminado. Con esta propiedad podemos cambiar estos valores:
- backwards: Antes de que comience la animación los estilos del keyframe inicial (0%) son aplicados al elemento.
- forwards: Una vez acabada la animación los estilos aplicados por la animación en el keyframe final (100%) se mantienen aplicados.
- both: La animación aplica las dos reglas anteriores, aplicando los estilos antes de que la animación comience y también después que haya finalizado.
- normal: Es el estado por defecto. Los estilos sólo se aplican al elemento mientras la animación está en curso.
animation-play-state: Con esta propiedad determinamos cuando la animación está en curso o en pausa. Los valores que puede tomar son running (aunque también funciona con playing) y paused

Al igual que en otras propiedades CSS tenemos una forma abreviada, que es la que se aconseja usar siempre que sea posible:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

La animación

Ahora que ya hemos visto las posibilidades que tenemos con las propiedades animation, es momento de ponerlo todo es práctica. Anteriormente ya habíamos definidos las @keyframes para nuestra animación, ahora es momento de puntualizar un poco más que es lo que vamos a hacer.

Como dije va a ser muy sencilla. Vamos a hacer una animación cíclica e infinita en el tiempo. Moveremos una caja de izquierda a derecha y viceversa, y tendremos otra caja adicional, centrada en la pantalla, que nos permitirá pausar la animación al pasar el cursor sobre ella (usaremos el selector de adyacentes). si has llegado hasta aquí seguro que sabes como hacerla:


#caja1, #caja2 {
  width: 8em;
  height: 8em;
  position: absolute;
  top: 3em;
}

#caja1 {
  background: rgba(0,0,255,.5);
  left: 45%;
  text-align: center;
  line-height: 8em;
  color: #fff;
  z-index: 10;
}

#caja2 {
  left:10%;
  background: rgba(255,0,0,.5);
  animation: moving-box 5s infinite alternate running;
}

#caja1:hover + #caja2 {
  animation-play-state: paused;
}

See the Pen Cajas en movimiento con CSS by amram (@amram1977) on CodePen.

Selectores de CSS

noreply@blogger.com (LuisFran) — Wed, 16 Mar 2016 08:02:00 +0000

La idea de las hojas de estilo en cascada (CSS), es la de separar la estructura de un documento de su presentación. Esto puede hacerse de forma separada, mediante un documento a parte, o dentro del propio documento HTML. Para ello necesitamos de un mecanismo específico entre los estilos y los elementos del documento HTML. Este mecanismo no es ni mas ni menos que una regla CSS.

Las reglas CSS se componen de un selector y de una declaración, formada por una serie de propiedades con sus valores. De modo sencillo podríamos decir que la declaración indica "qué hay que hacer", mientras que el selector nos permite seleccionar los elementos del DOM (Document Object Model), a los que queremos darles estilo. Por tanto los selectores son imprescindibles para aplicar de forma correcta los estilos CSS a una página, y con un conocimiento profundo podemos ahorrarnos el uso de lenguajes de programación adicionales (como Javascript) que cargan en exceso nuestro documento.

Selectores básicos

Hay cuatro tipos de selectores básicos, y en la mayoría de webs y blogs, con ellos es más que suficiente para realizar su diseño. Como mucho se usa el combinador descendiente (que luego veremos) sin que en muchas ocasiones su diseñador sepa que lo está usando (debido en parte a su notación, un espacio en blanco).

Selector universal

El selector universal, que se introdujo por primera vez en la segunda versión de CSS, selecciona todos los elementos de una página. Es un selector de poco uso, ya que generalmente no se necesita darle el mismo estilo a todos y cada uno de los elementos; sin embargo, bien usado puede ser muy útil.


* {
    color: blue;
    font-size: 20px;
}

Con estas dos simple líneas, contenidas entre las llaves, conseguimos que todos los elementos de nuestro documento tengan un tamaño de texto de 20px y de color azul (no es muy útil, pero sólo es un ejemplo). Como puedes ver el selector universal se representa por un asterisco (*).

Selector de etiqueta

El selector de etiqueta o selector de tipo, nos permite seleccionar uno o más elementos HTML con idéntico nombre. Por ejemplo, si queremos seleccionar todos los elementos p de nuestro documento HTML usaríamos el selector p que daría estilo a todos los párrafos de la página.


p {
    color: blue;
    font-size: 20px;
}

Selectores class e ID

En CSS tenemos la posibilidad de seleccionar un elemento HTML en función al valor del atributo class o del valor del atributo ID. El valor de estos elementos es una cadena de mínimo un carácter, que no puede contener espacios, y que evidentemente nosotros elegimos cuando creamos el HTML.

Este selector usa el mismo nombre que el valor que tenga el atributo en HTML precedido bien por un punto (.), si es un selector class o una almohadilla (#), si es un selector ID. La única diferencia es que en nuestro HTML el valor de ID debe ser único y el de class puede ser el mismo para diferentes elementos, permitiéndonos en CSS seleccionar un único elemento o varios según usemos uno u otro.


<div id="rojo">
   <p>texto</p>
   <p class="azul">texto</p>
</div>
<div class="azul">
   <p>texto</p>
</div>


#rojo {
    color:red;
}

.azul {
    color:blue;
}

En el ejemplo hemos creado una clase cuyo valor es azul y una ID con valor rojo. Mediante CSS damos estilo a las etiquetas de HTML a las que les hemos asignado esos atributos. Por tanto el primer párrafo será rojo, debido a la herencia recibida de la etiqueta div con id="rojo". Sin embargo el siguiente párrafo será azul, ya que tiene asignada la clase "azul". También será azul el contenido de la etiqueta div con clase azul.

Combinadores

CSS nos de una herramienta muy útil que nos permite crear selectores más complejos y específicos combinando los selectores básicos. El selector creado a partir de los combinadores puede ser tan largo como sea necesario, aunque para un mejor rendimiento es aconsejable no excederse. En esencia funcionan de manera muy similar a los operadores de cualquier lenguaje de programación.

Selector de descendientes

El selector de descendientes, o más exactamente combinador de descendientes, nos permite crear un selector más específico para dar estilo a todos los descendientes que cumplan la norma creada por el selector. Esto incluye no sólo a sus descendientes inmediatos, también llamados hijos, sino también a los descendientes de estos y sucesivos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. Su notación es quizás la más confusa, ya que se usa un espacio en blanco.


#contenedor .parrafo {
    margin: 5px;
    padding: 2px;
    background-color: green;
}

Con este selector daremos estilo a todos lo elementos que tengan un atributo class de valor "parrafo" y además estén contenidos dentro de un elemento con un atributo ID de valor "contenedor". Mejor lo vemos con este código HTML:


<div id="contenedor">
    <p class="parrafo">texto</p>
    <p>texto</p>
    <a href="#"><p class="parrafo">texto</p></a>
</div>

En este ejemplo damos etilo a primer y tercer párrafos, ya que ambos cumplen con el selector que hemos creado. El segundo párrafo no tiene la clase de valor "parrafo". El tercer párrafo, a pesar de estar contenido dentro de un anchor, cumple con el selector ya que sólo tiene que ser descendiente de "contenedor" y en este caso lo es.

Selector de hijos

Es un selector similar al de descendientes, sin embargo su funcionamiento es algo diferente. Se utiliza para seleccionar sus hijos inmediatos y se indica mediante el signo "mayor que" (>).


p > span {
    color: red;
}


<p>texto<span>texto</span>más texto</p>
<p><a href="#">texto<span>texto</span></a>más texto</p>

En este ejemplo sólo se aplica el estilo a la primera etiqueta span, ya que la segunda al estar contenida en un anchor no es hija directa de p.

Selector de adyacentes

El selector de adyacentes nos permite seleccionar el elemento hermano que se encuentra inmediatamente después en el código HTML. Su sintaxis es elemento1 + elemento2.


p + p {
    color: red;
    font-size: 20px;
}


<p>Un texto</p>
<p>Otro texto</p>
<p>Otro texto más</p>

En el caso de este ejemplo la regla se aplica tanto segundo como al tercer párrafo, ya que el segundo es hermano directo del primero y el tercero es hermano directo del segundo.

Selector general de hermanos

Es un selector muy parecido al selector de adyacentes, pero más general, ya que selecciona a todos los elementos hermanos que se encuentren después en el HTML. su sintaxis es elemento1 ~ elemento2.


h2 ~ p {
    margin: 10px 0;
}


<h2>Título</h2>
<p>Un texto</p>
<p>Otro texto</p>
<div class="caja">
    <p>Otro texto más</p>
</div>

En este ejemplo seleccionamos los dos primeros párrafos, pues ambos son hermanos de h2 y se encuentran después de él en el HTML. El tercer párrafo, por contra, no se selecciona, ya que aunque se encuentra después de h2, no es su hermano.

Selector de atributo

El selector de atributo selecciona un elemento basándose en la presencia y/o valor de un atributo en HTML, y se declara usando corchetes. Para la selección del elemento tenemos seis posibilidades, basándonos en si seleccionamos sólo el atributo o si por contra nos basamos también en su valor:

elemento[atributo]: seleccionamos todos los elementos que disponen de ese atributo.
elemento[atributo^="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
elemento[atributo$="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor termina exactamente en la cadena de texto indicada.
elemento[atributo*="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor es exactamente el de la cadena de texto. En este caso el asterisco (*) es opcional.
elemento[atributo~="valor"]: seleccionamos todos lo elementos que disponen de ese atributo y cuyo valor es una lista de palabras separadas por espacios en blanco, en la que al menos una es exactamente igual a valor.
elemento[nombre_atributo|="valor"]: seleccionamos todos lo elementos que disponen de ese atributo y cuyo valor es una serie de palabras separadas con guiones y que comienza con valor. Este selector sólo es útil para atributos de tipo lang.


<form class="contact_form" action="#" method="post">
    <label for="name">Nombre:</label>
    <input type="text" name="nombre"  placeholder="Nombre y apellidos" autofocus required />
    <label for="email">Email:</label>
    <input type="email" name="email" placeholder="ejemplo@ejemplo.com" required />
    <label for="website">Sitio Web:</label>
    <input type="url" name="web" placeholder="http://www.tuweb.com" />
    <label for="Mensaje">Mensaje:</label>
    <textarea name="mensaje" required ></textarea>
    <button type="submit">Enviar</button>
</form>


input[type="text"] {
    backgroun-color: #444;
    widht: 150px;
}

input[placeholder^="http"] {
   color: blue;
}

En este ejemplo seleccionamos la etiqueta input que tiene el atributo type y cuyo valor es exactamente text y le damos color de fondo igual a #444 y un ancho de 150px. También seleccionamos otra etiqueta input, pero esta vez la que tiene el atributo placeholder y cuyo valor empieza por http. Evidentemente podríamos haber hecho lo mismo usando el selector class o el seletor ID, pero dependiendo de lo que vayamos a seleccionar nos vendrá mejor una u otra solución, además nos hemos ahorrado algo de marcado en el HTML.

Pseudo-clases y pseudo-elementos

Pseudo-clases

Una pseudo-clase selecciona un elemento dentro del DOM pero bajo determinadas condiciones, como por ejemplo respecto a la posición que ocupa en relación a sus hermanos o cuando está bajo un estado determinado. Se podría decir actúa de la misma forma que si hubiésemos añadido una clase a un elemento en nuestro marcado. Su sintáxis es selector:pseudo-clase. La más común, y que seguramente ya has usado en alguna ocasión es :hover.


a:hover {
    color: red;
    text-decoration: none;
}

Por defecto los enlaces de texto son de color azul y subrayados. En este ejemplo cambiamos su color a rojo y eliminamos el subrayado cuando pasamos el ratón por encima del enlace.

Sin embargo la clasificación de las pseudo-clases es muy extensa. Por ejemplo :hover pertenece a las pseudo-clases dinámicas, también llamadas de acción de usuario por la W3C, pero hay muchas más como las que se basan en los elementos de entrada (:enabled o :checked), las estructurales que permiten la selección del elemento basándose en la información extra que existe en el árbol del documento pero que no es accesible mediante selectores básicos o combinadores (:first-child o :nth-of-type()) ... Prometo que me extenderé más en un artículo especifíco y veremos al menos las más usadas.

Pseudo-elementos

Un pseudo-elemento crea un nuevo elemento que no se ha especificado dentro del marcado, pero que podemos manipular al igual que cualquier otro elemento. Esto nos permite dar estilo a aquellas situaciones en las que ninguno de los anteriores selectores funciona, como por ejemplo dar estilo a la primera línea de una párrafo, o porqué no a la primera letra del mismo.

En cuanto a su notación se puede usar exactamente la misma que para las pseudo-clases para mayor compatibilidad con navegadores antiguos o "dobles dos puntos" (::), que es su notación correcta en la especificación de CSS3.


.caja::before {
    content: "";
    display: block;
    widht: 20px;
    height: 40px;
    background-color: blue;
}

En este ejemplo lo que hacemos es crear una caja de 20x40px y de color rojo inmediatamente antes de cada elemento cuya clase tenga el valor "caja". También ampliaremos las pseudo-clases en otro artículo más específico.

Jugando con el tiempo: el elemento time

noreply@blogger.com (LuisFran) — Sat, 27 Feb 2016 15:35:00 +0000

Imagen de Craig Sunter

Hay múltiples motivos por los que en alguna ocasión es necesario añadir fechas a nuestra página web. Desde la típica fecha para indicar la creación o modificación de un post o artículo, pasando por la fecha de un comentario o para indicar el comienzo de un evento o acontecimiento. En todos estos casos lo lógico es usar una fecha lo más legible posible de cara al usuario, ¿pero qué pasa con las máquinas?.

Si tenemos en cuenta los buscadores u otros tipos de programas que también pueden valerse de estas fechas, tenemos un serio problema, y es que los formatos que generalmente usamos de cara al usuario no son válidos para máquinas. Para ellas se crearon diez tipos de formatos de fechas diferentes, todas ellas en su mayoría numéricas y nada amigables de cara al usuario. Siendo así, ¿por quién nos decantamos, por la máquina o por el usuario?.

Para mí la respuesta es bien sencilla, siempre hay que decantarse por el usuario, a fin de cuentas escribimos para él. Pero para evitarnos rompederos de cabeza HTML5 nos da la etiqueta time que viene a solucionar este y otros embrollos con los formatos de las fechas.

El elemento time

El elemento time fue introducido por primera vez en la especificación de HTML5 en 2009, sin embargo fue eliminado en favor de data en 2011. Nuevamente volvió a ser reintroducido, pero en esta ocasión mejorado para permitir mas formatos de fecha/hora.

El elemento time es un elemento en linea, como bien puede ser span o img y al igual que estos dos tiene etiqueta de cierre. Representa una fecha y/u hora en el calendario Gregoriano y cuando se usa en su forma simple el contenido de este elemento debe ser un formato válido de fecha y/u hora. Es además uno de los nuevos elementos semánticos de HTML5. Aquí debajo te dejo un ejemplo:


<!-- 27 de Febrero de 2016 --!>
<time>2016-02-27</time>

El atributo datetime

Cuando usamos fechas de cara al usuario es evidente que el formato que usamos en el ejemplo anterior no es el más apropiado (sin obviar que cada cultura o región escribe las fechas de forma diferente), sin embargo y según la especificación de la W3C, si usamos la forma simple debe ser uno de estos formatos válidos para máquina el que necesariamente usemos, salvo que incluyamos el atributo datetime y pasemos a una forma más compleja.

El atributo datetime (que es opcional) viene a solucionarnos este problema, ya que es él quien contendrá la información en formato legible para la máquina, mientras que el elemento time contendrá la fecha y/u hora en formato legible para el usuario. Si usamos el ejemplo anterior nos quedaría de la siguiente forma:


<!-- 27 de Febrero de 2016 --!>
<time datetime="2016-02-27">27 de Febrero de 2016</time>

Formatos de fecha/hora para máquina

Bien cuando usamos la forma abreviada o cuando usamos la forma compleja con datetime, necesitamos usar alguno de los diez formatos válidos que la especificación permite para el elemento time.

Año y mes

2016-02

Muy sencillo, primero el año y después el mes

Fecha

2016-02-27

Parecido al anterior, también muy simple. Primero el año, luego el mes y por último el día

Fecha sin año

02-27

El mes primero que el día

Sólo la hora

14:52:37.257

Horas, minutos y segundos. Los segundos son opcionales y se pueden usar hasta tres dígitos para representar las fracciones de segundo.

Fecha y hora

2016-02-27T14:52:37

Combinación de fecha y hora, separadas por una T siempre mayúscula.

Zona horaria

+01:00

Comienza con un signo más o un signo menos. Los dos puntos (:) son opcionales. Si la zona horaria a representar es +00:00 se puede cambiar por una Z mayúscula.

Fecha y hora local

2016-02-27T14:52:37+01:00

Igual que el formato fecha y hora pero añadiéndole la zona horaria.

Para representar una semana

2016-W09

Primero el año seguido de una W en mayúscula y el número de semana correspondiente.

Para representar una duración

P3DT4H5M34.035S
3d 4h 5m 34.035s

En esta caso hay dos formatos posibles. En el primero comenzamos con una P mayúscula seguido de un valor para el día, que es opcional, y seguido de una T, también mayúscula. A continuación van los valores opcionales de horas, minutos y segundos. Todas las letras deben de ir en mayúscula.

El segundo formato es más sencillo. Horas, minutos y segundos. Las letras pueden ir tanto en mayúsculas como en minúsculas y los espacios son opcionales. También podemos usar semanas, con la correspondiente letra w.

Ventajas de usar time

A estas alturas creo que son bastante visibles las ventajas de usar este elemento semántico de HTML5. El tener la posibilidad de dar la fecha en dos formatos, uno para máquina y otro para el usuario, es una gran ventaja, por ejemplo para un evento global donde queremos que la fecha de cara al usuario se muestre según en la región en que se encuentre, posibilitando que la fecha sea más legible.

El hecho de dar una fecha válida en formato para máquina, ayuda a los buscadores a posicionar noticias muy sensibles en cuanto a la fecha, para no dar resultados que puedan dar lugar a equivocaciones, como noticias sobre terremotos, huracanes o alertas de carácter sensible a la población civil.

Cómo hacer un div clickable con CSS

noreply@blogger.com (LuisFran) — Sun, 14 Feb 2016 15:34:00 +0000

Imagen de Mike Schaffner

Es cierto que con HTML5 se ha ido avanzando y solucionado algunos de los problemas que se han presentando en el diseño web. El paso hacia la validación de formularios es un claro ejemplo de ese avance, sin embargo el supuesto avance en cuanto a los llamados enlaces de bloque (block-level links) no lo es tanto.

Hasta la implantación de HTML5 no era posible enlazar elementos de bloque, siendo un enlace un elemento en línea, únicamente era posible enlazar otro elemento en línea. Con HTML5 esto cambia, y ahora es posible enlazar por ejemplo, un div, algo muy práctico para conseguir que una región de una web sea enteramente clickable. El problema es que no todo lo que reluce es oro y hay pequeñas lagunas e inconvenientes que aconsejan no realizar este tipo de prácticas.

Empecé a jugar con la posibilidad de enlazar un div, que HTML5 ahora permite, cuando me dio por retocar el aspecto del blog, sobre todo en su index, e intenté hacer que cada resumen que aparece en la página principal fuese enteramente clickable. El resultado, un fracaso mayúsculo.

Al principio no entendí muy bien que estaba ocurriendo, hasta que rebuscando por la red (no hay nada que no se pueda encontrar) di con el problema. En HTML hay una regla fundamental que no se debe romper, los enlaces no se pueden anidar. Ese era el gran problema, como mis resúmenes contenían enlaces, al enlazar el resumen completo se producía un error en el HTML (cierto que podría haberlo obviado) y algo aún más importante, el enlace se cerraba antes de lo esperado, justamente cuando se encontraba con el primer enlace del resumen.

Podría haber pensado en retocar los resúmenes para que no tuviesen ningún tipo de enlace, y evidentemente hubiese funcionado. Sin embargo, me pareció demasiado restrictivo. En la mayoría de los CMS el resumen se genera a partir de un número x de caracteres del post o en caso de blogger (como es mi caso) a partir de donde se haya colocado "el salto". ¿Por qué ceñirme a escribir de una forma tan concreta?. Es más, lo normal es que un resumen lleve alguna imagen para ilustrarlo, y en múltiples ocasiones esta también va enlazada hacia una versión mas pesada de esa misma imagen, con lo cual el problema persiste.

Además de todo esto, hay un problema más, y es que Google aconseja no usar los enlaces de bloque, ya que a fin de cuentas el texto de anclaje del enlace es el que determina el significado del propio enlace. Es un texto descriptivo que nos dice de que va el enlace y lo que podemos encontrarnos si hacemos click, además que los buscadores lo tienen muy en cuenta (de ahí el consejo de Google) y por lo general este debe ser un texto corto y descriptivo. Por contra si enlazamos un resumen de un post, el número de palabras que llevará ese texto puede ser de unas 150 palabras (un resumen nada extenso), cosa que hace muy difícil a un buscador determinar la naturaleza del enlace, demasiada información nunca es buena.

Así que como yo seguía emperrado en conseguir que mis resúmenes fuesen áreas enteramente clickables cuando me pica el niki no hay quien me pare), no tuve más remedio que recurrir a una solución CSS. Al final no fue tan complicado: una posición absoluta, ajustar el enlace al tamaño del div y poco más. El código, el que sigue:


<div id="resumen">
  <a href="#" id="enlace"></a>
  <img src="#" alt="una imagen">
  <p>texto</p>
  <p>más texto</p>
</div>


#resumen {
  position: relative;
}

#enlace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

Como puedes ver sólo hay una condición indispensable, y es que la región que queremos que sea clickable debe contener el enlace, que puede tener o no texto de anclaje, en este caso no se lo he puesto. El resto consiste en ajustar el enlace al tamaño de su contenedor. Para ello posicionamos el contenedor (la región clickable) de forma relativa y el enlace de forma absoluta, así conseguimos que el enlace se salga del flujo pero quede posicionado dentro del contenedor. Luego lo posicionamos y le damos el tamaño de su contenedor, height y width al 100%. Por último le damos un z-index para asegurarnos que esté por encima del resto de elementos. Con esto ya tenemos nuestra región 100% clickable.

Cómo conseguir columnas de igual altura con CSS

noreply@blogger.com (LuisFran) — Sat, 06 Feb 2016 17:43:00 +0000

Imagen de Christian Hoppe

En la maquetación con CSS siempre ha habido dos problemas principales. Uno de ellos es como no el centrado, una cuestión que a priori parece de lo más sencilla, puede volverse una pesadilla si no tenemos claro como funciona el modelo de caja con el que trabajamos. El otro es conseguir que varios elementos tengan la misma altura, siendo su contenido completamente desigual.

En esto post no voy a tratar todas las formas de conseguir tal efecto, ya que muchas de ellas a día de hoy no son nada recomendables. Por supuesto en su día fueron un gran paso para conseguir un buen layout, como por ejemplo el conocido método de Dan Cederholm Faux Columns, que consiste en usar un contenedor general, que contendrá a las columnas, con una imagen de fondo que se repite verticalmente y que simula las columnas que deseamos (hay una versión más moderna de Doug Neiner que usa gradientes en vez de una imagen de fondo), el problema es que Faux Columns está pensado para diseños rígidos y no para diseños fluidos.

Otro de los grandes métodos es el de Matthew James Taylor, que queda a medio camino entre las Faux Columns de Dan Cederholm y el método de Doug Neiner. Consiste en anidar tantos contenedores como columnas vayamos a usar, y la última de ellas contendrá las columnas. Cada contenedor tendrá un color de fondo, y los flotaremos y posicionaremos relativamente con la intención de moverlos para conseguir visualmente las columnas. También haremos lo propio con las columnas, que también las flotaremos y posicionaremos relativamente para posteriormente moverlas. El problema es que a mi gusto se usa demasiado marcado HTMl, un contenedor por cada columna.

A vueltas con las tablas

A día de hoy las cosas son un tanto diferentes, y no es necesario realizar un gran marcado HTML o usar imágenes de fondo para conseguir igualar la altura de las columnas. Hay que tener en cuenta que no siempre hemos necesitado de estos métodos, ya que cuando creábamos los layouts con tablas (cosa que nunca debe de hacerse) el propio comportamiento de la tabla nos daba la solución sin más. Claro que fijándonos en esta propiedad sólo debemos recurrir a cambiar nuestro modelo de caja por display:table para conseguir exactamente lo mismo.

Hay que tener en cuenta el problema que a día de hoy tiene Firefox con la imágenes responsive para la cuales usamos max-width, ya que dentro de un contenedor con display:table no funciona esta propiedad (da igual que la imagen sea hijo directo o no). Aunque para todo hay una solución, como la que di en el artículo pasado Imágenes en diseño responsive: El problema de max-width.


<div id="contenedor">
    <div id="columna1"></div>
    <div id="columna2"></div>
    <div id="columna3"></div>
</div>


#contenedor {
    display:table;
}

#columna1, #columna2, #columna3 {
    display:table-cell;
}

Jugando con los márgenes

Este método usa margin, padding y overflow para conseguir igualar las columnas en altura. El truco consiste en dar un padding inferior lo suficientemente grande a cada columna y luego corregirlo con un margin negativo inferior de igual valor. Para que todo se vea bien ocultaremos el sobrante mediante overflow en el contenedor padre.


<div id="contenedor">
    <div id="columna1"></div>
    <div id="columna2"></div>
    <div id="columna3"></div>
</div>


#contenedor {
    overflow: hidden;
}

#columna1, #columna2, #columna3 {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

Las maravillas de flexbox

Flexbox o la caja flexible se ha vuelto la piedra angular de CSS3, más aún cuando es soportado por todos los navegadores en su última versión. Se puede hacer casi de todo y simplifica muchos casos en los que usábamos trucos y maquetaciones imposibles para conseguir, lo que a priori, CSS no nos ofrecía. Para el caso de igualar la altura de las columnas, también hay solución con flexbox.


<div id="contenedor">
    <div id="columna1"></div>
    <div id="columna2"></div>
    <div id="columna3"></div>
</div>


#contenedor {
   display: -webkit-flex;
   display: flex;
}

Sí, parece demasiado sencillo, y así es. Cuando definimos y contenedor con display:flex, todos sus hijos pasan a ser elementos flexibles y pueden beneficiarse del funcionamiento de la caja flexible. Por defecto en un contenedor definido con display:flex, la propiedad align-items toma el valor strech, lo hace que todos sus hijos tenga la misma altura, siempre que no modifiquemos el main-axis. Si te interesa saber como funciona esta "propiedad" más a fondo el artículo A Complete Guide to Flexbox de CSS-Tricks es la guía que necesitas.

Imágenes en diseño responsive: El problema de max-width

noreply@blogger.com (LuisFran) — Sat, 30 Jan 2016 16:05:00 +0000

En principio este venía a ser un artículo para solucionar el aparente problema con max-width cuando tratamos con imágenes en Firefox. Tras leer un montonazo de artículos y posts la conclusión es que no existe tal problema, al menos no al 100%. Suele funcionar bien, salvo cuanto tratamos con una tabla o definimos un div con display:table, este es el problema real, sin embargo hay montones de artículos pululando por la red que aseguran que max-width no funciona correctamente en Firefox. No es cierto, salvo al menos en los dos casos anteriores.

Así que como uno no es manco, voy a retomar el artículo desde otro punto. Vamos a ver como dar fluidez a las imágenes para un diseño responsive, y además abordaré el tema de max-width y sus problemas en Firefox dando una solución, que al menos a mi me funciona.

Lo primero de todo es tener claro que es un diseño responsive, que no es ni más ni menos que una evolución lógica del diseño líquido que se usaba hace algunos años, aunque mejorado con la incorporación de las media queries. En el diseño responsive trabajamos con medidas relativas, nada de medidas absolutas, y es ahí donde viene el problema con las imágenes, porque al fin y al cabo una imagen tiene unas medidas concretas.

La primera aproximación a una imagen fluida sería la siguiente:


img {
    width:100%;
}

Con esto conseguimos una imagen que se adapta al contenedor en el que se encuentra. Funciona muy bien si el contenedor es de igual o menor tamaño que la imagen, sin embargo cuando este es más grande la imagen se adapta a él y salvo que esta se un archivo SVG (gráficos vectoriales) se rompe, un efecto evidentemente nada deseable.

Por eso una de las reglas básicas para trabajar con imágenes en diseño responsive es usar la propiedad max-width, ya que nos fija el ancho máximo que tendrá el elemento sobre el que se aplique. Si por ejemplo tenemos una imagen de 400x250px, y aplicamos esta propiedad al 100%, como máximo la imagen tendrá el 100% de su ancho, osea 400px, con lo cual evitaremos que se rompa. Por contra si su contenedor es más pequeño, la imagen se adaptará a él y su ancho será el del propio contenedor. Para esta regla es aconsejable asignar el valor auto al alto de la imagen:


img {
   max-width:100%;
   height: auto;
}

Todo sería muy sencillo sino fuese por los bugs de algunos navegadores, en este caso no es IE como cabría esperar, sino Firefox, y es que el equipo de Mozilla lleva nada menos que desde el 2004 peleándose con la propiedad max-width, se han arreglado muchas cosas, pero su funcionamiento cuando tratamos con imágenes en tablas o con display:table no es el esperado.

La solución ha este problema, que puede no ser la más correcta, se me apareció, como suele ser habitual, de la forma más inesperada (podría haber sido una fórmula para acertar la primitiva, ¡pero no!). Los problemas con las imágenes comenzaron a producirse en este blog con la implantación del nuevo menú off-canvas, ya que para que el menú se adapte en alto al contenido usé la técnica para igualar columnas basada en diplay:table y display:table-cell, y ahí comenzaron las idas y venidas con Firefox.

Lo curioso es que la solución al problema sea usar las misma propiedad que lo causa para arreglarlo, sí has acertado display:table. De forma general las imágenes se suelen colocar desperdigadas por un post de una manera más o menos ordenada, en mi caso la cosa fue, por suerte, diferente. Para dar autoría a la foto uso un elemento figure, y dentro de él la imagen y un figcaption, de esta forma semánticamente la imagen y el elemento figcaption quedan directamente relacionados. El hecho de estar la imagen dentro de un contenedor padre de forma directa fue lo que me dio la idea al pensar en como funcionan las tablas, y por tanto los elementos con display:table.

Una tabla o un elemento definido con display:table, siempre que no se la asignen valores a width y height, se adapta a su contenido, ya que por defecto estos valores son auto. Eso sí, siempre y cuando le sea posible, ya que si su contenedor tiene un tamaño menor, entonces de adaptará a éste y no a su contenido. Con esta peculiar forma de comportamiento, conseguimos imitar el funcionamiento de max-width. Vemos un ejemplo y luego te explico:


<figure>
    <img src="#" alt="">
    <figcaption>texto asociado a la imagen</figcaption>
</figure>


figure {
    display:table;
}

img {
    width:100%;
    height:auto;
}

La imitación al comportamiento de max-width se consigue a causa de la imposibilidad de determinar el valor del tamaño de la imagen con un width del 100%, ya que el elemento figure toma su valor a partir del tamaño de la propia imagen, y la imagen a partir del tamaño de su contenedor y claro (la pescadilla que se muerde la cola) ¿cuál es el 100% de un valor indeterminado?. La cosa es, por contra, bien sencilla: figure toma el valor de su ancho en función al ancho de su contenido, como la imagen en este primer paso no tiene un valor aún definido, toma como valor su tamaño original, según el ejemplo que estamos usando 400x250px, así que el elemento figure tomará como ancho el valor de 400px. En el siguiente paso la imagen tomará el valor 100% de su contenedor, en este caso 400px, con lo que independientemente de donde esté contenido el elemento figure nunca sobrepasará el valor original de la imagen, evitando que esta se rompa.

Si el contenedor del elemento figure es menor que el tamaño original de la imagen, no hay problema, recuerda como funciona un elemento al que se le aplica la propiedad display:table. En este caso figure tomará el valor de su contenedor padre, y por tanto la imagen hará lo mismo, una perfecta imitación de la propiedad max-width.

Es una solución como otra cualquiera a un viejo problema, y no, no creo haber inventado la rueda (no tengo tanto ego), aunque por otra parte, nunca he visto esta forma de imitar la propiedad max-width y de paso solucionar el problemilla de Firefox con las imágenes en diseño responsive. Eso sí, nadie me puede quitar el cosquilleo que se siente al solucionar un problema sin mirar el examen del compañero de al lado :-).

Uso de varios elementos H1: Con HTML5 se puede

noreply@blogger.com (LuisFran) — Sat, 23 Jan 2016 08:28:00 +0000

Las etiquetas H son desde hace mucho una de las piedras angulares del SEO. Evidentemente el SEO abarca mucho más, pero son pocos los artículos que podemos encontramos sobre esta materia que en algún punto no mencionen el uso correcto de estas etiquetas. Por desgracia la inmensa mayoría de estos posts son pre-HTML5 y por tanto se guían por el gran dogma de la etiquetas H, "no puede haber más de un H1 por página o documento".

Sin embargo, y con la llegada de HTML5, hasta esto ha cambiado. Como no podía ser de otra manera el uso de varias etiquetas H1 debe de hacerse de forma lógica y controlada (nuestro documento no puede convertirse en una amalgama de etiquetas H1), y siguiendo rigurosamente las reglas que la W3C nos da para que nuestro documento sea correcto, al menos en cuanto a semántica se refiere. Hay que tener en cuenta que no todo el mundo está de acuerdo con esta práctica (siendo en HTML5 del todo correcta) y los expertos en SEO suelen ser bastante recelosos, aunque como verás en este artículo su uso es una cuestión 100% lógica.

¿Qué es y qué no es una etiqueta H?

Confundir conceptos es lo que generalmente nos lleva al mal uso de las etiquetas H. Por experiencia se que hay una tendencia generalizada a usar estas etiquetas como marcadores de título, y no, una etiqueta H no es una etiqueta de título, es una etiqueta de encabezado.

Cierto que un encabezamiento es a fin de cuentas un título, pero un título no es necesariamente un encabezamiento. Un encabezamiento lleva implícito la creación de una nueva sección de contenido y un título puede ir por ejemplo sobre un sidebar (que no necesariamente tiene contenido), un widget del tipo predicción meteorológica o un calendario (que evidentemente no son contenido) o una simple lista de enlaces cualquiera (que a mi ver tampoco es contenido). ¡Si lo que queremos es resaltar un título para eso tenemos CSS!. Según la W3C los elementos h1-h6 no deben ser usados para marcar subencabezados, subsecciones, títulos alternativos o eslogans.

Lo básico para un buen uso es determinar que títulos de nuestra web son o no son encabezados, y a partir de ahí distribuir nuestras etiquetas H de una forma lógica y ordenada, recuerda que al fin y al cabo son etiquetas estructurales. No tiene mucho sentido crear una sección con un H2 y que esta nueva sección que hemos creado en su interior contenga una etiqueta H1 (¿por qué iba a ser más importante una subsección que la propia sección principal?), aunque es correcto no es una buena práctica.

El porqué del uso de varios elementos H1

El problema semántico que genera el uso de una única etiqueta H1 en un documento no es nuevo, es mas, este se agrava cuando pensamos en la estructura de un sitio al completo. Para que veas de lo que estoy hablando voy a hacer un marcado general de un blog. Con su página principal (o índice) y una página de un post será más que suficiente:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>El batiburrillo</title>
   </head>
   <body>
      <div>
         <h1>El batiburrillo</h1>
         <p>Un blog para hablar de todo un poco.</p>
      </div>
      <div>
         <h2>Una manzana al día ...</h2>
         <p>Contenido del artículo.</p>
      </div>
      <div>
         <h2>El nuevo iphone</h2>
         <p>Contenido del artículo.</p>
      </div>
   </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>El batiburrillo</title>
   </head>
   <body>
      <div>
         <p>El batiburrillo</p>
         <p>Un blog para hablar de todo un poco.</p>
      </div>
      <div>
         <h1>Una manzana al día ...</h1>
         <p>Contenido del artículo.</p>
      </div>
   </body>
</html>

Este es el marcado general de cualquier blog pre-HTML5. Vemos que en el índice damos mucha importancia al nombre del blog, que a fin de cuentas es su marca, pasando los artículos que aparecen (que puede ser o no resumidos) a un segundo plano. ¿Acaso no tienen la misma importancia?.

En un blog como en el del ejemplo, donde se habla de todo, es muy difícil que un buscador puede interpretar el asunto de la página, teniendo en cuenta que el contenido de la única etiqueta H1 en un marcado pre-HTML5 denota también la temática del documento. Una marca, el título de un blog, o el nombre de una empresa no tienen porqué dar ninguna pista sobre la temática del documento, sin embargo es lógico etiquetarlo así para darle importancia, para una empresa su nombre o marca está por encima de todo.

También hay que tener en cuenta los esquemas o resúmenes que se generan a partir de cualquier documento (son como una tabla de contenido del sitio web), y que hasta la llegada de HTML5 se hacían a partir de las etiquetas de encabezado, haciendo difícil distinguir entre los dos artículos del ejemplo (de temática dispar), que a efectos prácticos son igual de importantes y que sin embargo pasan a ser parte de un único contenido, el marcado por el H1.

Cuando pasamos al artículo, la cosa cambia. Ahora damos más importancia al título del artículo, ya que el documento va a tratar enteramente sobre ello. ¿Acaso ahora no es importante el título de nuestro blog?. Piensa ahora en que pasaría si fuese el nombre de una gran empresa, ¿sería capaz de diluir su marca en favor de un artículo?. Ten en cuenta también, que además de un cambio en el marcado HTML, supone además un cambio en nuestra hoja de estilos para que a ojos del usuario nada cambie.

La solución: las nuevas etiquetas de HTML5

Las etiquetas semánticas, de las que empecé hablando en Semántica en HTML5 (I): Header, son la solución a este problema, ellas y el nuevo algoritmo de esquema de HTML5, que ya no se apoya únicamente en las etiquetas de encabezado para su generación.

De todas estas nuevas etiquetas tan sólo cuatro de ellas son etiquetas seccionadoras: section, article, nav y aside, y siempre que abramos una nueva sección con una de estas etiquetas es posible usar un H1. En sendos artículos de la W3C sobre los elementos h1-h6 y encabezados y secciones podemos ver ejemplos sobre su uso. Siguiendo las directrices de la W3C nuestro blog de ejemplo quedaría de esta forma:


<!DOCTYPE HTML>
<html>
   <head>
      <title>El batiburrillo</title>
   </head>
   <body>
      <div>
         <h1>El batiburrillo</h1>
         <p>Un blog para hablar de todo un poco.</p>
      </div>
      <article>
         <h1>Una manzana al día ...</h1>
         <p>Contenido del artículo.</p>
      </article>
      <article>
         <h1>El nuevo iphone</h1>
         <p>Contenido del artículo.</p>
      </article>
   </body>
</html>


<!DOCTYPE HTML>
<html>
   <head>
      <title>El batiburrillo</title>
   </head>
   <body>
      <div>
         <h1>El batiburrillo</h1>
         <p>Un blog para hablar de todo un poco.</p>
      </div>
      <article>
         <h1>Una manzana al día ...</h1>
         <p>Contenido del artículo.</p>
      </article>
   </body>
</html>

El uso de varias etiquetas H1 está aprobado por la W3C, es a fin de cuentas una solución a una serie de problemas y a todas luces genera un documento 100% correcto, si no me crees compruébalo en el validador de la W3C. El único problema es una advertencia en cuanto a accesibilidad desde un screenreader, aunque como en todo lo nuevo es cuestión de que estas tecnología también se actualicen.

En cuanto al SEO no debe haber ningún tipo de problema. La norma del uso de un único H1 para todo el documento ya no existe en HTML5, así que es de esperar que los motores de búsqueda se hayan adaptado a ello, al menos Bing y Google sí. Si quieres un artículo más completo o aún no te he atraído al lado oscuro de la fuerza, léete este post de Kezz Bracey, a mi me convenció.

Cómo hacer un menú off canvas en CSS puro

noreply@blogger.com (LuisFran) — Sat, 09 Jan 2016 15:18:00 +0000

Ahora que ya han pasado las fiestas y hemos dejado atrás las comilonas, las cenas familiares y con amigos, y las resacas de champán, cava y otras bebidas espiritosas, es momento de dar el siguiente paso tras crear el típico botón estilo hamburguesa y ponernos manos a la obra para darle uso, y que mejor forma que hacerlo con un menú off canvas (menú oculto).

Para ello vamos a hacerlo al estilo Hexagonal Alien (a pelo), usando únicamente CSS, apoyándonos en el uso de una checkbox al igual que hicimos en el post anterior cuando creamos el icono estilo hamburguesa. El menú va ha ser muy sencillito, además voy a explicarlo paso a paso, así que menos cháchara y al lío.

Lo primero de todo es hacernos una idea general de lo que queremos conseguir, ya que un menú off canvas puede hacerse de varias formas. Nosotros vamos a hacerlo moviendo todo el contenido, así que necesitaremos una caja de carácter general donde meterlo todo (luego explicaré el porqué). También otra caja que contendrá el contenido de la web, otra para el menú y como no, la dichosa checkbox.

Como vamos a aprovechar el botón que creamos en el post anterior, tendremos que hacer una pequeña modificación, ya que únicamente necesitamos una checkbox y la del botón no nos sirve donde está colocada. Podemos aprovechar toda la maquetación que hicimos para el botón, pero la checkbox la sacaremos al contenedor de carácter general, e irá justo antes que el contenedor para el contenido y que el menú (también te explicaré el porqué). Dentro del contenedor para el contenido pondremos nuestro icono estilo hamburguesa encargado de hacer que todo se mueva. Con todo esto el HTML nos queda así de sencillo:


<div id="wrapper">
  <input type="checkbox" name="button-flag" value="flag" id="flag">
  <div id="content-wrapper">
    <label id="hamburger" for="flag"><span></span>
    </label>
    <p>Contenido</p>
  </div>
  <div id="menu">
    <a href="#">Enlace1</a>
    <a href="#">Enlace2</a>
    <a href="#">Enlace3</a>
    <a href="#">Enlace4</a>
  </div>
</div>

Ahora vamos con las explicaciones: En primer lugar hemos creado un contenedor de carácter general, su misión es muy sencilla, nos va a ocultar el sobrante cuando movamos el menú y el contenido, mediante la propiedad overflow de CSS, ya que sino se nos creará una barra de desplazamiento inferior.

En segundo lugar hemos creado otro contenedor para el contenido de la página, exceptuando el menú y la checkbox, con la única finalidad de poder desplazar este contenido, un menú que vamos a colocar off canvas poniéndolo en posición absoluta y la checkbox, que como puedes ver va antes que el contenido y el menú.

La explicación para colocar la checkbox de esta forma es bien sencilla, los selectores de CSS funcionan en un único sentido (al igual que CSS), de arriba a abajo y de fuera a dentro, con lo cual necesitamos que esté antes que los elementos con los que vamos a interactuar: menú, contenido y botón.

Lo siguiente es darle forma a los contenedores, y posicionar el menú en función al ancho que vayamos a darle. También daremos estilo a la checkbox (únicamente vamos a hacer que desaparezca) e igualaremos la altura del menú a la del contenido (usando display:table y display:table-cell):


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

#content-wrapper {
    position: relative;
}

#menu {
    position: absolute;
    top: 0;
    left: -18em;
    display: table-cell;
    width: 18em;
    height: 100%;
    background: #314d67;
}

#flag {
    display: none;
}

El siguiente paso es animar el menú, para lo cual hay que tener en cuenta el ancho del mismo, que es la distancia que vamos a mover tanto el menú como el contenido:


#content-wrapper {
    transition: all .25s;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

#menu {
    transition: all .25s;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

#flag:checked + #content-wrapper,
#flag:checked ~ #menu {
    -webkit-transform: translateX(18em);
            transform: translateX(18em);
}

La animación es bien sencilla, únicamente movemos el contenido y el menú sobre el eje X cuando tenemos marcada la checkbox y volvemos a la posición inicial cuando está desmarcada. A continuación vamos a maquetar el menú, no es necesario para su funcionamiento, pero ya que estamos vamos a dejarlo presentable:


#menu a:hover {
    transition: background .25s;
    background: #1e3a54;
}

#menu a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: .8em;
    height: 100%;
    content: '';
    transition: -webkit-transform .25s;
    transition: transform .25s;
    -webkit-transform: translateX(-3em);
            transform: translateX(-3em);
    background: #2e6b55;
}

#menu a:hover:before {
    -webkit-transform: translateX(0em);
            transform: translateX(0em);
}

Por último, y esto tampoco es necesario, vamos a cambiar el aspecto del botón que creamos en el post anterior para que no desentone con el aspecto del menú. Además hay que cambiar los selectores, acuérdate que la principio del post cambiamos la checkbox de sitio, quedando el código de esta manera:


#hamburger {
    position: relative;
    display: block;
    width: 3em;
    height: 3em;
    cursor: pointer;
    background: #1e3a54;
}

#hamburger span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 2em;
    height: .3em;
    margin: auto;
    transition: background 0s .5s;
    background: #fff;
}

#hamburger span:before,
#hamburger span:after {
    position: absolute;
    width: inherit;
    height: inherit;
    content: '';
    transition-delay: .5s, .25s;
    transition-duration: .25s, .25s;
    background: #fff;
}

#hamburger span:before {
    top: -.7em;
    transition-property: top, -webkit-transform;
    transition-property: top, transform;
}

#hamburger span:after {
    bottom: -.7em;
    transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
}

#flag:checked + #content-wrapper #hamburger span {
    background: none;
}

#flag:checked + #content-wrapper #hamburger span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

#flag:checked + #content-wrapper #hamburger span:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#flag:checked + #content-wrapper #hamburger span:before,
#flag:checked + #content-wrapper #hamburger span:after {
    transition-delay: .25s, .5s;
}

Como en el post anterior he creado un pen para que veas como funciona y puedas trastear con él todo lo que quieras: arriba, abajo, a la izquierda, a la derecha, pero nunca adelante ni atrás en el tiempo (eso me lo guardo xD):

See the Pen mVROZx by amram (@amram1977) on CodePen.

Icono animado estilo hamburguesa sólo con CSS

noreply@blogger.com (LuisFran) — Thu, 31 Dec 2015 08:31:00 +0000

Imagen de torbakhopper

En plenas fechas navideñas y después de días y días de comilonas, turrones y mazapanes, brindis y más brindis, creo que es un buen momento para parar, centrar la cabeza (y también el estómago), hacer balance y aprovechar para publicar el último post del año, para inevitablemente volver a la rueda de brindis y más brindis.

Como queda bien poco para Fin de Año, hoy voy a abordar uno de esos posts de los que realmente me gustan, un post que sirva para algo más que llenar páginas, un post útil (o al menos eso voy a intentar). Vamos a crear un botón estilo hamburgesa, el típico botón para un menú oculto, que además será animado, y para ello sólo vamos a usar CSS. ¡Ahí es na!

El botón que vamos a crear tendrá dos posiciones, una será una hamburguesa y la otra una X, dos posiciones bien reconocibles para mostrar u ocultar un menú. Cuando nos encontramos con un caso así lo primero que echamos en falta en CSS es la posibilidad de memorizar un estado, por ello en la mayoría de las ocasiones se termina recurriendo a una solución Javascript o similar. Sin embargo en CSS hay casi de todo, y las etiquetas de CSS se pueden usar de otras formas para las que inicialmente no fueron concebidas.

Para memorizar el estado en el que se encuentra nuestro botón vamos a usar una checkbox. Sí, a fin de cuentas una checkbox tiene dos estados, seleccionada y deseleccionada, así que valiéndonos de esta propiedad y apoyándonos en una simple etiqueta label podemos pasar por alto el uso de un lenguaje de programación web. El marcado inicial en HTML es, como verás, bien sencillo:


<label id="hamburger">
  <input type="checkbox" name="button-flag" value="flag" id="flag">
  <span></span>
</label>

La etiqueta label tiene una peculiaridad que nos viene muy bien, y es la de activar o desactivar una checkbox cuando esta es hija suya o si está asociada a ella. En nuestro caso la etiqueta input es hija de la etiqueta label, con la cual ya la tenemos asociada. Ahora lo que vamos a hacer es convertir la etiqueta label en nuestro botón y dibujar la hamburguesa valiéndonos de la etiqueta span (también hija de la etiqueta label) y los pseudoelementos before y after. Evidentemente ocultaremos la checkbox, ya que sólo nos es útil como memoria binaria:


#flag {
    display: none;
}

#hamburger {
    position: relative;
    display: block;
    width: 4em;
    height: 4em;
    cursor: pointer;
    background: #ff9700;
}

#hamburger span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 3em;
    height: .4em;
    margin: auto;
    background: #fff;
}

#hamburger span:before,
#hamburger span:after {
    position: absolute;
    width: inherit;
    height: inherit;
    content: '';
    background: #fff;
}

#hamburger span:before {
    top: -1em;
}

#hamburger span:after {
    bottom: -1em;
}

Ahora lo que nos queda es animarla. La animación consta de dos partes: primero juntamos las líneas que forman la hamburgesa y ocultamos la línea central justo en el momento en que se juntan. En segundo lugar giramos las dos líneas restantes 45 y -45 grados para dibujar una X. Para ello tenemos que tener en cuenta el tiempo que queremos que dure cada animación y hacer que se vayan concatenado en secuencia. Para volver al estado inicial (pasar de X a hamburguesa) sólo tenemos que invertir la animación. Para todo ello nos apoyaremos en la checkbox para saber el estado en el que estamos, suena complicado, pero no lo es tanto:


#hamburger span {
    transition: background 0s .25s;
}

#hamburger span:before,
#hamburger span:after {
    transition-delay: .25s, 0s;
    transition-duration: .25s, .25s;
}

#hamburger span:before {
    transition-property: top, -webkit-transform;
    transition-property: top, transform;
}

#hamburger span:after {
    transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
}

#flag:checked + span {
    background: none;
}

#flag:checked + span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

#flag:checked + span:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#flag:checked + span:before,
#flag:checked + span:after {
    transition-delay: 0s, .25s;
}

Con esto ya tenemos creado nuestro icono hamburgesa y tan sólo hemos usado CSS. Para este minitutorial he creado también un Pen para que veas el resultado que da el código y además puedas trastear con él todo lo que quieras, pues personalmente creo que es la mejor forma de aprender y ver como funcionan realmente las cosas:

See the Pen Pure CSS animated hamburger button by amram (@amram1977) on CodePen.

Espero que al menos el tutorial te haya sido útil, que en esencia era la base para hacerlo, y por si nadie te lo ha dicho (cosa que dudo horrores), ¡feliz Navidad y próspero 2016!

Semántica en HTML5 (V): nav y main

noreply@blogger.com (LuisFran) — Fri, 18 Dec 2015 15:27:00 +0000

Tras unos cuantos días sin publicar nada, muchos más de los que me hubiese gustado, he decidido dar carpetazo a la serie de artículos sobre la semántica en HTML5 aunando dos etiquetas que nada tienen que ver en un único artículo. Con estas dos nuevas etiquetas finalizaré una estructura básica que puede ser usada para construir cualquier web y que además será 100% semántica, que es a fin de cuentas lo que buscaba con esta serie de artículos.

Por supuesto la semántica en HTML5 es mucho más amplia, y voy a obviar etiquetas como address o time (al menos de momento), porque son menos generales y no suelen conformar la estructura básica de una web. Además también queda pendiente el tema de los datos estructurados mediante los esquemas de Schema.org, un punto también muy importante cuando se habla sobre la semántica de una web y que en algún momento tocaré en un futuro artículo (promesa de año nuevo xD). Así que sin más vueltas, vamos a ensuciarnos las manos como buenos alienígenas que somos.

Vamos a comenzar por una de las etiquetas más básicas, que a buen seguro no te costará para nada entender (y más si te has leído los capítulos anteriores de esta entrega), que es la etiqueta nav. Según la información que nos proporciona la W3C, nav representa una sección de una web que enlaza otras páginas o partes de la página, o lo que viene a ser lo mismo, un menú de navegación. Sólo hay que tener en cuenta que el fin de la etiqueta nav no es la de etiquetar cualquier enlace, sino únicamente aquellos que conformen una navegación principal.

Con esta definición creo que queda bastante claro que sólo usaremos nav para el típico menú principal de navegación que suele tener cualquier web, los típicos enlaces de navegación "prev next" de Blogger o quizás también una nube de etiquetas, porque todos ellos nos llevan a partes importantes de nuestra web y forman parte de las opciones de navegación que ofrecemos a nuestros usuarios, evidentemente nunca debe de usarse para un blogroll.

La otra etiqueta que vamos a tratar y que posteriormente nos ayudará a construir una web semántica, es la etiqueta main. El elemento main es el más nuevo de todos los que hemos tratado hasta ahora, de hecho comenzó siendo una extensión de HTML y se fue desarrollando de forma separada, aunque en estos momentos ya está integrada en la especificación de HTML.

Aunando el wiki de la W3C y la extensión de la especificación para HTML5 de main, tambień de la W3C, podemos sacar como conclusión que main viene a sustituir la sección del contenido que generalmente se suele etiquetar con una id main o content y que su finalidad es la de englobar el contenido principal de un documento o aplicación. Sólo un apunte, únicamente puede haber un main por documento, ya que a fin de cuentas no es una etiqueta para seccionar contenido, para eso tenemos section o article.

Llegados a esto punto es cuando por fín vamos a ensuciarnos las manos. Voy a echar mano de la última plantilla que usamos en Semántica en HTML5 (III): article y section y a darle el toque final para obtener una plantilla base semántica en HTML5. Omitiré la inclusión de la etiqueta aside, por ser poco generalista, ya que como vimos en Semántica en HTML5 (IV): aside es una etiqueta con unos requisitos para su uso un poco más especiales y a mi gusto no se adapta muy bien a una plantilla base, así nos evitaremos que a alguno le de por enmarcar su sidebar con este etiqueta.


<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>
 <header id="cadecera">
  <nav id="menu">Menú de navegación</nav>
  <img src="logo.gif">
  <p>título del blog</p>
  <form id="busqueda">formulario de búsqueda</form>
 </header>
 <main id="contenido">
  <article class="post"> 
   <header class="encabezado-post">
    <h1>Título del post</h1>
    <time>Fecha de publicación</time>
    <p>Autor del post</p>
   </header>
   <div class="contenido-post">
    ...
   </div>
   <footer class="post-footer">
    nº de comentarios, tags
   </footer>
  </article>
 </main>
 <footer id="footer">
  copyright, condiciones de uso, etc.
 </footer>
</body>
</html>