Issue 206
Firefox 68 release, lists in CSS, fun places to learn layout, writing tests for CSS
News
Issue 206
Hello!
welcome to another issue of CSS Layout News, Tuesday seems to come around quickly! It's Firefox release day so I've linked to some of the things available in Firefox 68, some of which I've been documenting over at MDN. My Smashing article about Lists out today also features the ::marker pseudo-element as implemented in this new version of Firefox.
The newsletter is sponsored by An Event Apart today. I'll be heading out to Washington DC in a couple of weeks for An Event Apart, and am really looking forward to it. Perhaps I'll see you there!
I put a fair bit of time into curating and sending these newsletters each week and it would be fantastic to have some more sponsors on board to help cover the costs. Take a look at the sponsorship page. You could use a sponsored slot to advertise your event, product or even job opportunities. Anything that would be of interest to 10,000+ good folk who are interested in CSS.
Rachel Andrew, CSS Layout News
Firefox 68 for developers - Mozilla | MDN
It is Firefox 68 release day, and it comes with a whole bunch of neat stuff for CSS Layout fans. Some highlights:
- CSS Scroll Snapping is updated to match the current specification.
- The ::marker pseudo-element has been implemented
- In DevTools you can now toggle your print styles, if you have print media queries.
Learn
CSS Lists, Markers, And Counters — Smashing Magazine
Documenting ::marker for MDN, and my recent writing about the display property for Smashing sent me off down a list-shaped rabbit hole, and this article was the result of it.
Fun places to learn CSS Layout – Part 2: Grid Layout, by Stéphanie Walter - UX designer & Mobile Expert.
Stéphanie Walter has rounded up a great list of places to learn about Grid Layout as a follow-up to her post two years ago about places to learn Flexbox.
CSS :focus-within
A accessibility tip showing you how to use :focus-within to modify styles when an element or its parent has keyboard focus.
Menus with "Dynamic Hit Areas" | CSS-Tricks
An interesting technique to solve the problem where you try and click on an open menu, and the menu disappears, by creating "dynamic hit areas".
Responsive design ground rules | Polypane: The browser for responsive web development and design
From the Polypane blog, some suggestions for responsive design "ground rules".
Bringing new CSS techniques to production - Si digital
A long post about using new CSS in production. with lots of tips gained from actually doing so. The author has quite a focus on the content reordering power of grid, this comes with a potential a11y cost, so it is very important to test any reordered layout in terms of keyboard navigation.
Writing Tests For CSS Is Possible! Don’t Believe The Rumors - Gil Tayar | CSSconf EU 2019 - YouTube
A presentation on CSS Testing from CSSconf EU.
Our Sponsor
For UX and front-end experts. And those who really want to be.
Whether you’re the team leader or a rising star, a seasoned pro or a talented apprentice, An Event Apart covers everything you need to know to support your users and create satisfying digital experiences. From performance that lasts as your site evolves, to content that works even when your user disconnects from the web, you’ll learn it all at An Event Apart.
Our topics are always fresh, often inspiring, and above all, deeply practical. Learn from 17 world-renowned experts over three carefully curated days. Interact with speakers between sessions, at lunch, and during our opening-night happy hour. You may even make a new friend or two. Best of all, you’ll return to work eager to try new ideas and continue to grow your expertise. Come join us for fun and deep learning. Save $100 off any two or three days with code AEACSSN.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.