CSS Units table improvement

[shieldo]

What does this change?

Module: HTML/ CSS Week(s): 1

Description

Improvements to the CSS units table in the Lesson for this week:

1. adding an explicit name column to reflect how developers usually refer to these units in speech (especially to use the name "pixel", which was not previously mentioned in the table)
2. putting px first in the list, because two of the other units refer to this unit
3. adding fuller explanation of what a pixel means in CSS, replacing the description of a pixel being 1/96th of an inch, which is over-simple and needed more context (referencing CSS Level 3 spec)
4. use code markup for examples of numeric CSS values

Who needs to know about this?

Rendered Pages

[gregdyke]

I don't know enough about CSS and am unsure how much complexity/precision we want to have in describing a px

[shieldo]

Yes, I wasn't sure whether extra colour in the description of a pixel was useful or mostly noise. Given I elided mentioning a visual angle and conveying how a reference pixel takes up larger physical space for screens meant to be viewed from further away (for sake of not blinding with too much science), perhaps it is more the latter. I certainly think the current mention of 1/96th of an inch is misleading and confusing - I helped a trainee in class the other day who was referencing exactly this part of the lesson and wondering why the unit seemed to get bigger when they were increasing zoom size in the browser. So just mentioning that this refers to a "pixel", and how this has a relation to device pixels may be just the right level of detail here?

i.e. it may be we'd want to keep

This used to refer to real physical pixels on screens, but on modern devices with high resolution displays one CSS pixel is usually rendered using a whole multiple of real pixels.

and ditch (from my proposal here)

For rendering on screens, a CSS “reference pixel” is defined as the visual angle of one pixel on a device with a pixel density of 96 pixels per inch at a distance of an arm’s length from the reader.

[SallyMcGrath]

@shieldo just checking - are you still working on this?

[shieldo]

@SallyMcGrath I think I needed a little distance so I could come back to it with some fresher eyes.

I've simplified the description of the pixel as per above, and also clarified the text about absolute and relative units (the description that absolute units stay the same size when zooming in within a browser wasn't really correct and this text confused at least one trainee in the class I help in).

I think this represents an improvement now, but thanks for the challenge about whether keeping the table is the right approach. It's hard to get a sense of how malleable everything is, but I think I'm gaining that. Given the torrent of different concepts being thrown in during this whole lesson, the first week's lesson of the course, the table here doesn't seem all that out of place, though it could be an idea to do something like an embedded interactive example where trainees can modify the dimensions of two or three nested elements and see how changing one can modify the rendering of elements with relative sizing but doesn't affect dimensions declared with absolute units? Does that sound like a more useful method if we're trying to explain one of many concepts in this lesson without overburdening?

[SallyMcGrath]

@shieldo

Sorry, I missed this comment at the time (it was during my bereavement and I was a bit all over the place). These changes are good. Thank you!