Hi, I wrote this article (the response, not the original). though I didn't post it here - I just noticed the pingback email.
I am indeed responding mainly to the wording, and you'll see at the start and end of the article statements that I think the original author does at least kind of understand what is going on (though I don't think his understanding is very solid).
Your statement that 'the css unit "px" has no relationship to the actual size of a pixel on the screen' exemplifies why I am concerned about the wording and thought it necessary to write a response. This statement is just not true!
The CSS px unit was carefully designed to embody as closely as possible the intuitive concept of a "monitor pixel", while retaining sufficient flexibility to allow implementors to accommodate a wide range of devices. The whole concept of unit anchoring was invented to support this. To pretend the px unit has no relationship to actual pixels is to waste all of this work.(*)
I would suggest people aim for one of two levels of understanding:
1. Really understand the rules. Read the standard, and/or a proper CSS book like "Cascading Style Sheets: The Definitive Guide" by Eric Meyer. Be an expert and design with confidence.
2. Altenatively, just think of 1px as a monitor pixel. The standards authors put a lot of effort in to allow people to do so.
For people that are currently in state 2 and are uneasy about retina displays, printers and the rest, my advice would be that they are going to need to go to state 1. It's not that hard. Just getting a vague idea (as many people are) that "px" is angular, or worse that it's in some way "unreliable", is not going to help anyone.
[PS. Here's an ironic aside about the lengths people have gone to to make 1px correspond as closely as possible to a real pixel: As you say, 'marking a button as "width: 1cm" will almost never render something over 1cm of the screen geometry'. But why exactly is this? It's because the whole system of units has been anchored to the screen pixel size (or a simple multiple or fraction of it). On a printer, where there is no "pixel" worth anchoring to, the units are typically anchored to physical units, and width: 1cm really does mean 1cm. The reason that on your monitor screen 1cm is not 1 real cm is because your browser is resizing everything - it's bending over backwards to make 1px match the screen pixel size! (or a simple multiple or fraction yadda yadda yadda...)]
> The CSS px unit was carefully designed to embody as
> closely as possible the intuitive concept of a "monitor
> pixel", while retaining sufficient flexibility to allow
> implementors to accommodate a wide range of devices.
The closest match to the concept of a "monitor pixel" is a unit which represents one pixel. In other words, an element styled as "width: 100px" would be 100px wide regardless of the size of each individual pixel.
The issue with declaring that one csspixel is a monitor pixel is that it's only true for a very narrow range of monitors. It's not true for my phone, or my tablet, or my laptop, or my desktop. There is not a single machine I own for which 1 css pixel is 1 monitor pixel, and that situation is unlikely to change unless I decide to start building my machines with ancient 96-DPI LCDs.
> On a printer, where there is no "pixel" worth anchoring
> to, the units are typically anchored to physical units,
> and width: 1cm really does mean 1cm. The reason that on
> your monitor screen 1cm is not 1 real cm is because
> your browser is resizing everything - it's bending over
> backwards to make 1px match the screen pixel size!
No, it's not. My browser is bending to make "width: 1px" match some arbitrary size defined in the CSS spec, which is nowhere near the size of a pixel on my machine.
The browser is entirely capable of rendering css pixels as screen pixels, obviously. It's also capable of rendering with real-world sizes, by querying the physical size of the display from the OS and dividing by the current display resolution. But it doesn't do any of those things, because someone on the CSS committee wrote the equivalent of "pi = 3".
HTML+CSS is designed to make things as device-independent as possible. If the definition of "width: 100px" were to be vastly different on different devices this goal would be unobtainable. As long as the definition of px is some integer multiple of device pixels I think it's a useful compromise. If you really need precision at the level of device pixels you should be writing a native app.
It's a useful compromise for the OS to make, but does not belong in CSS. If I'm running on a non-native resolution, I expect the image containers to scale on websites to fit the images, which they won't if the browser overrides my 1.4 pixel pixels.
Whatever did happen to screen pixels, anyway? Did non-native resolutions die with CRT screens? It's nice to have a unit for 0.27 mm-ish, but I'd really have more use for a pixel.
Can you give us a real world example of how this technical mis-understanding would affect my day-to-day design process? Specifically, I haven't ever encountered or designed for a screen yet that extends beyond my peripheral vision. I'm sure they are coming soon though!
It might not, TBH, but why carry around an incorrect technical notion that gives you no benefit, even if it doesn't cause you any problems in practice? Maybe my view on this is skewed by the fact that I'm a developer, not a designer...
That said, there are problems that could occur. The main reason to need pixel sizes for things (NOT fonts) is to avoid aliasing effects. For example, 1px is the smallest width you can reasonably make a border. Any smaller and on some devices you may find your border sometimes disappears entirely (aliasing) or is displayed faintly (antialiasing). Any larger and your border may be fatter than it needs to be. If you spurn px entirely (as some people appear to do) how are you going to get this magic length? By saying "0.265mm", perhaps? But that's just another way of saying "1px"!
>If you spurn px entirely (as some people appear to do) how are you going to get this magic length?
You use a high-resolution screen such that 1 pixel is too small to make a line, and on lines thick enough to be visible the effects of antialiasing are subtle enough to ignore.
Well there's not really any other way to ensure crisp rendering. A user with a low resolution screen, even if 1px equates to an actual pixel on their device, might have web pages zoomed in by 15% or out by 10%, breaking all attempts to avoid antialiasing.
I am indeed responding mainly to the wording, and you'll see at the start and end of the article statements that I think the original author does at least kind of understand what is going on (though I don't think his understanding is very solid).
Your statement that 'the css unit "px" has no relationship to the actual size of a pixel on the screen' exemplifies why I am concerned about the wording and thought it necessary to write a response. This statement is just not true!
The CSS px unit was carefully designed to embody as closely as possible the intuitive concept of a "monitor pixel", while retaining sufficient flexibility to allow implementors to accommodate a wide range of devices. The whole concept of unit anchoring was invented to support this. To pretend the px unit has no relationship to actual pixels is to waste all of this work.(*)
I would suggest people aim for one of two levels of understanding:
1. Really understand the rules. Read the standard, and/or a proper CSS book like "Cascading Style Sheets: The Definitive Guide" by Eric Meyer. Be an expert and design with confidence.
2. Altenatively, just think of 1px as a monitor pixel. The standards authors put a lot of effort in to allow people to do so.
For people that are currently in state 2 and are uneasy about retina displays, printers and the rest, my advice would be that they are going to need to go to state 1. It's not that hard. Just getting a vague idea (as many people are) that "px" is angular, or worse that it's in some way "unreliable", is not going to help anyone.
[PS. Here's an ironic aside about the lengths people have gone to to make 1px correspond as closely as possible to a real pixel: As you say, 'marking a button as "width: 1cm" will almost never render something over 1cm of the screen geometry'. But why exactly is this? It's because the whole system of units has been anchored to the screen pixel size (or a simple multiple or fraction of it). On a printer, where there is no "pixel" worth anchoring to, the units are typically anchored to physical units, and width: 1cm really does mean 1cm. The reason that on your monitor screen 1cm is not 1 real cm is because your browser is resizing everything - it's bending over backwards to make 1px match the screen pixel size! (or a simple multiple or fraction yadda yadda yadda...)]