1/* Document 2 * ========================================================================== */ 3 4/** 5 * Add border box sizing in all browsers (opinionated). 6 */ 7 8*, 9::before, 10::after { 11 box-sizing: border-box; 12} 13 14/** 15 * 1. Add text decoration inheritance in all browsers (opinionated). 16 * 2. Add vertical alignment inheritance in all browsers (opinionated). 17 */ 18 19::before, 20::after { 21 text-decoration: inherit; /* 1 */ 22 vertical-align: inherit; /* 2 */ 23} 24 25/** 26 * 1. Use the default cursor in all browsers (opinionated). 27 * 2. Change the line height in all browsers (opinionated). 28 * 3. Use a 4-space tab width in all browsers (opinionated). 29 * 4. Remove the grey highlight on links in iOS (opinionated). 30 * 5. Prevent adjustments of font size after orientation changes in 31 * IE on Windows Phone and in iOS. 32 * 6. Breaks words to prevent overflow in all browsers (opinionated). 33 */ 34 35html { 36 cursor: default; /* 1 */ 37 line-height: 1.5; /* 2 */ 38 -moz-tab-size: 4; /* 3 */ 39 tab-size: 4; /* 3 */ 40 -webkit-tap-highlight-color: transparent /* 4 */; 41 -ms-text-size-adjust: 100%; /* 5 */ 42 -webkit-text-size-adjust: 100%; /* 5 */ 43 word-break: break-word; /* 6 */ 44} 45 46/* Sections 47 * ========================================================================== */ 48 49/** 50 * Remove the margin in all browsers (opinionated). 51 */ 52 53body { 54 margin: 0; 55} 56 57/** 58 * Correct the font size and margin on `h1` elements within `section` and 59 * `article` contexts in Chrome, Edge, Firefox, and Safari. 60 */ 61 62h1 { 63 font-size: 2em; 64 margin: 0.67em 0; 65} 66 67/* Grouping content 68 * ========================================================================== */ 69 70/** 71 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. 72 */ 73 74dl dl, 75dl ol, 76dl ul, 77ol dl, 78ul dl { 79 margin: 0; 80} 81 82/** 83 * Remove the margin on nested lists in Edge 18- and IE. 84 */ 85 86ol ol, 87ol ul, 88ul ol, 89ul ul { 90 margin: 0; 91} 92 93/** 94 * 1. Add the correct sizing in Firefox. 95 * 2. Show the overflow in Edge 18- and IE. 96 */ 97 98hr { 99 height: 0; /* 1 */ 100 overflow: visible; /* 2 */ 101} 102 103/** 104 * Add the correct display in IE. 105 */ 106 107main { 108 display: block; 109} 110 111/** 112 * Remove the list style on navigation lists in all browsers (opinionated). 113 */ 114 115nav ol, 116nav ul { 117 list-style: none; 118 padding: 0; 119} 120 121/** 122 * 1. Correct the inheritance and scaling of font size in all browsers. 123 * 2. Correct the odd `em` font sizing in all browsers. 124 */ 125 126pre { 127 font-family: monospace, monospace; /* 1 */ 128 font-size: 1em; /* 2 */ 129} 130 131/* Text-level semantics 132 * ========================================================================== */ 133 134/** 135 * Remove the gray background on active links in IE 10. 136 */ 137 138a { 139 background-color: transparent; 140} 141 142/** 143 * Add the correct text decoration in Edge 18-, IE, and Safari. 144 */ 145 146abbr[title] { 147 text-decoration: underline; 148 text-decoration: underline dotted; 149} 150 151/** 152 * Add the correct font weight in Chrome, Edge, and Safari. 153 */ 154 155b, 156strong { 157 font-weight: bolder; 158} 159 160/** 161 * 1. Correct the inheritance and scaling of font size in all browsers. 162 * 2. Correct the odd `em` font sizing in all browsers. 163 */ 164 165code, 166kbd, 167samp { 168 font-family: monospace, monospace; /* 1 */ 169 font-size: 1em; /* 2 */ 170} 171 172/** 173 * Add the correct font size in all browsers. 174 */ 175 176small { 177 font-size: 80%; 178} 179 180/* Embedded content 181 * ========================================================================== */ 182 183/* 184 * Change the alignment on media elements in all browsers (opinionated). 185 */ 186 187audio, 188canvas, 189iframe, 190img, 191svg, 192video { 193 vertical-align: middle; 194} 195 196/** 197 * Add the correct display in IE 9-. 198 */ 199 200audio, 201video { 202 display: inline-block; 203} 204 205/** 206 * Add the correct display in iOS 4-7. 207 */ 208 209audio:not([controls]) { 210 display: none; 211 height: 0; 212} 213 214/** 215 * Remove the border on iframes in all browsers (opinionated). 216 */ 217 218iframe { 219 border-style: none; 220} 221 222/** 223 * Remove the border on images within links in IE 10-. 224 */ 225 226img { 227 border-style: none; 228} 229 230/** 231 * Change the fill color to match the text color in all browsers (opinionated). 232 */ 233 234svg:not([fill]) { 235 fill: currentColor; 236} 237 238/** 239 * Hide the overflow in IE. 240 */ 241 242svg:not(:root) { 243 overflow: hidden; 244} 245 246/* Tabular data 247 * ========================================================================== */ 248 249/** 250 * Collapse border spacing in all browsers (opinionated). 251 */ 252 253table { 254 border-collapse: collapse; 255} 256 257/* Forms 258 * ========================================================================== */ 259 260/** 261 * Remove the margin on controls in Safari. 262 */ 263 264button, 265input, 266select { 267 margin: 0; 268} 269 270/** 271 * 1. Show the overflow in IE. 272 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. 273 */ 274 275button { 276 overflow: visible; /* 1 */ 277 text-transform: none; /* 2 */ 278} 279 280/** 281 * Correct the inability to style buttons in iOS and Safari. 282 */ 283 284button, 285[type="button"], 286[type="reset"], 287[type="submit"] { 288 -webkit-appearance: button; 289} 290 291/** 292 * 1. Change the inconsistent appearance in all browsers (opinionated). 293 * 2. Correct the padding in Firefox. 294 */ 295 296fieldset { 297 border: 1px solid #a0a0a0; /* 1 */ 298 padding: 0.35em 0.75em 0.625em; /* 2 */ 299} 300 301/** 302 * Show the overflow in Edge 18- and IE. 303 */ 304 305input { 306 overflow: visible; 307} 308 309/** 310 * 1. Correct the text wrapping in Edge 18- and IE. 311 * 2. Correct the color inheritance from `fieldset` elements in IE. 312 */ 313 314legend { 315 color: inherit; /* 2 */ 316 display: table; /* 1 */ 317 max-width: 100%; /* 1 */ 318 white-space: normal; /* 1 */ 319} 320 321/** 322 * 1. Add the correct display in Edge 18- and IE. 323 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. 324 */ 325 326progress { 327 display: inline-block; /* 1 */ 328 vertical-align: baseline; /* 2 */ 329} 330 331/** 332 * Remove the inheritance of text transform in Firefox. 333 */ 334 335select { 336 text-transform: none; 337} 338 339/** 340 * 1. Remove the margin in Firefox and Safari. 341 * 2. Remove the default vertical scrollbar in IE. 342 * 3. Change the resize direction in all browsers (opinionated). 343 */ 344 345textarea { 346 margin: 0; /* 1 */ 347 overflow: auto; /* 2 */ 348 resize: vertical; /* 3 */ 349} 350 351/** 352 * Remove the padding in IE 10-. 353 */ 354 355[type="checkbox"], 356[type="radio"] { 357 padding: 0; 358} 359 360/** 361 * 1. Correct the odd appearance in Chrome, Edge, and Safari. 362 * 2. Correct the outline style in Safari. 363 */ 364 365[type="search"] { 366 -webkit-appearance: textfield; /* 1 */ 367 outline-offset: -2px; /* 2 */ 368} 369 370/** 371 * Correct the cursor style of increment and decrement buttons in Safari. 372 */ 373 374::-webkit-inner-spin-button, 375::-webkit-outer-spin-button { 376 height: auto; 377} 378 379/** 380 * Correct the text style of placeholders in Chrome, Edge, and Safari. 381 */ 382 383::-webkit-input-placeholder { 384 color: inherit; 385 opacity: 0.54; 386} 387 388/** 389 * Remove the inner padding in Chrome, Edge, and Safari on macOS. 390 */ 391 392::-webkit-search-decoration { 393 -webkit-appearance: none; 394} 395 396/** 397 * 1. Correct the inability to style upload buttons in iOS and Safari. 398 * 2. Change font properties to `inherit` in Safari. 399 */ 400 401::-webkit-file-upload-button { 402 -webkit-appearance: button; /* 1 */ 403 font: inherit; /* 2 */ 404} 405 406/** 407 * Remove the inner border and padding of focus outlines in Firefox. 408 */ 409 410::-moz-focus-inner { 411 border-style: none; 412 padding: 0; 413} 414 415/** 416 * Restore the focus outline styles unset by the previous rule in Firefox. 417 */ 418 419:-moz-focusring { 420 outline: 1px dotted ButtonText; 421} 422 423/** 424 * Remove the additional :invalid styles in Firefox. 425 */ 426 427:-moz-ui-invalid { 428 box-shadow: none; 429} 430 431/* Interactive 432 * ========================================================================== */ 433 434/* 435 * Add the correct display in Edge 18- and IE. 436 */ 437 438details { 439 display: block; 440} 441 442/* 443 * Add the correct styles in Edge 18-, IE, and Safari. 444 */ 445 446dialog { 447 background-color: white; 448 border: solid; 449 color: black; 450 display: block; 451 height: -moz-fit-content; 452 height: -webkit-fit-content; 453 height: fit-content; 454 left: 0; 455 margin: auto; 456 padding: 1em; 457 position: absolute; 458 right: 0; 459 width: -moz-fit-content; 460 width: -webkit-fit-content; 461 width: fit-content; 462} 463 464dialog:not([open]) { 465 display: none; 466} 467 468/* 469 * Add the correct display in all browsers. 470 */ 471 472summary { 473 display: list-item; 474} 475 476/* Scripting 477 * ========================================================================== */ 478 479/** 480 * Add the correct display in IE 9-. 481 */ 482 483canvas { 484 display: inline-block; 485} 486 487/** 488 * Add the correct display in IE. 489 */ 490 491template { 492 display: none; 493} 494 495/* User interaction 496 * ========================================================================== */ 497 498/* 499 * 1. Remove the tapping delay in IE 10. 500 * 2. Remove the tapping delay on clickable elements 501 in all browsers (opinionated). 502 */ 503 504a, 505area, 506button, 507input, 508label, 509select, 510summary, 511textarea, 512[tabindex] { 513 -ms-touch-action: manipulation; /* 1 */ 514 touch-action: manipulation; /* 2 */ 515} 516 517/** 518 * Add the correct display in IE 10-. 519 */ 520 521[hidden] { 522 display: none; 523} 524 525/* Accessibility 526 * ========================================================================== */ 527 528/** 529 * Change the cursor on busy elements in all browsers (opinionated). 530 */ 531 532[aria-busy="true"] { 533 cursor: progress; 534} 535 536/* 537 * Change the cursor on control elements in all browsers (opinionated). 538 */ 539 540[aria-controls] { 541 cursor: pointer; 542} 543 544/* 545 * Change the cursor on disabled, not-editable, or otherwise 546 * inoperable elements in all browsers (opinionated). 547 */ 548 549[aria-disabled="true"], 550[disabled] { 551 cursor: not-allowed; 552} 553 554/* 555 * Change the display on visually hidden accessible elements 556 * in all browsers (opinionated). 557 */ 558 559[aria-hidden="false"][hidden] { 560 display: initial; 561} 562 563[aria-hidden="false"][hidden]:not(:focus) { 564 clip: rect(0, 0, 0, 0); 565 position: absolute; 566} 567