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
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.
1
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
Replying to @alanstearns @hj_chen
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.

Jul 31, 2018 · 5:48 AM UTC

1
Replying to @davidbaron @alanstearns @hj_chen
Agree 100% with dbaron's concerns: CSS layout mechanisms need to be robust across devices and environments. There was also a concern about cyclic dependencies, since with abspos the position of the exclusion depends on its impact on wrapping which depends on the position...