reset-css/reset.css at main · Anurella/reset-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/* Reset CSS by Amaka Ndukwu */

/* making use of :where to allow for low specificity making it easy to override */


/* 1. border-box for box model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. remove default margin
padding is optional but i do this because of lists*/

:where(:not(dialog)) {
    margin: 0;
    padding: 0;
}


/* 3. great for in-page linking */
@media(prefers-reduced-motion:no-preference) {
    :where(html) {
        scroll-behavior: smooth;
    }
}

/* 4. line height and text rendering improvement */
:where(html) {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 5. ensure full viewport height */
:where(html, body) {
    min-block-size: 100%;
}

/* 6. improve line wrapping */
:where(h1, h2, h3,
    h4, h5, h6) {
    text-wrap: balance;
}

:where(p) {
    text-wrap: pretty;
}

:where(figure)>:where(figcaption) {
    text-wrap: balance;
}

:where(p, h1, h2, h3,
    h4, h5, h6) {
    overflow-wrap: break-word;
}


/* 7. making media elements block-level */
:where(img,
    svg,
    video,
    canvas,
    picture,
    audio,
    iframe,
    embed,
    object) {
    display: block
}

:where(img, svg, video, canvas, picture) {
    block-size: auto;
    max-inline-size: 100%
}

/* 8. inherit font and letter spacing for form controls */
:where(input,
    button,
    textarea,
    select),
:where(input[type=file])::-webkit-file-upload-button {
    font: inherit;
    letter-spacing: inherit
}

/* 9. textarea can only resized vertically and will grow to adjust its content */
:where(textarea) {
    resize: vertical;
   field-sizing: content;
}

/* 10. table */
:where(table) {
    width: fit-content;
    border-collapse: collapse;
}

:where(pre) {
    direction: ltr;
    max-inline-size: max-content;
    min-inline-size: 0;
    white-space: pre;
    writing-mode: lr
}

:where(a[href],
    area,
    button,
    input:not([type=text],
        [type=email],
        [type=number],
        [type=password],
        [type=""],
        [type=tel],
        [type=url]),
    label[for],
    select,
    summary,
    [tabindex]:not([tabindex*="-"],
        pre)) {
    cursor: pointer
}

/*  this will disable additional non-standard gestures such as double-tap to zoom*/
:where(a[href],
    area,
    button,
    input,
    label[for],
    select,
    summary,
    textarea,
    [tabindex]:not([tabindex*="-"])) {
    touch-action: manipulation
}