<?xml version="1.0" encoding="UTF-8"?>
<feature id="viewport-segments"><name>Viewport segments</name><description>The viewport segment CSS environment variables and media features, and the viewport.segments API, allow you to adapt your layout to devices where the display is split, such as on foldable devices.</description><baseline><status>limited</status></baseline><support><browser name="chrome" version="138" supported="true"></browser><browser name="firefox" version="—" supported="false"></browser><browser name="safari" version="—" supported="false"></browser><browser name="edge" version="138" supported="true"></browser><browser name="chrome_android" version="138" supported="true"></browser><browser name="firefox_android" version="—" supported="false"></browser><browser name="safari_ios" version="—" supported="false"></browser></support><specifications><spec>https://drafts.csswg.org/css-env-1/#viewport-segments</spec><spec>https://drafts.csswg.org/css-viewport/#segments</spec><spec>https://drafts.csswg.org/mediaqueries-5/#mf-horizontal-viewport-segments</spec><spec>https://drafts.csswg.org/mediaqueries-5/#mf-vertical-viewport-segments</spec></specifications><caniuse></caniuse><mdn_url>https://developer.mozilla.org/docs/Web/API/Viewport</mdn_url><compat_features><key>api.Viewport</key><key>api.Viewport.segments</key><key>api.Window.viewport</key><key>css.at-rules.media.horizontal-viewport-segments</key><key>css.at-rules.media.vertical-viewport-segments</key><key>css.types.env.viewport-segment-bottom</key><key>css.types.env.viewport-segment-height</key><key>css.types.env.viewport-segment-left</key><key>css.types.env.viewport-segment-right</key><key>css.types.env.viewport-segment-top</key><key>css.types.env.viewport-segment-width</key></compat_features><canonical_url>https://nowyoucanuse.com/features--viewport-segments.html</canonical_url></feature>