Un reset CSS est un ensemble de règles CSS visant à remplacer les styles par défaut fournis par les navigateurs Web. Son objectif est d’établir un design cohérent sur différents navigateurs en éliminant tout style par défaut pouvant varier entre eux, d’où le nom reset CSS. Le reset CSS va permettre aux développeurs, qui peinent à rendre leurs sites Web identiques sur tous les navigateurs, d’avoir une bonne partie du travail d’effectuer.
Le reset CSS suivant inclut notamment :
- La taille des boîtes (box sizing)
- Les marges et les espacements (margin and padding)
- Le comportement de défilement (scroll behavior)
- La réactivité (responsiveness)
- …
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Commons properties */
*,
::before,
::after {
box-sizing: border-box;
}
* {
scroll-behavior: smooth;
font-smooth: always;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
}
html,
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
line-height: 150%;
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #000000;
background-color: #ffffff;
min-height: 100vh;
}
img,
video {
vertical-align: bottom;
user-select: none;
}
a {
text-decoration: none;
transition: 250ms;
color: #000088;
}
a:hover {
text-decoration: underline;
}
a:visited,
a:active {
color: #880088;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
p {
margin-bottom: 1.5rem;
}
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace;
font-size: 1em;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Titles */
h1,
h2,
h3,
h4 {
font-weight: bold;
line-height: 120%;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
/* clickables elements */
a,
a img,
a svg,
label {
cursor: pointer;
}
.cta {
display: inline-block;
border: 1px solid rgba(80, 88, 156, 0.2);
color: rgba(80, 88, 156, 0.2);
background-color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 0.25rem;
text-align: center;
user-select: none;
cursor: pointer;
}
.cta:hover,
.cta:focus {
background-color: rgba(80, 88, 156, 0.2);
color: #ffffff;
}
/* Forms */
form:focus-within {
box-shadow: 0 0 4px 6px rgba(80, 88, 156, 0.2);
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
width: 100%;
font-family: inherit;
font-size: 100%;
line-height: 1.15;
padding: 0.25rem;
font-size: 1rem;
}
textarea {
min-height: 10rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
box-shadow: 0 0 4px 6px rgba(80, 88, 156, 0.2);
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
appearance: button;
}
/* https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know/ */
.button,
::file-selector-button {
inline-size: fit-content;
touch-action: manipulation;
user-select: none;
}
* {
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid magenta;
outline-offset: 2px;
}
}
/* widths & heights */
.w-auto {
width: auto;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
.w-100 {
width: 100%;
}
.mw-100 {
max-width: 100%;
}
.h-100 {
height: 100%;
}
/* Margins */
.my-0,
.mb-0 {
margin-bottom: 0;
}
.my-1,
.mb-1 {
margin-bottom: 1rem;
}
.my-0,
.mt-0 {
margin-top: 0;
}
.my-1,
.mt-1 {
margin-top: 1rem;
}
.mx-0,
.ml-0 {
margin-left: 0;
}
.mx-1,
.ml-1 {
margin-left: 1rem;
}
.mx-0,
.mr-0 {
margin-right: 0;
}
.mx-1,
.mr-1 {
margin-right: 1rem;
}
.py-0,
.pb-0 {
padding-bottom: 0;
}
.py-1,
.pb-1 {
padding-bottom: 1rem;
}
.py-0,
.pt-0 {
padding-top: 0;
}
.py-1,
.pt-1 {
padding-top: 1rem;
}
.px-0,
.pl-0 {
padding-left: 0;
}
.px-1,
.pl-1 {
padding-left: 1rem;
}
.px-0,
.pr-0 {
padding-right: 0;
}
.px-1,
.pr-1 {
padding-right: 1rem;
}
/* Text */
.tt-l {
text-transform: lowercase;
}
.tt-u {
text-transform: uppercase;
}
.ta-r {
text-align: right;
}
.ta-c {
text-align: center;
}
.ta-l {
text-align: left;
}
/* Layout */
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
}
/* Users prefers & accessibility */
@media (prefers-color-scheme: light) {
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
/* Printing */
@media print {
header {
position: static;
}
nav {
display: none;
}
a[href^="http"]:not([href*="mywebsite.com"])::after {
content: " (" attr(href) ")";
}
}
/* mediaqueries */
@media screen and (max-width:1248px) {
.container {
max-width: 980px;
}
}
@media screen and (max-width:992px) {
.container {
max-width: 760px;
}
}
@media screen and (max-width:768px) {
.container {
max-width: 560px;
}
}
@media screen and (max-width:576px) {
.container {
max-width: 100%;
margin-right: 1rem;
padding-left: 1rem;
}
}
/* Gestion des erreurs */
/* Source : https: //heydonworks.com/article/testing-html-with-modern-css/ */
:root {
--error-outline: 0.25rem solid red;
}
a:not([href]) {
outline: var(--error-outline);
--error: 'The link does not have an href. Did you mean to use a <button>?';
}
a[href^="javascript"] {
outline: var(--error-outline);
--error-javascript-href: 'The href does not appear to include a location. Did you mean to use a <button>?';
}
a[disabled] {
outline: var(--error-outline);
--error-anchor-disabled: 'The disabled property is not valid on anchors (links). Did you mean to use a <button>?';
}
label:not(:has(:is(input, output, textarea, select))):not([for]) {
outline: var(--error-outline);
--error-unassociated-label: 'The <label> neither uses the `for` attribute nor wraps an applicable form element'
}
input:not(form input) {
outline: var(--warning-outline);
--error-input-orphan: 'The input is outside a <form> element. Users may benefit from <form> semantics and behaviors.'
}
ol[class*="breadcrumb"]:not(:is(nav[aria-label], nav[aria-labelledby]) ol) {
outline: var(--error-outline);
--error-undiscoverable-breadcrumbs: 'It looks like you have provided breadcrumb navigation outside a labeled `<nav>` landmark';
}
body :not(header, nav, main, aside, footer):not(:is(header, nav, main, aside, footer) *):not(.skip-link) {
outline: var(--error-outline);
--error-content-outside-landmark: 'You have some content that is not inside a landmark (header, nav, main, aside, or footer)';
}
:is(div > div > div > div > *) {
outline: var(--warning-outline);
--warning-divitis: 'There’s a whole lot of nesting going on here. Is it needed to achieve the layout? (it is not)';
}
header nav:has(ul > ul) {
outline: var(--warning-outline);
--warning-nested-navigation: 'You appear to be using tiered/nested navigation in your header. This can be difficult to traverse. Index pages with tables of content are preferable.';
}