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.
Podcast
post type
2020 Posts
Article post typeW3C 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
Link post typeEmbracing 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…
Video post typeEdit 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.
Link post typeIt’s My Job, and Yours
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” The role of ethics in our modern web space has been on my mind for the past few years and I suspect it will occupy my thoughts increasingly as I move forward. With each encounter of a questionable feature…
Video post typeUse 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.
Video post typeHow 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.
Video post typeScroll 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…
Video post typeInner & 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.
Podcast post typeOn 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.
Video post typeWhy 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.
Video post typeFaster 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.
Video post typeLaying 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.
Video post typeSubgrid 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.
Video post typeWhat 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?
