Making use of CSS attributes
I’ve been looking into this site’s CSS and thinking of ways of improving its efficiency; I’m especially struggling with making it DRY. It’s not like I have some super complex and professional styling going on here but the behind the scenes of this thing is as much a personal project as the actual content on it.
What I did figure out, though, was how to take advantage of ARIA attributes in my stylesheet which means I am killing two birds with one stone by:
- Improving accessibility
- Doing away with code redundancy
An example: styling the currently active link in the main navbar. Previously, I was using the following class:
.nav-active-link {
color: var(--main-text-color);
pointer-events: none;
}
<a href="#" class="nav-active-link" aria-current="page">Link</a>
The purpose of the aria-current
attribute is to provide context for assistive technology (in this case, screen readers).
By targeting it directly, I have absolutely no need for an additional class:
a[aria-current='page'] {
color: var(--main-text-color);
pointer-events: none;
}
<a href="#" aria-current="page">Link</a>
It’s a pretty minute change, but I just think it’s really cool how much you can do with so little when it comes to modern CSS.
On that note, I can’t wait until the :has()
pseudo-class receives widespread browser support. The wheels inside my
brain are spinning just thinking about the cool shit you can do with it.