diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/dv/index.html | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/dv/index.html')
| -rw-r--r-- | build/dv/index.html | 49 |
1 files changed, 34 insertions, 15 deletions
diff --git a/build/dv/index.html b/build/dv/index.html index a8554be..4f27bd1 100644 --- a/build/dv/index.html +++ b/build/dv/index.html @@ -1,51 +1,70 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Dynamic Viewports with CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Dynamic Viewports with CSS</h1> +<h1 id="dynamic-viewports-with-css">Dynamic Viewports with CSS</h1> + <p>2023-02-08</p> -<p>I think it's safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element's height and/or width, relative to the viewport (v) height (h) or width (w). For example:</p> -<p>If I want my <code>.box</code> element to take up the entire height of a device's screen:</p> + +<p>I think it’s safe to assume most web designers and developers are familiar with the standard <code>vh</code> and <code>vw</code> parameters in CSS. These parameters are used for setting an element’s height and/or width, relative to the viewport (v) height (h) or width (w). For example:</p> + +<p>If I want my <code>.box</code> element to take up the entire height of a device’s screen:</p> + <pre><code>.box { height: 100vh; } </code></pre> -<p>Or I want my <code>.box</code> element to take up the entire width of a device's screen:</p> + +<p>Or I want my <code>.box</code> element to take up the entire width of a device’s screen:</p> + <pre><code>.box { width: 100vw; } </code></pre> + <p>These are wonderful options to have - specifically for those of us designing web applications. But there are some <em>minor</em> issues with <code>vh</code> and <code>vw</code>.</p> + <ol> <li>The setting does not take into account device-specific UI (status bars, toolbars, search fields etc.)</li> <li>In some instances these will not play nice with <code>box-sizing</code> properties</li> </ol> -<h2>Have No Fear, Dynamic Viewport is Here!</h2> -<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> & <code>dvw</code>. They are defined as follows:</p> -<blockquote><p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> + +<h2 id="have-no-fear-dynamic-viewport-is-here">Have No Fear, Dynamic Viewport is Here!</h2> + +<p>Lucky for us there exists an awesome <em>new-ish</em> CSS API called dynamic viewport-percentage units: <code>dvh</code> & <code>dvw</code>. They are defined as follows:</p> + +<blockquote> +<p>The dynamic viewport-percentage units (dv) are defined with respect to the dynamic viewport size: the viewport sized with dynamic consideration of any UA interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</p> </blockquote> + <p>So our examples above would translate into:</p> + <pre><code>.box { height: 100dvh; width: 100dvw; } </code></pre> -<h3>What About Browser Support?</h3> -<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> / ~67.17% coverage.</p> -<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV.</p> -<p>If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p> + +<h3 id="what-about-browser-support">What About Browser Support?</h3> + +<p><a href="https://caniuse.com/mdn-api_css_dvh">Can I Use Stats</a> / ~67.17% coverage.</p> + +<p><strong>Note:</strong> Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support <code>dvh</code>, in my experiments they do. I’m not sure what testing was done for those two browsers, so YMMV.</p> + +<p>If you want to play it safe, use dynamic viewports with standard “traditional” viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |