Author | Lightnews

Dennis Frank @freshmango.bsky.social · 1d

#CSS problem: Parent won’t scale to child height when using percentage for `valueToRound` in `round()`:

`.child { block-size: round(up, 100%, 5lh) }`

Circular issue? Ideas for an elegant solutions?

CodePen: codepen.io/df/pen/myVXw...

round(): developer.mozilla.org/en-US/docs/W...

#HTML #webbed

round() with percentage – parent sizing

...

codepen.io

1

Dennis Frank @freshmango.bsky.social · Jun 9

Most important update of the WWDC: Anchor Positioning! 🥰https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/#anchor-positioning

2

Dennis Frank @freshmango.bsky.social · Jun 9

Oh, that’s so nice! Employers, or clients in my case, should provide us with test devices, right? Right?! 😄

1

Reposted by Dennis Frank

Hidde @hidde.blog · Jun 7

thanks for asking! This is the document I was referring to in my response w3c.github.io/sustainablew...

w3c.github.io

1 1

Dennis Frank @freshmango.bsky.social · Jun 7

🤯

1

Reposted by Dennis Frank

Matthias Ott @matthiasott.com · Jun 7

I just realized that today is #CSSYesterday.

3 1 17

Dennis Frank @freshmango.bsky.social · Jun 6

@hidde.blog @cssday.nl Do you think there is a need for official regulation and legislation regarding the energy consumption of digital products such as websites? Or are there already such initiatives? (Like we have with accessibility in the EU.) #cssday

1 1

Dennis Frank @freshmango.bsky.social · Jun 6

🤯 @amitsheen.bsky.social is going to build a CPU in CSS now. Yeah… I mean… why not, right!? #cssday

Amit on stage explaining the 7 CPU logic gates:

Dive into the CPU

Not
And
Or
Nand
Nor
Xor
Xnor

2 3

Dennis Frank @freshmango.bsky.social · Jun 6

Styling form controls will be SO MUCH easier in the (hopefully not so far) future. @ntim.bsky.social demonstrates examples from the CSS Form Control Styling Level 1 specification draft (www.w3.org/TR/css-forms...) #cssday

Tim demonstrates how to date/time inputs

2

Reposted by Dennis Frank

Una Kravets @una.im · Jun 6

More anchors! @ishadeed.com #CSSDay

Truly amazing how powerful this next generation of responsive UI features is with :has(), anchors, container queries, style queries, *ALL THE THINGS*

(and there are so so many more)

3 18

Dennis Frank @freshmango.bsky.social · Jun 6

So, so true. The gap between design tools and the possibilities of the CSS based web platform is
getting bigger year by year. @ishadeed.com at #cssday. (Reminds me of @matthiasott.com‘s talk last year cssday.nl/2024/#matthias)

Ahmad on stage showing a slide titled ”Building a layout” where the feature gap between Figma and modern CSS is visualized in two differently sized circles which contain keywords of different technological features. Text between both circle: “The gap is getting bigger year by year.”

5 17 87

Reposted by Dennis Frank

Artem Pendiurin @erblack.me · Jun 5

A #sketchnotes for the talk "Multicol and fragmentation" by @rachelandrew.bsky.social‬ at the @cssday.nl #cssday

1 6 8

Dennis Frank @freshmango.bsky.social · Jun 5

Anyone using a headless printer to browse? 🤪 #cssday

1

Dennis Frank @freshmango.bsky.social · Jun 5

Implementing column-span is challenging (github.com/w3c/csswg-dr...). It could lead to many unwanted layout issues. @rachelandrew.bsky.social: “If something terrible happens, it should at least be spec'd so that the terrible thing happens the same in every browser.” #cssday

Rachel on stage. Showing a multi column page layout wich column spanning pictures.

2

Reposted by Dennis Frank

Una Kravets @una.im · Jun 5

Great CSS trick documented by @ishadeed.com for showing conditional border radius (border radius on desktop, none on mobile)

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;

(via @nerdy.dev at #CSSDay)

ishadeed.com/article/cond...

Conditional Border Radius In CSS

How to use CSS comparison functions to create a conditional border radius

ishadeed.com

2 13 140

Dennis Frank @freshmango.bsky.social · Jun 5

@cssday.nl @rachelandrew.bsky.social Why aren’t there logical margin at-rules, like for example @block-start-inline-end? Or wouldn’t it make sense for printed pages? And what about margin at-rules for columns in multi-column layouts? #cssday

Dennis Frank @freshmango.bsky.social · Jun 5

Actually, this isn’t an accurate summary of #cssday. This is THE event to attend if you love (and live) CSS. It's not often that CSS is discussed so seriously. So good that CSS is given the prominence it deserves here.

1 4

Dennis Frank @freshmango.bsky.social · Jun 5

Would it be weird if I put on my sunglasses? 😎 #cssday

I am seated next to a very bright spotlight that shines upward from the floor. The image captures this perspective, highlighting a brilliant yellow light with prominent lens flares.

2

Dennis Frank @freshmango.bsky.social · Jun 5

Summarize #cssday 😉😭

A browser support graphic. Chrome/Edge are checked. Safari and Firefox are unchecked.

1 1

Dennis Frank @freshmango.bsky.social · Jun 5

I really like how open and transparent @cydstumpel.nl is. She always credits people who’ve offered advice in her talk about CSS view transitions. So much respect for live coding. #cssday

Syd and Stephen Hay sitting at a table with a bouquet of flower on stage.

6

Dennis Frank @freshmango.bsky.social · Jun 5

@cydstumpel.nl demonstrates how to pause CSS view transitions and use the `::view-transition` pseudo class (developer.mozilla.org/en-US/docs/W... ) to inspect and debug view transitions. #cssday

Cyd on stage showing a Chrome browser with open developer tools demonstrating a paused view transitions state.

1

Dennis Frank @freshmango.bsky.social · Jun 5

They are livestreaming fishes waiting at a gate in the Netherlands… as I just learned… 🤷‍♂️ #CSSDay

1

Dennis Frank @freshmango.bsky.social · Jun 5

#cssday > .urinal {
overflow: visible;
}

A note on a tiled wall with the text:

A Plumber is on the way
Please use the other toilets instead

1 3

Dennis Frank @freshmango.bsky.social · Jun 5

So great to be back! Catch you later!

1

Dennis Frank @freshmango.bsky.social · Jun 5

Ha! An almost secret counter. I'm so happy about the sheer plethora of cool stuff by @miriam.codes. Give me more! #cssday #deeppink

1 3