0:00 Intro 0:48 1. scroll-snap - native scroll inertia and decelerations 2:36 2. focus-within - solving focus accessibility within elements 4:13 3. @media (prefers-*) - considerately adjust your UI/UX to a user's device preferences via Media Query hooks provided by browser 6:50 4. logical properties - dynamic directionality 10:00 5. sticky situations - keeping UI within the viewport 11:44 6. backdrop-filter - style adjustments behind an element 13:14 7. :is() - formerly :any() && :matches() @ 8. Grid-gap 14:53 9. CSS Houdini - a low-level API for CSS 19:20 10. typed OM - CSS values as JavaScript objects rather than strings 20:58 11. Paint API - create your own paint functions using a canvas-like syntax 27:12 12. animation worklet - off the main thread animation 30:25 Speed Round - size, aspect-ratio, min(), max(), clamp(), list style type, display: outer inner, CSS regions, CSS modules
OH MY GOD, finally backdrop-filter is ofiicially supported. I always really wanted to easly make blurred components like in iOS / macOS. Thanks Google, that's a definitely good news!
@@SirusStarTV I know. And this effect is incredible so thats why i wanted to use it in other projects, but unfortunetly it was possible to make only with tricky hacks like I did in kamyil.github.io (Experiment failed ofc). Now its finally supported
I think like your audience didn't understand the importance of features you are showing them like they are not devs if I was there I would yell for each feature! thanks for your efforts and excitement for delivering this to us
sticky looks amazing!! also backdrop-filter thank God it's finally here, I remember I had to use SVG and a bunch of clipping and stuff to do just that. Also properties without using anything else is great! No more "look back to copy the color numer from the top of the file" * -*
Focus within is really big. I spent wayyy too long working on getting this behavior to work without focus within. Question: which screenreaders were tested with this? Do the major ones work? (jaws, nvda, voiceover for mac)
Tired of hype which no one will use in 6 months, and the most are important things still are not done. not talking about css, but as development in overall.
Facing this issue with client all the time... having to make swiping sections with tons of JS. Don't understand why they don't implement trigger delay and forced destination. This is basically what transition does, just its too rigid, have to count sections, know which section we are currently on to initiate next swipe/slide/scroll. Also, having to calculate destinations y and x to make sure translation doesn't trigger when swiping on Y... its just tons and tons of unreliable code. There are many things we need scroll snapping to do which would allow us to make amazing work flows within apps. Such as force destination on motion, sensitivity, transition style start, transition style stop, count nested children, avoid action on focus of children's children... etc... Hopefully we will get all of this one day, cross browser.
Just to make sure, in those slides at 18:00 --color is put in the var css function, but it should be --gradientStart, right? Or is defined a unique way? Also, I tried to find more information on CSS Regions, but I couldn't find many examples and caniuse said chrome isn't pursuing. Is this out of date www.chromestatus.com/feature/5655612935372800, or referring to an old spec? And worklets look amazing! Can't wait to try them.
{margin or padding}-{block or inline} ('margin-block: 1rem' for example) does not seem to currently work on chrome 78 or 80, and yet caniuse says both versions can use it. any idea why this is? help?
sticky is unusable is several situation if the parent has overflow (set to hidden) on it. That's a huuuuuge cave-at. It forces us into tricky ugly hacks.
@@elysium2013 Make a functional sticky with a top: 0 in a scrolling div. Now wrap the whole block of html code into a div that has "overflow: hidden". Your sticky wont work anymore. This prevent you to make excel like behaviors easy. Imagine this use case : you want to freeze the columns A,B,C and the line 1, A2 and below are vertically scrollable, D2 to Z99 are horizontally scrollable, A1 to Z1 are sticky (this is mandatory for the exercise, the behavior can be achieved without it). Tricky bonus part, you only want one auto y-scrollbar if the content is growing vertically and the space gets insuffisant. You only want an horizontal x-scrollbar starting at column D if the content grows to the right and overflow your right unfrozen pane. I made it for our intern project. It's neat but the sticky part from D1 to Z1. I used an ugly hack by mutating relative cells into fixed one. Basically this is what sticky is doing internally. But i had to do it myself and that's ugly.
A lot of this looks powerful, but also very low level. I wonder how many devs would be willing to put in all the work for a notched button that won't work on a lot of browsers. Plus, are any features lost when custom painting buttons?
Well, lots of their talk deal with high level properties. You're talking about the Houdini part I guess, the Paint and Animation API ? You're quite right on this point but I'm guessing that's the kind of thing where you'll mostly get some CDN loaded and just use the properties in your CSS as an enhancement, not an essential part of your site.
It is the new cross platform microsoft edge browser built on chromium - they really specked it up, going to be interesting what they are doing with it - full release on january 15
It does; but it works if you're between the contents you want to scroll for and wait there; then it will scroll automatically for you. Demo from css-at-cds.netlify.com codepen.io/argyleink/pen/MWWpOmz
Yeah, the first resource seemed unavaliable for all browsers, and then only on the second resource, I saw that it was actually green and not red, because there was a stronger red coming from IE
I think it was a major mistake to cater CSS/HTML to graphical design people instead of programmers. They keep adding more and more capabilities to CSS, which makes it seem like more cool graphical designs are possible. Instead it just creates a spec that becomes more and more bloated, and it will still not do exactly what everyone needs. Imagine instead if they had exposed the browser's layout engine through an API, and let us define the CSS syntax ourselves through Javascript. We could extend CSS with whatever stuff we need for each project.
@@AbdallaElmedny, that is awesome, thanks. I had a quick look and especially the Layout Worklet looks very interesting. Too early to see its capabilities, but I hope it will enable me to write my own layout engine and never ever rely on standard CSS again. Screen positioning of elements has always been way too difficult in standard CSS.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
0:00 Intro
0:48 1. scroll-snap - native scroll inertia and decelerations
2:36 2. focus-within - solving focus accessibility within elements
4:13 3. @media (prefers-*) - considerately adjust your UI/UX to a user's device preferences via Media Query hooks provided by browser
6:50 4. logical properties - dynamic directionality
10:00 5. sticky situations - keeping UI within the viewport
11:44 6. backdrop-filter - style adjustments behind an element
13:14 7. :is() - formerly :any() && :matches()
@ 8. Grid-gap
14:53 9. CSS Houdini - a low-level API for CSS
19:20 10. typed OM - CSS values as JavaScript objects rather than strings
20:58 11. Paint API - create your own paint functions using a canvas-like syntax
27:12 12. animation worklet - off the main thread animation
30:25 Speed Round - size, aspect-ratio, min(), max(), clamp(), list style type, display: outer inner, CSS regions, CSS modules
Doing god's work sir
legend
People like you restore my faith in the internet
Thanks for jumping on that grenade for us.
thank you
A moment of silence for all the people like me who are still developing for IE support
Just don't. Put a message up saying you need to use an actual web browser.
I don’t feel sorry for you, you made the choice
@@_nom_ actually, even apple does it. never underestimate the power of users who are forced to use internet explorer and judge YOUR website!
Ahahahahahahahahahahahahahahaha even my computer laughed
If you're doing that, you deserve the pain.
14:10 "awesome Firefox dev tools" =)
WOW how did I not know about scroll-snap!
*you english speak good*
@@51w42 fixed it for you bae
@C S lol
haha
No-one should know about them, websites that hijack the scrolling is the devils work
This had to be late in the day, very high energy, but super excited about prepping for these
OH MY GOD, finally backdrop-filter is ofiicially supported. I always really wanted to easly make blurred components like in iOS / macOS. Thanks Google, that's a definitely good news!
I was waiting for it to get out of the flag for about 2 years
apple.com uses it to blur what's behind the header.
@@SirusStarTV I know. And this effect is incredible so thats why i wanted to use it in other projects, but unfortunetly it was possible to make only with tricky hacks like I did in kamyil.github.io (Experiment failed ofc). Now its finally supported
Wow, these improvements are insanely good. The presentation even better, great work guys!
This is an amazing glimpse at the future of css! Thank you
This kind of cringe helps me calm down after a hard day of work. Thank you google...
Lol
I thought it was cringe in a sort of self-aware way, which I didn't mind at all
What a content packed talk. I suggest watching at 0.75x speed to get everything.
Thanks.
I think like your audience didn't understand the importance of features you are showing them like they are not devs if I was there I would yell for each feature!
thanks for your efforts and excitement for delivering this to us
Thank you for letting us know which browser supports these new properties and worklets.
Just saw your video on Colo scheme on Chrome Dev channel, super cool man. Immediately subbed to your channel. Really dig the enthusiasm
When is subgrid coming to Chrome?
Aspect ratio is all I asked for.
Can't wait for gap to reach all major browsers.
sticky looks amazing!! also backdrop-filter thank God it's finally here, I remember I had to use SVG and a bunch of clipping and stuff to do just that.
Also properties without using anything else is great! No more "look back to copy the color numer from the top of the file" * -*
Focus within is really big. I spent wayyy too long working on getting this behavior to work without focus within. Question: which screenreaders were tested with this? Do the major ones work? (jaws, nvda, voiceover for mac)
Why the hell we still don't have flexbox gap in 2019 T_T
Tired of hype which no one will use in 6 months, and the most are important things still are not done. not talking about css, but as development in overall.
You don’t need it. Use justify-content:space-between and reduce the widths of the children elements.
13:40 Isn't this what you're looking for?
@@CRBarchager Yes, and it is still not supported by the majority of the browsers
Bums me out...
Scope of web development is bright. If we update ourselves with latest libraries and frameworks
Scroll snapping needs a sensitivity property. Or disabling acceleration property. I find it too sensitive for some users.
Facing this issue with client all the time... having to make swiping sections with tons of JS.
Don't understand why they don't implement trigger delay and forced destination. This is basically what transition does, just its too rigid, have to count sections, know which section we are currently on to initiate next swipe/slide/scroll.
Also, having to calculate destinations y and x to make sure translation doesn't trigger when swiping on Y... its just tons and tons of unreliable code.
There are many things we need scroll snapping to do which would allow us to make amazing work flows within apps.
Such as force destination on motion, sensitivity, transition style start, transition style stop, count nested children, avoid action on focus of children's children... etc...
Hopefully we will get all of this one day, cross browser.
Wish u guys shared the demo links for these presentations, in the description.
At 20:09 quicker to type CMD+K rather than `clear()`
I can't wait until the company I work at approves us to use this stuff in like 10 years (not kidding).
or better yet, let us out of our work box and actually attend these conferences.
what is the second browser on 5:42?
Never seen this before
Edge on Chromium from Microsoft
@@cklamNL thanks man)
Such awesome features! Didn't really get houdini so I need to look into that.
Just to make sure, in those slides at 18:00 --color is put in the var css function, but it should be --gradientStart, right? Or is defined a unique way?
Also, I tried to find more information on CSS Regions, but I couldn't find many examples and caniuse said chrome isn't pursuing. Is this out of date www.chromestatus.com/feature/5655612935372800, or referring to an old spec?
And worklets look amazing! Can't wait to try them.
Awesome presentation!
Does anyone know the URL of the example shown at 30:07?
This makes me re consider if using wordpress was a good idea
will chrome bring back tabs with cut-corners now that they have this ?
11:28 That is freakin COOL! That is some functionality you would expect to have to get from a JS plugin.
It's been around for some time already tho
Wow amaizing yeah pray you sccs always happyness healthy 😇🥰😍😀 always
Best thing, finally dark theme
This is awesome stuff!
Let's see *whispers: a demo*
{margin or padding}-{block or inline} ('margin-block: 1rem' for example) does not seem to currently work on chrome 78 or 80, and yet caniuse says both versions can use it. any idea why this is? help?
I love your podcast !! "the css podcast"
Hey guys how to do vertical align with text ?
I am unable to see this video from IE.. no idea what this video is all about.
Can't wait to try them 🤓
Have you tried?
Houdini: "Prepare to be astounded" 🎩🪄🐇✨
Link for his shirt?
Did anybody else notice the typo at 17:18
sticky is unusable is several situation if the parent has overflow (set to hidden) on it. That's a huuuuuge cave-at. It forces us into tricky ugly hacks.
Can you give an example?
@@elysium2013 Make a functional sticky with a top: 0 in a scrolling div. Now wrap the whole block of html code into a div that has "overflow: hidden". Your sticky wont work anymore. This prevent you to make excel like behaviors easy.
Imagine this use case :
you want to freeze the columns A,B,C and the line 1,
A2 and below are vertically scrollable,
D2 to Z99 are horizontally scrollable,
A1 to Z1 are sticky (this is mandatory for the exercise, the behavior can be achieved without it).
Tricky bonus part, you only want one auto y-scrollbar if the content is growing vertically and the space gets insuffisant.
You only want an horizontal x-scrollbar starting at column D if the content grows to the right and overflow your right unfrozen pane.
I made it for our intern project. It's neat but the sticky part from D1 to Z1. I used an ugly hack by mutating relative cells into fixed one.
Basically this is what sticky is doing internally. But i had to do it myself and that's ugly.
@@kirkanos771 Thanks
*Thank you for your spotless design tips. Thanks, Frank. finally found refs*
Houdini and animation worklet sounds interesting
Would this work under different browsers like safari and Firefox?
They included TenHun! WOW!
the future is bright.
Oh my god this is so cool.
Next generating Web styling 💯
A lot of this looks powerful, but also very low level. I wonder how many devs would be willing to put in all the work for a notched button that won't work on a lot of browsers. Plus, are any features lost when custom painting buttons?
Well, lots of their talk deal with high level properties. You're talking about the Houdini part I guess, the Paint and Animation API ? You're quite right on this point but I'm guessing that's the kind of thing where you'll mostly get some CDN loaded and just use the properties in your CSS as an enhancement, not an essential part of your site.
I like this guy's energy
I cringed the whole way through.
It was distracting and felt like a silly 90's teen in a sitcom
After more than 1 year, Flexbox Gap is still not fully supported
Web future looks good.
From when i can use this things?
Now
From the time it was pushed, which was years ago!
What's the browser next to Edge?
IE, technically! The first icon is IE, the second is the new icon for Edge they revealed some time last week, I believe.
@@SimonBuchanNz Looks like MS intended to renew both the heart and the face of its browser.
It is the new cross platform microsoft edge browser built on chromium - they really specked it up, going to be interesting what they are doing with it - full release on january 15
Kids these days don't recognize Internet Explorer
Is scroll snap suppose to work on desktop?
It does; but it works if you're between the contents you want to scroll for and wait there; then it will scroll automatically for you. Demo from css-at-cds.netlify.com codepen.io/argyleink/pen/MWWpOmz
what is this? css 4?
Most of these features are not supported by all browsers :/
Thus "next-generation"?
These people are great presenters
where can i find to use all of this?
When it starts to work?
is there a link for these demos? particularly Una's buttons
never mind it's there in the talk a.nerdy.dev/css-at-cds
9:12 OMG finally thank god!
the browser support colours are not colour-blind friendly :(
Oh gosh you're so right! Next time we will add a browser version for supported browsers! We're so sorry about this oversight!
Yeah, the first resource seemed unavaliable for all browsers, and then only on the second resource, I saw that it was actually green and not red, because there was a stronger red coming from IE
13:38 Wow, so how long till we get full less support in CSS ? This is pretty awesome though
11:42 where ist that link?
I know, right...............
css-at-cds.netlify.com/
I know next to nothing about coding, but I found this very interesting.
i love "vh", but not in mobile device
I'll take "vh" on a mobile device any day compared to tablet mode in Chrome OS.
lol, i got so excited when i saw aspect-ratio, then it showed 6 red bars for no support on any browser
All this is good, but can they make Chrome eat less RAM?
No, i guess there is a secret deal with hardware vendors to never optimize for RAM. Otherwise a computer could live as long as my fridge (20 years).
Hahah ibneed a shirt saying "hmmm that just looks so good"
Super Cool !!!
Why is there no applause between each demo. I would of be the guy out there going "WHOOOO YEAH" *wild clapping* I had no idea about most of these.
I think it was a major mistake to cater CSS/HTML to graphical design people instead of programmers. They keep adding more and more capabilities to CSS, which makes it seem like more cool graphical designs are possible. Instead it just creates a spec that becomes more and more bloated, and it will still not do exactly what everyone needs. Imagine instead if they had exposed the browser's layout engine through an API, and let us define the CSS syntax ourselves through Javascript. We could extend CSS with whatever stuff we need for each project.
That's exactly what they are doing with Houdini.
@@AbdallaElmedny, that is awesome, thanks. I had a quick look and especially the Layout Worklet looks very interesting. Too early to see its capabilities, but I hope it will enable me to write my own layout engine and never ever rely on standard CSS again. Screen positioning of elements has always been way too difficult in standard CSS.
Samples are at css-at-cds.netlify.com/
:OOOOOOO
I need this!...
are you the same girl in video? 😲
sneaky deaky sticky
24:27 Galactica-style corners, finally !
great talk !
Damn, a dev for 5 years and I still suck at css, wooohooo!
*Excellent*
the IE keeps the red bar
Super cool
This is AWESOME :D
Nice !
When are Chrome developers going to start replacing JavaScript with TypeScript?
It was interesting, but mu Chrome eats my RAM like black hole ;) I am thinking about 64GB and 128GB of on my desktop, haha.
thanks god I'm a Scala developer
just WOW!
i want that css shirt
Even their own first scrolling demo is laggy
Agreed, the video may have been filmed at 30fps and not 60fps. They should change that for further vids :).
I haven't see that name, Cool Calm Pete, in years wow
i love this ,i love web web design... : ) : {)
Gee will all webpages now be fashioned in rainbow colors?
Love the shirt
I’m very sad I’m just now seeing this :(
thanks
Nice