Container Queries & The Future of CSS
Modernizing the cascade for responsive design systems
Talk
resource type
2021 Resources
CSSWG, Container Queries, Scope, and Layers
I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.
Support (Not) Unknown
Adding Container Query tests to CSS
@supportWorking on a new CSS feature like Container Queries, one of the most important considerations is to ensure a “migration path” – a way for developers to start integrating the new code, without breaking their sites on legacy browsers. That looks different depending on the feature, but can often include…
Container Queries & the CSSWG
I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.
What Is The Future Of CSS?
Starting a new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to Miriam to find out.
Talk resource typeBeyond CSS Variables
Pushing past global design tokens
Past
-
see all Article resources
Article resource typeContainer Queries: a Quick Start Guide
Now is the time to begin experimenting with a long requested layout tool.
The
@containerquery, that elusive feature developers have been requesting and proposing for years, has finally made its debut in a browser. Well, sort of. Here we’ll explain what container queries are, how they work, and what other features they might come with once fully supported in browsers. JS Danger, CSS-Tricks Edition
I joined some other folks behind CSS-Tricks (maybe you’ve heard of it?) to face off in the much beloved don’t-call-it-jeopardy game show. Play along while you listen (or watch). It’s JS Danger time, y’all!
2020
Very Extremely Practical CSS Art
CSS-Tricks asked a number of web builders the same question…
“What is one thing you learned about building websites this year?” I’ve always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I’m familiar with many of the tricks involved, but still find it surprising every time: the way people are able to…
CSS, Sass, and Playwriting
I join Ari, Ben, and Tessa to talk about getting into CSS from other languages, the absurdly massive problem CSS is designed to solve, and the mental model behind the language.
Talk resource typeWordPress Block Editor Enhancements
How to make the editing experience better
Past
Talk resource typeDissecting the ‘Name-Brand’ CSS Conventions
To understand how they work with the language
Past
When Variables Cascade
An exploration of CSS custom properties
Past
Talk resource typeCSS is Rad
Resilient design on an infinite canvas
Past
Talk resource typeDynamic CSS
with grids & custom properties
Past
Talk resource typeCascade Aligned Programming
What does it mean to style a universal medium?
Past
-
see all Link resources
Link resource typeUsing Custom Property “Stacks” to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features, but as authors we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuance – and inheritance requires an unbroken lineage. Now, CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways.
Workshop resource typeResilient Web Systems
Upgrade your app with front-end training & consulting
Past
Design Systems AMA
Jina and I answer questions about CSS, Sass, Design Systems, and more!
Authoring the future of CSS
A spinoff of the Party Corgi Network discord. I chat with Chris Biscardi about The CSS Working Group, open-source projects, art, and music.
W3C Invited Expert on the CSS Working Group
Helping define the future of styles on the web
I’ve joined the CSS Working Group as a W3C Invited Expert to help to develop the next level of Cascading & Inheritance, in addition to other CSS standards. I’m also currently active in the CSS4 and Design Token Community Groups.
2019
Embracing the Universal Web
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” There are constantly new features appearing in browsers – from subgrid to variable fonts to better developer tools. It’s a really great time to be re-thinking everything we know about design on the web. Responsive design has served us…
Edit CSS Shapes in the Browser
For quick visual adjustments directly on the page
Have you ever wanted to create more interesting shapes on the web, or flow text around the details of an image? Shape paths can be hard to code without a visual reference, but Firefox provides a shape editor to make it quick and clear.
Use new selectors responsibly with selector queries
Just in time for Selectors Level 4
Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. I’ll show you how it works, and how to start using this new feature query right away.
How do you wrap long words in CSS?
None of the solutions are perfect, but we have some options
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option.
Scroll Snap in CSS
Without any JavaScript or “scrolljacking”
When we’re scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines…
Inner & Outer Values of the Display Property
Allow us to be more explicit & expressive about layouts
The
displayproperty has been in CSS from the beginning, handling everything fromblockandinlineboxes tolist-itemsand full layout systems likeflexboxorgrid. Now thedisplaysyntax is getting an upgrade to match it’s multiple uses.On Sass & CSS
I drop by the show to talk about Sass in 2019, design tokens, OddBird, unused CSS, new CSS properties, and Dave & Chris’ explanation of revert.
Why isn’t this CSS doing anything?
Have you ever set a
widthin CSS, and… nothing happens?There are a number of property & value combinations that can lead to CSS being inactive, and now Firefox will tell you why. Open the developer tools, and look for the greyed-out property with an info-box on hover.
Faster Layouts with CSS Grid
And
subgrid, landing on Dec 3For years, we’ve struggled to build resilient layouts on the web, but CSS Grid promises to change all that – and you can start using it now, with only a few properties and basic concepts.
Laying out Forms using Subgrid
and fallbacks for legacy browsers
It’s a common pattern to align form labels and inputs in grid-like layout. I’ll show you how to do it quickly using CSS subgrid, with several quick fallbacks.
Subgrid for Better Card Layouts
and fallbacks for legacy browsers
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it’s still be hard to line-up content inside the cards – headers and footers that might need more or less room.
What does
revertdo in CSS?And how is it different from
unsetorinitial?I’ve often used
initialandunsetin my CSS – global keywords that can be applied to any property. The difference is small, but important:unsetallows inheritance, whileinitialdoes not. But then Firefox implementedrevertand I was confused – how is this one different from the others?Why is CSS so Weird?
How can we design for an unknown & infinite canvas?
CSS is the design language of the web – one of three core web languages – but it also seems to be the most contentious and often perplexing. It’s too easy and too hard, too fragile and too resilient. Love it or hate it, CSS is weird: not quite markup…
Styling Lists in CSS
Powerful New CSS for Styling Bullets, Numbers, and List Markers
When you create lists in HTML, browsers add bullet-points or numbers we call list markers. Now CSS gives us the tools to style those list markers, and even create our own!
Announcing the Mozilla Developer Channel
a gift from Mozilla (and OddBird)
Over the summer, we’ve been working with Mozilla to help create a new resource for web professionals like us – with a mix of videos, articles, demos, and open source tools. Today, we’re excited to launch the video channel!
Design Systems & CSS
We start by talking about design systems and design tooling – how they differ, and the problems they solve.
CSS Custom Properties In The Cascade
a deep-dive into what’s possible
Pushing past the “variable” metaphor, CSS Custom Properties can provide new ways to balance context and isolation in our patterns and components.
The Scary & the Inspiring
8 CSS & UX things I learned at GenerateConf 2019
As my first foray into the world of web design conferences, GenerateConf 2019 in New York did not disappoint. From human-centered AI to Object Oriented UX to the wonder of CSS Grid, here’s what I found interesting.
Smashing CSS Follow-Up Q&A
Questions about Dynamic CSS
I had the pleasure of presenting both a talk and workshop at Smashing Conf in San Francisco this year. During the talk, people left questions in a collaborative doc, so I’m here to provide the answers!
Workshop resource typeAdvanced CSS for Modern Applications
with practical use-cases, tooling, and pitfalls
Past
VueFinder at VueConf, 2019
Dynamic CSS with Vue
Inspired by VueConf 2018 I spent some time learning JS and Vue in more depth, and built myself a more flexible VueFinder presentation tool to fit my needs. This year, I returned to VueConf and gave the closing talk on passing data between CSS and Vue.
Talk resource typeDon’t Use My Grid System
It’s time to move past grid systems like Susy
Past
2018
Fonts & more
Miriam talks with the Views on Vue panel about design, tools, fonts, and more.
Ethics, ES6 in Practice, and Dynamic CSS
On Episode 18, the TalkScript team continues the live-ish at JSConfUS podcast series with guests Myles Borins, Tim Doherty, and Miriam Suzanne. Listen in!
Herman Style Guides
An agile approach to design systems on a budget
Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool to create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps keep our development flow simple, and our UX consistent…
2017
18 Designers Predict UI/UX Trends for 2018
Figma asked 18 designers (including me) what UI/UX trends they predict for 2018. December, with its flurry of holiday parties, cheery out-of-office auto-replies and introspective weather patterns, provided the perfect opportunity to pause and survey the landscape.
How to Write Beautiful Sass
Excerpt from Jump Start Sass, chapter 11
Clean, beautiful code should be a goal in every project. If other developers need to make a change, they should be able to read what is there and understand it. Readable code is the core of maintainability. This excerpt from Miriam’s book, Jump Start Sass will help get you started…
Media Queries & Grid Settings
Practical media helpers for Susy3
Most grids change with the viewport – and Susy needs new settings at each breakpoint. Susy3 is designed without mixins for complete flexibility from project to project, but it can be useful to build additional tools and shortcuts as you go. Here are some snippets to help you get started…
Talk resource typeMore CSS Charts, with Grid & Custom Properties
Inspired by Robin Rendle, I demonstrate some of my early experiments combining CSS Grids and custom properties to create dynamic layouts and data-visualizations.
-
see all Article resources
Article resource typeWelcome to Susy3!
Make grid systems your fallback plan
We’re excited to introduce Susy 3.0, a major update to our popular grid-math calculator – now more focused and flexible than ever. Susy was designed to make layout math easy, without forcing you into generic patterns and ugly markup. But grid systems are on the way out, replaced by real CSS layout specs that live in the browser. With Susy3, we want to help make that a smooth transition.
Understanding ‘Spread’ in Susy3
Susy 3.0 will be released in the next week, if all goes well, and there’s a lot to write about it. I wanted to start with a detailed overview of one core concept: spread.
Fun with Viewport Units
Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases.
Talk resource typeThe Great State of Design
with CSS Grid Layout and Friends
Past
Getting Started with CSS Grid
It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning.
CSSDay 2016 Recap
CSSDay was held in sunny Arizona on December 3, 2016. The conference is geared towards front-end developers who want to dive deeper into advanced CSS topics.
What’s Old is New: Drop Caps in CSS
Using an emphasized initial letter is a technique that has been used for centuries. Let’s dive in to see some ways you can apply it to your project to help guide your reader with visual hierarchy.
2016
Loops in CSS Preprocessors
No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code. We’ll take a look at what loops can do, and how to use them in the major CSS preprocessors.
Versioning Show Ep.8
I joined Tim Evko and M. David Green for their SitePoint podcast – The Versioning Show. We discussed going from lurker to speaker, the importance of writing about what you’re learning, stumbling into fame, approaching new projects, and unit testing in Sass.
Sass Toolkits, Live Q&A
I did a live Q&A at SitePoint in August, talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!
CSSConf 2016 Recap
It was a pleasure speaking at CSSConf 2016 in Boston! Here are some of my notes from the event – covering everything from creativity and the Bauhaus movement to SVG 2 internals, React styles, CSS grid layouts, and custom properties (e.g. CSS-native variables). I included links to slides and video…
Will CSS Grid Layout Enable Creative Design?
CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web. How can we use it to start creating interesting layouts?
-
see all Article resources
Article resource typeJump Start Sass
Get up to speed with Sass in a weekend…
Using Sass, you can write your stylesheets in a more concise, dynamic, and readable way, and cut down many of the repetitive tasks that come with writing vanilla CSS. This book provides a thorough introduction to Sass for the beginner.
2015
-
see all Talk resources
Talk resource typeNo Pain No Gain
CSS Code Reviews
Past