Notes about css

Color nerdery ahead: I’ve been a fan of the CIELAB color space ever since I discovered Lab mode in Photoshop 20-ish years ago — it’s so awesome and useful to be able to manipulate color channels separate from luminosity! — and so I’m thrilled that web design is heading that direction as well with the new OKLCH color space in CSS Color 4.

This article from Evil Martians about why they’ve made the switch to OKLCH is a great read on the ins and outs of the new color space and why you should consider using it over the more familiar ancient standards. The TL;DR: unlike hexadecimal or RGBa values, Lab/LCH is much easier to read and adjust directly in CSS as well: want to make a color more saturated? Just adjust the middle value, chroma! Oh, and contrast is preserved between different colors so long as the Luminosity remains the same, which makes conforming to the WCAG-compliant color contrast accessibility guidelines that much easier.

I also learned from this in-depth article that Adobe Photoshop has adopted the OKLab space as a “perceptual” option when generating color gradients. Look at how ugly that “classic” gradient is in their screenshot! Gradients in Photoshop have always been messed up, so this is a pretty huge change that they’ve made.

A fantastic post / trip down memory lane on the insanity that was developing for the web (the post touches on HTML and JS, not just the CSS of the title) from the late 90s through today.

A decent roundup of ways that you can fine-tune your word/character-level typography on the web — I don’t 100% agree with all of his suggested specific fixes, but knowing how one can make these adjustments in the first place is the important part. I might also add mention of the CSS overflow-wrap: break-word rule which has come up twice as something I needed in the last couple of projects I worked on (okay, that’s not really a spacing technique so much as a fix for overly-long words, but thought it worth mentioning alongside font tweaks)