Irregular-shaped Links with Subgrid

Irregular-shaped Links with Subgrid

css-irl.info css-irl.info1 year ago in#Dev Love52

Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover (or focus) effect to be applied to an entire card. There are a few strategies for implementing this effect using CSS, and this CSS Tricks article covers some of them. (None of them is perfect, and they all have their pitfalls!) But what if our link hover effect needs to affect a number of child items, and they don’t all sit neatly inside a rectangle, like a regular card? With CSS Grid, we can lay items out on a horizontal and a vertical axis, in order to build visually interesting layouts, like this one: By turning on the the Grid inspector in Firefox’s dev tools, we can see how the items of one of those components are laid out on the grid: If, in our UI design, those grid items need to act as links, then it would make sense for a hover effect would be applied to all the grid items whenever one of them is hovered. Hovering on one item triggers the hover effect on both That’s no problem if we hover over the first item: we can use the general sibling combinator to apply the hover effect to the subsequent items. .grid__img:hover ~ .grid__caption, .grid__img:focus ~ .grid__caption { } But, unfortunately, the general sibling combinator only affects successive siblings, not those preceding. If we hover over the second item, the hover effect is not applied to the first. Absolute positioning A better option might be to use an absolute-positioned link to cover the entire area of the component. Once again, we can apply the hover effect using the general sibling combinator, but this time we’re ensuring that all the grid items will follow the anchor link and therefore have the hover effect applied: Eu scelerisque felis Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni ut aliquip ex ea commodo consequat. Read more→ .grid { position: relative; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } .grid__link { position: absolute; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } Positioning with Grid With grid we don’t actually need absolute positioning here. Instead, we can position it as a grid item that spans the full column and row axes. We’ll need to use z-index to ensure it’s always on top: .grid__link { grid-area: 1 / 1 / -1 / -1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); z-index: 1; } Accessibility This is arguably a better option for accessibility, as it means that instead of having three different links all going to the same URL, we can just use one. But we need to ensure that the link will be announced correctly to assistive technologies. By using aria-labelledby we can give our link an accessible label that corresponds to the component heading. We could also use aria-hidden to ensure that the heading isn’t announced a second time. Eu scelerisque felis Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Read more→ This works correctly when tested using VoiceOver in Safari. But…it doesn’t solve the problem The problem here is that wherever we hover within the bounding box of our anchor link, the hover effect will be applied.  » Read More

Like to keep reading?

This article first appeared on css-irl.info. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply