Skip to content
Hallway
0:00 / 0:00

#css#viewportunits#containerqueries

State of CSS

Chrome for Developers

822K subscribers • 20 videos on Hallway

YouTube
  • Recommended by 1 person: 1 on Stack Overflow and its sister sites.
  • Presented by Adam Argyle, Developer Advocate at Google

Intermediate. Assumes working knowledge.

138K views4 years ago1 recommendation

Web developmentCSS and layout

Adam Argyle presents new CSS features including container queries, new viewport units like dvh, and advanced color spaces.

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

Why it's here

1 person recommends this

What people say. Recommended for its neat illustration of new CSS viewport units like svh, lvh, and dvh.

Moments people linked to

m4n0on Stack Overflow • Recommends

On “CSS3 100vh not constant in mobile browser”

We have new viewport units lvh , svh and dvh to the rescue. This was demonstrated in the latest Google I/O 2022 video on web works. You would probably want to stick with dvh for the browser to adapt to the mobile device's hidden tabs while scrolling. It works the similar way for width with dvw , lvw and svw units. Here is a neat illustration from the video: link to this video Can I use? This was currently working on my Chrome canary with the flag "Experimental features" enabled.
335View the answer