Chrome for Developers
Chrome for Developers
  • 1 731
  • 94 827 009
080: Animating to and from top-layer
In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.
Links
top-layer CSS spec → goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → goo.gle/452FG7p
Popover on MDN → goo.gle/453xfss
:popover-open on MDN → goo.gle/3x5XLVl
Dialog and popover animated → goo.gle/3Kn1Ck7
Popover animated with nesting → goo.gle/3wW3Qns
What is the top layer? → goo.gle/457rUjQ
overlay property on MDN → goo.gle/3yKNRsT
MDN demos → goo.gle/4c2eIyO
Una Kravets (co-host)
Twitter → goo.gle/452aBRb
Instagram →
UA-cam → goo.gle/457oMnS
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face Host of Tools Today → goo.gle/4aI6JpC &
Designing in the Browser 🎬 → goo.gle/4e4YTcM
Adam Argyle (co-host)
Twitter → goo.gle/3yFnHYu
Instagram → goo.gle/3wUb6QJ
UA-cam → goo.gle/4dZNKK7
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘
CSSWG → goo.gle/4bFErxq
VisBug → goo.gle/4bDcVQZ
The CSS Podcast
#CSSpodcast
Watch more The CSS Podcast → goo.gle/CSSpodcast
Subscribe to Chrome for Developers → goo.gle/ChromeDevs
#CSSPodcast #ChromeForDevelopers #Chrome
Speakers: Una Kravets, Adam Argyle
Переглядів: 2 360

Відео

What is Chrome?
Переглядів 5 тис.12 годин тому
Web App, WebAPK, WebView, Trusted Web Activity, Custom Tab.... What's the difference, and how do they relate to Chrome, Chrome OS, and Chromium? And how did JavaScript wind up in space? This video explains. 0:00 → Intro 0:47 → Chromium 2:08 → The difference between Chromium and Chrome 4:17 → WebViews 6:16 → Custom Tabs 8:29 → Trusted Web Activities 10:36 → PWAs 12:44 → Apps built on Chromium 14...
New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more
Переглядів 7 тис.14 годин тому
Chrome 126 is rolling out now! With support for cross-document transitions in the ViewTransitions API, the CloseWatcher API re-enabled, trigger-rumbled for the Gamepad API and there’s plenty more. Adriana Jara has all the details about what’s new for developers in Chrome 126. Check out goo.gle/3XjbHpZ for a deeper dive, including links to docs, specs and samples. Watch more New in Chrome → goo....
079: Popover and Dialog
Переглядів 4,9 тис.День тому
The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when. Links Popover API lands in Baseline → goo.gle/3Vo2dIs Dialogs and popovers seem similar. How are they different? → goo.gle/3wXD1z5 Dialog dilemmas and modal mischief → goo.gle/3R9nmDE Semantics and the popover attribute → goo.gle/3Vl3NuM Building a dialog...
Chrome user, Chrome profile, Chrome client
Переглядів 2,4 тис.День тому
What do we mean by when we talk about a Chrome profile? What's the difference between a Chrome user and a Chrome client? This video explains. Chapters: 0:00 - Introduction 0:30 - Chrome user 1:04 - Chrome profile 2:52 - Chrome profile, Chrome Sync and Google accounts 4:11 - Chrome channels 4:46 - Chrome Variations 6:07 - Set a custom user directory 7:20 - Find out more Resources: Chrome user, C...
Google I/O 2024 Recap for Chrome Enterprise
Переглядів 1,7 тис.14 днів тому
In this webinar we cover the latest news for Chrome Enterprise that was released at Google I/O 2024 including ChromeOS updates, enterprise developer updates, what's new in the web, and AI tools for Chrome. Resources: Get your “Add to Chromebook” badge here → goo.gle/3VxWDUd Register for the Tabbed Web Apps Trial here → goo.gle/3X3HKKo Start building same document view transitions using the View...
Mini Web Machine Fusion: The Looper and The Pile Unite
Переглядів 3,4 тис.14 днів тому
Mini Web Machines combine in this debut episode! The Looper and The Pile are used together to create experiences that are bigger than the machines are on their own. Chapters: 0:00 - Introduction 1:31 - The Looper Pile 5:34 - The Double Looper Pile 8:30 - Outro Resources: The Looper Pile → goo.gle/3yFd3kv The Double Looper Pile → goo.gle/3KlCcDw The Looper episode → goo.gle/3yKmXkI The Pile epis...
Example Use Case on Protected Audience - Part 2
Переглядів 1,1 тис.14 днів тому
In this episode of the Latest on Privacy Sandbox Sid Sahoo explains details of the data flows (using this same example) through the Protected Audience API. Chapters: 0:00 - Introduction 0:27 - Example details 1:11 - End to end journey in Protected Audience API 1:52 - Creating audiences 5:50 - Configuring the auction 9:33 - Secure Auction 14:06 - Ad rendering 15:49 - Post auction reporting 18:28...
Behind the Chrome Web Store: Asking Trust & Safety your questions
Переглядів 2,7 тис.21 день тому
Behind the Chrome Web Store: Asking Trust & Safety your questions
CG, WG, W3C, Deepti-Wasm standardization with Deepti Gandluri
Переглядів 3,1 тис.21 день тому
CG, WG, W3C, Deepti-Wasm standardization with Deepti Gandluri
What are Chrome's Deprecation Trials?
Переглядів 2,4 тис.21 день тому
What are Chrome's Deprecation Trials?
Example use case on Protected Audience - Part 1
Переглядів 80521 день тому
Example use case on Protected Audience - Part 1
How to use passkeys and FedCM for better authentication experiences
Переглядів 2,7 тис.Місяць тому
How to use passkeys and FedCM for better authentication experiences
Practical on-device AI for web developers
Переглядів 4 тис.Місяць тому
Practical on-device AI for web developers
Navigating the JavaScript framework ecosystem
Переглядів 54 тис.Місяць тому
Navigating the JavaScript framework ecosystem
New field insights for debugging INP
Переглядів 2,4 тис.Місяць тому
New field insights for debugging INP
Chrome DevTools: From friction to flow
Переглядів 9 тис.Місяць тому
Chrome DevTools: From friction to flow
Level up your Chrome Extensions: Manifest V3 and beyond
Переглядів 2,7 тис.Місяць тому
Level up your Chrome Extensions: Manifest V3 and beyond
A web revolution: Build great desktop-class apps
Переглядів 17 тис.Місяць тому
A web revolution: Build great desktop-class apps
Multi-page application View Transitions are here
Переглядів 11 тис.Місяць тому
Multi-page application View Transitions are here
Write once, run anywhere finally realized with WebAssembly
Переглядів 11 тис.Місяць тому
Write once, run anywhere finally realized with WebAssembly
Automate browser testing with tools & best practices from Chrome
Переглядів 2,6 тис.Місяць тому
Automate browser testing with tools & best practices from Chrome
The AI-Assisted developer workflow: Build smarter with IDX and Chrome DevTools
Переглядів 8 тис.Місяць тому
The AI-Assisted developer workflow: Build smarter with IDX and Chrome DevTools
What you need to know about third-party cookie deprecation
Переглядів 3,1 тис.Місяць тому
What you need to know about third-party cookie deprecation
WebAssembly and WebGPU enhancements for faster Web AI
Переглядів 2,9 тис.Місяць тому
WebAssembly and WebGPU enhancements for faster Web AI
From fast loading to instant loading
Переглядів 37 тис.Місяць тому
From fast loading to instant loading
What's new in Angular
Переглядів 21 тис.Місяць тому
What's new in Angular
The latest in Web UI (Google I/O ‘24)
Переглядів 165 тис.Місяць тому
The latest in Web UI (Google I/O ‘24)
What's new in the Web (Google I/O ‘24)
Переглядів 31 тис.Місяць тому
What's new in the Web (Google I/O ‘24)
What's new in ChromeOS (Google I/O ‘24)
Переглядів 2,2 млнМісяць тому
What's new in ChromeOS (Google I/O ‘24)

КОМЕНТАРІ

  • @SogMosee
    @SogMosee 32 хвилини тому

    Google is the harbinger of late stage capitalism. They want so desperately to normalize ads but it won't work, in the end

  • @fricze
    @fricze 4 години тому

    it's kinda crazy to post such content in audio only version

  • @mattdamon2419
    @mattdamon2419 8 годин тому

    The new UI for Chrome is so awful that you have your own users downgrading to a previous versions of Chrome, reverting to the original UI and then disabling future Chrome updates. Who in their right mind on your dev team approved the UI changes? And why are you persistent on trying to force your userbase to use your horrible looking new UI? Undo the new UI changes, period.

  • @inconito7281
    @inconito7281 13 годин тому

    Is there a way to download each different icon (sun or moon) individually ? (either as an svg or png)

  • @filipbystricky7301
    @filipbystricky7301 19 годин тому

    Hi! Great video. Would love to see the admin add a pinned comment linking to the new view transitions API and how your demos would be updated to use it. My understanding is: we used to have old transitions, then we got animation-based transitions, and now we have view-transitions and the ability to animate discrete properties. Maybe there's already a newer video on your channel you could link to?

  • @mani98
    @mani98 23 години тому

    Although I do get the comments about visual examples I do think it’s scary how some are unable to talk about UI dev from a theoretical perspective. If you move on from being a beginner you should really be honing the skill of talking about technical concepts in conversations without visual aids.

  • @SinghalRishi27
    @SinghalRishi27 День тому

    no when i think about chrome i think of spyware!

  • @codingp110
    @codingp110 День тому

    Nice!

  • @codingp110
    @codingp110 День тому

    Awesome!

  • @mtendethecreator
    @mtendethecreator День тому

    The Odin project Ninjas are here

  • @vmaksym
    @vmaksym День тому

    Thank you for cool video

  • @AntanasMisiunas
    @AntanasMisiunas 2 дні тому

    Love these videos, super helpful! I have faced a wall though implementing a horizontal scroll animation on a list of images, when at the same time trying to attach a new animation to each of the scrolled into view image (that I expect to follow a View timeline). I believe the reason is clear: Scroll / View animations are triggered based on calculations of an untransformed principal box, and due to the horizontal scroll animation, images don't physically appear into view, they are only animated into the view. Is that correct? If so, any ideas how to overcome this?

  • @rumaghosal9996
    @rumaghosal9996 2 дні тому

    How this is related to MS office??

  • @daep911
    @daep911 2 дні тому

    Interesantes novedades

  • @fabiocroldan
    @fabiocroldan 3 дні тому

    How I miss this series and these two guys!

  • @FedJimSmith
    @FedJimSmith 3 дні тому

    short answer: v8 + Blink Engines

  • @leapmean4990
    @leapmean4990 3 дні тому

    hello sir my computer can't open any website, loading error this ''Your connection is not private" all

  • @sandeepbhartiya7486
    @sandeepbhartiya7486 3 дні тому

    Where to learn advance chrome dev tool concept

  • @leojacquemin1836
    @leojacquemin1836 3 дні тому

    Thank you so much for filming this

  • @Tisuchan1456
    @Tisuchan1456 3 дні тому

    Really hard to follow without visuals

  • @DarrenbyDesign
    @DarrenbyDesign 3 дні тому

    This is also amazing! It's a great time to be a web dev

  • @MehmetKoseDev
    @MehmetKoseDev 3 дні тому

    nice feature, worst naming

  • @20shapie
    @20shapie 3 дні тому

    what about latest version for win8.1 32 bit b/c latest laptop can use anything but diffculty is basically for lower laptop is main cause

  • @20shapie
    @20shapie 3 дні тому

    slowest network in laptop ever seen how to get fast download iin there network

  • @mubelotix
    @mubelotix 4 дні тому

    One year later, still doesn't work

  • @JawsoneJason
    @JawsoneJason 4 дні тому

    Really appreciate you both, but the comments are right: visual examples are needed

  • @aleksander5298
    @aleksander5298 4 дні тому

    No code on the screen = thumbs down, after so much episodes, you should know that already, nobody will waste time

  • @aarongove2243
    @aarongove2243 4 дні тому

    👏👏👏

  • @jackjackcarey
    @jackjackcarey 4 дні тому

    It can’t just be me who finds it weird to have an audio-only format discussing written code that’s only purpose is visual UI…

  • @codingp110
    @codingp110 4 дні тому

    Referred by Odin Project. Thanks for the nice tutorial!

  • @dominggusoctovianus4915
    @dominggusoctovianus4915 4 дні тому

    The indicator on the Network Tab tells us that the response is already customize.

  • @badabing123
    @badabing123 4 дні тому

    Imformative 6:02

  • @Max86421
    @Max86421 4 дні тому

    ✨️All ai

  • @seeds.ffmpeg
    @seeds.ffmpeg 4 дні тому

    I like the content but following it without anything visual is kind of hard

  • @Satabol
    @Satabol 4 дні тому

    Hei, Developers of chrome, please, return squared tabs back? It is very uncomfortable use rounded tabs!

  • @minddragon8427
    @minddragon8427 4 дні тому

    What is going on at google, why are you doing this?

  • @runnercomet9191
    @runnercomet9191 5 днів тому

    Who the hell decided to make so that when you restore group of tabs it now always goes to first tab of the group instead of the one that was opened? Like, did you really fire every single person with any UI-design experience or knowledge? That's legit going for hostile UI that makes using product actively worse.

  • @mmahgoub
    @mmahgoub 5 днів тому

    Google used to do some quality videos

  • @leonardotinelli69
    @leonardotinelli69 5 днів тому

    Grazie

  • @patricknelson
    @patricknelson 5 днів тому

    0:50 - Aww, flash back! I miss Jake and Surma, always looked forward to their episodes "HTTP 203". They do have a new podcast out, at least.

  • @icantchosemyname
    @icantchosemyname 5 днів тому

    Wow this was awesom 🤯, very proud of the trams behind all of chrome. Super apps use webview ? 🤯 and Javascript is being used in espace 🤯🤯🤯✌️

  • @Zolbat
    @Zolbat 5 днів тому

    4:07 another way of saying 'everything but iOS' - highlighting one of the many drawbacks of being in Apples ecosystem

  • @rickdg
    @rickdg 5 днів тому

    Baby don't hurt me. Don't hurt me. No more. WHAT IS CHROME 🎶

  • @brandonhamaguchi
    @brandonhamaguchi 5 днів тому

    1:23 here you mean that V8 is to run js/was on Chromium not Chrome right? V8 is not exclusive to Chrome

  • @bagwaniali9514
    @bagwaniali9514 5 днів тому

    stop with changing the chrome ui ,the new chrome ui is horrible. And stop disabling options to use the 'old' chrome ui which is just fine.

  • @mikestu7
    @mikestu7 5 днів тому

    Good info, for Android devs at least.

  • @Max86421
    @Max86421 5 днів тому

    I love my Chromebook plus laptop 💯❤️

    • @PixelPeterpan
      @PixelPeterpan 5 днів тому

      I'm thinking about getting the Asus Chromebook x34 plus white

  • @Max86421
    @Max86421 5 днів тому

    🍎 There's not much AI in IOS 18, maybe because of safety reasons Lol 🤣

  • @MehmetKoseDev
    @MehmetKoseDev 5 днів тому

    A deeply integrated Google malware?