31–40 of 277 posts
Edit: he is using ResizeObserver:
https://developer.mozilla.org/Web/API/ResizeObserver
which hasnt made it past draft JavaScript specification.
Earlier quoted context omitted.
CSS is declarative and not imperative. A lot of people have issues with a different kind of programming. Also the "cascading" nature of CSS makes it hard to reason about.
The differences in how different engines/platforms behave definitely does not help when doing any non-trivial layout.
It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…
I don't like selectively making some children full bleed within an otherwise constrained container. Use full bleed containers instead imo and don't mix the two
Earlier quoted context omitted.
I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…
You could probably write an article that'd be very often read if you teach CSS from this perspective.
Wait until Web developers find about setting a width and horizontal margins: auto on a block container again. As a matter of fact, that would require even less attributes to work compared to the method presented in the article.
> It's relatively easy to constrain all children, but CSS doesn't really have a mechanism to selectively constrain some children. Yes it does. You can use .wrapper h1, .wrapper p {} or soon .wrapper :is(h1,p) {} Alternatively, you can also use .wrapper > :not(.full-bleed) {} And in SCSS (or similar) you can write .wrapper { h1,p {} } (edit: Earlier versions of this comment mentioned :has instead of :is)
:has is not supported in any browser, and that seems unlikely to change, for performance reasons. https://caniuse.com/css-has