text-decoration-style in WebKit
Kelp uses a dotted underline for its links.
(Like all things in Kelp, this can be customized with a CSS variable.)
The dots are more subtle than a solid underline, but still provide a visual affordance other than color. This is an important guideline in how Kelp focuses on accessibility at its core.
But of course, Safari fucks things up a bit!
The text-decoration property is a shorthand property that combines text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness into a single declaration.
/* This... */
a {
text-decoration: underline dotted;
}
/* Is the same as this... */
a {
text-decoration-line: underline;
text-decoration-style: dotted;
}Safari/WebKit doesn’t recognize text-decoration-style as part of the shorthand, sees a value it doesn’t expect, and ignores the whole thing.
As a result, a value of underline dotted results in no text-decoration at all!
To use the full shorthand property, you need to use a -webkit- prefix like it’s 2012 or something. And it needs to come after the regular text-decoration property rather than before.
/* This... */
a {
text-decoration: underline dotted;
-webkit-text-docoration: underline dotted;
}Because Safari does know what text-decoration is, it takes priority if you lead with the prefixed version, which is the opposite of how you’d normally do things.
Kelp makes this simpler by defining --decoration-text-link and --decoration-text-link-hover CSS variables, and using those so you don’t have to manually update multiple properties with the same value.
:root {
--decoration-text-link: underline dotted;
--decoration-text-link-hover: underline;
}
a {
text-decoration: var(--decoration-text-link);
-webkit-text-decoration: var(--decoration-text-link);
}
a:hover {
text-decoration: var(--decoration-text-link-hover);
-webkit-text-decoration: var(--decoration-text-link-hover);
}