C34Usar consultas de medios (media queries) para dejar de fijar los encabezados y pies de página pegajosos (sticky)

Aplicabilidad

CSS y HTML.

Descripción

El objetivo de esta técnica es poder presentar el contenido con encabezados y pies de página pegajosos (sticky) cuando hay espacio suficiente. Para ello se utilizan técnicas de consultas de medios (media queries) con min-height, max-height y min-width que se adaptan al espacio disponible en la ventana gráfica (viewport).

Las regiones pegajosas permanecen siempre visibles en la ventana gráfica mientras el resto del contenido desaparece por debajo al desplazarse. En cuanto a la visibilidad del contenido, esto no suele ser un problema en el escritorio ni en los dispositivos móviles en orientación vertical. Sin embargo, al usar dispositivos móviles en orientación horizontal o al ampliar con zoom en el escritorio, las regiones pegajosas pueden bloquear una gran parte de la pantalla: la altura de la región pegajosa puede dejar solo una pequeña parte de la pantalla para mostrar el contenido de la página.

Desactivar, o dejar de fijar, las regiones pegajosas es una forma eficaz de garantizar espacio suficiente cuando los usuarios tienen otras preferencias de lectura y de zoom o cuando utilizan el modo horizontal.

Tenga en cuenta que las regiones pegajosas pueden suponer desventajas para los usuarios de teclado y, por tanto, deben utilizarse con criterio. El problema para quienes recorren con el tabulador una página con una cabecera fija es que, una vez que la página ha empezado a desplazarse, al tabular hacia atrás para alcanzar elementos interactivos situados más arriba en la página, el foco suele volverse invisible cuando pasa por detrás de la cabecera pegajosa. Los usuarios tienen entonces que desplazarse hacia arriba para poder ver el foco, algo de lo que no necesariamente son conscientes. Del mismo modo, el foco visible puede desaparecer detrás de un pie de página pegajoso, de forma que los usuarios tendrían que desplazarse hacia abajo para ver dónde está el foco, lo que supone un inconveniente importante.

El planteamiento básico para dejar de fijar los encabezados y pies de página pegajosos consiste en:

1. Definir las primeras regiones pegajosas usando propiedades min-height en las consultas de medios, de modo que se fijen o se liberen según el espacio disponible;
2. Definir otras regiones pegajosas usando propiedades min-width y max-height en las consultas de medios para tamaños concretos de la ventana gráfica, de modo que se fijen o se liberen según el espacio disponible, p. ej. en tabletas según la orientación vertical u horizontal del dispositivo.

Ejemplos

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Using media queries to un-fix sticky headers / footers</title>
    <style>
    /* Sticky Styling */
    header { min-height: 130px; }
    @media (min-height: 480px) {
      header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
    }
    @media (min-device-width: 576px) and 
    (max-device-width: 1024px) and 
    (orientation: landscape) {
      header {
        position: static;
      }
    }
    footer { min-height: 130px; }
    @media (min-height: 480px) {
      footer {
        position: sticky;
        bottom: 0;
      }
    }
    @media (min-device-width: 576px) and
    (max-device-width: 1024px) and
    (orientation: landscape)  {
      footer {
        position: static;
      }
    }
    </style>
  </head>
  <body class="grid">
    <header class="grid-item">
      ...
    </header>
    <main class="grid-item">        
      ...
    </main>
    <aside class="grid-item">
      ...
    </aside>
    <footer class="grid-item">
      ...
    </footer>
  </body>
</html>

Pruebas