News for hackers. Stuff that matters.

A comment on CSS Findings from the Threads App. Parent comment

Re:CSS Findings from the Threads App by fendy3002 on Sunday July 16, 2023 @08:51AM (#36746427)
Because most css without context are useless. A div with width 100% may not stretch depending on it's content and parent css. It's even worse on positioning, margin and responsiveness.

Which is why if you don't interact with it day to day basis, you'll need some trial and error, as well as references and examples.

Opposite to backend or usual programming where `foo = foo + 1` is most of the time do an increment by one (exception apply)

[ Parent | on HN ]
Re:CSS Findings from the Threads App by dmix on Sunday July 16, 2023 @09:10AM (#36746603)
There's a lot of unpredictable stuff too. I was trying to change the border color of a checkbox to match a framework being used elsewhere and for the life of me couldn't figure out why neither setting outline or border changed it. But on the framework's website demo it was doing it just fine.

Combing through the CSS and the computed styles panel in dev tools gave me nothing.

It turned out there is an option to disable the standard OS form theming which isn't communicated at all in dev tools for that element (and I hadn't seen --webkit-apperance used before as the guide says you really shouldn't mess with it): https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Sunday July 16, 2023 @09:10AM (#36746606)
Weeeeeeeell a div is 100% width by default. It will always fill the width of the parent container unless you explicitly change the width.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by fendy3002 on Sunday July 16, 2023 @09:30AM (#36746790)
Afaik div width property is almost useless if the parent set the display as flex, or if the div has no content.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Sunday July 16, 2023 @10:31AM (#36747429)
That’s kinda the point of flex though. The width is determined by the flex rules; width 100% doesn’t make much sense in that context.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by truckerbill on Sunday July 16, 2023 @09:49AM (#36746971)
Not if the parent or ancestors don't have a width set... Hence why you need context.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Sunday July 16, 2023 @11:37AM (#36748202)
The parent has _some_ width, even if it’s not explicitly set.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by truckerbill on Monday July 17, 2023 @11:22AM (#36759346)
Yes, and I wish 100% would respect that implicit width but it doesn't. Try it
[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Monday July 17, 2023 @05:00PM (#36764010)
Any chance you could show an example? In theory a block level element can only sit inside another block level element. And those expand to the width of their parent unless you constrain the width.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by truckerbill on Tuesday July 18, 2023 @07:36AM (#36770707)
https://jsfiddle.net/jcaysopd/75/

I have no doubt there is a 'logical reason' for the behaviour but it doesn't stop it being annoying to work with.

[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Friday July 21, 2023 @05:47PM (#36820336)
Gotcha. That’s because of the 100% vs auto thing. These days everyone just puts “box-sizing: border-box” on everything to make it go away.

This explains a bit more about what you’re seeing

http://stackoverflow.com/questions/28353625/why-does-percent...

[ Parent | on HN ]
Re:CSS Findings from the Threads App by have_faith on Sunday July 16, 2023 @10:29AM (#36747403)
100% isn’t the default value, ‘auto’ is. Which has the effect of appearing 100% in many scenarios? But not all.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by aidos on Sunday July 16, 2023 @11:36AM (#36748185)
Fair, but actually that just means that the border and margin etc are pushed outside the container. In either case the div is operating by taking up the full width of the container.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by gochi on Sunday July 16, 2023 @10:00AM (#36747087)
Backend or usual programming without context is also useless. Is foo even mutable? Is it the same type? How does type conversion work here?

CSS and usual programming are identical. If you don't give yourself the time to learn the fundamentals, you'll always run into tedious problems.

[ Parent | on HN ]
Re:CSS Findings from the Threads App by bombolo on Sunday July 16, 2023 @10:20AM (#36747309)
I know the fundamentals. Doesn't help :D
[ Parent | on HN ]
Re:CSS Findings from the Threads App by gochi on Sunday July 16, 2023 @10:24AM (#36747361)
Maybe it's time to relearn the fundamentals! web.dev and MDN are great resources to do so. Start with the Box Model.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by XajniN on Sunday July 16, 2023 @01:07PM (#36749229)
Fundamentals don’t help when you are 15 divs deep.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by marcosdumay on Sunday July 16, 2023 @02:19PM (#36749995)
You have made some bad decisions if you find yourself 15 divs deep.

There is a surprisingly small amount of content out there on how to competently engineer your CSS (and a lot of it is bad). Most people don't even think it's something you do.

But basic things like making your general rules generic and pushing context descriptively into the HTML go a long way into making your code understandable.

[ Parent | on HN ]
Re:CSS Findings from the Threads App by XajniN on Sunday July 16, 2023 @02:23PM (#36750020)
Not my choice, that’s what you get when you inherit an Angular website.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by bombolo on Sunday July 16, 2023 @05:19PM (#36751508)
> You have made some bad decisions if you find yourself 15 divs deep.

Open instagram.com in a browser :D

[ Parent | on HN ]
Re:CSS Findings from the Threads App by troupo on Tuesday July 18, 2023 @02:46AM (#36768745)
Or even W3C's own website
[ Parent | on HN ]
Re:CSS Findings from the Threads App by truckerbill on Monday July 17, 2023 @11:26AM (#36759405)
Do you mean leaning on rules like: .myWidgetClass form{ ... } .myWidgetClass form >input{ ... }
[ Parent | on HN ]
Re:CSS Findings from the Threads App by marcosdumay on Monday July 17, 2023 @06:10PM (#36764754)
Sure, if you have some general rules that apply to all your widgets. If you are talking about something more specific, you are better with a more specific name.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by netghost on Sunday July 16, 2023 @07:01PM (#36752294)
I've got a feeling some people might consider this to be a rather snarky response, but honestly a lot of trouble comes from assuming you can muddle through CSS, and you can. Unfortunately that means it's easy to always be an expert beginner, and never quite grasp the underlying logic, as obtuse as it may be.
[ Parent | on HN ]
Re:CSS Findings from the Threads App by alwillis on Sunday July 16, 2023 @12:35PM (#36748835)
A lot of people learned the fundamentals incorrectly.

A good place to learn how CSS was designed to work is Every Layout at https://every-layout.dev/.

[ Parent | on HN ]