Clases de visibilidad de Foundation CSS

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

La clase de visibilidad nos ayuda a hacer que diferentes elementos de un sitio web sean visibles u ocultos según el tamaño de la pantalla o la orientación del dispositivo. También puede controlar qué elementos ve el usuario en función de su entorno de navegación. Hay varios componentes de la clase de visibilidad, que se describen a continuación:

• Mostrar por tamaño de pantalla : esta clase muestra un componente particular basado en el tamaño de la pantalla. El elemento solo se mostrará si el tamaño de la pantalla del navegador cumple con la condición de la clase; de ​​lo contrario, se ocultará. 
• Ocultar por tamaño de pantalla : esta clase se puede usar para ocultar un elemento en particular según el tamaño de la pantalla. El elemento se ocultará si la pantalla del navegador cumple con la condición de la clase; de ​​lo contrario, se mostrará.
• Detección de orientación : esta clase se puede utilizar para mostrar los diferentes elementos en función de su orientación. Estas clases son muy útiles cuando rotamos la pantalla del móvil mientras usamos la web. En el escritorio, la orientación se establece en horizontal.

Sintaxis:

<p class="Visibility Classes"> Content </p>

Accesibilidad: Podemos ocultar los elementos especificando la propiedad de visualización , cuyo valor se establece en ninguno , pero también lo ocultará del lector de pantalla. Sin embargo, hay otras formas de ocultar elementos mientras los lectores de pantalla lo pueden leer.

Mostrar solo para lector de pantalla: podemos hacer que un elemento sea legible para el lector de pantalla solo agregando la clase «.show-for-sr» al elemento.

Sintaxis:

<p class="show-for-sr"> Content </p>

Ocultar para el lector de pantalla: podemos ocultar un elemento para el lector de pantalla agregando el atributo “aria-hidden= true”. Esto no afectará el aspecto de los elementos, pero el lector de pantalla lo omitirá.

Sintaxis:

<p aria-hidden="true"> Content </p>

Detección de modo fijo: mientras usamos un componente fijo, podemos usar las clases de visibilidad para ocultar o mostrar un elemento cuando el componente fijo está atascado. 

Clases usadas:

• hide-for-sticky: esta clase se usa para ocultar elementos dentro de un componente adhesivo.
• show-for-sticky: esta clase se usa para mostrar elementos dentro de un componente fijo.

Sintaxis:

<p class="Class"> Content </p>

Crear líneas de salto: si la página web contiene mucha navegación y enlaces, el lector de pantalla tiene que leer cada navegación antes de acceder a otro contenido. Esto lo hace más lento y lleva mucho tiempo cargar el sitio web. Este problema se puede resolver agregando un enlace de salto al sitio web. 

Detección de IE+: la desaparición de Internet Explorer no llegará pronto. Entonces, las clases de visibilidad nos ayudan a mostrar u ocultar elementos dentro de todos los navegadores IE10+.

Clase usada:

• show-for-ie: Esto nos ayuda a mostrar el elemento para los navegadores IE.
• hide-for-ie: Esto nos ayuda a ocultar el elemento para los navegadores IE.

Sintaxis:

<p class="Class"> Content </p>

Detección de modo oscuro: el modo oscuro se ha vuelto muy común en los sitios web modernos. Las clases de visibilidad nos ayudan a mostrar u ocultar elementos en modo oscuro muy fácilmente con la ayuda de sus clases.

Clase usada:

• show-for-dark-mode: Esta clase nos ayuda a mostrar un elemento solo en modo oscuro.
• hide-for-dark-mode: Esta clase nos ayuda a ocultar un elemento en modo oscuro.

Sintaxis:

<p class="Class">Content</p>

Exploraremos y comprenderemos todos estos conceptos y los implementaremos a través de los ejemplos.

Ejemplo 1: este ejemplo describe las clases de visibilidad CSS de Foundation. Aquí, hemos mostrado los diferentes <div> según el tamaño de pantalla del navegador.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"></script>
    <title>
          Foundation CSS Visibility Classes
      </title>
</head>
  
<body>
    <center>
        <h2 style="color: green;">GeeksforGeeks</h2>
        <h4>Foundation CSS Visibility Classes</h4>
        <div class="show-for-medium"
             style="border: blue  2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p>
                This is the sample div class which
                will be seen when the screen size 
                is medium or large. 
            </p>
        </div>
        <div class="show-for-large" 
             style="border: orange 2px solid;
                    height: 100px;
                    width: 400px;">
            <p>
                This is the sample div class
                which will be seen when the
                screen size is large.
            </p>
        </div>
        <div class="show-for-large-only" 
             style="border: red 2px solid;
                    height: 100px;
                    width: 400px;">
            <p>
                This is the sample div class
                which will be seen only when the 
                screen size is large.
            </p>
        </div>
        <div class="show-for-small-only" 
             style="border: green 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p> 
                This is the sample div class which 
                will be seen only when the screen 
                size is small. 
            </p>
        </div>
        <div class="show-for-medium-only" 
             style="border: deeppink 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p>
                This is the sample div class which
                will be seen only when the screen 
                size is medium. 
            </p>
        </div>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: este ejemplo describe las clases de visibilidad CSS de Foundation. Aquí, hemos mostrado los diferentes <div> según los tamaños de pantalla.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"></script>
    <title>Foundation CSS Visibility Classes</title>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h4>
            Foundation CSS Visibility Classes
        </h4>
        <div class="hide" 
             style="border: salmon 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p> This sample text will be hidden. </p>
        </div>
        <div class="hide-for-medium" 
             style="border: blue  2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p>
                This is the sample div class which will
                be seen when the screen size not medium 
                or large. 
            </p>
        </div>
        <div class="hide-for-large" 
             style="border: orange 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p>
                This is the sample div class which will 
                be seen when the screen size is not large. 
            </p>
        </div>
        <div class="hide-for-large-only" 
             style="border: red 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p> 
                This is the sample div class which will be
                hidden only when the screen size will be large.
            </p>
        </div>
        <div class="hide-for-small-only" 
             style="border: green 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p> 
                This is the sample div class which will be hidden 
                only when the screen size will be small. 
            </p>
        </div>
        <div class="hide-for-medium-only" 
             style="border: deeppink 2px solid; 
                    height: 100px; 
                    width: 400px;">
            <p> 
                This is the sample div class which will be hidden only
                when the screen size will be medium. 
            </p>
        </div>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/visibility.html