After all of the travel over the last few weeks I am very glad to be back in the office. Lots of interesting links this week from Flexbox to a new Safari, how to report browser bugs and an animated SVG fox!
A few upcoming things that I'm involved in. The online RWD Summit is next week, I'll be speaking about Grid and Flexbox but the whole three days looks excellent. Tickets include all of the videos if you can't be online the whole time and for reference later. Use the discount code RACHEL for a 20% discount.
Rachel Andrew, CSS Layout News
Yesterday Safari 9.1 was released and includes various noteworthy things. Safari now supports the HTML picture element for responsive images and also CSS Custom Properties - "CSS Variables".
Many of you will be using Normalize in your projects, so it might be useful to know that version 4.0 is out.
A video introduction to Flexbox from Ryan Irelan.
Zeldman collates a bunch of Flexbox and Grid links, many of which will be familiar to readers of this email!
I'm a great fan of the Mozilla Developer Network (MDN) as a reference for web technologies. Here you can find their documentation for Flexbox.
An older article but still one of the best resources for learning about CSS Shapes. I would love to see some creative uses of Shapes - drop me a line if you have built something or spotted a use in the wild.
Some very nice methods for creating responsive tables from David Bushell.
An excellent collection of tips and tricks from Vitaly Friedman of Smashing Magazine. I love this sort of thing, the things we only discover in the course of doing real work and solving real problems. I think there will be something for everyone in this slide deck.
I seem to have become the place where people send their reports of strange CSS Grid behaviour in browsers. I'm really not the best conduit for this information! If you do think you have found a bug in a particular browser then the best place to report it would be the browser in question. This page explains how to do that with handy links for the main browsers.
Before reporting a bug you can take a look and see if the issue is already logged. Usually when I come across something, even in a developing spec like Grid Layout, when I head to the bug tracker it is already a known issue. I can then just wait until I see it has been resolved and test again.
This is a fun tutorial. Not a huge amount of real world useful application right now and Chrome only, but playing with ideas like this is a way to learn new techniques that can then be put to use in the real world. Also, that fox is cute!
The complete CSS Layout Workshop takes you right through from fundamentals to advanced and experimental CSS techniques. Part 1 is now online and the lessons for Part 2 are currently being added. Save $10 on the complete package with the Early Bird Offer.
All courses include access to our Slack Community, all videos and code examples to follow along.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.