Re: CSS One-Liners to Improve (Almost) Every Project
Published
Re: https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project (via https://css-tricks.com/alvaro-montoro-css-one-liners-to-improve-almost-every-project/)
Nice article with a bunch of one-ish-liners for CSS. Geoff over at CSS-Tricks added a few additional ones.
Here’s some of mine that are used on the stylesheet for this site and generally deal with improving the default user agent stylesheet.
I made a CodePen pen that should give a brief demo of what these are all about.
details > summary cursor
It’s always been a minor annoyance to me that the cursor doesn’t show it as clickable by default.
details > summary {
cursor: pointer;
}abbr[title] cursor
Another papercut, similar to above.
abbr[title] {
cursor: help;
}<ins> and <del> improvements
I use <del> pretty often via Markdown’s strike-through (double tildes) and <ins> less often, but they’re handy to have when you need ’em.
del {
opacity: .7;
}
ins {
text-decoration: none;
background-color: yellow;
}::selection styling
Ideally you’d update the styling to match your brand.
::selection {
background-color: yellow;
text-shadow: none;
}CSS hyphenation
This is one of my favorite typographic progressive enhancements. Here’s the original source: https://clagnut.com/blog/2395
p {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}How about you? Got any more to share? Definitely let me (⬇️) and the world know.
I love hearing from readers so please feel free to reach out.