With that, we established a basic fact in the world of CSS: a CSS pixel will be displayed in different physical dimensions but it will always be displayed in the correct size in which the viewer will find comfortable.
I misspoke--it's worse in that it's device dependent as well as browser dependent. Browsers are just giving their best guess as to what can be comfortably be seen based on how far away from your face they think you'll hold your device. This is the other link from your MDN source.
"With that, we established a basic fact in the world of CSS: a CSS pixel will be displayed in different physical dimensions but it will always be displayed in the correct size in which the viewer will find comfortable. By leveraging the principle, we can safely set the basic dimensions (e.g. base font size) to a fixed pixel size, independent of device form factors."
It stays the same because under the hood it takes care for each device and that's why you want sometimes that it stays the same but your link was a nice addition to my references.
Yes, that is the key point you're just reading it incorrectly and yet also somehow being smug about it.
It doesn't stay the same. Read the paragraph again. "different physical dimensions". The "correct size in which the viewer will be comfortable" is completely subjective and arbitrary and will vary between devices and browsers and the arbitrary and differing opinions of tthe developers thereof.
Yes, that is the key point you're just reading it incorrectly and yet also somehow being smug about it.
Sorry about that.
So are we talking about the perception or the fixed implemenation everyone uses? I couldn't find information about different browser implementation.
How would you explain the last sentence? "By leveraging the principle, we can safely set the basic dimensions (e.g. base font size) to a fixed pixel size, independent of device form factors."
These aren't incompatible truths. Like you can safely say, "This border will be 1px." and that's fine if all you mean is "I want this border to be barely visible, and the particulars of what physical absolute or relative size that means don't matter." You can safely use pixels for very small measurements without making meaningful differences in your design because pixels are so small that being a "px" or two off one way or another just doesn't make that much of a difference. (On the other hand defining something as 100px really is meaningless because the differences in size are magnified 100x.)
But even for small sizes that doesn't mean that px is ever the best unit to use. px are basically relative units that are commonly misunderstood to be absolute, so for cases where a small relative unit make sense, it makes sense to use something everyone instantly knows is relative like rem.
Oke I think I got your point. We cannot perceive smaller increments of px sizes but larger dimensions may vary from device to device which is likely to recognize if you would compare both. That would mean that the REM and EM unit is basically the same because they are just multiplications (factors) of px or am I wrong? e.g. 1rem = 16px
Kinda. 1rem isn't necessarily 16px. That's the default that most browsers use, but it isn't necessarily defined to be 16px and it can be overridden at the html element or sometimes by the user's own device settings.
So the relationship between px and rem is weird because people see "rem" and immediately know that it varies between devices whereas px isn't tied to anything but always gets misunderstood as being absolute.
rem is based on CSS pixels. in and cm are based on CSS pixels.
Only predefined layouts like flex and grid,
and relative stuff like vw and %,
give you ACTUAL screen dimension related layouts.
But that is besides the point, because the CSS pixel is an elegantly defined measurement that is human based.
What you call guessing, is a nicely consistent thing, that I always use for background patterns, translate()s, profile icons, shadows.
Hell, I don't even see a practical way of doing shadows other than with px or other px based measurements.
The base font-size is defined in px for a reason...
I mean if by "based on" you mean that there is a constant relationship between the two, then no, that's not correct. That's just not what the spec says, and I can't imagine what other meaning of "based on" you have in mind.
But it's not even a fixed relationship within a device--it's just a default. I could browse page and rem would be 16px and then click through to a site where 1rem is 1vw.
And if you want to set a nicer tone you should start by not using the word "ACTUAL" in all caps.
HAHAHA, that's funny. All caps is just a way to emphasize text, my dude...
Having said that. My point in these threads is that besides viewport units and percentages, everything boils down to CSS pixels.
What is my purpose in clarifying that to everyone here? It's that if you say you use "physical units" like cm or "text-based" ones like rem because "a px isn't a device pixel", then you are missing information.
Sure, you can set the root font-size to something viewport related and use rem from then on — you win 🎉
But wait... That is just using rem as a variable and does not mean that rem is inherently more "relative" than px. Not to the device pixel, that is.
My actual, underlying, point would be that you should just hold your devices next to each other and decide for yourself: like I said, font-size is based on px for a reason: we created the CSS pixel in a way that using it across devices gives good results.
For stuff like paddings and text-indent, I use rem/em.
Borders, fixed-height navbar, shadows, tiled background-size, translate() values, I use px. And there is absolutely nothing wrong with that.
How do you even create shadows without px if they shouldn't grow with font-size??
There are lots of correct ways of emphasizing text in markdown. Caps means shouting. Laughing is all caps is obviously rude and I know you know this so you're getting blocked immediately.
(by the way: rem doesn't grow or shrink with font size. You're thinking of em. rem is guaranteed to be the same within a page.)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Can you show me evidence for different behaviour of browsers when the pixel unit is used? I didn't know that and never experienced that.
What I know is that a pixel is a fixed defined unit (not corresponding to the monitor pixel) stated here drafts.csswg.org/css-values/#absol...
And Mozilla (and therefore their browser) is also refering to that page developer.mozilla.org/en-US/docs/G...
I misspoke--it's worse in that it's device dependent as well as browser dependent. Browsers are just giving their best guess as to what can be comfortably be seen based on how far away from your face they think you'll hold your device. This is the other link from your MDN source.
hacks.mozilla.org/2013/09/css-leng...
The important point is this one out of your link:
It stays the same because under the hood it takes care for each device and that's why you want sometimes that it stays the same but your link was a nice addition to my references.
Yes, that is the key point you're just reading it incorrectly and yet also somehow being smug about it.
It doesn't stay the same. Read the paragraph again. "different physical dimensions". The "correct size in which the viewer will be comfortable" is completely subjective and arbitrary and will vary between devices and browsers and the arbitrary and differing opinions of tthe developers thereof.
Sorry about that.
So are we talking about the perception or the fixed implemenation everyone uses? I couldn't find information about different browser implementation.
How would you explain the last sentence? "By leveraging the principle, we can safely set the basic dimensions (e.g. base font size) to a fixed pixel size, independent of device form factors."
These aren't incompatible truths. Like you can safely say, "This border will be 1px." and that's fine if all you mean is "I want this border to be barely visible, and the particulars of what physical absolute or relative size that means don't matter." You can safely use pixels for very small measurements without making meaningful differences in your design because pixels are so small that being a "px" or two off one way or another just doesn't make that much of a difference. (On the other hand defining something as 100px really is meaningless because the differences in size are magnified 100x.)
But even for small sizes that doesn't mean that px is ever the best unit to use. px are basically relative units that are commonly misunderstood to be absolute, so for cases where a small relative unit make sense, it makes sense to use something everyone instantly knows is relative like rem.
Oke I think I got your point. We cannot perceive smaller increments of px sizes but larger dimensions may vary from device to device which is likely to recognize if you would compare both. That would mean that the REM and EM unit is basically the same because they are just multiplications (factors) of px or am I wrong? e.g. 1rem = 16px
Kinda. 1rem isn't necessarily 16px. That's the default that most browsers use, but it isn't necessarily defined to be 16px and it can be overridden at the
htmlelement or sometimes by the user's own device settings.So the relationship between px and rem is weird because people see "rem" and immediately know that it varies between devices whereas px isn't tied to anything but always gets misunderstood as being absolute.
remis based on CSS pixels.inandcmare based on CSS pixels.Only predefined layouts like flex and grid,
and relative stuff like
vwand%,give you ACTUAL screen dimension related layouts.
But that is besides the point, because the CSS pixel is an elegantly defined measurement that is human based.
What you call guessing, is a nicely consistent thing, that I always use for background patterns, translate()s, profile icons, shadows.
Hell, I don't even see a practical way of doing shadows other than with
pxor otherpxbased measurements.The base font-size is defined in
pxfor a reason...creativepro.com/rethinking-the-pix...
I mean if by "based on" you mean that there is a constant relationship between the two, then no, that's not correct. That's just not what the spec says, and I can't imagine what other meaning of "based on" you have in mind.
I think the word you two are looking for is pixel aspect ratios...
I thoroughly enjoyed reading this thread
Me Too!
You can't imagine that "based on humans" means anything else than "consistent across devices"?
You obviously haven't read the article I linked. Holy cow are you smug, man...
But it's not even a fixed relationship within a device--it's just a default. I could browse page and rem would be 16px and then click through to a site where 1rem is 1vw.
And if you want to set a nicer tone you should start by not using the word "ACTUAL" in all caps.
HAHAHA, that's funny. All caps is just a way to emphasize text, my dude...
Having said that. My point in these threads is that besides viewport units and percentages, everything boils down to CSS pixels.
What is my purpose in clarifying that to everyone here? It's that if you say you use "physical units" like
cmor "text-based" ones likerembecause "apxisn't a device pixel", then you are missing information.Sure, you can set the root font-size to something viewport related and use
remfrom then on — you win 🎉But wait... That is just using
remas a variable and does not mean thatremis inherently more "relative" thanpx. Not to the device pixel, that is.My actual, underlying, point would be that you should just hold your devices next to each other and decide for yourself: like I said, font-size is based on
pxfor a reason: we created the CSS pixel in a way that using it across devices gives good results.For stuff like paddings and text-indent, I use
rem/em.Borders, fixed-height navbar, shadows, tiled background-size, translate() values, I use
px. And there is absolutely nothing wrong with that.How do you even create shadows without
pxif they shouldn't grow with font-size??There are lots of correct ways of emphasizing text in markdown. Caps means shouting. Laughing is all caps is obviously rude and I know you know this so you're getting blocked immediately.
(by the way: rem doesn't grow or shrink with font size. You're thinking of em. rem is guaranteed to be the same within a page.)