3 ms·

Is the current bleeding edge CSS techniques to base everything off a base "px" value?! I would imagine things would have progressed to have decent points or so

Is the current bleeding edge CSS techniques to base everything off a base "px" value?! I would imagine things would have progressed to have decent points or some other measurement based on screen actual size by now.

kroltan 3y ago
Well, CSS pixels are not literal device pixels, they are kind of like the Android "device independent pixel" measurement. The exact definition evades me since it's been a couple years I did any web development, but your px-based sizes won't look tiny on high-DPI screens.
- tracker1 3y ago
  72/inch iirc.
dtagames 3y ago
The current best practice is to use "em" measurements, where 1em is the size of the base font and zoom you've selected in your browser. Other measurements are scaled from there, so 2em is twice that size and .5em is half, etc. In reality, the browser will use a variable number of pixels (and even device subpixels) to actually render the font or div -- but if you use all "em" measurements, all those sizes will have the same relationship to each other on the final device. The 16px in the demo comes from the default base font size in the browser, which has 1em = 16px.
- lisrjflksdjfi 3y ago
  You just expanded on my poorly worded question :) so, yes, it is still all based on a "base pixel value, that is not really a pixel".
  - chrismorgan 3y ago
    Only partly, and not the part that dtagames was speaking of. There are three families of distance units. One is absolute length units <https://www.w3.org/TR/css-values-4/#absolute-lengths https://www.w3.org/TR/css-values-4/#absolute-lengths>. px is the canonical one of these, but it may be anchored to physical measurements (typical in print) or the reference pixel (which in practice is generally approximated by some number of device pixels multiplied by a scaling factor from the operating system). Then you get viewport-percentage lengths <https://www.w3.org/TR/css-values-4/#viewport-relative-lengths https://www.w3.org/TR/css-values-4/#viewport-relative-length...>, of which I will not speak, save to note that they’re broken by design so that they’re almost completely useless for layout purposes. Then you get font-relative lengths <https://www.w3.org/TR/css-values-4/#font-relative-lengths https://www.w3.org/TR/css-values-4/#font-relative-lengths>. The em dtagames speaks of is one of these. The root em, rem, is commonly used as a base, and is most commonly 16px, but it depends on a variety of factors like user preferences, the root font-size, the root font-family, and the root language. It’s very messy and even mildly context-dependent. Most lengths should generally be font-relative for most perfect compatibility and user-preference-acceptance, but doing this perfectly is harder than it may sound.

kroltan 3y ago

Well, CSS pixels are not literal device pixels, they are kind of like the Android "device independent pixel" measurement. The exact definition evades me since it's been a couple years I did any web development, but your px-based sizes won't look tiny on high-DPI screens.

tracker1 3y ago
72/inch iirc.

dtagames 3y ago

The current best practice is to use "em" measurements, where 1em is the size of the base font and zoom you've selected in your browser. Other measurements are scaled from there, so 2em is twice that size and .5em is half, etc. In reality, the browser will use a variable number of pixels (and even device subpixels) to actually render the font or div -- but if you use all "em" measurements, all those sizes will have the same relationship to each other on the final device. The 16px in the demo comes from the default base font size in the browser, which has 1em = 16px.

lisrjflksdjfi 3y ago
You just expanded on my poorly worded question :) so, yes, it is still all based on a "base pixel value, that is not really a pixel".
- chrismorgan 3y ago
  Only partly, and not the part that dtagames was speaking of. There are three families of distance units. One is absolute length units <https://www.w3.org/TR/css-values-4/#absolute-lengths https://www.w3.org/TR/css-values-4/#absolute-lengths>. px is the canonical one of these, but it may be anchored to physical measurements (typical in print) or the reference pixel (which in practice is generally approximated by some number of device pixels multiplied by a scaling factor from the operating system). Then you get viewport-percentage lengths <https://www.w3.org/TR/css-values-4/#viewport-relative-lengths https://www.w3.org/TR/css-values-4/#viewport-relative-length...>, of which I will not speak, save to note that they’re broken by design so that they’re almost completely useless for layout purposes. Then you get font-relative lengths <https://www.w3.org/TR/css-values-4/#font-relative-lengths https://www.w3.org/TR/css-values-4/#font-relative-lengths>. The em dtagames speaks of is one of these. The root em, rem, is commonly used as a base, and is most commonly 16px, but it depends on a variety of factors like user preferences, the root font-size, the root font-family, and the root language. It’s very messy and even mildly context-dependent. Most lengths should generally be font-relative for most perfect compatibility and user-preference-acceptance, but doing this perfectly is harder than it may sound.