I’d like to hear the author’s approach to vw and vh units. I’ve tended to use these units where I want a specific feel and it’s worked relatively well over the years. I’m surprised it was not mentioned given the justifying of ch was around the desire of a consistent layout.
Death to px, long live ch
31–40 of 86 posts
Re: Death to px, long live ch
#32What I want to know is who decided to break px, the last thing we need is yet another screwball physical measurement, css was already full of them. But what "tut tut, everybody is using px and these new hi-dpi displays are rendering things really tiny, we can't have that" and now px as a useful unit is ruined. Is there a way to use real pixels? My, admittedly quick, search says no. at least nothing jumps out at me fr…
You can kinda get close in pure CSS with CSS media queries using the resolution query on dppx measurements; but that only allows you to be as granular as however many distinct "dots per CSS pixel" values you want to add media queries for. Something like this would let you scale by device resolution for both traditional 96dpi screens, higher DPI 192dpi screens, and super high resolution 288dpi screens:
body { --resolution-scale: 1; }
@media (min-resolution: 2dppx) { body { --resolution-scale: 2; } }
@media (min-resolution: 3dppx) { body { --resolution-scale: 3; } }
.myPixelSizedElement { width: calc(96px * var(--resolution-scale)); }
Re: Death to px, long live ch
#33What I want to know is who decided to break px, the last thing we need is yet another screwball physical measurement, css was already full of them. But what "tut tut, everybody is using px and these new hi-dpi displays are rendering things really tiny, we can't have that" and now px as a useful unit is ruined. Is there a way to use real pixels? My, admittedly quick, search says no. at least nothing jumps out at me fr…
To be honest, I'm quite thankful to whomever decided this. If it were the other way around and everyone used px but it represented true pixels, there's no doubt developers would be incorrectly designing interfaces across the board and websites looking totally off would be a common occurance due to you having an hdpi display or not having one (like what frequently happens with x based apps in Linux).
As an aside, technically, yes, it may have been better to converge on some more clearly "fake" unit rather than calling it a pixel but for me that's a nit pick.
Re: Death to px, long live ch
#34[deleted]
Re: Death to px, long live ch
#35What I want to know is who decided to break px, the last thing we need is yet another screwball physical measurement, css was already full of them. But what "tut tut, everybody is using px and these new hi-dpi displays are rendering things really tiny, we can't have that" and now px as a useful unit is ruined. Is there a way to use real pixels? My, admittedly quick, search says no. at least nothing jumps out at me fr…
You can kinda get close in pure CSS with CSS media queries using the resolution query on dppx measurements; but that only allows you to be as granular as however many distinct "dots per CSS pixel" values you want to add media queries for. Something like this would let you scale by device resolution for both traditional 96dpi screens, higher DPI 192dpi screens, and super high resolution 288dpi screens: body { --resolu…
> But unfortunately there's no way to directly use the devicePixelRatio value you can read from Javascript directly in a CSS calculation to be able to get a precise scaling on any arbitrary pixel density.
The indirect way is for the JS to post the metric to the server, then you run with server-generated CSS. Don’t ask me if it actually works well though.
Re: Death to px, long live ch
#36What happened to em?
designers don't like doing math
Re: Death to px, long live ch
#37I’ve found that ch and ex units are heavily influenced by latin characters. They just give weird results with non-latin characters leading to magic numbers. But the concept is really solid: use them if you want the spacing relative to text.
This is a problem whenever someone outside a culture tries to design for that culture. I have just enough knowledge of say, CJK+Arabic to read them, but not enough to know if the font/kerning/justification I'm using is attractive or ugly to natives.
It's often easy to spot Chinese goods because English writing on the stickers or manuals is in that horribly ugly latin serif font with bad kerning, which almost certainly looks fine if you don't read English all day.
Re: Death to px, long live ch
#38Earlier quoted context omitted.
You can kinda get close in pure CSS with CSS media queries using the resolution query on dppx measurements; but that only allows you to be as granular as however many distinct "dots per CSS pixel" values you want to add media queries for. Something like this would let you scale by device resolution for both traditional 96dpi screens, higher DPI 192dpi screens, and super high resolution 288dpi screens: body { --resolu…
> But unfortunately there's no way to directly use the devicePixelRatio value you can read from Javascript directly in a CSS calculation to be able to get a precise scaling on any arbitrary pixel density. The indirect way is for the JS to post the metric to the server, then you run with server-generated CSS. Don’t ask me if it actually works well though.
Much simpler, you also just have JS update (and keep updated - initial DPI is not always the current DPI) --devicePixelRatio under :root on the client side. Something like that existing by default is all that's really missing.
Re: Death to px, long live ch
#39What I want to know is who decided to break px, the last thing we need is yet another screwball physical measurement, css was already full of them. But what "tut tut, everybody is using px and these new hi-dpi displays are rendering things really tiny, we can't have that" and now px as a useful unit is ruined. Is there a way to use real pixels? My, admittedly quick, search says no. at least nothing jumps out at me fr…
They decided to break px because web designers used it for things like setting text size. Why did designers use px rather than pt which was supposed to scale? Because early browsers interpreted pt differently across platforms, so specifying text size in px rendered more consistently.
Re: Death to px, long live ch
#40I’m somewhat out of the loop but I remember the time everybody switched from px to em’s. When I came back to CSS for a short while it was px again and behold it worked for 4K screens. To be honest I didn’t really liked the usage of em and actually prefer px.