Hacker News Reader

Comment by lstamour | Hacker News Reader

If you want responsive page elements that change styling as you reflow the page, we have that now - container queries - https://developer.chrome.com/blog/css-ui-ecommerce-cq but it's still somewhat new, and nobody's existing design systems support them yet. People (myself included sometimes) still prefer using JavaScript for this stuff. It'll change over time, though. (Also I've been wishing for this for almost two decades now, so I'm glad to see it arrive!)

Edit: Though even simpler than that is the width media query, which I think you might be looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/widt...

View on HN

Thanks for sharing.

I've just found that approach very clunky in practice, hence my comment about it snowballs into effectively having 3 different CSS (phone/tablet/desktop) and wrapped in media width queries.

Though maybe I use it incorrectly.

I'm always open to learning something new :)

Well, I'm not sure of other syntaxes to make it simpler, but you could use a CSS variable to make it a little easier: https://developer.mozilla.org/en-US/docs/Web/CSS/var Especially if you re-use the same padding values for multiple parts of the page/site. Then you won't have to update values in 3 different places for each padding/font-size/whatever rule. Instead just set the variable for each @media width and then in your later rules, use the single variable to refer to the correct value for all breakpoints.

Also, some units cascade. So if you set the top-level or parent to a particular size, then child elements inside can inherit (or ignore) the unit. This means at a top level you can set your font-size for each @media width, and then use relative units and it will inherit down. But that only works for very small websites, because it introduces subtle bugs as you incorporate more controls from people not aware of your particular practice.

You can't use variables in the media query itself.

https://stackoverflow.com/questions/40722882/css-native-vari...

You’ll be able to one day!

https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-medi...

I'm partial to the TailwindCSS approach where they're right next to each other like:

<div className="text-sm lg:text-lg"> Hello World </div>

I don't know how resizing defaults would work well for most cases instead of specifying what you want.

Tailwind is by far the easiest approach in my experience. You can always use custom CSS additionally if you have to, but it's rarely needed.

Reply on news.ycombinator.com