#css5 — Public Fediverse posts

The making of a #CSS5 HDR enabled gradient tool a fun peek into the sketching that led to the gradient line UI, the color picker, the overall layout, some math and more! nerdy.dev/the-making-o...

#Development #Proposals
Searching for a new CSS logo · It’s time for a change and some fresh proposals https://ilo.im/160cew

_____
#Logo #CSS #CSS3 #CSS4 #CSS5 #CSS6 #Evolution #Community #WebDev #Frontend

I would love to see proper versioning on CSS. I still remember the release of CSS3 and it's sad, that this moment just happened once in the 18 years I do this job now.

At the same time other language had multiple ground breaking releases.

CSS isn’t developing in a slow way. Not a bit. But you can't put the finger on a feature set. You can't hire for a specific feature set.

"10 years of CSS experience" can mean, that border-radius is the most exciting thing that person ever did and starts to cry if they see the clamp syntax.

"1 year experience with CSS 5" on the other hand would be pretty clear.

https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/

#WebDev #CSS #CSS3 #CSS4 #CSS5 #Coding

Am I the only one not excited about the new versioning thing of CSS? CSS4, CSS5, CSS10!

I don't think I will get used to that 😖

#CSS #CSS3 #CSS4 #CSS5 #CSS6

A really interesting read.

“Naming is always hard, yet it’s just something we have to do in CSS to properly select things. I think it’s time we start naming [CSS releases] like this, too. It’s only a matter of time before “modern” isn’t “modern” anymore.” — Geoff Graham

https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/

#css #css3 #css4 #css5 #css6 #cssNext #w3c #webdev

#Development #Challenges
It’s time to talk about ‘CSS5’ · What’s the optimal way to describe CSS’s evolution? https://ilo.im/15zpet

_____
#ModernCSS #Naming #CSS3 #CSS4 #CSS5 #CSS6 #W3C #WebDev #Frontend #CSS

v2 of boxes around square

https://codepen.io/bigandy/pen/vYwRyPq?editors=0100

#css #css5 #codepen

Boxes around a square with line to middle

https://codepen.io/bigandy/pen/LYodVMM

#css #codepen #css5

css squares in a square animation with css trig and clamp()

https://codepen.io/bigandy/pen/eYaMNdv?editors=0100

@rachsmith

#css #css5 #codepen

Balloons on strings!

https://codepen.io/bigandy/pen/qBGxgLL?editors=0010

#css #css5 #codepen

CSS Balloons on string

#css #css5 #codepen

https://codepen.io/bigandy/pen/VwOQWXj?editors=0100

Diagonal lines css (Chrome+) with anchor-positioning

https://codepen.io/bigandy/pen/gOJvaZo?editors=0100

#css5 #css #codepen

sin() css

https://codepen.io/bigandy/pen/VwOyqgG

#css5 #css #codepen

sin() and scroll-driven animation

https://codepen.io/bigandy/pen/VwOyqgG

#css5 #css #codepen

More CSS mod() action

https://codepen.io/bigandy/pen/KKLXOmg?editors=0100

#css #css5 #codepen

Finally got my head around mod() in #css

https://codepen.io/bigandy/pen/RwmLMGx?editors=0010

#codepen #css5

CSS anchor-positioning with mouse cursor and clicks

https://codepen.io/bigandy/full/RwmLVJp

#css #css5 #codepen #demo

#Development #Previews
CSS3? Pfff. · CSS4 and CSS5 are coming, and CSS6 is the future https://ilo.im/15ywmr

_____
#CSS3 #CSS4 #CSS5 #CSS6 #WebDev #Frontend #HTML #CSS

#Development #Proposals
Initial CSS level categorization · How we could better organize the evolving landscape of CSS https://ilo.im/15ysr9

_____
#CSS #ModernCSS #Versioning #CSS3 #CSS4 #CSS5 #WebDev #Frontend

It's time to put to rest #hex and #rgb() / #rgba() colours in #CSS and embrace the future: #oklch() and #oklab()

* oklch() model: https://caniuse.com/?search=oklch%28%29
* oklab(): https://caniuse.com/?search=oklab%28%29

I'm not sure why we still need to add/support lch() and lab() since the ‘okay’ version is the ‘fixed’ version… which is better. Then again, I'm not a #colour expert, hence I can't think of a reason. (Can someone enlighten us, mortals? Thank you!)

Since oklch(), oklab(), lch(), and lab() are still not widely supported (yet), and many end-users are still using an old version of browsers without support, there is #hwb().

As you can see from https://caniuse.com/?search=hwb%28%29 hwb() is widely supported already. The only browsers still without hwb() support are niche browsers, mainly from China (they don't even support rgb() according to #CanIUse).

* Base #color model: hwb()
* To be future proof: oklch() or oklab()

What I'm more excited about is the #RelativeColor feature from #CSSColor5, but that's for another day.

#CSSColor4 #CSS5 #CSS #colors #color #webdev #webmaster

#css5 "@layers"; this seems more useful than css modules.

if I have a current framework that doesn't use them, is there a tool to recompile the framework onto a 'layer0' .
Tagging layers to a relative file import inside your current stylesheet is less good for short / predictable load speed.