5 ms·

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? A

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some additional markup and inline CSS, but the inline CSS was stripped during an upgrade to the latest inline HTML editor we use here. Anyway, the graphic was supposed to be a flourished section break that was center-aligned, and instead it is now a white bar that is currently even longer than the anchor text that is also overlapping the background imagery. If you remove the graphic, be careful because it reveals this...other problem, also with the CSS. You know you can scroll to the left and right really easily if you hold down shift?

brundolf 5y ago
I'll link (plug) an article I wrote where I look at a case study that's similar to what you describe and use it to talk about my broader philosophy: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I wrote this a good few years ago and the writing style isn't great looking back, but I stand by the ideas :)
hypertele-Xii 5y ago
All the problems you just listed are everywhere else but the CSS.
- blacktriangle 5y ago
  All the problems he listed are very real, and its important that a technology fit in our actual working model, not just some theoretical model. Take his example of the images being off thus screwing up your widths because you chose to inherent the image width as a constraint. Now imagine a very realistic scenario where you are reusing that style across multiple pages, and each page has a different image. Now you need to confirm this works for all existing and future possible images, good luck with that. Point being, isolating element styles from each other where possible is a big win for maintainability and reliability.
  - berkes 5y ago
    The problems may be real, but blaming CSS for them is both unfair and unconstructive. You want CSS to solve this problem that other tools and workflows introduce? `article .content img { width: auto; display: block; max-width: 100%; }`. This is not the solution, but one of many possible. > ... step back and understand where its current width is coming from, and determine how that flow can be shifted upstream to achieve the desired result. Step back here is seeing that large images in certain containers push the container out and that you want to avoid this. If you want CSS to avoid the problems you list, in the first place: that is just unconstructive: The tooling, holiday schedule, poor migrations, and broken upgrades are causing the issues, the constructive solution would be to fix those. And if you cannot, to look at how CSS can help you with them. > Now you need to confirm this works for all existing and future possible images, good luck with that. This is not hard at all. It is what both the C in CSS and classes and inheritance solve for you. `img.leader` vs `img.aside` vs `article p.teaser img` vs `article img` etceteras.
    - blacktriangle 5y ago
      Expecting CSS to solve people on holiday is not the point, but expecting a technology to protect me from the much more general problem of other developers and content generators making mistakes is something I think you can blame on CSS. Going back to brundolf's point, he's arguing that you should try and take advantage of relative constraints as much as possible as CSS lets you do that. I'm arguing the opposite, and so are you in your last line, that the solution is to hardcode those images and decouple the two components. You can say don't blame CSS as it gives you a multitude of options for how to deal with the situation, but the counterargument is that good tools lead you to a "pit of success" where the correct way is obvious, and CSS is more like a "tiny little bridge out of Moria of success" where you're just asking to fall to your doom.
      - hypertele-Xii 5y ago
        CSS is not a technology designed nor intended to protect you from anything. It's a technology that enables professionals to style web pages. And it's simple enough that even amateurs can accomplish much.
kwhitefoot 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? On a touch interface?
- codetrotter 5y ago
  On a touch interface you drag sideways to scroll. That being said it's very annoying to read anything that needs to be scrolled sideways. So if I come across it I zoom out and if it's too small to read then I navigate away from the site.
robin_reala 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? On macOS, but not by default on Windows. On the other hand, Chrome has adopted this as default behaviour even on Windows, so I guess Edge has got it now too.
extra88 5y ago
> You know you can scroll to the left and right really easily if you hold down shift? You can scroll left and right easily, not everyone can. Avoiding the need to scroll in two directions makes content more usable to everyone but there's also a WCAG criterion about it. https://www.w3.org/WAI/WCAG21/Understanding/reflow https://www.w3.org/WAI/WCAG21/Understanding/reflow
- burnished 5y ago
  That line was tongue in cheek, I believe. Nice of you to share that link though.
robertoandred 5y ago
You should be setting image widths/max-widths in CSS to avoid layout problems due to unknowns like intrinsic image dimensions.

brundolf 5y ago

I'll link (plug) an article I wrote where I look at a case study that's similar to what you describe and use it to talk about my broader philosophy: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I wrote this a good few years ago and the writing style isn't great looking back, but I stand by the ideas :)

hypertele-Xii 5y ago

All the problems you just listed are everywhere else but the CSS.

blacktriangle 5y ago
All the problems he listed are very real, and its important that a technology fit in our actual working model, not just some theoretical model. Take his example of the images being off thus screwing up your widths because you chose to inherent the image width as a constraint. Now imagine a very realistic scenario where you are reusing that style across multiple pages, and each page has a different image. Now you need to confirm this works for all existing and future possible images, good luck with that. Point being, isolating element styles from each other where possible is a big win for maintainability and reliability.
- berkes 5y ago
  The problems may be real, but blaming CSS for them is both unfair and unconstructive. You want CSS to solve this problem that other tools and workflows introduce? `article .content img { width: auto; display: block; max-width: 100%; }`. This is not the solution, but one of many possible. > ... step back and understand where its current width is coming from, and determine how that flow can be shifted upstream to achieve the desired result. Step back here is seeing that large images in certain containers push the container out and that you want to avoid this. If you want CSS to avoid the problems you list, in the first place: that is just unconstructive: The tooling, holiday schedule, poor migrations, and broken upgrades are causing the issues, the constructive solution would be to fix those. And if you cannot, to look at how CSS can help you with them. > Now you need to confirm this works for all existing and future possible images, good luck with that. This is not hard at all. It is what both the C in CSS and classes and inheritance solve for you. `img.leader` vs `img.aside` vs `article p.teaser img` vs `article img` etceteras.
  - blacktriangle 5y ago
    Expecting CSS to solve people on holiday is not the point, but expecting a technology to protect me from the much more general problem of other developers and content generators making mistakes is something I think you can blame on CSS. Going back to brundolf's point, he's arguing that you should try and take advantage of relative constraints as much as possible as CSS lets you do that. I'm arguing the opposite, and so are you in your last line, that the solution is to hardcode those images and decouple the two components. You can say don't blame CSS as it gives you a multitude of options for how to deal with the situation, but the counterargument is that good tools lead you to a "pit of success" where the correct way is obvious, and CSS is more like a "tiny little bridge out of Moria of success" where you're just asking to fall to your doom.
    - hypertele-Xii 5y ago
      CSS is not a technology designed nor intended to protect you from anything. It's a technology that enables professionals to style web pages. And it's simple enough that even amateurs can accomplish much.

kwhitefoot 5y ago

> You know you can scroll to the left and right really easily if you hold down shift? On a touch interface?

codetrotter 5y ago
On a touch interface you drag sideways to scroll. That being said it's very annoying to read anything that needs to be scrolled sideways. So if I come across it I zoom out and if it's too small to read then I navigate away from the site.

robin_reala 5y ago

> You know you can scroll to the left and right really easily if you hold down shift? On macOS, but not by default on Windows. On the other hand, Chrome has adopted this as default behaviour even on Windows, so I guess Edge has got it now too.

extra88 5y ago

> You know you can scroll to the left and right really easily if you hold down shift? You can scroll left and right easily, not everyone can. Avoiding the need to scroll in two directions makes content more usable to everyone but there's also a WCAG criterion about it. https://www.w3.org/WAI/WCAG21/Understanding/reflow https://www.w3.org/WAI/WCAG21/Understanding/reflow

burnished 5y ago
That line was tongue in cheek, I believe. Nice of you to share that link though.

robertoandred 5y ago

You should be setting image widths/max-widths in CSS to avoid layout problems due to unknowns like intrinsic image dimensions.