4 ms·

> 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

> 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/light-dark https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

lstamour 2y ago
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 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/width https://developer.mozilla.org/en-US/docs/Web/CSS/@media/widt...
- tiffanyh 2y ago
  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 :)
  - lstamour 2y ago
    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 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.
    - tiffanyh 2y ago
      You can't use variables in the media query itself. https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries https://stackoverflow.com/questions/40722882/css-native-vari...
      - cton 2y ago
        You’ll be able to one day! https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-medi...
  - reducesuffering 2y ago
    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.
    - xyzzy4747 2y ago
      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.
earthnail 2y ago
The closest I've come to that was using Tailwind. text=[1.2em] md:text=[1.0em] lg:text=[0.8em]
tomr75 2y ago
doesn't tailwind do this?
- omnimus 2y ago
  Tailwind doesn't to anything special here. Its just css media queries.
omnimus 2y ago
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/ 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).
- tiffanyh 2y ago
  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.
  - wonger_ 2y ago
    I prefer this tool: https://utopia.fyi/type/calculator https://utopia.fyi/type/calculator It generates step size variables and a comment linking back to the web calculator filled with your values.
  - todotask 2y ago
    Virtualization tool may help. https://modern-fluid-typography.vercel.app/ https://modern-fluid-typography.vercel.app/
giancarlostoro 2y ago
> 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.
yawnr 2y ago
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/ https://www.dripsy.xyz/
Brajeshwar 2y ago
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?
victorbjorklund 2y ago
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 */
kcrwfrd_ 2y ago
Tailwind is pretty nice for this <div class="sm:text-lg lg:text-sm" />

lstamour 2y ago

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 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/width https://developer.mozilla.org/en-US/docs/Web/CSS/@media/widt...

tiffanyh 2y ago
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 :)
- lstamour 2y ago
  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 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.
  - tiffanyh 2y ago
    You can't use variables in the media query itself. https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries https://stackoverflow.com/questions/40722882/css-native-vari...
    - cton 2y ago
      You’ll be able to one day! https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-medi...
- reducesuffering 2y ago
  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.
  - xyzzy4747 2y ago
    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.

earthnail 2y ago

The closest I've come to that was using Tailwind. text=[1.2em] md:text=[1.0em] lg:text=[0.8em]

tomr75 2y ago

doesn't tailwind do this?

omnimus 2y ago
Tailwind doesn't to anything special here. Its just css media queries.

omnimus 2y ago

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

tiffanyh 2y ago
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.
- wonger_ 2y ago
  I prefer this tool: https://utopia.fyi/type/calculator https://utopia.fyi/type/calculator It generates step size variables and a comment linking back to the web calculator filled with your values.
- todotask 2y ago
  Virtualization tool may help. https://modern-fluid-typography.vercel.app/ https://modern-fluid-typography.vercel.app/

giancarlostoro 2y ago

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

yawnr 2y ago

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/ https://www.dripsy.xyz/

Brajeshwar 2y ago

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?

victorbjorklund 2y ago

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 */

kcrwfrd_ 2y ago

Tailwind is pretty nice for this <div class="sm:text-lg lg:text-sm" />