css — Build stuff; Break stuff; Have fun!

CSS: light-dark(lightColor, darkColor)

Tue, 19 Nov 2024 19:08:04 +0000

This is a little gem I've found. In the future, this can save some lines of code.

An example implementation could be:

:root {
  --theme-bg-light: #eeeeee;
  --theme-bg-dark: #111111;
}

.my-component {
  background-color: light-dark(var(--theme-bg-light), var(--theme-bg-dark));
}

I'm excited to use this feature in non-tailwind projects. :)

38/100 of #100DaysToOffload

#log #dev #css

Discuss...

CSS: align-items: "last baseline";

Thu, 30 May 2024 08:58:58 +0000

Lately, I discovered this CSS value of the align-items property, which I didn't know about. I just wanted to share it. For me, it came quite handy in a project.

align-items: "last baseline";

More about this feature:

https://web.dev/blog/last-baseline?hl=en
https://devdocs.io/css/align-items#baseline

I hope it will help someone.

28/100 of #100DaysToOffload

#log #dev #css

Discuss...