71–80 of 107 posts
> CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break. Only if you learned from the wrong source.
Why don't 's default to: "cursor: pointer;"?
Also, to be pedantic, not all buttons are entirely clickable, only small portions of them.
Edit: Interesting that HN doesn't use the cursor hand for reply / updating. ;)
Earlier quoted context omitted.
All the problems you just listed are everywhere else but the CSS.
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…
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.
For me those rules are not the fundamentals. There's more you need to know to actually get CSS to work (and I still usually have to guess and google and try random things to get it to work because my knowledge is lacking) In particular trying to get content of some flexbox to fill the space provided by the flexbox itself, especially in a single non-scrolling app like page where you're trying to constrain everything t…
I think there is a very easy fix to most HTML/CSS problems when building GUI on the web - use HTML5 canvas. HTML is not a good match for GUI and CSS is not a good match for...anything. HTML5 canvas brings you to where Windows/X was 25 years ago so instead of trying to build GUI using TUI, just use the damn GUI already. Sure, the whole lot of tooling is missing but some copy/paste/fix from either Windows or X should p…
I get where you're coming from, I really do. HTML5 and CSS are just bad tools for doing GUIs. But there is so much infrastructure built up around them that just overrules any advanage we would get hand rolling a GUI directly rendered to canvas.
Earlier quoted context omitted.
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…
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 achie…
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.
For me those rules are not the fundamentals. There's more you need to know to actually get CSS to work (and I still usually have to guess and google and try random things to get it to work because my knowledge is lacking) In particular trying to get content of some flexbox to fill the space provided by the flexbox itself, especially in a single non-scrolling app like page where you're trying to constrain everything t…
I understand why this is the case (mostly thanks to a patient HN commenter who explained it to me), but holy hell it annoys me how unintuitive it is. You have to set min-width to stop a flex child being too big? Get out of here with that nonsense.
The common wisdom seems to be that 1D layouts should use flex and 2D should use grid, but I don't think I agree with that. These days, I only ever use flex for layouts that should actually be flexible. Even if it's a single dimension, if it's fixed-widths it's straight to grid for me now, and my life is measurably better for it.
Earlier quoted context omitted.
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 a…
> 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
These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…
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 a…
Earlier quoted context omitted.
I just add this to the CSS: * { border: dotted red; }
You should generally use outline instead of border for this, since it doesn't affect the size of the element.