4 ms·

Is it still ok to use px unit?

by sksasi 3y ago

zamadatix 3y ago
px in CSS/web is just shorthand for 1/96th of an inch, regardless how many actual pixels that ends up being. This means it's functionally the same as any other absolute value of measurement on the web, since they are all based in some mapping to physical size as well.
- innocenat 3y ago
  That's only true on (most) mobile devices. px is still 1 pixel on Desktop with 100% system UI zoom (e.g. non-hidpi monitors).
  - zamadatix 3y ago
    It's still 1/96th of an inch in those cases, that's what is meant by "regardless how many actual pixels that ends up being".
    - innocenat 3y ago
      If you change system UI zoom setting then the 1 pixel size in the browser change with zoom. At 200% web 1px is actual 2px. I am not sure how it could be "1/96th of an inch" when it can change size depend on the system setting.
      - zamadatix 3y ago
        1/96th an inch based on what the browser/system report the pixel density to be. There is no man coming out of your computer with a ruler to verify the reported value, so you're free to use a scaling value that isn't true. Zooming the browser or changing the system scaling will change the reported size of the pixels to the renderer. Don't take my word for it, it's how it's defined in the CSS spec: https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
        innocenat 3y ago
        I know that is how its defined in the spec. But your original comment imply that it's literally 1/96 of an inch everywhere regardless of the device.
        zamadatix 3y ago
        ¯\_(ツ)_/¯, to the browser - it is. It is a good note to point out the browser may not have an accurate sizing of the display and would produce incorrectly sized outputs in those cases, but it doesn't change how px sizing works.
shortcake27 3y ago
I use relative units (ems/rems) for font sizes and absolute units (px etc) for everything else such as margins/paddings/borders. I also set the html font size to 62.5% which makes the math easy (1rem = 10px). This ensures that if a user adjusts their browsers font size for accessibility purposes or uses dynamic type, only the text will scale. You don’t want margins/paddings to scale with font size (at least not linearly) otherwise the layout gets cramped/unusable very quickly. As others have mentioned CSS pixels have nothing to do with hardware pixels. So there are no issues with the differences in screen densities between devices.
- deleted 3y ago
  [deleted]
system2 3y ago
I stick to percent personally. Easier to adjust if I am working on someone else's messed up css. rem/em depends on global values but many sites override these with different classes and manually entered pixel values. I find % to be safer than em/rem.
dbbk 3y ago
I still use it, I have yet to find any actual downside to it.

Is it still ok to use px unit?

by sksasi 3y ago

Is it still ok to use px unit?

px in CSS/web is just shorthand for 1/96th of an inch, regardless how many actual pixels that ends up being. This means it's functionally the same as any other absolute value of measurement on the web, since they are all based in some mapping to physical size as well.

innocenat 3y ago
That's only true on (most) mobile devices. px is still 1 pixel on Desktop with 100% system UI zoom (e.g. non-hidpi monitors).
- zamadatix 3y ago
  It's still 1/96th of an inch in those cases, that's what is meant by "regardless how many actual pixels that ends up being".
  - innocenat 3y ago
    If you change system UI zoom setting then the 1 pixel size in the browser change with zoom. At 200% web 1px is actual 2px. I am not sure how it could be "1/96th of an inch" when it can change size depend on the system setting.
    - zamadatix 3y ago
      1/96th an inch based on what the browser/system report the pixel density to be. There is no man coming out of your computer with a ruler to verify the reported value, so you're free to use a scaling value that isn't true. Zooming the browser or changing the system scaling will change the reported size of the pixels to the renderer. Don't take my word for it, it's how it's defined in the CSS spec: https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
      - innocenat 3y ago
        I know that is how its defined in the spec. But your original comment imply that it's literally 1/96 of an inch everywhere regardless of the device.
        zamadatix 3y ago
        ¯\_(ツ)_/¯, to the browser - it is. It is a good note to point out the browser may not have an accurate sizing of the display and would produce incorrectly sized outputs in those cases, but it doesn't change how px sizing works.

shortcake27 3y ago

I use relative units (ems/rems) for font sizes and absolute units (px etc) for everything else such as margins/paddings/borders. I also set the html font size to 62.5% which makes the math easy (1rem = 10px). This ensures that if a user adjusts their browsers font size for accessibility purposes or uses dynamic type, only the text will scale. You don’t want margins/paddings to scale with font size (at least not linearly) otherwise the layout gets cramped/unusable very quickly. As others have mentioned CSS pixels have nothing to do with hardware pixels. So there are no issues with the differences in screen densities between devices.

deleted 3y ago
[deleted]

system2 3y ago

I stick to percent personally. Easier to adjust if I am working on someone else's messed up css. rem/em depends on global values but many sites override these with different classes and manually entered pixel values. I find % to be safer than em/rem.

dbbk 3y ago

I still use it, I have yet to find any actual downside to it.