Nestede Lenker

0
39

Den andre dagen jeg postet et bilde, bokstavelig talt som en tanke trening, om hvordan du kan oppnå “nestes” – lenker. Det er en stor beholder som er knyttet til en NETTADRESSE som inneholder en mindre beholder eller tekst link på innsiden av det som går til en annen URL. Det er vanskeligere enn det kan virke ved første øyekast. Den viktigste grunnen er at…

<!– dette er ugyldig, og vil ikke vises som forventet –>
<a href=”#én”>
Utenfor
<a href=”#to”>
Inne
</a>
</a>

Eric Meyer gang kalt for mer fleksibel kobling, men selv som ikke helt håndtere en situasjon der en link som er nestet i en annen.

Her er hva skjer med at HTML, forresten:

Den nestede linken blir sparket ut.

Min første tilbøyelighet ville være å rett og slett ikke reir lenker i markup, men gjøre dem vises nestede visuelt. Noen folk svarte tweet, blant annet Nathan Smith, som delte den samme tanken: har en relativt plassert overordnede element, og det er absolutt posisjon både koblinger. Jo større man kunne fylle opp hele området og de mindre man kan sitte på toppen av det.

Se Penn “Nestet” koblinger av Nathan Smith (@nathansmith) på CodePen.

Det er pirkete, så du trenger magiske tall til en viss grad for å håndtere avstanden og variabelt innhold.

Min andre tilbøyelighet vil være å håndtere det i JavaScript.

<div
onclick=”vinduet.beliggenhet=’https://codepen.io'”
style=”cursor: pointer;”
tab-indeks=”1″
>
Utenfor
<a href=”https://css-tricks.com”>
Inne
</a>
</div>

Jeg har bokstavelig talt ingen anelse om hvordan kosher som er fra et tilgjengelighet perspektiv. Det ser brutto til meg, så jeg skal bare anta at det er dårlige nyheter.

Vi snakker om tilgjengelighet, Heydon Pickering har en hel artikkel om kort komponenter som er et populært design mønster hvor denne situasjonen ofte kommer opp. Hans løsning er å ha en relativt plassert overordnede element, deretter en normalt plassert og funksjonelle viktigste koblingen. Som første ledd har en absolutt posisjonert pseudo-element på det som dekker hele kortet. Alle sub-koblinger er relativt plassert, og kommer etter den første linken, så de vil sitte på toppen av den første koblingen ved hjelp av z-index.

Demo med forfatteren link.

Og når vi snakker om stabling pseudos, som er metoden Sean Curtis bruker her:

Se Penn Late nestede koblinger av Sean Curtis (@seancurtis) på CodePen.

Andre løsninger i “lur” territorium kan være:

  • Ved hjelp av en <form> – element, der action-attributtet fungerer som en link.
  • Ved hjelp av en <object> – element for å bryte den indre link.

Sara Soueidan svarte med hennes eget innlegg!

Jeg hadde det samme kravet for et par år siden når jeg var å bygge front-end grunnlaget for Smashing Magazine. Så jeg tenkte jeg skulle skrive mitt svar til Chris tråden ut i form av et blogginnlegg.

Sara har skrevet om dette med mye mer detaljer og omsorg enn det jeg har her, så definitivt sjekke det ut. Det ser ut som både hun og Heydon har landet på nesten samme løsning, med pseudo-element deksel som inneholder sub-koblinger poking over det som er nødvendig.

Har du noen gang gjort det på en annen måte? Mange av UX og a11y å tenke abbout!