|
| 1 | +<!DOCTYPE html> |
| 2 | +<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> |
| 3 | + <head> |
| 4 | + <title>Using CSS margin and scroll-margin to un-obscure content</title> |
| 5 | + <link rel="stylesheet" type="text/css" href="../../css/editors.css"/> |
| 6 | + </head> |
| 7 | + <body> |
| 8 | + <h1>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code class="language-css">margin</code> and <code class="language-css">scroll-margin</code> to un-obscure content</h1> |
| 9 | + <section id="meta"> |
| 10 | + <h2>Metadata</h2> |
| 11 | + <p id="id"></p> |
| 12 | + <p id="technology">CSS</p> |
| 13 | + <p id="type"></p> |
| 14 | + </section> |
| 15 | + <section id="applicability"> |
| 16 | + <h2>When to Use</h2> |
| 17 | + <p>All technologies that support CSS.</p> |
| 18 | + </section> |
| 19 | + <section id="description"> |
| 20 | + <h2>Description</h2> |
| 21 | + <p>The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using the CSS <code class="language-css">margin</code> and <code class="language-css">scroll-margin</code> properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.</p> |
| 22 | + </section> |
| 23 | + <section id="examples"> |
| 24 | + <h2>Examples</h2> |
| 25 | + |
| 26 | + <section class="example"> |
| 27 | + <h3>Using CSS margin and scroll-margin to un-obscure content</h3> |
| 28 | + <p>This example shows a situation where there is a fixed-position banner at the bottom of the screen that is covering up the site footer, which contains a link. This type of fixed-position banner is a common design for cookie-consent banners.</p> |
| 29 | +<pre><code><!doctype html> |
| 30 | +<html lang="en"> |
| 31 | +<head> |
| 32 | + <meta charset="utf-8"> |
| 33 | + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| 34 | + <title>Using CSS margin and scroll-margin to un-obscure content</title> |
| 35 | + <style> |
| 36 | + :root{ |
| 37 | + font-size:100%; |
| 38 | + box-sizing:border-box; |
| 39 | + --banner-background:hsl(60,80%,90%); |
| 40 | + --banner-border:hsl(0, 0%, 50%); |
| 41 | + --default-focus-indicator:hsl(234, 72%, 42%); |
| 42 | + --fixed-banner-focus-indicator:black; |
| 43 | + } |
| 44 | + |
| 45 | + *, *::after, *::before{ |
| 46 | + box-sizing:inherit; |
| 47 | + } |
| 48 | + |
| 49 | + body{ |
| 50 | + background:white; |
| 51 | + color:black; |
| 52 | + font:1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif; |
| 53 | + margin:0; |
| 54 | + } |
| 55 | + |
| 56 | + h1, h2, h3, h4, h5, h6{ |
| 57 | + font-weight:500; |
| 58 | + } |
| 59 | + |
| 60 | + .wrapper{ |
| 61 | + display:grid; |
| 62 | + gap:1rem; |
| 63 | + grid-template-columns:repeat(9, 1fr); |
| 64 | + grid-template-rows:8rem auto minmax(10rem, max-content); |
| 65 | + height:100vh; |
| 66 | + } |
| 67 | + |
| 68 | + .wrapper > *{ |
| 69 | + border:1px solid black; |
| 70 | + padding:1rem; |
| 71 | + } |
| 72 | + |
| 73 | + .wrapper :focus-visible{ |
| 74 | + outline:2px solid transparent; |
| 75 | + box-shadow:0 5px 0 0 var(--default-focus-indicator); |
| 76 | + } |
| 77 | + |
| 78 | + header{ |
| 79 | + align-items:center; |
| 80 | + display:flex; |
| 81 | + font-size:1.5rem; |
| 82 | + font-weight:bold; |
| 83 | + grid-column:1 / -1; |
| 84 | + grid-row:1; |
| 85 | + } |
| 86 | + |
| 87 | + main{ |
| 88 | + grid-column:1 / 8; |
| 89 | + } |
| 90 | + |
| 91 | + aside{ |
| 92 | + grid-column:8 / 10; |
| 93 | + } |
| 94 | + |
| 95 | + footer{ |
| 96 | + grid-column:1 / -1; |
| 97 | + } |
| 98 | + |
| 99 | + @media (max-width:70rem){ |
| 100 | + main{ |
| 101 | + grid-column:1 / -1; |
| 102 | + } |
| 103 | + |
| 104 | + aside{ |
| 105 | + grid-column:1 / -1; |
| 106 | + } |
| 107 | + } |
| 108 | + |
| 109 | + .fixed-position-banner{ |
| 110 | + background:var(--banner-background); |
| 111 | + border:3px solid var(--banner-border); |
| 112 | + bottom:0; |
| 113 | + height:12rem; |
| 114 | + margin-bottom:1rem; |
| 115 | + padding:1rem; |
| 116 | + position:relative; |
| 117 | + width:calc(100vw - 1rem); |
| 118 | + } |
| 119 | + |
| 120 | + .fixed-position-banner a{ |
| 121 | + outline-color:var(--fixed-banner-focus-indicator); |
| 122 | + } |
| 123 | + |
| 124 | + .fixed-position-banner h2{ |
| 125 | + display:inline-block; |
| 126 | + margin-block-start:0; |
| 127 | + padding:0.25em; |
| 128 | + } |
| 129 | + |
| 130 | + .fixed-position-banner h2:focus-visible{ |
| 131 | + outline:2px solid var(--fixed-banner-focus-indicator); |
| 132 | + } |
| 133 | + |
| 134 | + @media (min-width:70rem), (min-height:60rem){ |
| 135 | + .fixed-position-banner{ |
| 136 | + margin-bottom:0; |
| 137 | + position:fixed; |
| 138 | + } |
| 139 | + |
| 140 | + .banner-open{ |
| 141 | + margin-bottom:14rem; |
| 142 | + } |
| 143 | + |
| 144 | + .banner-open footer a{ |
| 145 | + scroll-margin-bottom:15.5rem; |
| 146 | + } |
| 147 | + } |
| 148 | + |
| 149 | + .close-banner{ |
| 150 | + background:hsl(0, 0%, 100%); |
| 151 | + border:1px solid hsl(0, 0%, 50%); |
| 152 | + border-radius:3px; |
| 153 | + cursor:pointer; |
| 154 | + font:inherit; |
| 155 | + margin:0; |
| 156 | + padding:0.33em; |
| 157 | + position:absolute; |
| 158 | + right:1rem; |
| 159 | + top:1rem; |
| 160 | + } |
| 161 | + |
| 162 | + .close-banner-icon{ |
| 163 | + display:block; |
| 164 | + height:1rem; |
| 165 | + stroke:currentColor; |
| 166 | + width:1rem; |
| 167 | + } |
| 168 | + |
| 169 | + .close-banner:focus-visible{ |
| 170 | + outline:2px solid var(--fixed-banner-focus-indicator); |
| 171 | + outline-offset:2px; |
| 172 | + } |
| 173 | + </style> |
| 174 | +</head> |
| 175 | +<body> |
| 176 | + <dialog class="fixed-position-banner"> |
| 177 | + <h2 tabindex="-1">Fixed-Position Banner</h2> |
| 178 | + <button aria-label="close fixed-position banner" class="close-banner" type="button"> |
| 179 | + <svg aria-hidden="true" class="close-banner-icon" role="img" viewbox="0 0 16 16"> |
| 180 | + <line x1="0" y1="0" x2="15" y2="15" /> |
| 181 | + <line x1="0" y1="15" x2="15" y2="0" /> |
| 182 | + </svg> |
| 183 | + </button> |
| 184 | + </dialog> |
| 185 | + <div class="wrapper"> |
| 186 | + <header> |
| 187 | + <p>Header Content</p> |
| 188 | + </header> |
| 189 | + <main> |
| 190 | + <h1>Main Content</h1> |
| 191 | + </main> |
| 192 | + <aside> |
| 193 | + <h2>Sidebar Content</h2> |
| 194 | + </aside> |
| 195 | + <footer> |
| 196 | + <h2>Footer Content</h2> |
| 197 | + <p><a href="https://example.com">Here's an example link in the footer</a>.</p> |
| 198 | + </footer> |
| 199 | + </div> |
| 200 | + <script> |
| 201 | + document.addEventListener("DOMContentLoaded", function(e){ |
| 202 | + const cookieBanner = document.querySelector(".fixed-position-banner"); |
| 203 | + const closeBannerBtn = document.querySelector(".close-banner"); |
| 204 | + const pageBody = document.querySelector("body"); |
| 205 | + |
| 206 | + cookieBanner.show(); |
| 207 | + |
| 208 | + if(cookieBanner.hasAttribute("open")){ |
| 209 | + pageBody.classList.add("banner-open"); |
| 210 | + } |
| 211 | + |
| 212 | + closeBannerBtn.addEventListener("click", function(e){ |
| 213 | + cookieBanner.close(); |
| 214 | + pageBody.classList.remove("banner-open"); |
| 215 | + }, false); |
| 216 | + }); |
| 217 | + </script> |
| 218 | +</body> |
| 219 | +</html></code></pre> |
| 220 | + |
| 221 | +<aside class="note"> |
| 222 | + <p>Due to the current lack of cross-browser support for the the CSS <code class="language-css">:has</code> pseudo-class, this example uses JavaScript to create the <code class="language-css">margin</code> at the bottom of the page. Using the <code class="language-css">:has</code> selector, the relevant CSS is:</p> |
| 223 | +<pre><code>body:has(.fixed-position-banner[open]){ |
| 224 | + margin-bottom:14rem; |
| 225 | +} |
| 226 | + |
| 227 | +body:has(.fixed-position-banner[open]) footer a{ |
| 228 | + scroll-margin-bottom:15.5rem; |
| 229 | +}</code></pre> |
| 230 | +</aside> |
| 231 | + </section> |
| 232 | + </section> |
| 233 | + |
| 234 | + <section id="tests"> |
| 235 | + <h2>Tests</h2> |
| 236 | + <section class="test-procedure"> |
| 237 | + <h3>Procedure</h3> |
| 238 | + |
| 239 | + <p>For each user interface component that entirely hidden by author-created content and receives keyboard focus:</p> |
| 240 | + <ol> |
| 241 | + <li>Check that the user interface component becomes not entirely hidden when it receives keyboard focus.</li> |
| 242 | + </ol> |
| 243 | + </section> |
| 244 | + <section class="test-results"> |
| 245 | + <h3>Expected Results</h3> |
| 246 | + <ul> |
| 247 | + <li>Check 1 is true.</li> |
| 248 | + </ul> |
| 249 | + </section> |
| 250 | + </section> |
| 251 | + <section id="related"> |
| 252 | + <h2>Related Techniques</h2> |
| 253 | + <ol> |
| 254 | + <li><a href="C32">C32</a></li> |
| 255 | + <li><a href="C34">C34</a></li> |
| 256 | + </ol> |
| 257 | + |
| 258 | + </section> |
| 259 | + <section id="resources"> |
| 260 | + <h2>Resources</h2> |
| 261 | + <ol> |
| 262 | + <li><a href="https://www.w3.org/TR/css-box/#margins"><abbr title="World Wide Web Consortium">W3C</abbr> - CSS margins</a></li> |
| 263 | + <li><a href="https://www.w3.org/TR/css-scroll-snap/#scroll-margin">W3C - CSS the <code class="language-css">scroll-margin</code> property</a>.</li> |
| 264 | + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><abbr title="Mozilla Developer Network">MDN</abbr> - <code class="language-css">:has()</code> property</a>.</li> |
| 265 | + </ol> |
| 266 | + |
| 267 | + </section> |
| 268 | + </body> |
| 269 | +</html> |
0 commit comments