71–80 of 277 posts
Earlier quoted context omitted.
A simple implementation that works on IE8 https://twitter.com/e1g/status/1313178559234609153
What about inline or inline-block children, such as an aside, a TOC. You are assuming every children is a block. That is not always the case.
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…
> most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.
Many of the css options that make complex layouts more palatable have only been commonly supported more recently. (flex-box:2015 , grid:2017, newer units:2010)
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…
> most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.
Focusing on the box model is important because it sets the right overall mindset for working with CSS layout. At the risk of being too patronizing, I would highly encourage everyone to at least read the MDN article on CSS basics[0] just to set a baseline for CSS terminology, the idea of the box model, and a few other things.
You should then read more detailed documentation [1] on the box model and start to get a feel for how it works in depth. Most pedestrian "spacing issues" should be solved at the level of adjusting margins and padding.
The other arm I mentioned was specificity, and this tends to be where a lot of folks get caught asking why their rules aren't applying and those sorts of issues. The documentation is fairly 'academic' but worth a read-through[2].
MDN overall is a great resource for a motivated learner, but unfortunately I don't have any 'CSS the right way' sorts of articles in my hat at the moment. Maybe others will post some.
[0]: https://developer.mozilla.org/en-US/docs/Learn/Getting_start...
[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
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
> Have you ever tried to read Wikipedia on a very large screen? It looks like this: [image] Those paragraphs are so wide! Wikipedia doesn't constrain the container width at all. This leads to lines that are hundreds of characters in length. NOOOOO! Please, please, please, please stop second-guessing my choice of browser window width! I bought a nice 27" monitor, and maybe I just want to use the whole thing. Why is yo…
Two, (I know you don't care, but for others reading) there are studies that show that for the vast majority of people, width constraints make it easier to read. So there is good reason to enforce those constraints in the design from a usability perspective, not just a design perspective.
Sorry you don't care about the research. When I'm building a site I absolutely DO care about the research, and what will make it work the best for the largest number of people.
Earlier quoted context omitted.
I think part of it is that there are probably lots of additional items that you want to constrain to the main column, so your CSS would end up looking more like: #content p, h1, h2, h3, nav { .. } Kind of a pain to manually specify each element that you want to constrain, when it's most of them. This approach allows you to instead target the items that you don't want to constrain. Additionally, as a more specific iss…
Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; } .content img { max-width: 100%; width: 100%; } It's a neat demo of CSS Grid, for sure, but the above would be my much preferred way of doing this kind of layout. Maybe if there were a need for elements (quotes, callouts, etc.) in the side columns alongside the content,…
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…
> most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.
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
How do you write your full bleed containers, and why do you prefer them?