What would it mean to say that something "should" be 100x100px? Individual platforms and browsers have arbitrary definitions of what a px is. It just means, "small but visible." So how big is a hundred units which are small but visible? No one knows because it is untethered to any actual measurement, neither on an absolute nor relative basis.
vh and vw aren't always the best units, but px are almost entirely meaningless and there is always a better unit than px, regardless of use case.
But that's not what px does. If you use px, it won't always be the same because pixels are arbitrary. There's no meaningful spec on how big a pixel should be, so different browsers can and do define it differently, and they can each change it arbitrarily at any time.
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.)
I am sorry for the misunderstanding, I don't believe I said to never use pixels in your code, I am just informing that using pixels does have some downsides.
20+ years web dev | Full-stack architect | AI integrator | Passionate about clean code, APIs, and docs | Building innovative SaaS with AI | Open source enthusiast
Agreed there is a time and place for everything.
Know right?
What would it mean to say that something "should" be 100x100px? Individual platforms and browsers have arbitrary definitions of what a px is. It just means, "small but visible." So how big is a hundred units which are small but visible? No one knows because it is untethered to any actual measurement, neither on an absolute nor relative basis.
vh and vw aren't always the best units, but px are almost entirely meaningless and there is always a better unit than px, regardless of use case.
For example you would always want that your box-shadow is the same on a element -> px
But that's not what px does. If you use px, it won't always be the same because pixels are arbitrary. There's no meaningful spec on how big a pixel should be, so different browsers can and do define it differently, and they can each change it arbitrarily at any time.
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.)
In my personal opinion, a pixel is a light on your device, I might be wrong, but a pixel certainly does not have a fixed size, as you said.
I am sorry for the misunderstanding, I don't believe I said to never use pixels in your code, I am just informing that using pixels does have some downsides.
Read your headline... 🤷
Not and never are 2 different things.
the best way to show a html companent is to size with percentage.
100px is not best practice.