Issue 40
WebKit drops vendor prefixes, flexbox, clipping paths and web rendering.
News
Issue 40
The sun has come out here in the UK, and I am about to head off to my next batch of conferences. Next week is CSS Conf Budapest, I'm speaking about new layout CSS and really looking forward to hearing all the other talks. I head from Budapest to Boston, where I will be speaking about CSS Grid Layout at An Event Apart. Jen Simmons is also on the line-up so it will be a good event for anyone wanting to learn more about what is becoming possible for CSS layout.
There are still seats left for my CSS Layout Workshop in London on June 13th. I love giving these in-person workshops but don't get chance to do many of them. If you can get to London I promise an information packed, and completely hands-on with CSS day!
Rachel Andrew, CSS Layout News
Updating Our Prefixing Policy | WebKit
WebKit will be moving away from Vendor Prefixes:
"The current consensus among browser implementors is that, on the whole, prefixed properties have hurt more than they’ve helped. So, WebKit’s new policy is to implement experimental features unprefixed, behind a runtime flag."
This means that my Grid examples will work in Nightlies and the Safari Technology Preview.
CSS Grid Layout Workshop, 13th of May, Amsterdam
If you are interested in really understanding the CSS Grid Layout specification then I can recommend spending a day studying it. This workshop is to be held in Amsterdam on the 13th May and follows the same format to the workshop I attended in New York earlier this year.
Learn
All You Need to Know About Web Rendering — Medium
A post explaining how browsers render webpages.
5 Flexbox Techniques You Need to Know About | Tutorialzine
A quick runthrough of some basic use cases for Flexbox, handy if you are just getting started with it.
Flexbox Fundamentals - Course by @garthdb @eggheadio
A short video course of Flexbox Fundamentals on egghead.io.
SVG Clipping Paths - Vanseo Design
"Both SVG and CSS have ways to create clipping paths. however CSS support is still somewhere limited. No Microsoft browser currently supports the CSS clip-path property. Neither does Opera Mini. Everything else offers partial support. The good news is, all browsers support SVG in general and clipping in particular."
An explanation of how to use SVG and CSS clipping paths.
Making IFrames Responsive
A walkthrough of how to make an iframe responsive.
Interesting
Hexagonal Kittens Honeycomb Layout
A demo of a hexagonal layout using clip-path from Estelle Weyl.
Simple Responsive Table in CSS
I'm working on a rebuild of the Perch UI at the moment and so collecting good examples of UI elements. Here is a very simple responsive table example.
Our Sponsor
Your design, user experience and code + our powerful CMS and e-commerce solution
Many e-commerce solutions leave you modifying templates instead of designing an experience. Perch Shop is different. We provide powerful e-commerce features whether you want to sell a single e-book download right up to a store with 1000s of products. Yet leave the user experience and design of your store up to you.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.