I knew that 1px is the smallest unit that a computer can represent. But when I put 1.5px in css, it worked. Moreover, this 1.5px was bigger than 1px and smaller than 2px.
So, does that mean that px is not the smallest unit that can be expressed on a monitor?
Is it okay to use units smaller than 1px?
"I know that 1px is the smallest unit that a computer can represent" - what does this mean?
I think there may be some confusion between different types of pixel. There are device pixels, the 'blobs' that make up a physical screen. And there are CSS pixels.
In the 'old days' often a CSS pixel and a screen pixel would match so, yes, one CSS pixel was the minimum that could be represented on the physical device.
But nowadays often several device pixels are used to represent one CSS pixel.
This means that fractions of a CSS pixel may be able to be represented with more accuracy than in the past.
Hence a CSS value such as 1.5px may get represented accurately on a device which is using say 2 physical pixels (in each direction) to represent one CSS pixel.
A warning though- different devices use different numbers of physical pixels per CSS pixel, and browsers can interpret things differently and odd little fractions of CSS pixels can get 'left behind' when the system is trying to decide how to split things.
Although you can use fractional pixels (since the very first version of CSS, as stated in this question), your browser will round it to the closest integer.
To answer your question of why it can be done, I see one major use case: calc().
Let's say you have the following CSS code:
:root {
--small-unit: 1px;
--large-unit: 1.5px;
}
#something {
width: calc(100 * var(--small-unit));
height: calc(100 * var(--large-unit));
}
In that case, although --small-unit and --large-unit are visually the same when applied directly on screen, they are not the same when multiplied by 100. #something will be 100px wide and 150px high.
