Matt asked if we could make the numbers on the wordpress.org home page retina-friendly, with CSS if possible. I pinged George Stephanis to ask him about css version.
-
Jen Mylo
Reply
Matt asked if we could make the numbers on the wordpress.org home page retina-friendly, with CSS if possible. I pinged George Stephanis to ask him about css version.
Jane Wells 9:17 pm on December 25, 2012 Permalink |
What George skyped me before going back to Christmas dinner.
cc @matt
George Stephanis 3:00 am on December 26, 2012 Permalink |
Yeah that. Basically using a :before pseudo-element for the digits, so it won’t show in IE7 or below — which, meh, I’m fine with. The fun little CSS counter stuff I used is all CSS2, so it should be older-browser friendly. The circles may degrade to squares in IE8 — so it may be worth doing something in IE specific stylesheets if you’re not okay with graceful degradation (which I normally am, but I’m not sure how specific you are about looking perfect in older browsers)
Konstantin Kovshenin 3:26 pm on December 26, 2012 Permalink |
Hey George, thanks so much for your help!
I first thought of using pie.htc for IE, then just falling back to images since there already was an IE-specific stylesheet. However, while the method works fairly well, I could not center-align (both x and y) the numbers inside their containers because of the way different browsers (and OS) do font smoothing, bleh!
The difference is only 1-2 pixels max, but it really stands out in such small 30px containers, so I went the old school way: sprites’n'spans. Thanks again for your input!
George Stephanis 4:38 pm on December 26, 2012 Permalink |
Ping me on Skype next time — I can normally tidy up cross-browser inconsistencies on that by tweaking either the padding or line-height or some such.
Konstantin Kovshenin 4:58 pm on December 26, 2012 Permalink
Will do, thanks!