the unofficial sequel to my CSS shapes article written more than 3 years ago. let's talk a bit about CSS exclusions (and also, specifications, and building demos, and raising bugs) #webdev #css bit.ly/bey-exclusions

CSS exclusions with Queen Bey

I recently came across a post by Ben Frain expressing his frustrations about CSS shapes and exclusions. And although I can see where he is coming from (he made that pretty clear in his examples), I...

chenhuijing.com
1
7
2
22
For what it's worth, my basic argument against the current exclusions proposal is that they promote the opposite of responsive design: design that's fragile and breaks in response to slight changes in viewport size, fonts, or other variables.
1
2
I think that in order for an exclusions model to be responsive, the rules for placement of the exclusions need to have a collision handling model, so that the way you place exclusions involves rules for how to move the exclusion if you put two in the same place.
1
3
Floats have this, but absolute positioning doesn't. And I think it's particularly bad in paginated contexts, which is where most of the demos of exclusions focused.
1
1
A collision handling model could involve defaults (like floats), or it could involve a way to specify the collision handling behavior in some way. But overlap by default is not a good behavior.
1
1
Explicit grid positioning has overlap by default - why isn't it an issue for you there?
2
Replying to @alanstearns @hj_chen
There it's "always overlap" rather than "sometimes overlap as a function of lots of variables", right? (Or did I miss something?) So it's much more clearly an intentional choice to overlap.

Jul 31, 2018 · 5:10 AM UTC

1
Replying to @davidbaron @hj_chen
Since I expect the most common positioning scheme for exclusions will be explicit grid positioning, I don't really see the distinction you're drawing here.
1
I think (without thinking too hard) I'd be fine with a within-grid exclusions model, i.e., an exclusion created by one grid item (and its shape) excluding space from line boxes in the normal flow of other items of the same grid.
1
more replies