This week we have SVG, CSS Feature Queries, breadcrumb navigation and flexbox
This week I've watched a couple of videos from CascadiaJS - with conference season approaching I imagine there will be a lot more coming online from various events in the last quarter of the year. We've also got some interesting SVG techniques and an excellent, detailed post from Jen Simmons on CSS Feature Queries. Enjoy!
Rachel Andrew, CSS Layout News
Using Feature Queries in CSS
Feature Queries in CSS using
@supports are like having Modernizr right there in CSS. Here is an article from Jen Simmons explaining how to use them.
Intro to the CSS Grid fr unit - YouTube
A short video - part of my CSS Layout Workshop - introducing the CSS Grid Layout
Breadcrumbs For Web Sites: What, When and How — UX Planet
Navigation is hard. I'm thinking that quite a lot recently as the various things I'm involved with seem to all have their own special navigational headaches! Here is an excellent post with lots of examples of breadcrumb navigation.
Justin McDowell - Bauhaus in the Browser - CascadiaFest 2016 - YouTube
Justin McDowell shows some demos of Viewport Units, Transforms, Grid and Shapes in this presentation from CascadiaJS. Watching this I think I solved my question as to why lots of people were telling me that CSS Grid Layout was going to be in Safari 10.
As far as I know that isn't the case (not that I have special knowledge). I think this misconception comes from Grid being enabled in Safari Technology Preview. My understanding is that the things in Preview are like the things in Chrome Canary, they aren't going to ship wholesale into any particular version but are just there for testing.
Anyhow, I like to see people taking a creative look at the possibilities with new layout methods, which Justin does nicely.
Alan Stearns - Becoming Responsible for CSS - CascadiaFest 2016 - YouTube
And another video from CascadiaJS in which co-chair of the CSS Working Group, Alan Stearns, talks about something I care about a lot.
"How people can engage in standards discussions, log bugs and write testcases, and how the Houdini task force will let more people write better code for styling."
Practical SVG · An A List Apart Article
An excerpt from Chris Coyier's new book, Practical SVG. The book is excellent and worth buying but this excerpt is especially relevant to this newsletter as it covers sizing SVG elements.
Flexbox - Learning web development | MDN
A solid introduction to Flexbox on the Mozilla Developer Network Learn section.
Cropping Image Thumbnails with SVG - Cloud Four
An interesting approach using SVG to crop image thumbnails.
This is a special sponsor as I'll be at ffconf running my CSS Layout Workshop, so I would love to see some of you in Brighton in November for that. Workshops are on the 9th November and then the conference days are Thursday and Friday - however it isn't a two day conference. ffconf has always sold out so quickly the team are running the same conference day twice! If you can make it to Brighton in November this event is well worth the time.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.