The new responsive design

Join us as we discuss the latest updates on UI styling, DevTools, and the evolution of responsive design.
Resources:
The new responsive: Web design in a component-driven world → goo.gle/WebDev...
Learn responsive design → goo.gle/WebDev...
Learn CSS → goo.gle/WebDev...
CSS accent-color → goo.gle/WebDev...
CSS size-adjust for @font-face → goo.gle/WebDev...
Building a color scheme → goo.gle/WebDev...
Watch more:
Watch all Chrome Developer Summit videos → goo.gle/cds21-...
Subscribe to Google Chrome Developers → goo.gle/Chrome...
#ChromeDevSummit

[@MaxCoplan]

Is something wrong with KZbin or is Una at 15fps?

[@ramanmono]

Lol, I noticed it too, I checked twice if for some reason I was dropping frames.

[@Codedgar]

Thanks for telling I thought it was my computer!!

[@DmitryPolovka]

AI confirmed

[@timstrawbridge]

She's at 24fps

[@adlirifqi]

i think it was intentional, following the whiteboard effect

[@taskforce_kerim]

Wow, whenever I watch these. I get so excited to do some programming and try out the new features! Thank you Chrome Dev team!

[@josh-rz3uq]

Web dev isn't programming, but whatever.

[@psychotendency9790]

​@@josh-rz3uq It isn't? Clearly, it's not as complicated like embedded systems development or cryptography development but it's definitely still 'programming'.

[@josh-rz3uq]

@@psychotendency9790 No it's not.

[@psychotendency9790]

@@josh-rz3uq Then what is it?

[@GlennDavey]

This is my job, so yeah, these videos are cool, but not exciting. HOWEVER, I do feel the exact same way you describe when I watch new open source 3D game engine videos, like "Wow they're so good and easy now I'm literally limited by my own imagination and motivation." Then I download and install those engines and sadly discover that that is in fact true.

[@qwertt14]

These new features are crazy, they completely subvert the regular outwards nesting css rendering. and it's awesome

[@storygenix3099]

The CSS nesting was the thing I was hoping in the new feature. Now it is available, it's indeed a very useful feature.

[@GlennDavey]

Yeah but all the micro-transactions! and I heard there was a ton of crunch bro.. this from a AAA studio it's bs

[@GlennDavey]

Dammit wrong video again

[@IndusaraJ]

I'm a student who learning coding for freelancing. Those learning references are massive useful & updates are awesome !!! Thank u Google.

[@fritzweatshirt]

Meanwhile Safari can't handle height: 100% inside an aspect-ratio parent.

[@arturmuellerromanov4438]

It doesn't even support aspect-ratio, no need to mention height 😉

[@BehruzbekOtayev]

this is why safari is used to download Chrome or Firefox

[@fritzweatshirt]

​@@arturmuellerromanov4438 Safari is the new internet explorer

[@rick1901]

pretty sure safari still doesn't support the scroll-behaviour property to get smooth scrolling when clicking an anchor tag

[@ItsEricPhung]

Shadow, blur, you name it. People with money don't care, as long as they know Apple is the most premium product out there, with a stupid price tag to features ratio.

[@Itay38]

Container queries are about to change CSS forever. Can't wait for it to be fully supported 👏

[@phil-l]

Hopefully available in Safari in 2050 /s

[@mrnickb]

I'm not a developer, so I'm trying to wrap my head around this. Does a container query basically allow you to determine the behaviour of child elements based on the parent elements size? Where as before it was all based on viewport size?

@@mrnickb Exactly.

[@gorki90]

Great feature, but without a graceful fallback.

[@magnuskallas]

@@mrnickb Yes. Though it's isn't THAT new concept for JQuery has been used in container size detection for some time. It's not that hard to add extension class based on size.

[@nielskersic328]

Some really exciting stuff! Also, I really appreciate Una. She's so good at explaining things in an understandable way!

[@GlennDavey]

Right?! And I know this is cliché... but I think I actually prefer low-frame-rate early-video-Una, even more than her later work, which felt derivative. Unpopular opinion I know!

[@pedroaugusto656]

OH I damn! Native CSS nesting. Is this my christmas present ? Uinstalling sass right now!

[@aledmb]

so you use sass only for nesting? cool.

[@foxoninetails_]

@@aledmb Let's be honest here, Sass and other preprocessors are becoming less and less needed as CSS evolves. Variables are already natively available in all modern browsers (and more powerful too, since they're runtime not compile-time), nesting is a pure convenience feature with no added functionality which is also getting closer and closer to "as good as" natively available thanks to things like :is() and the upcoming layers spec, partials and modules are dubiously useful at best and can be pretty trivially replaced with imports, most if not everything operators offer can be achieved with calc(), and inheritance is relatively trivial to achieve via patterned use of hook classes. The only major feature Sass offers that I'd still consider especially useful is mixins, which can also be achieved with hook classes with slightly more effort. For a larger team, I get why you'd use it. There are a lot of ways something like Sass can help organize your CSS when dealing with multiple authors. But for 1-3 authors working on a project? Modern, well-supported native CSS features provide 90%+ of the functionality, and a couple well-placed section marker comments can do the rest.

[@crooker2]

Right??!

[@sjn_]

So you are ditching SASS for relatively new feature that is not going to be supported by older browsers? Lol It's a good thing we are getting such features in native CSS but I'd still stick to SASS for browser compatibility's sake.

[@foxoninetails_]

@@sjn_ Browser compatibility is a non-concern for 95% of the web right now. Anything older than evergreen isn't worth supporting by market share, unless you know you're catering to a specific audience. All the stuff I'm talking about is either notably upcoming, or already available in every evergreen browser.

[@swampflux]

Was already very hype about all these features! Still hype about all these features. :) Thanks W3C! Thanks Chrome team! Thanks, Una!

[@GlennDavey]

I'm secretly very excited about these updates, but I'm trying to keep a lid on it because being a nerd got me bullied... but Fk yeah this is all going to make my job so much easier and yes thank you Una!

[@Ana-mn5io]

Thank so much for updating the Learn CSS course

[@fleeb]

Hrm, while nice, until widely adopted it is yet another difference between browsers for which one must account.

[@brianruff3066]

This change works really nicely with SPA applications as well.

[@PedroSantos-tp3lw]

Will those new css features take 10 years to release or can we be truly hyped?

[@fluente]

That’s some awesome work they’re putting out. Really pushing the web forward. I have a question, though. Does anyone ever want to change a css value in dev tools by sliding left or right? Why a slider in devtools css values? Why?

[@mr.sandman8644]

This! I can't stand the new slider on prop values. I've yet to come across a situation where it has been beneficial.

[@cthuloox476]

Scroll timeline! That's so awesome!

[@lanceevans1689]

A feature that Adobe Muse had since around 2016. Just saying.

[@BoodskiBro]

Parent width media queries! I've wanted this for ages!!

[@GlennDavey]

"New Responsive" sounds like a movement in the 80's with weird hair-styles and the best music ever made. I dig it.

[@ThomasGodart]

Great video, thank you for sharing and for all the efforts. A small glitch though with the frame rate in the first part of the video, gone soon after 4:30

[@GlennDavey]

I know this is cliché, but I prefer low-frame-rate early-Una over her later work, which I felt was somewhat derivative. (But they gave Ringo a stereo solo on the last track so who can complain?)

[@RafikBianconero]

Parent's width access for childrens, think this is the last thing to be done to get easy going fast responsive design... Now we can focus on better things, more time for impactful real problems : accessibility, performance, power consumption reduction...

[@christianferrario]

Is power consumption of Google Chrome a real problem?

[@RafikBianconero]

@@christianferrario Not especially Chrome but all about code optimisation... We need more time for more iterations, thinking about complexity and refactoring rather loosing time on twiking to get up responsivity...

[@bakedbeings]

The thing that drove me out of web dev years ago was the amount of time spent on browser quirks vs architecting/iterating.

[@viterzbayraku]

But the Source panel still without Word Wrap option?

[@TheNewton]

Queries in components is gonna let us do some crazy stuff with mega menus content, cart drawers and do a bit more responsive font sizing without js! And embedding stuff like with s?

[@anneangersbach]

Can I please like this twice?

[@black-snow]

How can they not name the article RenderiNG? duh

[@themisir]

RenderingENGIne*

[@Sasukector]

Really amazing new features, I'll want to try them all out!

[@crooker2]

Container queries!! Yes!

[@adityakumarsingh7648]

Always wanted this type of features this is game changer 🔥

[@DrRobrez]

Container queries at last!

[@mrnickb]

I'm not a developer, so I'm trying to wrap my head around this. Does a container query basically allow you to determine the behaviour of child elements based on the parent elements size? Where as before it was all based on viewport size?

[@asadullahsalim4970]

Its So Easy And Very Big Change To The CSS I like To See Many More Updates Like That

[@douglasfugazi]

Cool new features, congrats to all team!

[@anjanspace]

The automatic container alignment helped me a lot.

[@AssemblyWizard]

Awesome features, awesome Una

[@ts8960]

the nesting is a very nice addition, good job.

[@maximilian19931]

Can those features be implemented on Google product to show a real usecase for them? Otherwise i think companies wouldn't implement it directly at their pages.

[@jeremyscheatday7305]

I'm pretty excited about the idea of container queries but if you guys had to redo the entire rendering engine. I wonder if Apple and Microsoft will be quick to implement. Are they gonna redo their entire rendering engine?

[@frankkevy]

I'm really excited about this

[@mikeysauce393]

Nice presentation thank you. 👨‍💻

[@uchechukwuprincenwulu2026]

we love you Una

[@Sashankyt]

All of these features sound exciting but how much of these do you actually use? It's a bit overwhelming.

[@JanderSilva01]

I'm sooo happy with the CSS Nesting.

[@MetalxD117]

Very good this new features to Responsive Design!!

[@LuBre]

Can't wait to use it everywhere in 2032!

[@ashish_prajapati_tr]

Amazing, I am fired up now.

[@Max29xD]

I thought my computer has lag hahaha, it had been the video recorded at 5 fps 😂

[@XenomFlautaDulce]

Auto Dark mode is cool!

[@LuisPerezWilmai]

Amazing thanks for you time, very important alll thing tolk in the video.

[@Slada1]

Container queries + safari polyfil are the best news! We can't expect safari to innovate

[@BenjaminAster]

Wrong. So wrong, you couldn't be wronger. Container queries are shipping in Safari 16.0 which will come out in the next months (probably September). Firefox on the other hand still doesn't even have an experimental implementation of it. Safari really isn't that bad, Firefox is!

[@adbirdk]

"Hey dude, you can't wear your apple watch in the vid.."

[@martinstolz5971]

Wanted this feature forever, but cant use it if no other browser supports it.... Or am I wrong?

[@lalilaloe]

Cool, but in the end we still have to support other browsers, as well as backwards compatibility.

[@alexandergamingvideos]

That's why they quote they're creating with the community some polyfills

[@YTCrazytieguy]

Really cool!

[@oscak41]

awesome new features, thanks

[@rishabhagarwal8594]

This 10 minute video is a goldmine

[@VarunGupta3009]

This is all so AWESOME!

[@PorisTo]

Awesome, the next trend CSS :D

[@Dennis-Ong]

I always remember her as the one that engrained in my brain how to centre a div.

[@autobottutoriais3091]

wow i loved it! tha's great

[@VaibhavShewale]

damn, it looks amazing and fast

[@Arttyor]

Also, CSS nesting...People who professionally write CSS, they already use SASS, and they won't stop using it just because CSS has this option now too (looks exactly same) however, it's good direction to go to

[@Arttyor]

scroll timeline is cool, but I don't see what is possibile to be done to even think of not using GSAP for this

[@atlanticamorphine]

As nice as these features are, it's kind of scary, seeing how css and 'the web', is becoming controlled by a single browser again.. where chrome devs can be like "we've added new features to *the internet*"

[@lelandrb]

chrome team casually adding 1000hr task to mozilla's backlog

[@mdmagnusson]

Thankfully these features are standardized through the W3C and not just added randomly. Firefox has some standardized features that are still missing from Chrome, like subgrid, so it's not just one vendor pushing ahead of everyone.

[@gorki90]

yes, that freaked me out as well

[@qwertt14]

aren't they tho?

[@UnaKravets]

These are features that all the browser vendors come together to standardize and implement. Some features land in different browsers at different times, but it’s not always Chrome first.

[@DesignMyBox]

Wow container queries are a game changer! Can't wait for it to become available for use! I heard polyfills so is it coming sooner than I think ?

[@nahfamimgood]

"Causes less Jank" I love it lol

[@hector4like6gorilla]

i only see the library styled components native now in css

[@otiugeid1497]

Nice, but how do you center a div?

[@blue_mustang_]

are this things compatible with other browsers??

[@TheNewton]

So are accents like dark mode at the browser preference level? If so would accents allow websites to set a user's accent through a setting on on that website? unlike dark/light mode.

[@brunaothecatcher]

CARALHO MENO NACREDITO TCHAU FIREFOX 👌

[@kotlarov202]

good content, thanks, this is awesome

[@albab790]

Oke teacher thank you

[@RubberDuckCoding]

VERY NICE!

[@Alexandritax]

I'm impressed

[@GUN2kify]

As long Chrome a new Page opens as an 100% white page. Dark mode is not fully usable, 'cause the user is blended for the moment.

[@Vaeshkar]

What is up with the video Framerate?

[@ezkowd]

awesome new features!

[@TesterAnimal1]

Been finding some bugs with the new rendering engine. Over optimisation type of things. Elements only appearing when you move the mouse over them - they’re there but not yet painted. I think the team are on the latest one we found.

[@Kokityo]

Amazing ! Do you think edge and firefox will applied theses new features too ? Otherwise we can't use it..

[@CostasAn]

Isn't Edge Chromium now?

[@TzafrirForsher]

Any plans to create similar AI filter for rendered content as images & videos?

[@Rajabhai-ys5sf]

Sir why we cannot use h1 in web design more than once

[@timeforrice]

Does CSS Nesting work with Chrome?

[@isagive]

Very cool, i wish we had faster browser support for some of the things mentioned here. Thanks for all the hard work you guys (&girls of course)..

[@MOUGO]

Is this for Chrome only ?

[@abigailfosu5887]

Thank you so cool

[@turmadaembrosia6864]

How can I use any of this if Safari users are a thing?

[@wdirex]

dark mode for google translate please, long shot this reaching anyone works for google translate tho

[@yourgflikesit]

How is this different from CSS Grid?

[@joebazooks]

OHHH SCROLL TIMELINE !!!

[@StarOnCheek]

Why did you film in 10 fps

[@LarkOfTheWoods]

This brings to mind a pertinent watchword: Just because you can do something, does not mean that you should.

[@garryiglesias4074]

I'm on your tail on this one... Waiting for Harry to join us...

[@federicoaldana5952]

Sass nesting? In css

[@danielradosa]

can someone please tell me how can i make website to recognize when a foldable phone is folded

[@yokowasis]

Is it just me or the video renders at 15 fps

[@caderosche]

Noticed that immediately too!

[@Sky_ye]

Team Firefox

[@Ptaszqq]

CSS nesting is huge, I'm gonna say bye to scss cuz that's was my fav feature :D

[@evaldasa1891]

How many more GB of RAM we will need for one tab ?

[@papajohnsuk5965]

this just makes me sad bc safari won't support it for 20 years

[@qwertt14]

is there anything good in safari?

[@papajohnsuk5965]

@@qwertt14 nothing hah

[@lookarious2055]

Why video 5fps

[@yoNikma]

not previous possible? meanwhile your showing codepen which has done it for years

[@anonlegion9096]

is this a CSS update?

[@user-or4qq3eu5z]

Container Reponsive is a good thing.