Enlaces anidados | Programar Plus

El otro día publiqué una imagen, literalmente como un ejercicio de pensamiento, sobre cómo podría lograr enlaces “anidados”. Es decir, un contenedor grande que está vinculado a una URL que contiene un contenedor más pequeño o un enlace de texto dentro de él que va a otra URL. Eso es más difícil de lo que parece a primera vista. La razón principal es que …

<!-- this is invalid and won't render as expected -->
<a href="https://css-tricks.com/nested-links/#one">
  Outside
  <a href="#two">
    Inside
  </a>
</a>

Eric Meyer una vez pidió un enlace más flexible, pero ni siquiera eso maneja una situación en la que un enlace está anidado dentro de otro.

Esto es lo que sucede con ese HTML, por cierto:

El enlace anidado se expulsa.

Mi primera inclinación sería simplemente no anidar los enlaces en el marcado, sino hacer que aparezcan anidados visualmente. Algunas personas respondieron al tweet, incluyendo Nathan Smith, quien compartió el mismo pensamiento: tener un elemento padre relativamente posicionado y posicionar absolutamente ambos enlaces. El más grande podría llenar toda el área y el más pequeño podría sentarse encima.

Consulte los enlaces de Pen “anidados” de Nathan Smith (@nathansmith) en CodePen.

Es delicado, ya que necesitará números mágicos hasta cierto punto para manejar el espaciado y el contenido variable.

Mi segunda inclinación sería tratarlo en JavaScript.

<div 
  onclick="window.location='https://codepen.io'"
  style="cursor: pointer;"
  tabindex="1"
>
  Outside
  <a href="https://css-tricks.com">
    Inside
  </a>
</div>

Literalmente, no tengo idea de cuán kosher es eso desde una perspectiva de accesibilidad. Me parece asqueroso, así que voy a asumir que son malas noticias.

Hablando de accesibilidad, Heydon Pickering tiene un artículo completo sobre los componentes de la tarjeta, que es un patrón de diseño popular en el que a menudo surge esta situación. Su solución es tener un elemento padre relativamente posicionado, luego un enlace principal funcional y ubicado normalmente. Ese primer enlace tiene un pseudo-elemento absolutamente posicionado que cubre toda la tarjeta. Todos los subvínculos están posicionados relativamente y vienen después del enlace inicial, por lo que se ubicarían en la parte superior del primer enlace a través de z-index.

Demostración con enlace de autor.

Y hablando de apilar pseudos, ese es el enfoque que usa Sean Curtis aquí:

Consulte los enlaces anidados de Pen Pretend de Sean Curtis (@seancurtis) en CodePen.

Otras soluciones en el territorio “astuto” podrían ser:

• Usando un <form> elemento donde el action El atributo actúa como un enlace.
• Usando un <object> elemento para envolver el enlace interno.

¡Sara Soueidan respondió con su propia publicación!

Tuve el mismo requisito hace un par de años cuando estaba construyendo la base del front-end para Smashing Magazine. Así que pensé en escribir mi respuesta al hilo de Chris en forma de publicación de blog.

Sara ha escrito sobre esto con mucho más detalle y cuidado que yo aquí, así que definitivamente échale un vistazo. Parece que tanto ella como Heydon han aterrizado en casi la misma solución, con la cubierta de pseudoelementos que contiene subenlaces sobresaliendo según sea necesario.

¿Alguna vez lo has hecho de otra manera? ¡Mucho UX y mucho en qué pensar!