"@layer reset { /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove default margin in favour of better control in authored CSS */ body, h1, h2, h3, h4, p, ul, ol { margin: 0; } /* Remove list styles on ul, ol elements */ ul[role='list'], ol[role='list'] { list-style: none; }"
"/* Set core body defaults */ body { min-height: 100vh; line-height: 1.6; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } }"
ul and ol elements with role='list' are set to list-style: none to remove bullets while preserving default lists without the role. The reset applies box-sizing: border-box to all elements and disables browser font-size inflation via text-size-adjust rules. Default margins are removed from body, headings, paragraphs, and lists to allow authored CSS control. Body is given min-height: 100vh and line-height: 1.6. Headings and interactive elements use a shorter line-height and balanced text wrapping. Images and picture elements are constrained to max-width: 100% and display: block. Form controls inherit font-family and font-size from their context.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]