Geneste Links

0
44

De andere dag postte ik een afbeelding, letterlijk als een gedachte-oefening, over hoe je zou kunnen bereiken “geneste” links. Dat is een grote container die is gekoppeld aan een URL bevat een kleinere container of tekst link erin, dat gaat naar een andere URL. Dat is moeilijker dan het lijkt op het eerste gezicht. De belangrijkste reden hiervoor is dat…

<!– dit wordt ongeldig en zal niet renderen zoals verwacht –>
<a href=”#eén”>
Buiten
<a href=”#” twee>
In
</een>
</een>

Eric Meyer noemde voor meer flexibele koppeling, maar zelfs dat niet goed omgaan met een situatie waarin een link is genest in een andere.

Hier is wat er gebeurt met die van HTML, door de manier waarop:

De geneste link wordt getrapt.

Mijn eerste neiging zou zijn om gewoon geen nest de links in de opmaak, maar ze te laten verschijnen geneste visueel. Sommige mensen gereageerd op de tweet, met inbegrip van Nathan Smith, die vertelde dat het dezelfde gedachte: een relatief gepositioneerd bovenliggend element en absoluut positie zowel links. De grotere zou kunnen vullen het hele gebied en de kleinere konden gaan zitten op de top van het.

Zie de Pen “Geneste” links door Nathan Smith (@nathansmith) op CodePen.

Het is kieskeurig, als je nodig hebt magic numbers in zekere mate voor het verwerken van de afstand en variabele inhoud.

Mijn tweede neiging zou zijn om te gaan met het in JavaScript.

<div
onclick=”venster.locatie=’https://codepen.io'”
style=”cursor: pointer;”
tab-index=”1″
>
Buiten
<a href=”https://css-tricks.com”>
In
</een>
</div>

Ik heb letterlijk geen idee hoe koosjer is van een voor de toegankelijkheid. Het lijkt bruto naar mij, dus ik ben gewoon gaan om te veronderstellen dat het slecht nieuws.

Het spreken van de toegankelijkheid, Heydon Pickering heeft een heel artikel over de kaart onderdelen, die is een populaire ontwerp patroon waarin deze situatie komt vaak voor. Zijn oplossing is om een relatief gepositioneerd bovenliggend element, dan een normaal geplaatst en functionele belangrijkste link. Die eerste link is een absoluut gepositioneerd pseudo-element op het afdekken van de hele kaart. Elke sub-links zijn relatief geplaatst en komen na de eerste link, dus ze zitten op de top van de eerste koppeling door middel van de z-index.

Demo met de auteur link.

En spreken van het stapelen van pseudos, dat is de aanpak van Steven Curtis gebruikt hier:

Zie de Pen doen Alsof geneste links door Steven Curtis (@seancurtis) op CodePen.

Andere oplossingen in de “sluwe” grondgebied zou kunnen zijn:

  • Met behulp van een <form> element waar het action-attribuut fungeert als een link.
  • Met behulp van een <object> – element om wrap de innerlijke samenhang.

Sara Soueidan reageerde met haar eigen bericht!

Ik had het zelfde eis van een paar jaar geleden, toen was ik het bouwen van de front-end stichting voor Smashing Magazine. Dus ik dacht ik schrijf mijn reactie op Chris de draad in de vorm van een blog post.

Sara heeft geschreven over dit met veel meer detail en zorg dan dat ik het hier hebben, dus zeker check het uit. Het lijkt alsof zij beiden Heydon zijn geland op bijna dezelfde oplossing, met de pseudo-element cover bevat sub-links steken boven het als het nodig is.

Heb je ooit gedaan een andere manier? Veel van UX en a11y te denken abbout!