I always forget what properties are available now so I've written a quick post to put them all in one place
Underlining links with CSS
https://www.alwaystwisted.com/articles/underlining-links-with-css
I always forget what properties are available now so I've written a quick post to put them all in one place
Underlining links with CSS
https://www.alwaystwisted.com/articles/underlining-links-with-css
#css
Just realised I can use :has on the parent of a focus/hovered link.
Which is handy when there’s an absolutely positioned element that’s a child of a parent that has been translate(d), cos that transform screws up the z-index stacking order.
So one can fix with things like:
.parent:has(a:focus, a:hover) {
z-index: 1;
}
I'm #colorblind and I use https://xkcd.com/color/rgb/ frequently.
Randall 'xkcd' Monroe did a survey of over 100,000 readers where he showed them random rgb colors and said "what would you call this?" and afterwards he did his best to sort the results into the most popular color names and the colors they refer to.
It's like a box of Crayola for the internet. Finally, my colorblind self can grab a sample of "dark magenta" that doesn't just look like "grape purple" to everyone else.
The data is freely available as a .txt file under CC0, which I've converted into a .css file here: https://git.hatspace.net/nycki/nycki.net/src/branch/main/static/xkcd.css
so now when I want a color on my website I can just write `color: var(--xkcd-off-white)` or so on. it's really convenient :)
[5/4]
It’s a post now:
https://adrianroselli.com/2026/02/honoring-mobile-os-text-size.html
712 words, but the images are huge (dimensions, not file size). I also captured fresh images (last night’s were an old version of my demo).
[4/4]
Anyway, I promised @eric and @codingchaos last night to share it but promptly fell asleep. The electrician will be here soon, so I’m doing this in my mobile and have to edit a couple typos in this thread.
Enjoy?
[5/4]
It’s a post now:
https://adrianroselli.com/2026/02/honoring-mobile-os-text-size.html
712 words, but the images are huge (dimensions, not file size). I also captured fresh images (last night’s were an old version of my demo).
I like the idea that CSS must have "graceful degradation" and "do no harm" to the HTML it's affecting.
Although I would argue my CSS skills harm it quite a bit.
Created a simple HTML example of a "chaotic CSS borders" https://chaotic-border-css.netlify.app/ #css #html
I've updated my designs page (https://chriskirknielsen.com/designs/) to use #CSS view transitions instead of a good ol' FLIP animation. Works well in all 3 major browsers in their recent releases. Except… in Chrome it feels sluggish, but if I turn on a performance recording, it's smooth as butter (see the FPS counter via stats.js). Is this just me? Am I doing something wrong?
@simon_brooke chastened. Thanks
@urlyman We've all been there. In more than thirty years of #WebDesign I've written some horrible things myself. I now deliberately separate layout styling and colour styling into separate files, to simplify reskinning colour. But really, if you're using more than a dozen colours on a page, WHY?
#CSS should be simple!
I visited a popular #OpenSource documentation site this morning, and the glare almost blinded me.
Folk, in this day and age, if you run a website, there is NO EXCUSE for not implementing `@media: prefers-color-scheme(dark)`
But, I thought, this is open source! I can submit a pull request to fix this!
Reader, there are ONE HUNDRED AND FORTY-FOUR distinct colours specified in three different syntaxes.
I visited a popular #OpenSource documentation site this morning, and the glare almost blinded me.
Folk, in this day and age, if you run a website, there is NO EXCUSE for not implementing `@media: prefers-color-scheme(dark)`
But, I thought, this is open source! I can submit a pull request to fix this!
Reader, there are ONE HUNDRED AND FORTY-FOUR distinct colours specified in three different syntaxes.
I don’t know what a media query is.
I am hardly an expert at this, however I did the free code camp responsive web design course during lockdown in 2020/21.
IIRC a media query is used to take the screen size and apply specifc attributes (such as font size) according to the size (in pixels) of the screen.
https://www.w3schools.com/css/css3_mediaqueries.asp
Clearly a desktop / laptop screen is a lot bigger than a tablet or mobile.
It should be possible to resize images, much easier with svg as they are meant to scale.
Hope this helps
#html
#css
#mediaquery
#webdesign
Hopefully someone can help with this.
A CSS-only elastic hover effect, because why not?
https://css-tip.com/elastic-hover/
A chrome-only experiment using shape(), sibling-index(), linear(), etc.
When Will CSS Grid Lanes Arrive? How Long Until We Can Use It?, by @jensimmons ( @webkit):
https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/
🤔 "Add text-autospace to status content" https://github.com/mastodon/mastodon/pull/37694
From Webkit blog (https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space): "WebKit defaults to `text-autospace: no-autospace` to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to `text-autospace: normal`…"
It's Baseline 2025 (newly available) on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace
🤔 "Add text-autospace to status content" https://github.com/mastodon/mastodon/pull/37694
From Webkit blog (https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space): "WebKit defaults to `text-autospace: no-autospace` to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to `text-autospace: normal`…"
It's Baseline 2025 (newly available) on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace
Been to https://cssstats.com/ before but looks liked they redid some things. "Visualize your cascading style sheets" with leaderboards and "most popular colors".
If you are a #CSS nerd - def. something for you.
