<div>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:</div><div><br></div><div>TL;DR: Contrary to popular belief, px are not dpi-dependent. They are relative just like em.</div>

<div><br></div><div><br></div><div>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.</div>

<div><br></div><div>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: <a href="http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays">http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays</a></div>

<div><a href="http://css-tricks.com/css-font-size/">http://css-tricks.com/css-font-size/</a></div><div>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 <a href="http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/">http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/</a> )</div>

<div>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.</div>

<div><br></div><div>As more proof regarding device compatibility: Bootstrap uses px, not em <a href="https://github.com/twitter/bootstrap/blob/master/less/variables.less">https://github.com/twitter/bootstrap/blob/master/less/variables.less</a></div>

<div><br></div><div>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.</div>

<div><div>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: <a href="http://caniuse.com/#feat=rem">http://caniuse.com/#feat=rem</a></div>

<div>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).</div>

<div>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?</div>

</div><div><br></div><div>Also check out this article describing the CSS units (albeit a bit older): <span style="text-decoration:underline;color:rgb(17,85,204)"><a href="http://css-tricks.com/css-font-size/">http://css-tricks.com/css-font-size/</a></span></div>

<div><br></div><div><br></div><div>What do you think?</div><div><br></div><div><br></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Wed, Dec 5, 2012 at 2:09 PM, Christopher Kunz <span dir="ltr"><<a href="mailto:chrislist@de-punkt.de" target="_blank">chrislist@de-punkt.de</a>></span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Am <a href="tel:05.12.12%2001" value="+495121201">05.12.12 01</a>:09, schrieb Jan-Christoph Borchardt:<br>
<div class="im">> Just a short public service announcement concerning everyone who writes<br>
> CSS in ownCloud:<br>
><br>
</div><div class="im">> Please only use px as values, no em anymore.<br>
<br>
</div>Why? This sounds like an incredibly bad idea to me because almost every<br>
flexibility wrt resolution ppi values etc. is lost.<br>
<br>
So there has to be a huge benefit, but I fail to see it.<br>
<span class="HOEnZb"><font color="#888888"><br>
--ck<br>
</font></span><div class="HOEnZb"><div class="h5"><br>
_______________________________________________<br>
Owncloud mailing list<br>
<a href="mailto:Owncloud@kde.org">Owncloud@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/owncloud" target="_blank">https://mail.kde.org/mailman/listinfo/owncloud</a><br>
</div></div></blockquote></div><br></div>