[Owncloud] CSS: use px, not em

[Jan-Christoph Borchardt]

First off, sorry for the tone of the previous email. I didn’t mean to set a
commandment, so let’s discuss. Here’s my explanation:

TL;DR: Contrary to popular belief, px are not dpi-dependent. They are
relative just like em.


px were mainly regarded as negative for accessibility beause they are not
zoomable in IE (info on which versions exactly don’t work seems
inconsistent, most mentioned is 6 and under, and maybe 7-8 also – can
someone verify?). Other browsers do proper zooming of everything, so using
px is not a problem. That said yes – the drawback of using px would be that
it’s not resizable in IE. I’d say this is a bullet we need to bite,
considering the upsides.

Regarding resolution/retina displays: This is no problem, as px are an
angular measurement, not an absolute one. Contrary to popular belief 1px is
not one device pixel, but relative, just like em:
http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays
http://css-tricks.com/css-font-size/
On devices with standard resolution, 1 CSS px is the same as 1 device px.
On retina it’s ~four times that. (If you want more reading material, check
http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ )
Otherwise the majority of sites would look tiny on retina displays, which
they don’t. The retina problems&fixes only apply to raster images (looking
blurry, needing a second higher res image for retina). I test on an iPod
touch (retina) and a G1 (old Android, definitely not retina) and websites
look the same, regardless if em or px are used.

As more proof regarding device compatibility: Bootstrap uses px, not em
https://github.com/twitter/bootstrap/blob/master/less/variables.less

Another major annoyment with em is the inheritance to the parent element,
which often messes up when you just want to change one specific thing. I
see the value for websites, where you might want to increase the size of
everything, but not for a web app, where everything has to be very
correctly aligned.
rem is out of the question for the moment because IE6–8 can’t handle them
_at all_, which means we would need to provide a fallback anyway:
http://caniuse.com/#feat=rem
Fiddling with the floating point values in em/rem makes it very hard to
properly align stuff cross-browser – as you probably noticed with the
new/upload button (which is about to be fixed thanks to Jörn’s help, which
involves using px).
px are exact, like we need for a good interface. There’s this ugly hack
with setting the body font size to 62.5% or so but then you still need to
use floating point values – what’s the point of using em if you use them
like px anyway?

Also check out this article describing the CSS units (albeit a bit older):
http://css-tricks.com/css-font-size/


What do you think?




On Wed, Dec 5, 2012 at 2:09 PM, Christopher Kunz <chrislist at de-punkt.de>wrote:

> Am 05.12.12 01:09, schrieb Jan-Christoph Borchardt:
> > Just a short public service announcement concerning everyone who writes
> > CSS in ownCloud:
> >
> > Please only use px as values, no em anymore.
>
> Why? This sounds like an incredibly bad idea to me because almost every
> flexibility wrt resolution ppi values etc. is lost.
>
> So there has to be a huge benefit, but I fail to see it.
>
> --ck
>
> _______________________________________________
> Owncloud mailing list
> Owncloud at kde.org
> https://mail.kde.org/mailman/listinfo/owncloud
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/owncloud/attachments/20121205/80746253/attachment.html>