The CSS Pixel's Existential Crisis
Description
A screenshot of a tweet from user Laurie Voss (@seldo) that stages a conversation between a 'New web developer' (NWD) and an 'Old web developer' (OWD). The dialogue unfolds as follows: NWD asks what 'px' is. OWD says it's 'pixel'. NWD logically follows up, 'So 1px is 1 pixel wide?'. The OWD drops the bombshell: 'Oh my no, it has nothing to do with pixels.' After a moment of stunned silence from both, the NWD responds with 'Fuck you,' to which the OWD concedes, 'Completely fair.' This tweet perfectly captures the frustrating and counterintuitive nature of the CSS 'px' unit for developers new to the field. The humor lies in the absurdity that a unit named 'pixel' isn't tied to a physical hardware pixel anymore, due to varying screen densities (like Retina displays). It's a rite of passage for web developers to learn this distinction, and the old developer's calm acceptance of the newcomer's anger is a nod to this shared, universal pain
Comments
7Comment deleted
The CSS `px` is the Schrödinger's cat of units: it's both a pixel and not a pixel until you inspect the device pixel ratio, at which point you realize you should have just used `rem`s from the start
Somewhere in the CSS spec: ‘px’ equals 1⁄96th of an inch - unless your browser, zoom level, or existential dread says otherwise
CSS pixels are like microservices naming conventions - they made perfect sense when we created them, but now we spend half our careers explaining why they mean the opposite of what they say
The CSS pixel is web development's greatest semantic betrayal - a 'pixel' that isn't a pixel, existing in a reference frame divorced from physical reality. It's the perfect metaphor for frontend development: a layer of abstraction so fundamental that explaining it to newcomers requires admitting the entire naming convention is a historical accident we're all stuck with. The OWD's 'Completely fair' is the resigned wisdom of someone who's explained devicePixelRatio to junior devs one too many times, knowing full well that the web's solution to display density was to redefine what a pixel means rather than change the unit name
CSS px: 'pixel' by name, '1/96th inch of vendor-defined suffering' by spec - 20 YoE later, still the web's perfect lie
The CSS px is distributed consensus among DPI, devicePixelRatio, user zoom, and meta viewport: eventually consistent, never linearizable
CSS taught me 'pixel' is an abstract suggestion - 1 px resolves to ceil(devicePixelRatio) hardware pixels, plus one Slack thread per stakeholder insisting it be exact