From b8160058b6134a5c24a37f48f7a72a0dbcb2b565 Mon Sep 17 00:00:00 2001 From: Barry Date: Mon, 6 Jul 2020 01:16:46 +0100 Subject: [PATCH] Clean up inline styles --- src/content/en/2019/caching.md | 146 ++++++++++++++--------------- src/content/en/2019/compression.md | 112 +++++++++++----------- src/content/en/2019/css.md | 4 +- src/content/en/2019/media.md | 4 +- src/content/es/2019/css.md | 4 +- src/content/fr/2019/caching.md | 146 ++++++++++++++--------------- src/content/ja/2019/caching.md | 146 ++++++++++++++--------------- src/content/ja/2019/compression.md | 112 +++++++++++----------- src/content/ja/2019/css.md | 4 +- src/content/ja/2019/media.md | 4 +- src/static/css/page.css | 15 +++ 11 files changed, 359 insertions(+), 338 deletions(-) diff --git a/src/content/en/2019/caching.md b/src/content/en/2019/caching.md index 912533f6d87..1a494521e15 100644 --- a/src/content/en/2019/caching.md +++ b/src/content/en/2019/caching.md @@ -140,83 +140,83 @@ The table below details the cache TTL values for desktop requests by type. Most Audio -

12

-

24

-

720

-

8,760

-

8,760

+ 12 + 24 + 720 + 8,760 + 8,760 CSS -

720

-

8,760

-

8,760

-

8,760

-

8,760

+ 720 + 8,760 + 8,760 + 8,760 + 8,760 Font -

< 1

-

3

-

336

-

8,760

-

87,600

+ < 1 + 3 + 336 + 8,760 + 87,600 HTML -

< 1

-

168

-

720

-

8,760

-

8,766

+ < 1 + 168 + 720 + 8,760 + 8,766 Image -

< 1

-

1

-

28

-

48

-

8,760

+ < 1 + 1 + 28 + 48 + 8,760 Other -

< 1

-

2

-

336

-

8,760

-

8,760

+ < 1 + 2 + 336 + 8,760 + 8,760 Script -

< 1

-

< 1

-

1

-

6

-

720

+ < 1 + < 1 + 1 + 6 + 720 Text -

21

-

336

-

7,902

-

8,357

-

8,740

+ 21 + 336 + 7,902 + 8,357 + 8,740 Video -

< 1

-

4

-

24

-

24

-

336

+ < 1 + 4 + 24 + 24 + 336 XML -

< 1

-

< 1

-

< 1

-

< 1

-

< 1

+ < 1 + < 1 + < 1 + < 1 + < 1 @@ -413,15 +413,15 @@ When we break this out by first vs third-party, we can also see that 70% of firs Desktop -

70.7%

-

47.9%

-

59.2%

+ 70.7% + 47.9% + 59.2% Mobile -

71.4%

-

46.8%

-

59.6%

+ 71.4% + 46.8% + 59.6%
Figure 11. Percent of requests with short TTLs.
@@ -603,21 +603,21 @@ In the table below, you can see a summary of AppCache vs service worker usage. 3 Does Not Use AppCache -

5,045,337

-

32,241

-

5,077,578

+ 5,045,337 + 32,241 + 5,077,578 Uses AppCache -

1,816

-

51

-

1,867

+ 1,816 + 51 + 1,867 Total -

5,047,153

-

32,292

-

5,079,445

+ 5,047,153 + 32,292 + 5,079,445 @@ -640,24 +640,24 @@ If we break this out by HTTP vs HTTPS, then this gets even more interesting. 581 HTTP Does Not Use AppCache -

1,968,736

-

907

+ 1,968,736 + 907 Uses AppCache -

580

-

1

+ 580 + 1 HTTPS Does Not Use AppCache -

3,076,601

-

31,334

+ 3,076,601 + 31,334 Uses AppCache -

1,236

-

50

+ 1,236 + 50 diff --git a/src/content/en/2019/compression.md b/src/content/en/2019/compression.md index be886c299bb..1c338984af4 100644 --- a/src/content/en/2019/compression.md +++ b/src/content/en/2019/compression.md @@ -75,66 +75,66 @@ Approximately 38% of HTTP responses are delivered with text-based compression. T No Text Compression -

62.87%

-

61.47%

-

260,245,106

-

285,158,644

+ 62.87% + 61.47% + 260,245,106 + 285,158,644 gzip -

29.66%

-

30.95%

-

122,789,094

-

143,549,122

+ 29.66% + 30.95% + 122,789,094 + 143,549,122 br -

7.43%

-

7.55%

-

30,750,681

-

35,012,368

+ 7.43% + 7.55% + 30,750,681 + 35,012,368 deflate -

0.02%

-

0.02%

-

68,802

-

70,679

+ 0.02% + 0.02% + 68,802 + 70,679 Other / Invalid -

0.02%

-

0.01%

-

67,527

-

68,352

+ 0.02% + 0.01% + 67,527 + 68,352 identity -

0.000709%

-

0.000563%

-

2,935

-

2,611

+ 0.000709% + 0.000563% + 2,935 + 2,611 x-gzip -

0.000193%

-

0.000179%

-

800

-

829

+ 0.000193% + 0.000179% + 800 + 829 compress -

0.000008%

-

0.000007%

-

33

-

32

+ 0.000008% + 0.000007% + 33 + 32 x-compress -

0.000002%

-

0.000006%

-

8

-

29

+ 0.000002% + 0.000006% + 8 + 29 @@ -251,38 +251,38 @@ Additionally, the percentage of brotli compression is higher for third-party con No Text Compression -

66.23%

-

59.28%

-

64.54%

-

58.26%

+ 66.23% + 59.28% + 64.54% + 58.26% gzip -

29.33%

-

30.20%

-

30.87%

-

31.22%

+ 29.33% + 30.20% + 30.87% + 31.22% br -

4.41%

-

10.49%

-

4.56%

-

10.49%

+ 4.41% + 10.49% + 4.56% + 10.49% deflate -

0.02%

-

0.01%

-

0.02%

-

0.01%

+ 0.02% + 0.01% + 0.02% + 0.01% Other / Invalid -

0.01%

-

0.02%

-

0.01%

-

0.02%

+ 0.01% + 0.02% + 0.01% + 0.02% diff --git a/src/content/en/2019/css.md b/src/content/en/2019/css.md index 1d9c50a14bc..2844bc8cf12 100644 --- a/src/content/en/2019/css.md +++ b/src/content/en/2019/css.md @@ -298,7 +298,9 @@ From our work experience, any number of 9's seemed to be the most popular choice
-
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important
+
+ 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important +
Figure 22. The largest known z-index value.
diff --git a/src/content/en/2019/media.md b/src/content/en/2019/media.md index 63dd4a14dc3..3b75185de94 100644 --- a/src/content/en/2019/media.md +++ b/src/content/en/2019/media.md @@ -114,8 +114,8 @@ Each format has its own merits and has ideal uses for the web. A very simplified Format -Highlights -Drawbacks +Highlights +Drawbacks diff --git a/src/content/es/2019/css.md b/src/content/es/2019/css.md index 8aa7e8956e9..a18fa015bfe 100644 --- a/src/content/es/2019/css.md +++ b/src/content/es/2019/css.md @@ -298,7 +298,9 @@ Según nuestra experiencia laboral, cualquier número con 9s parecía ser la opc
-
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important
+
+ 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important +
Figura 22. El valor de z-index más grande conocido.
diff --git a/src/content/fr/2019/caching.md b/src/content/fr/2019/caching.md index e6537106af2..7e0799b6ad6 100644 --- a/src/content/fr/2019/caching.md +++ b/src/content/fr/2019/caching.md @@ -139,83 +139,83 @@ Le tableau ci-dessous détaille les TTL du cache pour les requêtes en provenanc Audio -

12

-

24

-

720

-

8,760

-

8,760

+ 12 + 24 + 720 + 8,760 + 8,760 CSS -

720

-

8,760

-

8,760

-

8,760

-

8,760

+ 720 + 8,760 + 8,760 + 8,760 + 8,760 Police d'écriture -

< 1

-

3

-

336

-

8,760

-

87,600

+ < 1 + 3 + 336 + 8,760 + 87,600 HTML -

< 1

-

168

-

720

-

8,760

-

8,766

+ < 1 + 168 + 720 + 8,760 + 8,766 Image -

< 1

-

1

-

28

-

48

-

8,760

+ < 1 + 1 + 28 + 48 + 8,760 Autre -

< 1

-

2

-

336

-

8,760

-

8,760

+ < 1 + 2 + 336 + 8,760 + 8,760 Script -

< 1

-

< 1

-

1

-

6

-

720

+ < 1 + < 1 + 1 + 6 + 720 Texte -

21

-

336

-

7,902

-

8,357

-

8,740

+ 21 + 336 + 7,902 + 8,357 + 8,740 Vidéo -

< 1

-

4

-

24

-

24

-

336

+ < 1 + 4 + 24 + 24 + 336 XML -

< 1

-

< 1

-

< 1

-

< 1

-

< 1

+ < 1 + < 1 + < 1 + < 1 + < 1 @@ -412,15 +412,15 @@ Si l'on compare les ressources du domaine principal et celles des tierces partie Bureau -

70.7 %

-

47.9 %

-

59.2 %

+ 70.7 % + 47.9 % + 59.2 % Mobile -

71.4 %

-

46.8 %

-

59.6 %

+ 71.4 % + 46.8 % + 59.6 %
Figure 11. Pourcentage des requêtes avec des TTL courts.
@@ -602,21 +602,21 @@ Dans le tableau ci-dessous, vous pouvez voir un résumé de l'utilisation d'AppC N'utilise pas AppCache -

5,045,337

-

32,241

-

5,077,578

+ 5,045,337 + 32,241 + 5,077,578 Utilise AppCache -

1,816

-

51

-

1,867

+ 1,816 + 51 + 1,867 Total -

5,047,153

-

32,292

-

5,079,445

+ 5,047,153 + 32,292 + 5,079,445 @@ -639,24 +639,24 @@ Si on fait une comparaison entre HTTP et HTTPS, cela devient encore plus intére HTTP N'utilise pas AppCache -

1,968,736

-

907

+ 1,968,736 + 907 Utilise AppCache -

580

-

1

+ 580 + 1 HTTPS N'utilise pas AppCache -

3,076,601

-

31,334

+ 3,076,601 + 31,334 Utilise AppCache -

1,236

-

50

+ 1,236 + 50 diff --git a/src/content/ja/2019/caching.md b/src/content/ja/2019/caching.md index 02367d6c46c..c3acb03711d 100644 --- a/src/content/ja/2019/caching.md +++ b/src/content/ja/2019/caching.md @@ -140,83 +140,83 @@ Webブラウザーがクライアントにレスポンスを送信するとき Audio -

12

-

24

-

720

-

8,760

-

8,760

+ 12 + 24 + 720 + 8,760 + 8,760 CSS -

720

-

8,760

-

8,760

-

8,760

-

8,760

+ 720 + 8,760 + 8,760 + 8,760 + 8,760 Font -

< 1

-

3

-

336

-

8,760

-

87,600

+ < 1 + 3 + 336 + 8,760 + 87,600 HTML -

< 1

-

168

-

720

-

8,760

-

8,766

+ < 1 + 168 + 720 + 8,760 + 8,766 Image -

< 1

-

1

-

28

-

48

-

8,760

+ < 1 + 1 + 28 + 48 + 8,760 Other -

< 1

-

2

-

336

-

8,760

-

8,760

+ < 1 + 2 + 336 + 8,760 + 8,760 Script -

< 1

-

< 1

-

1

-

6

-

720

+ < 1 + < 1 + 1 + 6 + 720 Text -

21

-

336

-

7,902

-

8,357

-

8,740

+ 21 + 336 + 7,902 + 8,357 + 8,740 Video -

< 1

-

4

-

24

-

24

-

336

+ < 1 + 4 + 24 + 24 + 336 XML -

< 1

-

< 1

-

< 1

-

< 1

-

< 1

+ < 1 + < 1 + < 1 + < 1 + < 1 @@ -413,15 +413,15 @@ HTTP/1.1[仕様](https://tools.ietf.org/html/rfc7234#section-5.2.1)には、`Cac デスクトップ -

70.7%

-

47.9%

-

59.2%

+ 70.7% + 47.9% + 59.2% モバイル -

71.4%

-

46.8%

-

59.6%

+ 71.4% + 46.8% + 59.6%
図11. TTLが短いリクエストの割合。
@@ -603,21 +603,21 @@ Varyヘッダーは、1つ以上の要求ヘッダー値の値をキャッシュ AppCacheを使用しない -

5,045,337

-

32,241

-

5,077,578

+ 5,045,337 + 32,241 + 5,077,578 AppCacheを使用する -

1,816

-

51

-

1,867

+ 1,816 + 51 + 1,867 合計 -

5,047,153

-

32,292

-

5,079,445

+ 5,047,153 + 32,292 + 5,079,445 @@ -640,24 +640,24 @@ Varyヘッダーは、1つ以上の要求ヘッダー値の値をキャッシュ HTTP AppCacheを使用しない -

1,968,736

-

907

+ 1,968,736 + 907 AppCacheを使用する -

580

-

1

+ 580 + 1 HTTPS AppCacheを使用しない -

3,076,601

-

31,334

+ 3,076,601 + 31,334 AppCacheを使用する -

1,236

-

50

+ 1,236 + 50 diff --git a/src/content/ja/2019/compression.md b/src/content/ja/2019/compression.md index ffc0af81023..a2be41c009e 100644 --- a/src/content/ja/2019/compression.md +++ b/src/content/ja/2019/compression.md @@ -75,66 +75,66 @@ HTTPレスポンスの約38％はテキストベースの圧縮で配信され テキスト圧縮なし -

62.87%

-

61.47%

-

260,245,106

-

285,158,644

+ 62.87% + 61.47% + 260,245,106 + 285,158,644 gzip -

29.66%

-

30.95%

-

122,789,094

-

143,549,122

+ 29.66% + 30.95% + 122,789,094 + 143,549,122 br -

7.43%

-

7.55%

-

30,750,681

-

35,012,368

+ 7.43% + 7.55% + 30,750,681 + 35,012,368 deflate -

0.02%

-

0.02%

-

68,802

-

70,679

+ 0.02% + 0.02% + 68,802 + 70,679 Other / Invalid -

0.02%

-

0.01%

-

67,527

-

68,352

+ 0.02% + 0.01% + 67,527 + 68,352 identity -

0.000709%

-

0.000563%

-

2,935

-

2,611

+ 0.000709% + 0.000563% + 2,935 + 2,611 x-gzip -

0.000193%

-

0.000179%

-

800

-

829

+ 0.000193% + 0.000179% + 800 + 829 compress -

0.000008%

-

0.000007%

-

33

-

32

+ 0.000008% + 0.000007% + 33 + 32 x-compress -

0.000002%

-

0.000006%

-

8

-

29

+ 0.000002% + 0.000006% + 8 + 29 @@ -251,38 +251,38 @@ HTTP Archiveによって収集された診断から圧縮レベルを判断す テキスト圧縮なし -

66.23%

-

59.28%

-

64.54%

-

58.26%

+ 66.23% + 59.28% + 64.54% + 58.26% gzip -

29.33%

-

30.20%

-

30.87%

-

31.22%

+ 29.33% + 30.20% + 30.87% + 31.22% br -

4.41%

-

10.49%

-

4.56%

-

10.49%

+ 4.41% + 10.49% + 4.56% + 10.49% deflate -

0.02%

-

0.01%

-

0.02%

-

0.01%

+ 0.02% + 0.01% + 0.02% + 0.01% Other / Invalid -

0.01%

-

0.02%

-

0.01%

-

0.02%

+ 0.01% + 0.02% + 0.01% + 0.02% diff --git a/src/content/ja/2019/css.md b/src/content/ja/2019/css.md index 2bd3f845184..7ad51c2b2f2 100644 --- a/src/content/ja/2019/css.md +++ b/src/content/ja/2019/css.md @@ -298,7 +298,9 @@ CSSの`z-index`を使用して、垂直の階層化またはスタックを管
-
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important
+
+ 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important +
図21.最も頻繁に使用されるz-index値。
diff --git a/src/content/ja/2019/media.md b/src/content/ja/2019/media.md index 099dc3d509b..a75c97c5824 100644 --- a/src/content/ja/2019/media.md +++ b/src/content/ja/2019/media.md @@ -114,8 +114,8 @@ CSSピクセルと自然ピクセル量を見ると、中央値のウェブサ フォーマット -ハイライト -欠点 +ハイライト +欠点 diff --git a/src/static/css/page.css b/src/static/css/page.css index 16cd55b5385..fd2ae372583 100644 --- a/src/static/css/page.css +++ b/src/static/css/page.css @@ -27,6 +27,10 @@ margin: 0 -16px; } +.width-45 { + width: 45%; +} + .index { grid-area: index; -ms-grid-column: 1; @@ -423,10 +427,20 @@ tbody tr:nth-child(even) { figure .big-number { text-align: center; + font: bold 128px/1em Poppins, sans-serif; font: bold 8rem/1em Poppins, sans-serif; color: #62718b; } +figure .really-big-number { + text-align: center; + font: bold 24px/1em Poppins, sans-serif; + font: bold 1.5rem/1em Poppins, sans-serif; + color: #62718b; + overflow-wrap: break-word; + word-break: break-all; +} + figure .fig-mobile { display: none; } @@ -525,6 +539,7 @@ figure .fig-desktop { @media (max-width: 600px) { figure .big-number { + font-size: 80px; font-size: 5rem; }