CSS Articles
-
Firefox 66: The Sound of Silence
Firefox 66 is out, and brings with it a host of great new features like screen sharing, scroll anchoring, autoplay blocking for audible media, and initial support for the Touch Bar on macOS.
-
Web Design Survey Findings and Next Steps
In November, I wrote about my team’s work on experimental new web design tools and introduced a survey to rank the challenges of web design and development. The insights you shared continue to inform priorities for the Firefox DevTools' 2019 roadmap. Our main takeaway: developers and designers of every experience level want a better understanding of CSS debugging. We're on it.
-
Firefox 65: WebP support, Flexbox Inspector, new tooling & platform updates
Firefox 65 ships today with some notable Firefox Devtools updates, including the release of the CSS Flexbox Inspector, a new changes panel, and more. We're shipping CSS platform improvements and updates to a variety of JavaScript APIs. Firefox 65 supports the WebP image format, and support for AV1, an open and royalty-free video compression format, is shipping now in Firefox 65 for Windows.
-
Designing the Flexbox Inspector
CSS Flexbox is an increasingly popular layout model that helps in building robust dynamic page layouts. However, it has a big learning curve! The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements. You can try it out now in Firefox Nightly or Dev Edition.
-
New & Experimental Web Design Tools: Feedback Requested
We’re currently hard at work on some new tools for web designers: a comprehensive Flexbox Inspector as well as CSS change-tracking. Tell us about your biggest CSS and web design issues and pain points in the first-ever Design Tools survey from Mozilla! We want to hear from developers and designers, no matter what browser you use.
-
Firefox 62 – Tools Cool for School!
From the new Firefox Shape Path Editor, which lets floated content sculpt the flow of content, to the Variable Fonts, which enable fine-grained adjustment of font rendering, to more efficient Firefox Dev Tools view options, Firefox 62 delivers a cornucopia of features.
-
Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor
CSS Shapes lets your web designs break out of the rectangular grid. Using a new CSS standard, text can flow, images can be rounded, even just a few non parallel lines can make your site stand out and make your brand distinctive. With the Shape Path Editor in Firefox 62 you can visually edit the shape directly from the CSS inspector, using Firefox Developer Tools to select the element whose shape you want to modify.
-
9 Biggest Mistakes with CSS Grid
CSS Grid is groundbreaking new technology for web design. In her newest Layout Land video, Jen Simmons explains the 9 Biggest Mistakes people are making as they adopt this new technology, with advice and tips for avoiding pitfalls and breaking old habits.
-
How to Write CSS That Works in Every Browser, Even the Old Ones
Jen Simmons' seven-part mini-series on resilient CSS and how you can create great graphic design on the web, now, and not have to worry about all the old browsers.
-
It’s Resilient CSS Week
Jen Simmons celebrates resilient CSS and shows you how it's done, in this week's Layout Land video series. Check out the opening episodes: "Introduction to Resilient CSS" and "Can I use this CSS?" both available now.