--atom: 0.15957s;

via Open Props

I learned you can use % for chroma!

.percentage-chroma {
  color: lch(50% 50% 200);
  color: oklch(50% 50% 200);
}

Added 2 examples to my CSS Color Syntax Mega List.

Thinking on ways to solve Picklists

In this GUI Challenge, I show how to use leverage the power of checkbox and radio groups for beautiful and accessible picking UX.

demo · source

🎙️ Bad At CSS Podcast

Jason Lengstorf, David East and I chaotically discuss CSS, container queries, and that pesky clamp() function 🖕.

Subscribe, listen or watch
Spotify · Apple · YouTube

Steal this minimal code setup for a nice comparison component.

View source

I wrote about CSS prefers-reduced-transparency on developer.chrome.com 🤓

Checkbox and radio groups have special powers with keyboard and screen reader interactions; leaning into them can lead to some rad UI:

Picklists · Taglists

Go ahead, open them up and give it a try!

How do I center this div?

Una and I discuss CSS centering, and all the different ways CSS has your back.

Turns out, there's A LOT of ways to center.

Watch · Listen

NEW

5 bounce easings added to Open Props!

.box {
  animation: drop 1s var(--ease-bounce-2);
}

try it out!

Thinking on ways to make spoopy Halloween Projections

In this GUI Challenge, I emulate a Halloween projector effect I saw on a wall.

demo · source

Original Codepen set up a vibrant radial gradient in each corner and adjusts their size so their color crossover created a swirly effect.

The animated version uses @property to interpolate each radial gradients position and adds a radial gradient size slider, so you can find other swirly moments of your own.

I've got a new post over on developer.chrome.com!

Everything you need to know about
CSS Relative Color Syntax 🤓

@Container pattern

✅ nice inline flex layout when there's room in it's Column container

if not?

✅ switch to a nice block layout and center the text

I like the ch unit for this since I'm wanting to switch based on available reading length for the text 🤓

Thinking on ways to solve relative color

In this GUI Challenge, I show you how to use CSS RCS (relative color syntax) for lightening, desaturating, opacity, grayscale and more.

oklch(from hotpink calc(l - 20) c h)
hsl(from hotpink h calc(s / 2) l)
hsl(from hotpink h s l / 50%)
hsl(from hotpink h none l)

demo · source

There might be one or two RCS features you didn't know 🤓

Bramus explains @scope on developer.chrome.com and his personal blog with this quick introduction.

@scope (.Card) {
  > header,
  > footer {
    background: hsl(none none none / 20%);
  }
}

@scope is new in Chrome 118

NEW
🎙️ Bad At CSS Podcast

David East and I discuss TypeScript; David defends it, and I attack it. I'll probably get mega roasted for this.

tldr;
I love TypeScript, for you.

Subscribe, listen or watch
Spotify · Apple · YouTube

View Source

CSS relative color syntax

NEW
🎙️ Bad At CSS Podcast

David East and I have a special guest:
Chris Coyier 🎉

Subscribe and listen
Spotify · Apple · YouTube

Next up on The CSS Podcast…

Ep #71
Why do I have layout shift?

Watch · Listen

Was on The CSS Survey's Live Stream Party!

✅ give Sacha and Hui a follow!
✅ sink your teeth into that juicy data
✅ hear predictions and suprises!

Just take me to the results

Next up on The CSS Podcast…

Ep #70
Why do I have a distorted image?

Watch · Listen

Had a great vacation!
✅ kids at grandma's
✅ chilled hard w/ my partner
✅ bought a banjo! (always been intimidated)
✅ played a lot of banjo and banjolele
✅ built a CSS demo or two…
❌ play video games

Bad At CSS Podcast
⮑ logo made in the browser

✅ intentionally no font
✅ lack of any styles 😉
✅ looks like you're in devtools
✅ bad layout
✅ bad colors
✅ box around bad is bad

Codepen · Spotify

Next up on The CSS Podcast…

Ep #68
Why is it overflowing?

Watch · Listen

🎙️ The Bad At CSS Podcast

David East and I host, and sometimes bring on an occasional guest 🤓

Subscribe and listen on:
Spotify · Apple · YouTube

Thinking on ways to solve Adaptive Typography

In this GUI Challenge, I show how to use the prefers-contrast media query to adapt both system and adaptive fonts to match user's contrast preferences.

Contrast is more than just color

demo · source

Experimental #CSS carousel featuring:
subgrid scroll driven animations (SDA) oklch() @property @layer

Lots of code comments
to help break down the effects 🤓

✅ SDA changes hue/theme
✅ SDA toggles next/prev
✅ SDA syncs dots

Try it in Canary with #experiments enabled

New season of The CSS Podcast has begun!

Ep #67
Why isn't z-index working?

Watch · Listen

Was on JS Party!

🎙️ Watch it (or listen)

Thinking on ways to solve a Morphing Button

In this GUI Challenge, I show how view transitions can upgrade the experience of changing the innerHTML of a button by animating the change.

demo · source

Was on the @coderyan show!

Watch it‽

• Designing for more than the viewport
• Overview of the talk from Config 2023
• CSS stuff 🤓

Do not take the State of CSS Survey

"Nice Adam" wants you to take it;
naturally I want the opposite

Spoke at Figma Config with Una!

The Future of Responsive Design

All about how the width of the viewport was never that relevant, it's more about the space a component has, the children type and count, and so much more.

• Watch it
• Config page

Was on the Cloudinary DevJams Podcast!

🎙️ Watch it (or listen)

We chat about making the nerdy.dev site with Deno and Fresh, and of course we chat all about how I'm serving images 🙂

Vertical rhythm thanks to the rlh unit.

Bonus:
scales with the user's font size pref 😎

I've joined a CSS webring!

Long live the indie web 🤘🏻💀

I've been unleashed.
What evil will I do first?

Perhaps, I'll change one char somewhere..
and break the build.

muahahahaHAHAHAAAAA

Co-MC'ed CSS Day 2023 with Michelle Barker 🤘🏻💀

catch up on all the talks here

What a blast, totally was with my people. I'm especially proud of a few dad jokes:

1. "Why don't you <popover> and have a <dialog> with me"
2. "It's not the PacMan rule, it's the conic gradient rule: leave room for another color stop in your chat circle."

Spoke at Smashing Conf!

• Watch it
• Check out the slides
• DIY

How to create personalized web experiences

I spoke at Google IO again!
Here's a link to my talk.

Upcoming talks!

• Smashing Conf San Francisco
• CSS Day (🎤 MC)
• Figma's Config with @Una

Thinking on ways to do 3D SciFi Text

In this GUI Challenge, I use CSS Scroll Linked Animations to 3D tilt a few paragraphs of text, and on scroll, make them appear to vanish into the far edges of the galaxy.

watch · demo · source

Google IO talk done!

Success selfie at the 🆕 Seattle office's Neon Staircase 🤘🏻💀

Multiple hard stops in a radial gradient sized as farthest-corner, this is me changing the x position first from 0 to -100, then the y in the same manor.

Viewport widths n' color gamuts;
As each widen, adapt the UI.

.classic-gradient {
  background-image: 
    linear-gradient(45deg, 
      white, 
      black 0% 20%, 
      white 0% 40%, 
      black 0% 60%, 
      white 0% 80%, 
      black 0% 100%
    )
  ;
}

🆕 post on developer.chrome.com

wrap your head around…
#CSS text-wrap: balance

✨ balanced headlines ✨
with one magical line of CSS

only Chrome Canary atm, details in article

Was on the @PodRocketPod!

Me, Stephanie Eckles, and Stacy Kvernmo team up and answer questions about UI and UX.

🎶 Listen on Spotify

#VisBug won an award 🤯

Chrome Web Store
Favorite of 2022

This award is legit! Heavy, clever and minimal. Truly a trophy I'll keep around for a long time!

Thanks everyone for the support!

🆕 post on web.dev

6 CSS snippets every front-end developer should know in 2023

Toolbelt worthy, powerful, and stable CSS you can use today.

Thinking on ways to solve Switch Groups

In this GUI Challenge, I show how to take a fieldset packed with a radio group, and turn it into a switch group that controls text alignment.

demo · source

New post on DCC about CSS Nesting

hehe

Deno & Fresh have been rad.
Same goes for Deploy.

but…

95% of the issues have been deps.

I have deps on NPM, deno.land, esm.sh, and unpkg… if any of these services hiccup, and I try and build; builds fail.

No single service can serve all the modules I need, and I don't need that many

💩🌈

I'm fallin behind getting my hands on some #CSS stuff!… Src of my FOMO:

• anchor() - Post by Jhey
• text-wrap: balance
• linear() - Spec by Jake
• view-transitions
• view-timeline

Hella powerful stuff there that I really don't want to let get away from me.

afk.

37 today. Maybe I'll upgrade this 2011 Mac Air.

This felt like a future of library customization, using @layer:

/* <tool-tip> styles */
@import "tool-tip.css" layer(components.tooltip);

/* later, in some-new-context.css */
@layer components.tooltip {
  .some-new-context tool-tip {
    --_bg: var(--surface-1);
    --_shadow-alpha: 15%;
  }
}

Scope the import, then append tweaks into that scope from anywhere. Safe and sound.

Rad stuff.

Gettin the wiggles out before bedtime;
kids night club style.

Math color palettes = letter spacing
Optical color palettes = kerning

CSS HD Color Guide

Meet the new web color spaces!

1. What is a color gamut or color space
2. Review of the classic color spaces
3. Meet the new web color spaces
4. Migrating to HD CSS color
5. Debugging color

It's the article I wish I had when learning about CSS color updates.

Check it out!!

CSS color tip!

Need a rainbow gradient? Let <hue-interpolation> do the work.

.vibrant-rainbow {
  background: linear-gradient(
    to right 
    in hsl      /* vibrant gradient HSL colorspace */
    longer hue, /* hue-interpolation set to longer */
    red, red    /* now red to red goes all the way around */
  );
}

CSS color-mix()

I've got a new post on Chrome Developers with everything you need to know.

📝 Check it out!

TcsS - Typed Cascade Style Sheets

Why hasn't this been made yet? CSS has all the type information needed to create a comparable experience to TypeScript.

Delete your timeout functions and shake off their bugs, here's the event you really need: scrollend.

Read all about it on Chrome Developers and checkout the polyfill I wrote on NPM.

Proud to share I'll be MCing CSS Day 2023 with Michelle Barker.

Service worker update:

• Workbox added
• Offline pages (as you visit them)
• Caches images (as you download them)

Let me know if anything has broken!

2023 prediction:
libraries move to or build upon Deno instead of Node.

Art with the kids 🤘💀

Media Query Ranges

I find this so much more readable.

@media (width <= 720px) {}

Caniuse says we're waitin on Safari to bring it from TechP to Stable; aka plugin still required 😭

Thinking on ways to do UI Physics

In this GUI Challenge, I use requestAnimationFrame and custom properties to make bouncy and jelloey springy UI effects.

demo · source

Individual transforms are rad.
when you don't need to manage the order

Things CSS Could Still Use Heading Into 2023

Just a couple of ideas!
Chris Coyier

Missing text-wrap tho!

h1, h2, h3 {
  text-wrap: balance;
}

html:has(.CertainItem:focus-visible) {
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: 100px;
}

.CertainItem:focus-visible {
  scroll-snap-align: start;
}

On demand with :has(),
when a certain item is focused..

snap dat item into a nice position.

Logical Properties
Learn once, works everywhere.

MDN · Learn CSS · web.dev · The CSS Podcast

Domain's moved 👍

Soft launch of nerdy.dev successful 🤘💀

Still more work. Expect change!

Need a dropcap?
Try the lh unit 🤓

::first-of-type::first-letter {
  line-height: 1;
  font-size: 3lh;
  float: start;
}

Bramus is blogging awesome ways to use :has() 🤓

1. CSS Islands with :has()
2. Target parents with a certain number of children

It's a good idea to follow Bramus's RSS or Twitter

In ~1 minute you can have FLIP-like animation on your page with View Transitions.

document.startViewTransition(() => {
  // modify the dom
  // - hide stuff
  // - move stuff
  // - whatever!
})

Game changer.

layouts are loops.

5 years at Google 🎉

a design tool is like a workspace with pre-squeezed paints ready. bummer is.. many artists have a preference in their paint and ink brands.

soon web browsers will offer the choice, will graphic design tools?

Grid and Subgrid layout slots
with named areas are rad 🤘💀

Placing things by name like search, tab bar, and home bar can be sweet.

Try it
(experiment in Canary, Safari Tech Preview or Firefox)

use :has() for when an element doesn't have some other element as a child, like a card without a heading 🤓

.card {
  ...
  &:not(:has(h3)) {
    /* .card's without h3's */
  }
}

Codepen

DevTools You Didn't Know Existed

The daily.dev show.

Watch on YouTube

End of Season 3 of the CSS Podcast:
YouTube | Podcast!

Had a blast, CSS is so rad ❤️

a rad #CSS one-liner for your hot topics

@layer demo {
  h1 {
    text-emphasis-style: "🔥";
  }
}

Thinking on ways to solve card stacks

In this GUI Challenge, I animate a stack of cards using transform origin, grid and :has().

demo · source

Subgrid

Una and I discuss subgrid, a special value for grid-template-rows or grid-template-columns. Learn the basic, use cases, tips, tricks and gotchas.

Watch · Listen

Oh Snap!

Spoke at CSS Cafe. Watch on YouTube, Peep the slides.

Announcing Chrometober!

Just like Designcember but hauntd! Checkout the blog post Building Chrometober by Jhey for lots of great details about the process.

Made my first commit to the HTML Spec for the scrollend event.

Thinking on ways to solve transitions 🧟‍♂️

In this haunted GUI Challenge, I live code CSS clip-path transitions, demo some rad effects, and cover gotchas. If you don't know clip-path, you will by the end.

demo · source

State of CSS Frameworks

Was on an awesome panel.

Oh snap!

Spoke at An Event Apart in Denver on all the magical things you can do with CSS scroll-snap!

Thinking on ways to solve tooltips

In this GUI Challenge, I build a <tool-tip> custom element with :has(), transforms, and logical properties. Besides a small backup script for :has(), it's all CSS powered.

demo · source

Thinking on ways to solve the cafe wall illusion

In this GUI Challenge, I recreate a classic illusion with CSS.

demo · post · source

On the Learn with Jason show!

Jason and I bring a NextJS app to life with Open Props. Even get to do a little animation 🙂

Thinking on ways to solve carousels

In this GUI Challenge, I try and make an accessible, responsive, adaptive and decently full featured carousel.

demo · source

Spoke at the super rad CSS Day in Amsterdam on CSS Scroll Snap.

Watch the video, peep the slides

State of CSS 2022

Spoke for a Google IO video and wrote an accompanying mega blog post.

Was on @KendoUI's React Wednesdays, chattin about Open Props.

Watch on YouTube

Announcing Designcember!

We on the Chrome Team use the site as a place to both test new web features all combined together, but also to showcase content from our team and others around the web.

Checkout the blog post Building Designcember for lots of juicy details.

Swyx and I chat DX vs UX, complexity cliffs in UI, and a little about design.

Watch on YouTube

Announcing open-props.style

350 ✨free✨ CSS variables

UX/UI Designers are forced to design in px, in a world where accessibility is a legal requirement Christine Vallaure

Why designers should move from px to rem (and how to do that in Figma)

CSS Nesting for the W3C!

Watch on YouTube

Billion Laughs Attack
aka: XML bomb 💣

A type of DoS attack aimed at XML parsers that with a few liens of code, aims to consume a ton of memory.

:root {
  --ha1: lol;
  --ha2: var(--ha1) var(--ha1) var(--ha1);
  --ha3: var(--ha2) var(--ha2) var(--ha2);
  --ha4: var(--ha3) var(--ha3) var(--ha3);
  --ha5: var(--ha4) var(--ha4) var(--ha4);
  ...
}

#CSS was a victim of this when custom properties were introduced.

Learn more on Wikipedia or the CSS Variables Spec.

I join Kevin Powell on Twitch to talk about my favorite up-and-coming CSS features.

Watch on YouTube

CSS scroll-linked animations with Kevin Powell!

Watch on YouTube

HD CSS Color

Spoke again at CSS Camp! This time on HD color, explore what we can use today and how to prepare for the future. Checkout the slides.

Color Gamuts of 2021

Spoke at CSS Cafe. Watch on YouTube, Peep the slides.

Google IO 2021

Gave a workshop on building a user-adaptive interface. CSS grid, flexbox, media queries, and much more.

Jecelyn and I show some of the ways Chrome DevTools supports designers.

Watch on YouTube

What's New In CSS

Spoke at Hover Conf 2021.
Checkout the slides.

Great Developer Tools

Spoke to the Stripe DX team in Seattle at their summit where I shared learnings from working with Chrome DevTools teams and creating VisBug. View the slides.

Announcing conic.style

Grab n' go beautiful and unique conic-gradients.

What's New in 2020

Spoke online for London CSS, rapid fire CSS goodies like proposals, drafts, specs, tools & more. Check out the slides.

Watch on YouTube

Announcing transition.style

Grab n' go (dont even need the lib) clip-path animations

Made my first commit to a CSS Spec.

I join David Khourshid and Stephen Shaw on The Keyframers!

Watch on YouTube

Kayce and I answer some DevTools questions 🙂

Watch on YouTube

Corner at View Source Conf in Amsterdam

Chatted VisBug with Stefan Judis 🤘💀

Watch on YouTube

Released Slyd!

<slyds>
  <slyd>
    <h1>Slide 1</h1>
    <h2>subtitle</h2>
  </slyd>
  ...
</slyds>

Scroll snap powered, parallax featured, bi-directional slide framework.

Deceiving For Good

Spoke at Seattle Interactive Conf about using UX knowledge for good. See the slides.

Spoke at CSS Camp on how to slow the pace down in an app for anxiety free, frictionless UX.

Spoke at JS Camp on how to leverage PWA features to build realistic prototypes.

Both talks were in the beautiful city of Barcelona ❤️

MPJ(funfunfunction) and I chat CSS Grid.

Watch on YouTube

Rick Viscomi and I chat about the role of design systems in modern web development and how they can change the dynamics between designer and developer.

Watch on YouTube

VisBug was made open source! Plus an interactive tutorial website that looks like a bunch of artboards that need fixed.

Watch the announcement at Chrome Dev Summit 2018.

Released Kung Fury! A syntax highlight theme.

Released blingbling.js!

import $ from 'blingblingjs' 

Micro-library of shorthands for DOM selection, events, and attribute manipulation in a super minimal ES module.

Released roving-ux.js!

import { rovingIndex } from 'roving-ux'

rovingIndex({
  element: document.querySelector('#carousel')
})

User's shouldn't need to tab through each item in a list to see the next list

1. Providing keyboard list UX should be easy
2. Maintaining the last focused element should be easy
3. RTL Support

I made a cameo in the keynote at Chrome Dev Summit 2018! Had a blast.. moment of a life time 🔥

I wore this shirt from TeeJungle, it was a thing.

Released ragrid.css!

<section grid="columns" vertically-aligned="bottom">…</section>

Works like auto-layout:

1. Capable of 12-column layouts, packery, & masonry
2. Uses recognizable attributes instead of classes
3. Perfect for components
4. 528 bytes gzipped

An intrinsic first, minimal set of layout attributes.

Spoke at TEDx, Tacoma: Embrace UI.
✅ Slides built with Node and sockets for palm held slide swipeys.

tldr; Embrace UI because it's all around you, and when it's working right it's helping you be more human.

Spoke at HTML5 DevConf in San Francisco about the cross platform (Android, iOS, Windows Phone) hybrid web app Lively.

🎓 Taught at Art Institute of Seattle:

1. Intermediate Web Scripting
2. Advanced Web Scripting

Recorded my first set of tutorial videos. They were on #HTML5 for Intel's Developer Zone.

Gave my first front-end talk at an Adobe CreateNOW event in Seattle.