Nada por aquí, nada por allá... 14 maneras de desaparecer con CSS 8.9.17

Nada por aquí, nada por allá... 14 maneras de desaparecer con CSS

¿Que tienes un elemento en el html y quieres hacerlo desaparecer cual mago magoso? Nada más sencillo. Te pones la capa de invisibilidad de CSS, das unos pases con la varita mágica y ¡oh sorpresa!... ya no está.

Pero algo tan sencillo no tiene una forma única de lograrse. Y dependiendo de la vía o propiedad que uses tendrá unos efectos u otros, tanto sobre el propio elemento como sobre el resto de ellos posteriores a él.

Y de eso va el post de hoy. De ver diferentes maneras [ampliado: de 8 a 10 no, 14] de hacer desaparecer elementos con CSS.

Opacity: 0

La propiedad opacity fue introducida en los primeros borradores de CSS3. Controla el grado de transperencia de un elemento y todo lo contenido en él. Puesto a cero(0) hace que el elemento desaparezca de la vista del visitante. Pero no altera su lugar en el flujo del documento. Para el resto de elementos sigue estando presente.

No se hereda pero el valor computado para los hijos es el declarado al padre. Se puede animar, por lo que es apropiada para efectos tipo "fade".

Visibility: hidden

Similar en el efecto a opacity. El elemento desaparece de la vista pero no del flujo del documento. No es animable, se hereda pero en los hijos se puede revertir declarandoles visibility: visible.

Display: none

Además de ocultar de la vista al elemento lo saca del flujo. Así que el resto de ellos se comportan como si no existiese en el DOM.

A efectos es como declarar visibility: hidden y position: absolute.

El valor del padre es heredado por los hijos y no se puede animar. Se revierte declarando cualquier otro valor de los admitidos por la propiedad display [incluyo las últimas novedades del doc "CSS Display Module Level 3"].

display: contents

Ampliado Enero de 2016

Uno de los efectos de alternar el valor de display: none con cualquier otro es el relativo a la carga que supone para el navegador por los reflows y repaints asociados.

Además como el uso de la declaración display: none supone que todo el contenido del elemento se ve afectado y no hay forma de anularlo selectivamente para un hijo cualquiera sin cambiar dicho valor para el padre. Cambio que conlleva una "carga" excesiva por la cascada de CSS.

El valor 'contents' de la propiedad display, a diferencia de none, declarado a un elemento suprime la caja generada por dicho elemento pero manteniendo las de sus hijos contenidos en él.

Esto es, el elemento que porta dicha declaración actúa como si tuviese declarado una especie de display: none; para sí. No crea nodo en el DOM, pero sus sus hijos sí. Así que éstos son mostrados y serán tratados por el navegador como si fuesen nodos directos de su "abuelo".

box-suppress

Ampliado Enero de 2016

Otra forma de evitar los efectos apuntados antes de la declaración display: none que recoge el documento "CSS Display Module Level 3" es la nueva propiedad box-suppress para lograr el efecto "toggle" (mostrar/ocultar) una caja sin necesidad de cambiar su naturaleza o display.

Además otro diferencia entre display y box-suppress es que los elementos ocultados con la segunda, a diferencia de la primera, siguen computándose como presentes por lo que son tenidos en cuenta en otras propiedades como los contadores CSS tradicionales, lo relativo a @counter-style, las animaciones... étc.

Los valores admitidos para la propiedad CSS box-suppress son:

show

El elemento genera caja del tipo que le correspondan según el valor de su propiedad display.

discard

El elemento no genera caja

hide

El elemento genera caja como lo haría normalmente, pero ni participa en la composición del layout ni se mostrarán.

Contras de box-suppress

Frente a todas estas ventajas de box-suppress frente a display para ocultar elementos tiene un gran inconveniente al momento de escribir esto [2016] es que aún no es soportada por ningún navegador.

Tamaños a 0

Otra forma de hacer desaparecer de la vista a un elemento y su contenido es declarar sus tamaños, anchura y altura, a cero (0). Es conveniente evitar el desborde de su contenido con overflow: hidden y si es un elemento "inline-block" prevenir que en ciertos navegadores y versiones 'line-height' influya poniéndola a cero.

El uso conjunto estas dos últimas (display + tamaños) se emplean desde siempre para hacer aparecer menús de opciones ocultas y los acordeones.

Position: absolute

position: absolute junto a un desplazamiento lo suficientemente grande con alguna de las cuatro propiedades de colocación (lef/top/right/bottom) lo hace desaparecer al sacarlo del campo de visión o viewport.

'Position' no es animable pero sí el desplazamiento del elemento al cambiar el valor de su posición.

Text-indent

Ampliado Enero de 2016

La propiedad text-indent con un valor absoluto lo suficientemente alto sería el equivalente al anterior [Position: absolute] para los elementos en línea.

Usada tradicionalmente no tanto para ocultar si no para sustituir un elemento por otro con ayuda de pseudoelementos. Un valor en negativo (ie -9999px tradicional) sólo es efectivo en escrituras con direction: LtR.

En el presente es una técnica que recomiendan evitar porque, entre otras cuestiones, obliga al navegador a crear una caja tan grande como el valor declarado y que no se tiene la certeza absoluta de que no se mostrará en cualquier ciscunstancia y situación.

Jeffrey Zeldman en 2012 propuso una variante a esta técnica para evitar estos inconvenientes.

Transform

Con las transformaciones CSS (ya sean 2d o 3d) también podemos ocultar de la vista elementos.

Transform: scale(0)

A efectos prácticos tiene los mismos efectos que 'visibility: hidden' u 'opacity: 0'. El resto de elementos se comportan exactamente igual que antes de aplicar la transformación. Las variaciones en el tamaño del elemento con 'transform; scale()' no produce reordenación en el resto. No hay movimientos en los elementos posteriores del DOM.

Es animable.

Transform: translate()

Equivalente al método de desplazar un valor lo suficientemente grande con las propiedades de ubicación. La diferencia es, como en el caso de 'scale()', que a todos los efectos menos al visual es como si no existiese transformación.

También es animable.

Clip

Aporte de Emilio Cobos en los comentarios

Utilizando la propiedad clip para recortar al elemento y que deje de ser visible. Si en vez de utilizar un valor de 0 (cero) declaras un recorte a 1px el contenido sigue siendo oculto pero es accesible por los lectores de pantalla: clip: rect(1px, 1px, 1px, 1px);.

Recuerda que esta propiedad necesita para ser efectiva que el elemento esté posicionado de forma absoluta.

No es animable. Para revertir el recorte y dejar ver la totalidad del elemento puedes utilizar el valor 'auto': clip: auto

Propiedad CSS Clip-path

Ampliado

La propiedad CSS clip-path es la sustituta de la obsoleta clip: rect() de CSS2.1. Su finalidad es aplicar cualquier patrón de recorte a los elementos, no sólo rectangulares.

Su valor admite no sólo una lista de pares de puntos (coordenadas) separadas por comas si no la función CSS url(#id) para utilizar cualquier path SVG.

Otra ventaja de usar la propiedad CSS clip-path frente a Clip es que además de ocultar la totalidad del elemento permite hacer ocultamientos selectivos. Esto es: mostrar la parte o partes (no adyacentes) que nos interese.

Es animable a condición de que el número de coordenadas sea igual

Te recomiendo la lectura del artículo de este blog Propiedad CSS Clip-path y cómo animarla

A continuación la ampliación realizada en Mayo de 2015 con dos nuevas formas basadas en los filtros CSS.

Filtros CSS

Una vez que los filtros Css habitan entre nosotros y ya tienen un soporte aceptable, ya sea con el valor en palabra clave o con rutas a filtros SVG, podemos ampliar esta lista de "desapariciones" con dos más basadas en ellos.

Filter: opacity

Con la declaración filter: opacity(0); conseguimos el mismo efecto que con la propiedad opacity.

Pero si el efecto es el mismo, no lo es la carga que le supone al navegador.

Filter: blur

Usando el filtro blur con un valor lo suficientemente alto también haremos desaparecer un elemento. Si dicho valor se queda corto notarás "su sombra".

See the Pen MwyoeZ by Kseso (@Kseso) on CodePen.

Este método lo incluyo como ejemplo de lo que es posible, pero recuerda que el filtro blur cuanto mayor es su valor más costoso es para el navegador. Así que en función de las características del equipo y de dicho valor pueden llegar a ralentizar el funcionamiento de la página.

Los fltros CSS, como puedes ver en la demo previa, admiten animaciones. El comportamiento del resto de elementos es el mismo que con "opacity" o "visibility": la desaparición sólo es a efectos visuales; no se muestra pero para el resto de elementos sigue estando presente.

El "acabose" o no

Al hablar de si admite o no animaciones me refiero por igual a que surta efecto la propiedad 'transition' o poder ser usada en animaciones CSS (@keyframes + animation).

De las distintas formas de hacer desaparecer un elemento con CSS ninguna es mejor que otra. Símplemente cada propiedad (con su valor adecuado) tiene unas particularidades y en nosotros está optar por una u otra para aprovechar sus ventajas y evitar los efectos indeseados que en cada caso pueda aportar una u otra.

Algunas de estas particularidades tiene que ver con tres temas. Uno que debería ser prioritario y siempre presente, el otro sólo si te quita el sueño o eres del que todo lo supedita a él y el último el público al que diriges tus contenidos y las herramientas (navegadores) que utilizan:

1. Accesibilidad del contenido:
   Creo que el mejor lugar (en español) donde comenzar a buscar la incidencia de alguna práctica en la accesibilidad del contenido es el blog de @olgacarreras. Y para comenzar nada como este veterano post (2011): Ocultar contenido sin comprometer la accesibilidad
2. SEO y presencia en buscadores
   Terreno minado y con el que no comulgo ni poco ni mucho. Tan cambiante como el tiempo en Marzo. Como son tantas las opiniones, prácticas y tendencias nada como preguntarle a su dios para cada una de ellas. I.E.: "display: none" + "accesibilidad"
3. Soporte por navegadores
   En este artículo recojo formas tan tradicionales como display: none y tan nuevas (recién formuladas) como los filtros o box-suppress. Las primeras con soporte universal y las segundas depende de... muchas cosas. Así que lo mejor es que en cada momento consultes el "estado actual" en sitios como caniuse.com.

Artículo publicado originalmente en Febrero de 2014. Actualizado por ampliación en Mayo de 2015 y Enero de 2016

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso