I'm back from the CSS Working Group meeting and working on a talk entitled The Evolution of Responsive Design, which I'll be giving for the first time at Frontend North. There are a couple of posts included today which touch on that subject.
Can you help? I am trying to collect good examples of cases where you need the visual view to be different to the order of items in the source. You can read this article as some background to the issue I'm talking about. With grid and flex (and to a lesser extent other layout methods) you can cause the visual display to be different to the source order. This causes a problem because anyone tabbing around the document for example, then moved round the document in a way that doesn't make sense - the browser is following the source not the layout.
It is often argued that the source order is the correct priority of items, and that - for example - the order of items in your mobile view should be the same as that in your desktop view. The priorities should be the same, therefore the order should be the same. Do you have strong examples to counter that? Bonus points if they are in a live project rather than just something you consider you might like to do. Email me!
Rachel Andrew, CSS Layout News
Smashing Podcast Episode 7 With Stephanie Stimac And Aaron Gustafson: What’s New In Microsoft Edge? — Smashing Magazine
Stephanie and Aaron talk with Drew McLellan about the new Chromium-based Microsoft Edge.
Everyone has been linking to this lovely explanation of the CSS Cascade, and so they should because it's brilliant. If you haven't already seen this take a look, it is so well done that I'm sure pretty much everyone will learn something.
A breakdown of a tweet explaining why the tweeted example works, and how flexbox allows us to create multiple layouts without needing media queries.
I'm generally entirely baffled by anything that comes out of a design tool, and have created many awful and poorly optimized SVGs in my time. So here is a guide to making them less awful, mostly posted here so I remember to use it next time I'm going to unleash a giant SVG somewhere.
An interesting approach to controlling layout changes within components.
Here is a nice article on building multi-directional layouts. Now that logical properties and values are gaining solid browser support this all becomes a lot more straightforward.
This is a really nice tutorial, using
position: sticky and IntersectionObserver.
A fantastic post looking at the things on the web platform that started life in the Internet Explorer Trident engine, and the innovations that never took off.
We’ve been learning CSS and CSS for Layout in the same way since we broke free of table-based layouts in 2001, however CSS has grown-up and over the last few years a proper and consistent system for layout has emerged.
In this all-new workshop I will take you through this new system for layout, giving you the ability to properly understand and use CSS Layout with real understanding of why things behave as they do.
I'll be running this workshop for SmashingConf in San Francisco, Austin, and New York in 2020. Why not make a few days of it and book to attend the workshop and conference?
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.