-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
226 lines (184 loc) · 10.9 KB
/
index.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Browser support at Clearleft</title>
<link rel="icon" type="image/png" href="/icon.png">
<meta property="og:image" content="https://browsersupport.clearleft.com/icon.png">
<meta property="og:url" content="https://browsersupport.clearleft.com">
<meta property="og:title" content="Browser support at Clearleft">
<meta property="og:description" content="Clearleft’s approach to browser support in front-end development.">
<style>
:root {
--ink-colour: rgb(37, 51, 58);
--page-colour: rgb(255,255,255);
--page-knockback-colour: rgb(240,240,244);
--link-colour: rgb(0, 0, 255);
--copy-fontstack: "Adelle Sans", "Droid Sans", -apple-system, "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
--heading-fontstack: "Gilroy", "Avenir", "Century Gothic", -apple-system, "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
}
@font-face {
font-family: 'Adelle Sans';
src: url("fonts/adellesans-regular-webfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Adelle Sans';
src: url("fonts/adellesans-bold-webfont.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Gilroy';
src: url("fonts/gilroy-black-webfont.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Gilroy';
src: url("fonts/gilroy-bold-webfont.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: fallback;
}
html {
font-size: clamp(1rem, 0.5rem + 1vi, 2rem);
}
body {
font-family: var(--copy-fontstack);
font-size: 1rem;
line-height: 1.7;
color: var(--ink-colour);
background-color: var(--page-colour);
margin-inline: 0;
margin-block: 0;
}
header {
margin-inline: 1rem;
margin-block: 1rem;
}
a {
color: var(--link-colour);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
h1,h2,h3,h4 {
font-family: var(--heading-fontstack);
margin: 0;
padding-block-start: 0.5em;
padding-block-end: 0.5em;
}
h1 {
font-weight: 800;
font-size: 4rem;
line-height: 1;
}
h2 {
font-weight: 800;
font-size: 2rem;
line-height: 1;
}
h3 {
font-weight: 800;
font-size: 1.5rem;
line-height: 1.25;
}
h4 {
font-weight: 800;
font-size: 1.25rem;
line-height: 1.25;
}
main {
inline-size: min(90vi, 66ch);
margin-inline: auto;
}
cite {
font-style: inherit;
}
blockquote {
background-color: var(--page-knockback-colour);
margin-inline: 0;
padding: 1rem;
}
footer {
background-color: #25333a;
color: #8e9ba4;
margin: 0;
margin-block-start: 3em;
padding-block: 3rem;
}
footer a {
color: #fff;
}
footer > * {
inline-size: min(90vi, 66ch);
margin-inline: auto;
}
</style>
</head>
<body>
<header>
<a href="https://clearleft.com/">
<svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154 54" width="154" height="54">
<title id="clearleft-logo">Clearleft</title>
<path fill="var(--ink-color)" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z"></path>
<clipPath id="headerMask">
<path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2"></path>
</clipPath>
<path clip-path="url(#headerMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6"></path>
</svg>
</a>
</header>
<main>
<h1>Browser Support</h1>
<h2>Features, not browsers</h2>
<p>We don’t base our browser support on specific browser names and numbers. Instead, our support policy is based on the capabilities of those browsers.</p>
<p>The <a href="https://web.dev/baseline">Baseline</a> initiative is a joint effort by Google, Microsoft, Apple, and Mozilla to categorise browser support for web standards. Baseline provides clear information about which web standards features are ready to use in websites. It designates new features into two categories:</p>
<ol>
<li><strong>Newly available</strong> – a feature is supported by the latest versions of all core browsers</li>
<li><strong>Widely available</strong> – a feature has been supported across browsers for at least 30 months</li>
</ol>
<p>We use the Baseline project to determine which browser features to use in production. If a feature is <strong>widely available</strong> according to Baseline, we can use it.</p>
<article>
<h3>Progressive enhancement</h3>
<p>If a feature is <strong>newly available</strong>, we might still use it, but we’ll ask a follow-up question:</p>
<blockquote>Can this feature be used as a progressive enhancement?</blockquote>
<p>In other words, will using this feature harm browsers that don’t support it? If a newly-available feature can be used as a progressive enhancement, we could use it. If not, we’ll wait until the feature becomes widely available and choose a different approach in the meantime.</p>
<p>This approach restricts usage of new features to nice-to-have additions rather than mission-critical requirements. But it means we don’t necessarily have to wait for every browser to support a feature before using it.</p>
</article>
<article>
<h3>Support vs. optimisation</h3>
<p>We support every browser. We optimise for none.</p>
<section>
<h4>Support</h4>
<p>When we say we support every browser, we mean that the core content and functionality of a website should be available to any browser. That doesn’t mean the content will look exactly the same in every browser.</p>
<p>It also doesn’t mean that every interaction will be identical or available to every browser. Some interactions may be implemented as progressive enhancements only available to newer browsers, provided the interaction isn’t part of the core functionality of the website.</p>
</section>
<section>
<h4>Optimisation</h4>
<p>If a browser doesn’t yet support a specific feature, it almost certainly will in the future – <a href="https://web.dev/blog/interop-2024">Interop</a> provides a list of features which browser makers have collectively agreed to prioritise. Therefore rather than optimising for specific browsers, we’ll spend time ensuring that features are deployed as progressive enhancements so that lack of support isn’t a blocker.</p>
<p>We try to avoid using polyfills, hacks and workarounds that would need to be removed at a later stage.</p>
</section>
</article>
<h2>Access for all</h2>
<p>Underlying our browser support policy are two foundational principles:</p>
<ol>
<li>Website content and core functionality should be accessible to everyone.</li>
<li>It’s okay for websites to look different in different browsers.</li>
</ol>
<p>If content is unreadable in some browsers, that’s a bug that we will fix.</p>
<p>If content is displayed slightly differently in some browsers, we consider that to be a facet of the web, not a bug. This means that there will sometimes be subtle visual and functional differences from browser to browser. We deem this acceptable provided content and core functionality are unaffected.</p>
</main>
<footer>
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://browsersupport.clearleft.com">This document</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://clearleft.com">Clearleft</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">Creative Commons Attribution 4.0 International<img style="height:1em;margin-inline: 0.15em; vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:1em;margin-inline: 0.15em; vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""></a></p>
<p>You can distribute, remix, adapt, and build upon this document in any medium or format, even for commercial purposes, as long as you credit <a href="https://clearleft.com">Clearleft</a>.</p>
</footer>
</body>
</html>