Hacker News Reader

Comment by tiffanyh | Hacker News Reader

> There's way too much to do with media break points

As someone who has been handwriting HTML/CSS for literally 25-years, I'm still shocked dealing with media break points isn't easier.

It easily snowballs into you having 3 different CSS (phone/tablet/desktop).

I wish there was something akin to 'light-dark' (where you can specific a different value conditional on the environment) but would be trigger based on window size.

e.g.

  font-size: window-size(1.2em, 1em, 0.8em)

Which would translate to, if the browser window is small (phone), use 1.2em ... if browser window is large (desktop), use 0.8em

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

View on HN

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...

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.

I am not sure if you are joking but there is whole set of techniques called fluid typography that does this (using css math functions mainly clamp) https://fluidtypography.com/ It's not a silver bullet and many people simply don't prefer it to having a few breakpoints (that includes me too).

  font-size: clamp(3.125rem, 3.464vw + 2.229rem, 5rem);

From their website, this is not easy code to maintain.

It’s not obvious how to increase/decrease the font size at a later date.

I prefer this tool: https://utopia.fyi/type/calculator

It generates step size variables and a comment linking back to the web calculator filled with your values.

Virtualization tool may help.

https://modern-fluid-typography.vercel.app/

I use react native and react native web a lot and use dripsy for building design systems — it allows you to do exactly this. Define your breakpoints, and then pass an array of styles to a single style property. It’s really great

https://www.dripsy.xyz/

> As someone who has been handwriting HTML/CSS for literally 25-years, I'm still shocked dealing with media break points isn't easier.

I suspect its that every new project, you deviate, whether someone implements it differently, or someone else entirely implements it, and now you have to hack your way around the chosen path.

The one insane sounding approach I've seen is to just have a UI for one screen, and another ui for another. You hide one on mobile, the other on desktop.

There's so much nuance too, if you dont specify some meta tag your media breakpoints wont even work, which you'll forget when you start a new project after spending 6 years on an already built project.

The closest I've come to that was using Tailwind.

    text=[1.2em] md:text=[1.0em] lg:text=[0.8em]

I'm way behind in the loop these days, but isn't it just a tiny screen (phones) and then large (Tablets and Desktops) these days? Tablets (medium) sizes are now well-sized, so you should ideally be just building for that segment of 1024-1200px width!

That should reduce the media query worry to one single breakpoint, no?

tailwind is pretty close IMO.

text-sm md:text-base lg:text-lg

Mobile: font-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px /

Tablet: font-size: 1rem; / 16px / line-height: 1.5rem; / 24px /

Desktop: font-size: 1.125rem; / 18px / line-height: 1.75rem; / 28px */

Tailwind is pretty nice for this

  <div class="sm:text-lg lg:text-sm" />

doesn't tailwind do this?

Tailwind doesn't to anything special here. Its just css media queries.

Reply on news.ycombinator.com