Issue 235
Microsoft Edge, CSS Cascade, using or not using Media Queries, SVG, smooth scrolling nav
News
Issue 235
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
Learn
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.
The CSS Cascade
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.
4 CSS layouts without using media queries | Polypane browser for dev & design
A breakdown of a tweet explaining why the tweeted example works, and how flexbox allows us to create multiple layouts without needing media queries.
CSS { In Real Life } | Optimising SVGs for the Web
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.
Using responsive modifiers to control layout changes in your components | CodyHouse
An interesting approach to controlling layout changes within components.
Building Multi-Directional Layouts | CSS-Tricks
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.
Smooth Scrolling Sticky ScrollSpy Navigation – Bram.us
This is a really nice tutorial, using position: sticky and IntersectionObserver.
Interesting
Today, the Trident Era Ends
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.
Our Sponsor
Spend a day learning CSS Layout with me at SmashingConf San Francisco, Austin, or New York
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.