State of CSS

Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors, gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, :has() selector, and much more. With each browser working in unison to improve stability while also delivering fan favorite features, 2022 is shaping up to be a huge year for styling.
Resource:
State of CSS 2022 → goo.gle/38vtFy6
Speaker: Adam Argyle
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@Brunoenribeiro]

So happy Jessie Pinkman got into web dev 😝 Thanks Adam, this video was splendid! Super stoked to test all this new stuff

[@AdamArgyleInk]

lolol, you're not the first to say I look like that guy. I agree in this video especially I look like him. Cookin up UI hehe

[@ManojKumar-op7ot]

Haha. First thing that came up in my mind. The question is where is Walter White in that UI kitchen?

[@TheRyanSmee]

Thanks for the super thorough breakdown. I have been buzzing for fully supported container queries for the longest time - can’t wait!

[@montebont]

Thanks Adam! Finally perceptually consistent color spaces like CIE L*a*b. Thanks to everyone in the team and keep up the good works. But: it also means browsers should not assume sRGB but must be aware of and use "local" custom monitor profiles...Or at least Adobe RGB.

[@khashayarr]

Adam makes me a million times more excited about CSS! Such a gem!

[@AdamArgyleInk]

awww thanks!!

[@maxjf1]

This :has selector its surely a game changer. This will greatly impact how css is used, and avoid many backend / js processing

[@kissu_io]

Ma man, CSS experts will be quite rare in the upcoming years. :D

[@Stoney_Eagle]

The man, the myth, the legend behind the challenges 😋

[@spiritual5750]

can you share his work? i am just a noob trying to learn

[@megairrational]

Adam man, I love your excitement about CSS and web in general. In this video, in the CSS podcast, in UI Challenges, …. Many thanks 🙏

[@lukasluftlaufer1093]

Everyone gangster, until older safari versions need to be supported. 😎😵 Still... What a fantastic presentation!!! Really stoked about these new features

[@avneet12284]

Omg, this is phenomenal. I watched this at 0.75x speed whereas normally I am at 1.5x

[@DrewIsFail]

It's interesting that a lot of things that had to be managed by js, like the container functionality, are possible via pure css now

[@seth111yta1]

3:15 people died waiting for this but celebrate its here now

[@oskarzoch8946]

I've been doing this color stuff for some time now with Sass, but I've always missed this functionality in real time in browser. CSS is getting better and better every year, this is so exciting!

[@jugibur2117]

Wow, on the one hand I'm excited about so many new possibilities - on the other hand I'm afraid that at some point I won't be able to get it all into my head....

[@haroldpepete]

the last one is very powerful and it's really helpful, you don't have to search in children for someone who class is something, greattt

[@danko95bgd]

Amazing stuff! That css relative one is great, no need for css in js bullshits, just convert dumb hex value to hsl for example and up brightness easily.

[@AdamArgyleInk]

i'm soooo excited for the relative color syntax. so powerful and will save so much boilerplate

[@thecodingfoundation]

Maybe there should also be a focus on phasing out stuff that's inconsistent and/or old, to remove bloat and hopefully end up with a CSS language that doesn't require "moz-" and all sorts of stuff. Consistency between things like "font-size" and "text-color" would also be nice.

[@DaviAreias]

Cool, but how do we center a div?

[@wes337]

inert finally gives us a solid fix for the "scrolling the main page while a modal is open" problem!

[@AdamArgyleInk]

yaya!

[@youknowwho4994]

Not even bored a sec. Pure bliss to watch.

[@_polargaming]

Most excited about the @container query and the :has selector

[@dickson710]

it would be perfect if Adam shows his right hand at the end.

[@AdamArgyleInk]

lol

[@szynszyliszys]

I love how CIE LAB looks spot on like a simplified map of Poland ✨

[@nabiih]

@container is a game changer. So excited to try it!

[@reginaldooliveira0817]

Congratulations on the performance in this creativity, leveraging success with objectivity; Perfect design. Mutual success and happiness.

[@boxy3087]

what browser currently supported by [fullbleed-start]?

[@7sq]

What is the reason my chrome book is slower ? Why is my chrome book not suported past June ?

[@cg219]

Is there an idea of how long until these are stable ??

[@danielradosa]

yall just made styling a whole new job position.

[@DannyFJhonstonB]

Great update! Thank you!

[@TomHermans]

Thanks Adam. Great overview. It's indeed great to be working on the web.

[@Joaovtrc]

Color contrast is so amazing, can't wait to use it!

[@Ana-mn5io]

Thanks i love the way Adam and Una presents 💚💛💙❤

[@philkunz]

yeah, big blow though: @container queries can't see past slot borders, meaning its breaking with the logic of how css variables behave.

[@thecoderabbi]

Love your vibes Adam!

[@stea27]

So many awesome ideas. Now this is innovation.

[@AmenraRobinson]

Hey it's that one dude! The living CSS Encyclopedia.

[@talorlanczyk4933]

Finally we waited for this for so long!! Personally i waited for the has selector

[@adamleblanc5294]

It's November 23rd and I still don't have good subgrid or @container support 😢

[@TheHehhoi]

Really excited about the Colrv1 Fonts and the color-contrast(). One question that came to mind: Why are many of the features currently available only for the experimental Safari?

[@AdamArgyleInk]

IMO, Safari and iOS have extremely high quality screens that are capable of spectacular color, it's in their best interested to give the web full power to showcase these colors for users, so users continue to believe things look best on their devices.

[@craziestdavid15]

Which software could let me make video like this

[@javiasilis]

Holey Moley! So many small yet powerful features coming up.

[@JeyPeyy]

the color space stuff is so hard to grasp, I had to skip that part after a while of my mind getting blown. but it sounds really cool!

[@AllanLange]

color-contrast() and how it is able to select from a list of predefined colors or default to black or white in order to pass!! 🤯

[@PaulMcCannWebBuilder]

A wowie wow wow wow for this video. One of Google's smartest acquisitions was Adam Arglye.

[@fave1201]

Awesome presentation 👏

[@AquaDiskoteque]

Gosh! Nice upd) we waiting for this sooo long) :watermelon:

[@VarunGupta3009]

I'm bursting with excitement!

[@_whatistruth]

Waiting for :has and those new viewport height variants. 😀

[@abyssoftus]

Wonderful presentation.

[@msjahun]

What a time to be a web developer

[@nro337]

Thank you!

[@EliotNash]

Super excited for :has

[@elementiro]

All that stuff with color is cool (except gradients, because sRGB still look the best) but minor, I would say. But :has() seems revolutionary! I would say it's more important change than adding grid layout few years ago.

[@SalomDunyoIT]

that means, we can animate background gradients, right?

[@AdamArgyleInk]

that one is unlocked with @property, shipped only in Chrome so far

[@heathbruce9928]

Ok. So when are we going to be able to get font sizes to fit a given space that resize with the viewport?

[@AdamArgyleInk]

the new container units could help with that! they're like viewport units but for @containers 🤓

[@heathbruce9928]

@@AdamArgyleInk could?

[@AdamArgyleInk]

@@heathbruce9928 they will help you achieve a kind of the style you're after, but not exactly. so they could help with some scenarios but not all.

[@jacobstamm]

This dude’s energy is second to none.

[@lewis4493]

I find it obnoxious 😅

[@ulziibatn]

Woow. Super good job guys 👍

[@d-o-n-u-t]

I'm used to the sRGB gradients, so I think they actually kinda look better...

[@davidlipschitz4877]

Nice breakdown! Question - Why would you choose 'accent-color' over regular 'color' to highlight feature text?

[@diegoalvarez437]

contrast

[@bl_int]

great update

[@sabuein]

Thank you.

[@HansvandeBruggen]

This was surprisingly entertaining!

[@agsrf6479]

Please add masonry grid template rows for other browsers too, not only firefox!

[@ehudkirsh766]

1:39 - "Just let it load, let it load, whenever it wants to assign to one of your predefined layer nodes" - classy, I like it XD

[@AtariKafa]

color space feature made me happy.... 😊

[@puffin_000]

Reis sende mi web development yapıyorsun?

[@ptinosq]

16:09 inert.css? Doesn't look like CSS to me 😅

[@aarond9563]

I haven't used CSS in years, but as a designer this was pretty cool.

[@Draaack]

So damn cool, thanks Adam and Chrome devs.

[@3nt3_]

Also the other browser devs

[@fabianwohlfart7249]

It makes me dizzy that he does not use / hides his right hand under the table. i know its for the next and prev slide button, but can't you add just a red big button in the table and both of his hands on top of it.

[@CrystalMusicProductions]

This is neat

[@pawekoaczynski4505]

the accent color on native element is huge

[@BenjaminDenverstone]

I'm wondering when we might get CSS4. I'm learning Full Stack Web Development and CSS3 is interesting. It can be a little hard to understand (Grid, Flex-box, Block, Inline) but it's an important styles language nonetheless.

[@longingbydesign]

If there's ever going to be a CSS 4 it's going to be merely a marketing name, not more. CSS 3 is a living standard, there is no need to ever increase the version number.

[@delulu6969]

No, there's no CSS Level 4. You can read the W3C spec on CSS Snapshot. What we're having are modules, ie features, which will have their own levels developed forward with time. There're already level 4 and 5 modules. For example, the new extended color space is in CSS Color Module Level 4. In CSS Color Module Level 5, they're speccing out mainly the features to modify colors relatively like how we have been doing with Sass but it will be native in the future if committees and every browser get to an agreement.

[@joshuaraison]

It's Super Cool.....

[@armandmugabo1170]

awesome

[@edgarfrias9460]

Awesome work! Thanks to all devs involved to push boundaries for css! Css roks! :D

[@user-dk1ru3yx9i]

about new units amazing

[@Lucsy3012]

It is indeed a great time to be CSS nerd 🤓

[@lunaumbra5179]

rad demo bro

thanks adam!! css is the way!

[@144km]

let it load~ let it load~🎵

[@leodaza]

god damn, these are nice tricks!

[@__________HolySpirit__________]

the letter h does not form a "ch" sound. nor is the letter h called "aitch" it is a powerful breathy vowel diffuse

[@mtsferreirasilva]

CSS is getting tricky with so many variations and options to choose from. Powerful, but the learning curve is increasing. Not complaining, just mentioning.

[@ehsan_kia]

is your right arm okay? :(

[@AdamArgyleInk]

holding the clicker lol

[@ozqurozalp]

Adam abim seviliyorsun 😍

[@blessdarah1256]

I'm enjoying how the CSS is becoming more powerful by the day.

[@dmitriyobidin6049]

Tbh, there is to much emphasis on colors... We still can't reliably layout our pages to be adaptive and responsive on all devices, but now we will fight with designers and all their "creative" ideas. It would be amazing to have more layout tools like @container in development and not most of those colors things... 16:06 So, instead of adding a modal attribute that would work only at the component level and would do the same thing we now have to manually insert inert attribute into some parent container when we want to show a modal dialog? Why?!

[@adaai2384]

`accent-color` is really cool. You have no excuse not to use native controls now.

[@JeyPeyy]

damm, can't believe we had to wait this long for subgrids. Good job Microsoft

[@snapstromegon]

Please, PLEASE make CSS Nesting a thing...

[@AdamArgyleInk]

workin on it!!

[@danielsoller6893]

Rad viedeo

[@MGNS]

Subgrid 😯

[@bdrafik284vlogYoutube]

Good like

[@dripcaraybbx]

okLAB out here flexin on em

[@MrgnUTube]

We want container queries!!!!

[@meqativ]

nice

[@agent-33]

Lots of new cool stuffs to make CSS easier. I hope these will lessen my hate for CSS.

[@KangJangkrik]

Yo Adam Argyle, brother of Felix Argyle 🤟

[@TNothingFree]

すごいね！