CSS and design systems people - BlogFlock

Kandidaatstelling voor AB - Hidde's blog

2025-05-01T00:00:00.000Z

Mijn naam is Hidde de Vries, specialist standaarden bij Logius (deel van de Rijksoverheid). Hierbij vraag ik om je stem voor mijn verkiezing in het Advisory Board van het W3C.

Mijn enthousiasme voor het web gaat zo'n 20 jaar terug, toen ik op de middelbare school mijn eerste website maakte. Wat een mooi platform! Sinds die tijd werkte ik onder andere als webontwikkelaar en specialist digitale toegankelijkheid, waarbij ik vaak bruggen bouwde tussen beide beroepsgroepen.

Bij het W3C was ik al eens onderdeel van het Team (bij WAI, 2019-2022), waar ik onder andere aan informatie over toegankelijkheid werkte en aan de WCAG en ATAG Report Tools. Momenteel ben ik actief in de Open UI Community Group, verschillende toegankelijkheids-gerelateerde Working Groups en de Web Sustainability Interest Group.

Als ik word verkozen wil ik:

interactie met het AB verbeteren: door meer contact te zoeken met Members en de bredere community, om te zorgen dat hun inbreng terugkomt in ons advies, en door te zoeken naar consensus rondom bestuurlijke vraagstukken tussen Board, TAG, Members en verschillende werkgroepen.
het W3C aantrekkelijker maken: mensen komen nu al naar W3C om aan webstandaarden te werken. Maar we kunnen een grotere groep bereiken als we onboarding verbeteren. Ik wil uitzoeken wat mensen nu tegenhoudt om te beginnen en met die informatie verbeterslagen maken.
een nieuw geluid inbrengen: ik ben niet echt nieuw in de W3C community, maar ik ben vrij nieuw in het bestuurlijke deel. Ik hoop dat die verse blik waardevol gaat zijn voor een AB dat op zoek is naar een nieuwe identiteit en missie.
de gebruiker centraal stellen: bijna te voor de hand liggend om te vermelden, gebruikers staan immers al centraal in de W3C Vision, maar in de praktijk kan het gebeuren dat zaken als toegankelijkheid, internationalisatie en privacy het onderspit delven. Er is kennis van zowel techniek als gebruikers nodig, en ik wil die van mij inzetten om processen te verbeteren.

Wat ik wil bijdragen, in willekeurige volgorde:

specialisme in webtoegankelijkheid (langere tijd) en duurzaamheid (sinds kort). Ik leer snel en duik graag in nieuwe dingen.
gewerkt in verschillende sectoren die het web nodig hebben en gebruiken: overheid, een browsermaker en de maker van een authoring tool (CMS).
veel ervaring met communiceren over standaarden richting technische communities, met name de web developer community. Ook meerdere congressen georganiseerd.
eerdere ervaring bij W3C, als Invited Expert, Member en Team.
recente ervaring met en diepe technische kennis van web development.
achtergrond in filosofie en (kort) kunstmatige intelligentie, ik neem dus het perspectief van de geesteswetenschappen mee, niet alleen een technische blik. Ik kan daardoor ook goed kwesties van meerdere kanten bekijken.

Voor vragen: stuur me gerust een berichtje op W3C Slack of email me op hidde@hiddedevries.nl.

Originally posted as Kandidaatstelling voor AB on Hidde's blog.

Reply via email

Running for the AB - Hidde's blog

2025-05-01T00:00:00.000Z

My name is Hidde de Vries, accessibility standards specialist at Logius (part of the Dutch government). I would appreciate your support of my running for the W3C's Advisory Board.

I fell in love with the web ever since I built my first website in high school, almost 20 years ago. What a cool platform to build for! Since then, I worked professionally as a web developer and accessibility specialist, often building bridges between these fields.

At the W3C, I've been a member of the Team (at WAI, 2019-2022), where I worked on accessibility guidance, authoring tool accesibility, the WCAG Report Tool and the ATAG Report Tool. I'm currently a participant in the Open UI Community Group, various accessibility-related Working Groups and the Web Sustainability Interest Group.

If elected, I want to:

help improve what engagement with the AB looks like, by doing more outreach to Members and the wider community, to ensure their input is represented in our advice, and by working to find consensus on governance issues between Board, TAG, Members and groups.
make W3C more attractive; people go to the W3C for web standardisation today, but we can reach more potential if we improve onboarding. I want to find out what stops people from getting started or engaging with our work and use that to make improvements.
bring fresh perspective on the future; though I can't say I'm new to the W3C community, I am new to most governance aspects of it. My hope is this fresh perspective can be an asset to an AB that is orienting towards a new identity and mission.
advocate for users, the primary constituents of the web. Almost too obvious to call out, as users are central to the W3C vision, and who else would we advocate for? In practice, though, user needs around accessibility, internationalisation and privacy are easily overlooked. They require matching up (deep) technical specifics with user needs. I want to use my experience with both to help improve the process.

What I'd like to bring to the AB, in no particular order:

specialism in web accessibility (for long) and web sustainability (as of recently). Also a fast learner happy to dive into things I'm not specialised in.
worked in a broad range of sectors that use and need the web: public sector, including government, a browser vendor and an authoring tool vendor.
proven record of communicating about standards development to tech communities, the web developer community in particular (see my blog and talks). Also co-organised developer conferences.
previous experience at W3C, as an Invited Expert, Member and Team.
hands-on experience and deep technical knowledge of web development
background in Philosophy and (briefly) AI, meaning I could bring a humanities perspective and not just a technological view, and that I am trained to view issues from many angles.

Any questions: feel free to reach out via W3C Slack or email me on hidde@hiddedevries.nl.

Originally posted as Running for the AB on Hidde's blog.

Reply via email

WebDev Challenge - S2E2 - Adam Argyle

2025-04-29T15:45:22.000Z

What could you create if you had 30 minutes to plan and 4 hours to build? Me, Lane Wagner, Sarah Shook, Nikki Meyers, Shashi Lo, and Nick Taylor took on the Web Dev Challenge to find out.

They picked the Napoleon Dynamite thumbnail for Lane and I 🤣

The Challenge #

We lucked out and got a rad one.

Single player, multiplayer, cooperative, competitive, or something totally different — your challenge is to come up with something fun that is played across at least two devices.

Temporal’s workflow tools will allow you to manage sending information between devices dependably.

Lane and I def leaned into the "fun" portion of the challenge.

We chose to try a game that uses the camera video stream API to feed faces to Media Pipe (locally running a face detection machine learning model) to flap a bird's wings in a flappybird-like game.

A Temporal workflow will capture the game round and let us see all the player moves.

At least that's what we planned on…

The Teams #

These were the lovely folks I got to spend 4 hours with:

Sarah Shook && Nikki Meyers
Shashi Lo && Nick Taylor
Lane Wagner && I

The Tools #

Temporal was pretty cool, but as you'll see in the video… we um, didn't figure that out til a bit later.

I did get the pleasure to use a BenQ RD280U tho.

The 4k 3:2 matte UHD display was really nice. They say it's made for coding, and I see what they mean.

Plus, HDR content is awesome, and I could capture high quality UI captures and place lots of windows around.

I got to take one home and try it out. It's light years ahead of the one I had before.

The arm is super strong. There's tons of charging ports. It's a really great product.

3D Bird #

Here's that 3D bird Codepen that's featured in the episode.

See the Pen by Adam Argyle (@argyleink) on CodePen.

The Results #

There were no winners or losers!

We all had a blast; I'm lookin forward to seein the YouTube comments, maybe a 3D bird joke or two.

Zen Garden Leave - Adam Argyle

2025-04-23T17:21:16.000Z

CSS Zen Garden Leave…

Taking time, breathing slow, clearing my head, tending to a brutalist garden on Codepen.

Seems appropriate.

Carousels On Shoptalk - Adam Argyle

2025-04-07T14:21:51.000Z

CSS ::scroll-button(), ::scroll-marker, Carousel Configurator, and Carousel Gallery with Chris and Dave on ShopTalk Show.

Watch · Listen · Read

CSS Can Do That At Smashing Meets - Adam Argyle

2025-04-05T18:12:17.000Z

Recording is live!

Watch CSS Can We Do That on YouTube via Smashing Meets CSS online event.

CSS Mixins are ready for experimentation! - Adam Argyle

2025-03-26T14:43:21.000Z

CSS Mixins and Functions are both ready for you to hack on 🤯. I think of functions as returning a value and mixins as a way to apply a chunk of styles.

Bramus has a great intro on @function, don't miss it. But this post is about @mixin, don't miss the explainer, it is packed with valuable information:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

and using it:

.box {
  @apply --box;
}

Getting started #

For CSS Mixins as of writing this, you'll need Canary and you'll need to launch it from the command line with this flag CSSMixins:

open -a "Google Chrome Canary" --args --enable-features=CSSMixins

Go make stuff! #

You have all the latest information now:

how to enable Canary to understand mixins
what the basic syntax is like
links to more advanced examples and documentation

Customize A Select - Adam Argyle

2025-03-24T21:22:23.000Z

Get ready! The <select> element can now be customized with CSS, check out the post on the Chrome Blog!

Finally render custom HTML inside an <option>
Works without JS
Easy to progressively enhance

CSS Carousel In Chrome 135 - Adam Argyle

2025-03-20T16:26:21.000Z

We just announced how CSS can make carousels on the Chrome Blog!

Incredible accessibility
Works without JS
Builds upon regular scrollers

CSS Carousel Configurator:
I made this so you can directly see the relationship of a feature you want and the related CSS.

CSS Carousel Gallery:
Showcases meaningful use cases and exemplifies how to orchestrate many capabilities together.

Rainbow Shadow Button - Adam Argyle

2025-03-19T15:42:28.000Z

Add a rainbow shadow effect with hue longer interpolation and a little bit of blur().

Try it in this Codepen

Google Io 2025 - Adam Argyle

2025-03-17T00:28:37.000Z

Gettin' rrready for Google IO!

Smashing Meets CSS 2025 - Adam Argyle

2025-03-16T20:09:46.000Z

Join me, Julia, Miriam and Geoff April 1st for the virtual event Smashing Meets CSS.

Humiliation - Robin Rendle

2025-03-15T16:09:40.000Z

Here’s Johanna Hedva:

...one of the reasons I’m so unabashedly a NIN fan, and have been for so long, is because they’ve never humiliated me as they’ve gone through the years, like nearly every other mainstream band I loved growing up in the 1990s. I can declare my love for them without having to suffer the scorn that so many of those bands now deserve for selling out in various, pathetic ways. Indeed, it’s recently felt as though all these years of cult devotion are being validated in a populist way, as NIN re-emerged in the late 2010s as a singular bastion of uncompromising artistic vision, the last men standing.

(Holy shit, what a great article this is!)

But yes, every band I loved as a kid eventually sold me out, too. They disappointed me by turning into right wing weirdos or being horrendous and violent or having terribly useless opinions about the world, but—but!—Nine Inch Nails never did. Reznor and Ross never compromised themselves, never embarrassed me in the way that a drunk parent might.

Let the stagger experiments begin - Adam Argyle

2025-03-11T00:08:03.000Z

li { --stagger: calc((sibling-index() - 1) * .1s); transition: opacity 1s var(--ease-3) var(--stagger), translate 1s var(--ease-spring-3) var(--stagger); } " height="758" width="1272" />

2019, I proposed an idea to help remove a ton of boilerplate code from CSS and HTML while also making stagger effects easier on authors. The proposal ended up being sibling-index() and sibling-count().

Fun news! You can try it in Canary today and I've got this little example to help kick off some ideas for you!

Try on Codepen

Staggering animation #

Instead of inlining a CSS variable for each element:

<div class="parent" style="--sibling-count: 5">
  <div style="--sibling-index: 1"></div>
  <div style="--sibling-index: 2"></div>
  <div style="--sibling-index: 3"></div>
  <div style="--sibling-index: 4"></div>
  <div style="--sibling-index: 5"></div>
</div>

You can use sibling-index() to retrieve it just in time instead of doing the work in the template or JS.

Clean that HTML up to make room for sibling-index() by removing all the inline styles:

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

and then drop in this new magic bomb:

.parent > * {
  transition: opacity 0.3s ease;
  transition-delay: calc(sibling-index() * 100ms);
}

and now you have a 100ms staggered crossfade transition effect 🤓

Staggering color #

There's nothing stopping you from using sibling-index() to stagger a color change, or anything else!

Here the hue increments by 50 each element.

.parent > * {
  --hue: calc(sibling-index() * 50);
  color: oklch(70% 70% var(--hue));
}

You could easily add a min() or clamp() or trig functions to help you too.

Time to experiment #

Share with me what you build! Fork this Codepen

Abandon all keyboards - Robin Rendle

2025-03-11T00:02:06.000Z

It’s obnoxiously beautiful right now.

It’s a cracking, 10/10 stunner of a California sunset and it’s pouring in through the windows of this empty cafe as I click-clack on my infinite click-clack machine. It’s as if the whole world has become a kaleidoscope of West Coast reds and oranges just for me. But, alas, I don’t feel much of anything. I am, in fact, this: a total and absolute nothing inside. Familiar feelings of course, nothing scary at all, it’s just plain ol’ burnout. There was a rush of work over a few months—go, go, go! build, build, build!—and then: something clicked and I was done. No more gas in the tank. No vacancies at the inn. All spoons gone.

The problem with these feelings is that they come out of nowhere and I ignore the symptoms until they bleed into other parts of my life. But if I can’t care for writing or reading or code or design or anything fun and exciting then what even am I? Enthusiasm is my middle name! I was born to point at things excitedly! And yet in the evenings now I’ll watch a great movie or a TV show or play a game where ten thousand people poured years of their lives into it and — nothing.

It all just kinda washes over me.

When this sort of thing happens I know what I need: abandon all keyboards! Discard all screens! Throw myself into a stack of books and hurl my charmless corpse across a foreign city so that my empathy and hope refills itself. But right now it’s tough to be optimistic about that because today nothing matters. Work? Eh. Friends? Bleurgh. Going outside? Taking care of myself? Planning things? Bleurgh.

Bleurgh to all things!

In moments like this there’s a shift in me towards mean and unpleasant thoughts, a kind of cynicism that’s impossible to shake. I see the worst in people, almost as if I’m hoping for the worst things to happen. But that cruelty tends to become laser-focused on me. Like the other day, when I woke up and my very first thought to start the day was: “christ, I’m such a bad designer.”

Yikes! What the hell, brain! Also: please pick something more cool and interesting to be sad about at the very least! I get that deep down you crave being interesting and sad but this is the least interesting way to sad! Try harder!

Anyway, I’ve booked two weeks off work. I’ll plan something, go somewhere, write something. I’ll figure it out.

But, until then: bleurgh.

Views on views - Hidde's blog

2025-02-28T16:13:12.240Z

If WCAG 3 would adopt the word “view” instead of “web page”, the standard would be more useful in non-web contexts like native apps, documents and XR. Because many wish to understand how accessible such environments are, we should consider adopting a unit that isn’t “web page”. To me, “view” is the strongest contender.

Context: as part of the Accessibility Guidelines Working Group (AGWG) work on WCAG 3, I'm leading a subgroup on (re)defining “views” for WCAG 3. This group builds further on a discussion at TPAC 2024, which builds on discussions over many years about WCAG and WCAG2ICT. Opinions in this post do not reflect those of the subgroup, or of my clients.

I would love any feedback in wcag3/discussions/286.

The web page

In WCAG, and most WCAG-related documents, the notion of a “web page” does quite a lot of work: it's in the name of some success criteria and it's WCAG 2's “unit of conformance”, i.e. the thing people can claim conformance about.

A web page, in WCAG 2, is unambiguously scoped to something to obtain from a single URI:

a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent

It's so unambiguous that we'd struggle to come up with examples where one person would draw the boundary between two web pages differently than the next. Well done, team WCAG!

Inevitably, though, a unit of conformance that can apply more broadly will be more ambiguous.

In other places

No less than 16 success criteria in WCAG 2.2 mention web pages: 1.4.2 Audio control, 2.1.2 No keyboard trap, 2.3.1 Three flashes or below treshold, 2.3.2 Three flashes, 2.4.1 Bypass blocks, 2.4.2 Page titled, 2.4.3 Focus order, 2.4.5 Multiple ways, 2.4.8 Location, 2.5.6 Concurrent input mechanisms, 3.1.1 Language of page, 3.2.3 Consistent navigation, 3.2.4 Consistent identification, 3.2.6 Consistent help, 3.3.4 Error prevention (legal, financial data) and 3.3.6 Error prevention (all).

It's also used in documents like WCAG-EM, the evaluation method.

Conformance

“Web page” is WCAG 2's “unit of conformance”, meaning that if you want to say something “conforms” to WCAG, that something should be a web page, and not something else, like a date picker component that you've built. You can use WCAG to reason about the accessibility of that date picker component, but a claim that it conforms to WCAG would not make sense.

Note, the phrase “unit of conformance” isn't actually mentioned or defined in WCAG itself, but WCAG2ICT explains it clearly:

(…) the unit of conformance in WCAG 2 is a single web page (…)

(From Interpretation of Web Terminology in a Non-web Context)

Conformance claims are also specifically about full web pages, not parts of them. They can be about more than a single page, though:

a conformance claim may be made to cover one page, a series of pages, or multiple related web pages.

(From: WCAG 2.2, section 5.3: conformance claims)

That's common too: in fact, accessibility conformance reports usually cover a whole website.

Views

“Views” could be a new unit to use, meaning web pages on websites and other things in non-web contexts. View are not defined in WCAG 2 (they are in UAAG and in ATAG, interestingly, and a 1999 doc defines “page view”). The latest WCAG 3 draft also has a definition for view, we'll get to that later.

Views as a unit of conformance for WCAG have been considered before, most nobably in the WCAG2ICT groups, see for instance the discussion in reply to the concept of User Interface Context. In all those years, the group could not think of a definition that wouldn’t introduce problems of its own.

Has anything really changed since then? Well, one thing that is different now, is that we have more variety in products that need accessibility conformance evaluated than ever. There seems to be a growing desire to bring our units of conformance up to date with that reality. It would make conformance assessments more practical to their writers and readers and simplify monitoring by governments.

I feel the balance between theoretical purity and practical need has shifted.

Requirements for a new definition

When we set off thinking about views, we discussed requirements, including that we want “views” to:

Not confuse people who have an existing understanding of the word ‘view’, which is a word used by many, including developers (like views in React Native, views in Django, views that CSS view transitions transition and views in MySQL)
Not reduce accessibility requirements: a new definition shouldn't cause things to meet WCAG that don't today.
‘Work’ for a variety of different contexts, like web pages, (native) applications, VR/AR and documents (I know, a long wishlist)
Useful for people who do conformance assessments (accessibility specialists/consultants), or use them in some way (designers, developers, monitoring agencies, judges in some areas).

Steve Faulkner's suggestion

As mentioned, there is an existing draft definition in the latest WCAG 3 draft. I agree with Steve Faulker that it is wooly.

What the exact definition needs to be is yet to be determined, but after the initial (less-wooly) definition we presented to the Working Group, Steve proposed to base the definition around “change of context”.

Steve's proposed definition:

Conformance scope that includes all content visually and programmatically available without a change of context

In addition, he suggests updating “change of context” to be:

Major change in the content of the view that, if made without user awareness, can disorient users who are not able to view the entire view simultaneously

Changes in context include changes of:

user agent;

viewport;

content that changes the meaning of the view.

A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, opening a non-modal dialog, or a tab control do not necessarily change the context.

Example: Opening a new window, opening a modal dialog, going to a new view (including anything that would look to a user as if they had moved to a new view) or significantly re-arranging the content of a view are examples of changes of context.

I like where that is going.

Subviews?

Sometimes it makes sense to talk about specific parts of a UI or view, like a modal overlay, drawer or full screen search functionality. We looked at a number of examples within the group and found we were internally conflicted about some cases, there was a lot of gray area.

For this reason, I think we should in fact not define “subview”, contrary to what we intitially thought. I'd love to know what others think, please add your thoughts to the subview part of the discussion.

Possible issues

There are some disadvantages to “view”, and we got some excellent feedback from the Working Group in our initial discussion. You can see all in the minutes of 18 February, but I'll highlight two here.

More subjectivity

Among the feedback we got from the Accessibility Guidelines Working Group, was Gregg Vanderheiden's feedback that I'll summarise as: “web page“ is objective and “view” is not.

I think he's technically correct that we lose some objectivity. But I don't think that's as much of a change to the status quo. Accessibility practioners define scopes for tests today already, and, if we're honest, subjectivity already exists in accessibility conformance reports. Bad actors can act bad today, that's not a reason to avoid making things more usable for all actors. Especially if a new term would help with clarity about accessibility or inaccessibility of products.

Besides, the cat is out of the bag already: companies and governments need other environments than web apps assessed, and whether they do that with an unambiguous but inapplicable definition for “web page” or with a broader definition for “view” is unlikely to make the difference.

In app development

In native app development, a world I’ll admit I’m not very familiar with, the word “view” seems to refer not to a whole screen or page, but to parts of it, as I understand similar to what on websites, you’d call components. I learned this when I presented some of these ideas in the Mobile Accessibility Task Force (MATF), where “page” was offered as an alternative to “web page” that could work as a unit of conformance for (native) apps.

This may get into “confusing people with existing definitions of view” territory, I am not sure what's the best way out, I worry “page” could introduce similar problems in terms of future proofing. A potential solution, from Jan Jaap de Groot, could be that a different word than view is used in a document like WCAG2Mobile, which then points at WCAG's “view” for the definition. Others I talked to suggested something similar, we could have different units of conformance for different contexts, that all point to one broader unit.

SC meaning

One issue that we didn't get to much, but that is essential: what about all the SCs that mention web pages today? The published note WCAG2ICT covers mappings from “non-web software and documents” to WCAG 2 success criteria and EN 301 549 (clause 10 and 11) harmonises with that. Mapping is not be in the scope for the task of defining “views” per se, but it deserves our attention to consider what requirements would look like if we used a word like view.

Feedback wanted

In this post, I've tried to summarise some of the discussion around “view“ it happened over the last few months. It's a lot of information, with one goal: please share your thoughts.

It doens't have to be “views”, if could be “purple zebras”, as Alastair suggested, but modernising what WCAG's unit(s) of conformance are will be more helpful to users than avoiding it.

I'd love more feedback (by email or in the GitHub discussion) on what views can be and what the potential risks are, especially from accessibility practitioners (including evaluators), folks from monitoring agencies and designers and developers who want to meet WCAG.

Originally posted as Views on views on Hidde's blog.

Reply via email

View Transitions 3d Perspective - Adam Argyle

2025-02-27T23:06:40.703Z

To give View Transitions a perspective, either:

::view-transition-image-pair(--foo) {
  perspective: 500px;
}
/* or */
::view-transition-new(--foo) {
  transform: perspective(500px);
}

Hope this finds someone well.

CSS Kaleidoscopes - Adam Argyle

2025-02-23T00:21:40.428Z

Gradients are so fun, so complex, so powerful. I just can't get enough of messing with them.

Todays post was me wanting to create a kaleidoscope type effect using linear() easing with varied durations for hopefully infinite combinations.

Here's a spiffy preview of some of the combinations:

The demo effects are thanks to linear() and @property.

Each of the demo's has a ton of fun levers to pull in the CSS. Def try changing variables, durations, easings, and more.

It's super fun.

Linear gradient kaleidoscope #

See the Pen Hot text-emphasis by Adam Argyle (@argyleink) on CodePen.

Radial gradient kaleidoscope #

See the Pen Hot text-emphasis by Adam Argyle (@argyleink) on CodePen.

Conic gradient kaleidoscope #

[YOUR FORK HERE]

Send me your Codepen fork and I'll add it here!

An Emoji Naming Convention - Adam Argyle

2025-02-20T18:16:39.738Z

There are many new places in CSS for naming. You can now quickly find yourself using the same name, which is unique, but it's unique in a context… and that's really hard to remember.

Here's a simple example:

@keyframes foo {}
@property --foo {}

.element {
  --foo: bar;
  animation: foo linear both;
  view-timeline-name: --foo;
  view-transition-name: foo;
  anchor-name: --foo;
  container-name: foo;
}

Notice too how there's dashed names and undashed… some CSS features require the dashed names while others do not. Yay.

Good news is that CSS can keep track of it all. Bad news, I'm strugglin.

Not an answer, but an answer? #

I'm not actually trying to tackle this problem with this suggestion, but… maybe I am? LOL

We could, use emoji to help delineate the intended use.

Here, keyframes, typed custom properties and font-palette-values are uniquely identified with an emoji prefix.

@keyframes 🔑-example {}
@property --﹫-example {}
@font-palette-values --🔡-example {}

This then makes it clear when you got to use them:

.element {
  --﹫-example: bar;
  animation: 🔑-example linear both;
}

So building on this, I went a little further… and have assigned emoji's for anything you can custom name:

@keyframes 🔑-example {}
@property --﹫-example {}
@font-palette-values --🔡-example {}

:root {
  --﹫-example-typed: baz;
  --🔒-example-private: foo;
  --regular-var: bar;
}

::view-transition-group(.🏘️-example) {}
::view-transition-new(🏞️-example) {}

@layer 🥞-example {
  .🤓-example-class {
    container-name: 📦-example;
    view-transition-name: 🏞️-example;
    view-transition-class: 🏘️-example;
    view-timeline-name: --📽️-example;
    anchor-name: --⚓-example;
    font-palette: --🔡-example;
    animation: 🔑-example 1s;

    > p {
      @container 📦-example (inline-size < 20ch) {
        font-size: var(--﹫-example);
      }
    }
  }
}

@layer 🥞-example-utilities {
  .🔧-utility-class,  
  .🧹-reset-class,  
  .🔍-debug-class {
    …
  }
  
  .🗣️-sr-only {}
  
  .🍱-grid {}
}

Does this work?!

Yep, perfectly valid CSS. Try it on Codepen.

Did I miss an opportunity to pick an emoji prefix?

Probably! Comment on Bluesky or Mastodon and I'll add them!

As a final mention here, I think it's a good idea to -- all your custom names, just to make it really clear they aren't internal CSS keywords.

Anchoreum - Adam Argyle

2025-02-19T20:41:57.587Z

Need a rad way to learn CSS anchor?

Look no further than anchoreum.com!