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

Catorce maneras de hacer desaparecer u ocultar elementos con CSS y sus particularidades. Formas de uso, pros y contras de cada una de ellas desde distintos puntos: accesibilidad, seo, soporte por navegadores...

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

Por Kseso ✎ 17
Nada por aquí, nada por allá... 13 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

Amigos que hacen cosas

Dronic Servicios AéreosDronic Servicios Aéreos
Dronic Servicios Aéreos: imágenes aéreas de calidad

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 Don Kseso Kseso

Comentarios: 17

  1. No nos olvidemos de una poco utilizada : 'z-index'.

    <html>
    <head>
    <style type="text/css">
    #alfa {
    width: 100px; height: 100px;
    margin: 0 auto;
    background-color: rgba(128,0,0,.8); /* transparencia para ver qué hay detrás */
    position: relative;
    z-index: auto !important;
    }

    #bravo {
    width: 50px; height: 50px;
    background-color: lime;
    position: absolute;
    top: 25px; left: 25px;
    z-index: auto; /* -1 para ocultar bravo detrás de alfa */
    -webkit-animation: giro 5s ease-in-out infinite;
    animation: giro 5s ease-in-out infinite;
    }

    @keyframes giro {
    0% {left: 25px; z-index: 1; }
    25% {left: 125px; z-index: -1; }
    50% {left: 25px; z-index: -1; }
    75% {left: -75px; z-index: -1; }
    100% {left: 25px; z-index: 1; }
    }
    @-webkit-keyframes giro {
    0% {left: 25px; z-index: 1; }
    25% {left: 125px; z-index: -1; }
    50% {left: 25px; z-index: -1; }
    75% {left: -75px; z-index: -1; }
    100% {left: 25px; z-index: 1; }
    }
    </style>
    </head>
    <body>
    <div id=alfa>
    <div id=bravo></div>
    </div>
    </body>
    </html>


    También es animatable, pero solamente pasa entre valores enteros.


    Como siempre, otra buena colección de métodos en tu blog.

    ResponderEliminar
    Respuestas
    1. Hola Furoya
      En este artículo decidí dejar fuera todo lo relacionado con el nivel de apilamiento en el eje Z (z-index en corto) ya fuese con ésta propiedad o vía las transformaciones 3D.

      La razón: porque hay que tener presente alguna declaración concreta más (propiedad + valor específico) y que en tu ejemplo has sabido utilizar tan bien (como el uso de position para ser referente en la colocación del hijo y crear el nivel de apilamiento y a la vez anulárselo con z-index: auto)

      Aunque sí, podemos decir que en ciertas situaciones el z-index, con la debida preparación de la marmita, también es efectiva.

      Un saludo.

      P.D.: Una adivinanza para los lectores de estos comentarios, que seguro que tú sí lo sabes:
      En el ejemplo de Furoya, ¿en realidad por debajo de qué elemento está pasando la caja que se mueve?
      Pista: añadir fondos tanto al body como al html en rgba ;-)

      Eliminar
    2. Por supuesto, yo comento de metido que soy, nomás.
      El 'z-index' hasta sería una variante para las posiciones absolutas; es como modificar 'top', 'left' y demás. Pero con muchos más ajustes previos para que funcione solamente en algunos casos. Yo puse un ejemplo ideal, de laboratorio, porque es verdad que se pasa detrás de ... bueno, vamos a dejar que quien tenga interés lo pruebe cambiando fondos semitransparentes y opacos (tampoco le voy a spoilear el final).

      Un detalle que aprovecho para comentar, es que si bien es cierto que la animación de apilamiento en CSS cambia siempre entre valores enteros, los navegadores webkit aplican al llegar al número redondo aunque internamente avancen contando decimales; pero los mozilla redondean los decimales y "a mitad de camino" ya lo convierten al entero siguiente. Por eso parece que el cuadrito se "opaca" o "transparenta" mientras está superpuesto al cuadro grande.
      Una forma de salvar el detalle es precalcular nosotros el cambio, y un método práctico y medio bestia es aumentar el 'z-index' hasta que el redondeo ya coincida con el lugar que queremos.
      Por ejemplo

      @keyframes giro {
      0% {left: 25px; z-index: 3; }
      25% {left: 125px; z-index: -1; }
      50% {left: 25px; z-index: -1; }
      75% {left: -75px; z-index: -1; }
      100% {left: 25px; z-index: 3; }
      }


      Yo sé que los puristas me odian por hacer estas chanchadas, pero para experimentar y entender cómo funcionan los motores CSS a mí me parece que sirven.

      Por último, si no es un abuso, repito unos ejemplos donde se ve también cómo puede llegar a trabajar un 'z-index' en casos muy específicos de ocultamiento.

      Animación CSS de z-index 1.
      Animación CSS de z-index 2.
      Imagen con transición "puzzle".

      Eliminar
  2. Hola!

    Tengo una duda que si la sabes, y eres tan amable, me sería de gran ayuda:

    ¿Cómo se puede hacer para que ciertos elementos HTML no carguen si son dispositivos móviles por ejemplo?

    Gracias!

    ResponderEliminar
    Respuestas
    1. (Yo sigo insistiendo : lo tienen que hacer a propósito; o la humanidad está en serios problemas.)
      :´(

      Eliminar
  3. Hola!

    Tengo una duda que si la sabes, y eres tan amable, me sería de gran ayuda:

    ¿Cómo se puede hacer para que ciertos elementos HTML no carguen si son dispositivos móviles por ejemplo?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Toni

      Tengo dos sugerencias, que si eres tan amable de atender, te serán de gran ayuda::

      1ª) Leer este artículo del blog de muy reciente publicación.
      2ª) Debes tener claro que el cometido y las atribuciones que tiene encomendadas Css con respecto al documento html es sobre el que recibe el navegador. Nunca, repito, nunca el Css tiene acceso al servidor y lo que en él ocurra y cómo o porqué ocurra.

      Un saludo

      Eliminar
    2. (... y repitió el comentario.) >¦-S

      Para variar no me aguanté y se me dio por escribir algo de eso que me sale del alma; y sin esperarte, Kseso.

      Bueno, un poco para lavar culpas, a tu enlace ahora agrego otro. Primero, porque supongo que Toni ya leyó tu recomendación, y segundo, porque me cubro de que vuelva quejándose, lamentando o pegando un portazo porque en tu blog tus seguidores lo tratan mal.

      Css Selectores por UserAgent.

      Igual, estoy adivinando si confunde "no cargar" con "ocultar", y ya sé que estoy haciendo mal ...
      :-P

      Eliminar
    3. Gracias a todos.

      Sí me refería a cargar. Que un div con un slide no cargue, por ejemplo, cuando se vea la web en dispositivos móviles.

      Con estas técnicas sólo se oculta el contenido de modo que el tiempo de carga es el mismo. Y vale que éste sea un blog centrado en css, pero en diseño web todo está vinculado y por si alguien sabía la respuesta he preguntado educadamente. Siento si ha molestado a alguien.

      Mis disculpas.

      Saludos

      Eliminar
  4. No puede ser! Te has saltado `clip`!!

    .oculto-pero-visible-a-lectores-de-pantalla {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* Todos amamos IE */
    clip: rect(1px, 1px, 1px, 1px);
    }


    http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content

    :P

    ResponderEliminar
    Respuestas
    1. ouchhh!!!
      Digo... que así con mis omisiones salen los posts participativos y os puedo añadir en el cuerpo del artículo junto a las aportaciones ;-)

      Gracias, Emilio.

      Eliminar
  5. Jaja yo uso por lo menos 2 de los que mencionaste para hacerlo desaparecer, me parece buen articulo, salu2

    ResponderEliminar
  6. ¿Usando la solución de boilerplate sirve para ser leído los screenreaders?

    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    ResponderEliminar
  7. Tu crees que podrías escribir algo acerca de como animar con opacity? Se me ocurre darle un valor opacity 0 a un div anidado en un li (de un ul, claro) y que al momento de pasar el mouse (hover) sobre el li el div se vaya haciendo totalmente visible (opacity 0) pero en un período de 1.5 segundos o un tiempo similar. Eso sería genial. Por cierto soy novato novato si he dicho alguna pavada por favor agradecería la corrección.

    ResponderEliminar
  8. Respuestas
    1. Es muy sencillo: aplicando las propiedades que indicas en los elementos que quieres, es decir, escribir algo de CSS.
      li div {
      opacity: 0;
      transition: opacity 1s;
      }
      li:hover div {
      opacity: 1;
      }

      Eliminar
    2. Hola Francisco

      Como el ejemplo ya te lo ofreció Jorge yo me limitaré a recomendarte la lectura de este artículo sobre la propiedad transition.
      Pese a que es ya un poco veterano (2012) no me cabe duda que te ayudará a conocer un poco mejor las transiciones Css y todas las propiedades asociadas.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap