Mastodon CSS is Awesome
  1. Home
  2. About
  3. Blog

CSS is Awesome

I'm really impressed with all of the new features coming into the language. In-fact, its not "coming into" at all, but has been steadily worked on over the last few years, while a good many of us have been in a JSS haze.

I added a basic light and dark theme to this site and was really impressed in just how quickly I was able to implement it using light-dark and custom properties.

There are some walls, it seems you aren't able to use light-dark together with calculated colors from color-mix just yet, so something like this does not currently work:

background-color: light-dark(
    var(--yellow),
    color-mix(in oklab, var(--yellow), var(--black) 25%)
);

But thats simple enough to work around by just specifying another custom prop like so:

:root {
    --yellow: #ffc53d;
    --yellow-inverse: color-mix(in oklab, var(--yellow), var(--black) 25%);
}
.my-thing {
    background-color: light-dark(var(--yellow), var(--yellow-inverse));
}

Between all the new, system level integrated features in the CSS spec, Baseline, and a general overall improvement to predominantly used browser's being mostly updated timeously (Death stare at Mobile Safari), it feels great to write CSS without processors again.

I hope it encourages more people to start learning organically again.

--