Kapslade Länkar

0
21

Häromdagen postade jag en bild, bokstavligen som en tanke på träning, om hur du kan åstadkomma “nested” – länkar. Det är en stor behållare som är kopplade till en URL som innehåller en mindre behållare eller text länk på insidan av det som går till en annan URL. Det är svårare än det kan verka vid första anblicken. Den främsta anledningen till det är att…

<!– detta är ogiltig och kommer inte att göra som förväntat –>
<a href=”#en”>
Utanför
<a href=”#”>
Inne
</a>
</a>

Eric Meyer en gång kallade för en mer flexibel länka, men även att inte riktigt hantera en situation där en länk är inkapslad i en annan.

Här är vad som händer med HTML, förresten:

Den kapslade länk blir sparkade ut.

Min första lutning skulle vara att helt enkelt inte bo länkarna i koden, men att få dem att verka kapslade visuellt. Vissa folk svarade att den tweet, inklusive Nathan Smith, som delade samma tanke: har en relativt positionerat överordnade elementet och helt position både länkar. Den större skulle kunna fylla upp hela området och mindre man kunde sitta på toppen av det.

Se Pennan “Nested” – länkar av Nathan Smith (@nathansmith) på CodePen.

Det är petiga, så du måste magiska siffror till en viss grad för att hantera avståndet och varierande innehåll.

Min andra böjelse skulle vara att ta itu med det i JavaScript.

<div
onclick=”fönstret.location=’https://codepen.io'”
style=”cursor: pointer;”
tab-index=”1″
>
Utanför
<a href=”https://css-tricks.com”>
Inne
</a>
</div>

Jag har bokstavligen ingen aning om hur kosher att det är ur ett tillgänglighets perspektiv. Det ser ut brutto till mig så jag ska bara antar att det är dåliga nyheter.

På tal om tillgänglighet, Heydon Pickering har en hel artikel om kortet komponenter som är en populär design mönster där denna situation ofta kommer upp. Hans lösning är att ha en relativt positionerat överordnade elementet, då en normalt placeras och funktionellt viktigaste länk. Som första länken har en helt placerad pseudo-element på den täcker hela kortet. Några sub-länkar är relativt positionerat och kommer efter den första länken, så att de skulle sitta på toppen av den första länken av vägen av z-index.

Demo med författaren länk.

Och på tal om att stapla pseudos, som är den metod Sean Curtis använder här:

Se Pennan Låtsas kapslade länkar av Sean Curtis (@seancurtis) på CodePen.

Andra lösningar i “listig” territorium kan vara:

  • Med hjälp av ett <form> – elementet där action-attribut som fungerar som en länk.
  • Med hjälp av en <object> – elementet för att linda den inre länk.

Sara Soueidan svarade med sitt eget inlägg!

Jag hade samma krav för ett par år sedan när jag höll på att bygga front-end foundation för Smashing Magazine. Så jag tänkte att jag skulle skriva mitt svar till Chris tråden ut i form av ett blogginlägg.

Sara har skrivit om detta med mycket mer detaljer och omsorg än vad jag har här, så det är definitivt kontrollera att ut. Det ser ut som att både hon och Heydon har landat på nästan samma lösning, med pseudo-element omslag som innehåller sub-länkar peta över det som behövs.

Har du någonsin gjort det på ett annat sätt? Massor av UX och a11y att tänka abbout!

SHARE
Previous articleNestede Lenker
Next articleNested Links