Smashing Daily #22: SVG, Confusion, CSS4
The Smashing Daily is filled with good stuff today: masking text, a confusing Rubik’s Cube, CSS4 selectors, the T-shaped specialist, stacked image sprites, the Kember Identity, and much, much more. Enjoy!
Text masking — The standards way1
Lea Verou shows us how to properly mask text: not by using some sort of obscure proprietary WebKit-only CSS, but by using SVG. This SVG technique works in all modern browsers.
In this document Nicolas Gallagher briefly explains why it is important that “all code […] should look like a single person typed it, no matter how many people contributed“. The rest of the document is a CSS code styleguide. Definitely a must-read if you work in teams (or if there is a chance that one day someone else might have to work with your code).
What’s slated for CSS4 Selectors?4
I’m already happy with the immense power of CSS3 selectors. But when these CSS4 selectors David Storey explains get implemented, I’ll probably walk around with a silly smile forever. Powerful stuff!
HTML5 Rubik’s Cube5
The rise of the T-shaped developer7
Oops! I ruined your life. :)9
A good in depth rant about funny error messages. I especially like the part where the author Golden Krishna compares how we react to certain behaviors if they are done by babies or done by adults.
Image sprites are great for reducing the amount of HTTP requests, but they can be pretty hard to use: you have to calculate the background-position offsets. Wouldn’t it be great if you could just stack the images? It turns out you can do that with SVG and the
:target selector. Simurai shows us how it works.
The Kember Identity12
The Kember Identity is a string which, when hashed, returns itself. Elliott Kember tries to find it with the help of an ever-increasing list of nerds. You should get on that list—you can even win some money with it when you find it!
- 1 http://lea.verou.me/2012/05/text-masking-the-standards-way/
- 2 http://lea.verou.me/2012/05/text-masking-the-standards-way/
- 3 https://github.com/necolas/idiomatic-css
- 4 http://generatedcontent.org/post/10865123182/selectors4
- 5 http://html5rubik.com/
- 6 http://html5rubik.com/
- 7 https://blogs.msdn.com/b/thebeebs/archive/2012/03/30/the-rise-of-the-t-shaped-developer.aspx?Redirected=true
- 8 http://html5bookmarks.com/
- 9 http://www.cooper.com/journal/2012/01/oops_i_ruined_your_life.html/
- 10 http://www.cooper.com/journal/2012/01/oops_i_ruined_your_life.html/
- 11 http://simurai.com/post/20251013889/svg-stacks
- 12 http://elliottkember.com/kember_identity.html
- 13 http://elliottkember.com/kember_identity.html
- 14 www.smashingmagazine.com/the-smashing-daily-archive/
- 15 www.smashingmagazine.com/the-smashing-daily-archive/