[css-units] Proposal for next level: Responsive Pixel

Hi everyone,

Recently, I had to hand-edit a ‘responsive’ stylesheet containing a lot of rules like this one (from Wordpress’s TwentyTwelve (2012) theme) :

    .page-template-homepage-php #secondary aside li {
        margin: 8px 0 0;
        margin: 0.571428571rem 0 0;
        font-size: 13px;
        font-size: 0.928571429rem;
        line-height: 1.714285714;
        list-style-type: square;
        list-style-position: inside;
    }

The goal of the duplicate ‘rem’ instructions is pretty clear to me: if an user decides to increase the default font-size of its browser, the template as a whole will be made bigger (zoom effect). Combined with ‘(max-width: XXrem)’ media queries, you can obtain a theme fully adapted to vision impaired users in rem-enabled browsers (IE9, others).

However, hand-editing such stylesheets is a pain (you’ve to keep your console open and perform rules-of-three computations when you modify a value in pixels to change the value in rem accordingly). I’m therefore propositing to add ‘rpx’ aka the ‘Responsive Pixel Unit’ to later revisions of CSS Values and Units. It’s value is computed as follow: (1rem) / (the default font size settings of the browser) * (1px)..

What do you think of this idea?