Una breve charla sobre cómo hacer un encabezado profesional con CSS (Headers)

Un encabezado de página web atractivo es esencial para dar una buena primera impresión a sus visitantes. Un encabezado bien diseñado no solo llama la atención, sino que también establece el tono para todo el sitio. Crear encabezados de páginas web modernos y visualmente atractivos es más fácil que nunca con CSS.

En este artículo, exploraremos algunos consejos y sugerencias básicos para ayudarlo a crear impresionantes diseños de encabezado con CSS. No nos enfocamos demasiado en el diseño, sino en crear el diseño y comprender las dificultades que podría enfrentar al crearlo.

El espacio intermedio no se puede centrar en un encabezado de tres columnas

Primero, hablemos del encabezado de tres columnas, ya que es el que veo que se implementa incorrectamente con mayor frecuencia.

El marcado es relativamente simple:

<header>
  <nav>
    <a href="/">ABC</a>

    <div>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
    </div>

    <div>
      <a href="#">Login</a>
    </div>
  </nav>
</header>

Puse todos los enlaces en las etiquetas de navegación en el encabezado. Así que es un marcado muy simple. Normalmente, la navegación debe estar alineada al centro entre el primer y el último elemento.

Según mi observación, este problema se ha convertido en un problema nuevo en la comunidad front-end, similar al problema de "centrar un div". Porque muchos desarrolladores usarán el valor de espacio entre el atributo de contenido justificado para resolver este problema, pero en realidad no centra el elemento central. Aquí está el mismo marcado de navegación usando el espacio entre el valor del atributo de contenido justificado, para comparar:

La razón de este efecto es que el lado izquierdo es más ancho que el lado derecho. Nuestro elemento central está alineado en el centro entre los elementos izquierdo y derecho, pero en el contexto de la página, el elemento central no está realmente centrado.

Este es el primer desafío al crear un encabezado: obtener el diseño básico correcto. No intente agregar más hasta que haya descubierto qué diseño desea lograr y cómo.

Antes de continuar, pasé algunas horas en ProductHunt buscando y evaluando el encabezado de tres columnas. La mayoría de ellos usan el truco que mostré de establecer la propiedad de justificar el contenido en un espacio intermedio (por lo tanto, su navegación no está realmente centrada). Algunas personas intentan sortear este problema (por ejemplo, agregando márgenes), mientras que otras renuncian al posicionamiento absoluto. Por supuesto, estos "hacks" pueden "resolver" el problema, pero agregan complejidad. Sus encabezados se volverán imposibles de mantener y tendrá un mal presentimiento cuando regrese a ellos nuevamente. Habiendo dicho eso, esta "solución real" también es algo complicada.

Aquí está cómo hacerlo:

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

Resultados como se muestra a continuación:

Hablemos de esta solución.

Primero, los selectores que estoy usando son demasiado específicos. Esto se hace para que las relaciones de anidamiento sean más claras.

Luego, cada elemento debajo del encabezado es un contenedor flexible. Esto también es innecesario. Actualmente solo se usa en el último elemento secundario de la navegación para mover su elemento secundario a la derecha.

Eso deja solo esta regla: flex: 1 1 0, que es nuestra principal preocupación aquí. Aplico esta regla al primer y último elemento. Les permite crecer y reducirse, y establece su tamaño base en 0 píxeles. De eso se trata todo este "truco". Dado que establecemos su tamaño base en 0, crecerán proporcionalmente, centrando así nuestro elemento central.

Al crear el diseño del encabezado, por supuesto, centrar los elementos centrales del encabezado no fue el único desafío al que nos enfrentamos.

Ocultar la barra de navegación en pantallas más pequeñas

Al igual que usar el valor de espacio entre la propiedad justificar contenido, el patrón anterior nos permite ocultar la navegación intermedia mientras se mantiene intacto el diseño. Cuando ocultamos el elemento central, el efecto es el siguiente:

Por supuesto, es trivial reemplazar el inicio de sesión con un botón. Entonces, hablemos de otra cosa.

Digamos que nuestro encabezado se ve así:

<header>
  <nav>
    <a href="/">ABC Company</a>

    <div class="desktop-navigation">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
      <a href="#">Terms of Service</a>
    </div>

    <div class="action-navigation">
      <input type="search" aria-label="search" />
      <a href="#">Sign Up</a>
      <a href="#">Login</a>
    </div>
  </nav>
</header>

Ahora, cuando nuestra ventana gráfica se vuelve más pequeña, tenemos un problema con nuestro encabezado:

Podemos agregar una consulta de medios para esto, donde reemplazamos ciertos elementos con íconos, o simplemente ocultamos la búsqueda. Pero el CSS moderno también permite una solución diferente.

Por ejemplo, podemos crear una consulta de contenedor. Aquí hay un ejemplo de código actualizado:

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

a {
  color: #000;
  text-decoration: none;
}

header {
  padding: 1.5rem;
}

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

header > nav > :last-child,
.desktop-navigation {
  gap: 1.5rem;
}

.action-navigation {
      container-type: inline-size;
      container-name: action-navigation;
    }

@container action-navigation (max-width: 400px) {
      input {
        display: none;
      }
    }

Acabo de añadir estas líneas:

.action-navigation {
  container-type: inline-size;
  container-name: action-navigation;
}

@container action-navigation (max-width: 400px) {
  input {
    display: none;
  }
}

Por supuesto, podría argumentar que también puede hacer esto con consultas de medios. Nada especial. Pero la ventaja de las consultas de contenedor es que podemos especificar un ancho mínimo para el contenedor. No nos importa el tamaño de la ventana gráfica, pero lo sabemos: si el ancho de nuestro contenedor es inferior a 400 px, se pondrá realmente feo. Esta es una de esas características que estoy deseando que sea ampliamente compatible.

Barra de navegación superior adhesiva

Todavía veo algunos usando position: fixed para implementar la barra de navegación superior, aunque Sticky es una mejor solución.

¿Por qué es pegajoso mejor? Considere el siguiente código:

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  header {
    padding: 1.5rem;
    width: 100%;
    position: fixed;
  }

  header > nav {
    display: flex;
  }

  header > nav > * {
    display: flex;
  }

  header > nav > :first-child,
  header > nav > :last-child {
    flex: 1 1 0;
  }

  header > nav > :last-child {
    justify-content: flex-end;
  }

  .desktop-navigation {
    gap: 1.5rem;
  }
</style>

<header>
  <nav>
    <a href="/">ABC Company</a>

    <div class="desktop-navigation">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">About us</a>
    </div>

    <div class="action-navigation">
      <a href="#">Login</a>
    </div>
  </nav>
</header>

<main>
  Some content
</main>

En este caso la cabecera tiene posición: fija. Como resultado, el área de contenido principal se mueve a la parte superior del sitio porque no hay espacio reservado en el documento para el encabezado. Está fuera de flujo.

En este caso, la solución consiste en usar margin-top para desplazar el área de contenido principal, moviéndola debajo del encabezado. Es probable que vea muchas veces esta solución alternativa, incluso en los sitios más nuevos. El problema es que la propiedad pegajosa no siempre existe. Es una propiedad relativamente nueva. Es por eso que todavía puedes encontrar algunos tutoriales usando position: fixed en lugar de sticky. Pero con pegajoso, no necesitamos compensación de margen superior. El elemento de encabezado aún ocupa espacio como si estuviera en el documento.

Aquí hay un ejemplo de código actualizado con position: sticky :

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

a {
  color: #000;
  text-decoration: none;
}

header {
  padding: 1.5rem;
  position: sticky;
  top: 0;
}

header > nav {
  display: flex;
}

header > nav > * {
  display: flex;
}

header > nav > :first-child,
header > nav > :last-child {
  flex: 1 1 0;
}

header > nav > :last-child {
  justify-content: flex-end;
}

.desktop-navigation {
  gap: 1.5rem;
}

Como puede ver, este enfoque es mucho más simple. No necesitamos establecer compensaciones arbitrarias para el contenido.

¡Eso es, amigos! Muchas Gracias Por Leer!

Finalizar

¿Conoces algún otro error común sobre los diseños de encabezado? ¿O conoce otros elementos desafiantes? ¡Me encantaría saber más en los comentarios!

Debido al espacio limitado del artículo, el contenido de hoy se compartirá aquí. Al final del artículo, me gustaría recordarle que la creación de artículos no es fácil. Si le gusta que comparta, no olvide dale me gusta y reenvíalo, para que más gente necesitada lo vea. Al mismo tiempo, si desea obtener más conocimiento de la tecnología front-end, síganos, su apoyo será la mayor motivación para compartir. Seguiré publicando más contenido, así que estad atentos.