Movatterモバイル変換

[0]ホーム
URL:

コリス

アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+

サイト構築 -CSS

Post on:2025年5月22日

sponsorsr

モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。

スタイルをリセットしたり、ノーマライズするのではなく、既存のUAスタイルシートを改善し、ブラウザの仕様が不十分な要素にのみスタイルを適用することに重点を置いた、これまでとは異なる新時代のリセットCSSを紹介します。

アクセシビリティを重視した新時代のリセットCSS -UA+

UA+
UA+ -GitHub

UA+の特徴

UA+（ユーザーエージェントプラス）は、これまでのリセットCSSとは異なるタイプのスタイルシートです。各プロパティのリセットとノーマライズ（正規化）を行うのではなく、既存のUAスタイルの改善に注目し、ブラウザの仕様が不十分な要素に対してのみスタイルを適用します。

このUA+は、ベースとなるより良いスタイルシートを求める人に最適です。他のリセットCSSよりも多くの機能を備えていますが、もっとも重要なのは独断的になりすぎず、過剰なリセットをしないように努めていることです。また、他のリセットCSSよりもアクセシビリティを重視しています。

先日の記事でも紹介したように、ブラウザのUAスタイルシートもアップデートされています。

ネストされたh1要素のデフォルトのUAスタイルがすべてのブラウザで変更されます

ネストされたh1要素のデフォルトのUAスタイルがすべてのブラウザで変更されます

他のリセットCSSとの比較

現在、他のリセットCSSを使用しているのであれば、このUA+とどう違うのかブラウザで確認することができます。UA+は必要な場合にのみスタイルを適用しているため、違いはほとんど目立たないと思います。
下記のデモページで、適用するリセットCSSを選択して比較できます。

サイトのキャプチャ

UA+ デモページ

左がUA+を適用した表示で、右はUAスタイルをはじめ、さまざまなリセットCSSに変更できます。

uaplus.cssの中身

CSSリセットには他のCSSリセットでお馴染みのルールだけでなく、CSSの新機能を取り入れたルールもたくさんあります。

uaplus.css
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
/**
* uaplus.css version 0.0.1
*/
 
*,
*::after,
*::before{
  box-sizing:border-box;
}
 
:focus-visible{
  outline-offset:3px;
}
 
:where(html){
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
 
:where(html){
  line-height:1.5;
}
 
:where(html){
  scrollbar-gutter:stable;
}
 
:where(h1){
  font-size:2em;
  margin-block:0.67em;
}
 
:where(abbr[title]){
  cursor:help;
  text-decoration-line:underline;
  text-decoration-style:dotted;
}
 
@media(forced-colors:active){
  mark{
    color:HighlightText;
    background-color:Highlight;
  }
}
 
:where(del,ins,s)::before,
:where(del,ins,s)::after
{
  clip-path:inset(100%);
  clip:rect(1px,1px,1px,1px);
  height:1px;
  width:1px;
  overflow:hidden;
  position:absolute;
  white-space:nowrap;
  content:"test"
}
:where(s)::before{
  content:"stricken text start ";
}
:where(s)::after{
  content:" stricken text end";
}
:where(del)::before{
  content:"deletion start ";
}
:where(del)::after{
  content:" deletion end";
}
:where(ins)::before{
  content:"insertion start ";
  }
:where(ins)::after{
  content:" insertion end";
}
 
:where(audio,iframe,img,svg,video){
  max-block-size:100%;
  max-inline-size:100%;
}
 
:where(fieldset){
  min-inline-size:0;
}
 
:where(label):has(+:where(textarea,input,select)){
  display:block;
}
 
:where(textarea:not([rows])){
  min-block-size:6em;
}
 
:where(button,input,select,textarea){
  font-family:inherit;
  font-size:inherit;
}
 
:where([type="search"]){
  -webkit-appearance:textfield;
}
 
/* iOS only */
@supports(-webkit-touch-callout:none){
  :where([type="search"]){
    border:1pxsolid-apple-system-secondary-label;
    background-color:canvas;
  }
}
 
:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(
    :placeholder-shown
  ){
  direction:ltr;
}
 
:where(table){
  border-collapse:collapse;
  border:1pxsolid;
}
 
:where(th,td){
  border:1pxsolid;
  padding:0.25em0.5em;
}
 
:where(dialog)::backdrop{
  background:oklch(0%00/0.3);
}
 
:where(dialog),
:where(dialog)::backdrop{
  opacity:0;
  transition:opacity300msease-out,display300msallow-discrete,
    overlay300msallow-discrete;
}
 
:where(dialog[open]),
:where(dialog[open])::backdrop{
  opacity:1;
}
 
@starting-style{
  :where(dialog[open]),
  :where(dialog[open])::backdrop{
    opacity:0;
  }
}
 
[hidden]:not([hidden="until-found"]){
  display:none!important;
}

uaplus.css v.0.0.1(2025/4/10)

:where()や新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。

uaplus.cssの中身（コメント付き）

GitHubにコメント付きがあったので、意訳してみました。

uaplus.css
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
227
228
229
230
231
232
233
234
235
236
237
/**
* uaplus.css version 0.0.1
*/
 
/**
* 異なるボックスモデル
* ボックスモデルは従来のものを使用します。このモデルは要素のpaddingとborderは指定されて幅と高さの内側に描画され、外側には描画されません。
* そのため<code>inline-size</code>や<code>block-size</code>のようなプロパティで相対単位と絶対単位を組み合わせることが簡単になります。
*/
*,
*::after,
*::before{
  box-sizing:border-box;
}
 
/**
* フォーカススタイルを改善する
* コンテンツとフォーカス時のアウトラインの間にスペースを追加します。
*/
:focus-visible{
  outline-offset:3px;
}
 
/**
* テキストのサイズ調整を無効にする
* スマホに最適化されていないWebサイトでの読みやすさを改善するために、モバイルSafariなどのブラウザはWebサイトを縦から横に切り替えたときにデフォルトのフォントサイズを大きくします。最適化されたWebサイトではどの動作を望んでいません。
*/
:where(html){
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
 
/**
* 行間を広げる
* 長い段落は行間を広くすると読みやすくなります。
*/
:where(html){
  line-height:1.5;
}
 
/**
* スクロールバーのガターを追加する
* 長いページから短いページに切り替える際に、ページがジャンプするのを防ぎます。
*/
:where(html){
  scrollbar-gutter:stable;
}
 
/**
* セクショニングコンテンツ内にあるh1要素のUAスタイルを削除します。
* sectionやarticleなどでh1要素をネストしてもセマンティックには影響しないため、見出しのスタイルには影響しません。
*/
:where(h1){
  font-size:2em;
  margin-block:0.67em;
}
 
/**
* title付きの略語を改善する
* title付きのabbr要素はブラウザのサポートに一貫性がなく、一部のユーザーにしかアクセシブルでないため、アクセシビリティの観点からあまり役に立ちません。それでも一般的にはよく使用されています。
* このルールは、すべてのブラウザで略語に点線の下線を表示し（Safariにはバグがあります）、カーソルを変更します。
*/
:where(abbr[title]){
  cursor:help;
  text-decoration-line:underline;
  text-decoration-style:dotted;
}
 
/**
* 強制カラーモード（forced-colors）でmark要素を最適化する
* forced-colorsがacritveの強制カラーモード時はmark要素のカラーが変化しないため、問題が発生する可能性があります。代わりにシステムカラーを使用します。
*/
@media(forced-colors:active){
  mark{
    color:HighlightText;
    background-color:Highlight;
  }
}
 
/**
* スクリーンリーダーにdel, ins, sを伝えます
* 「deleteion」をアナウンスするNVDA (2024.4.2)を除いて、一般的なスクリーンリーダーは<s>要素をアナウンスしません。macOSとiOSのVoice OverとNarratorは<ins>と<del>をアナウンスしません。通常、スクリーンリーダーがテキストレベルのセマンティックをアナウンスしないことは許容範囲ですが、デベロッパーが<s>のような要素がセマンティックを伝えない可能性があることを知らずに使用することはよくある問題です。
* 取り消し・挿入・削除されたコンテンツの開始と終了を疑似要素で伝えます。英語以外の言語の場合は、翻訳して伝える必要があります。たとえば日本語だと、:lang(ja) :where(s::before) { content: "取り消し線付きテキストの開始"; }となります。
*/
:where(del,ins,s)::before,
:where(del,ins,s)::after
{
  clip-path:inset(100%);
  clip:rect(1px,1px,1px,1px);
  height:1px;
  width:1px;
  overflow:hidden;
  position:absolute;
  white-space:nowrap;
  content:"test"
}
:where(s)::before{
  content:"stricken text start ";
}
:where(s)::after{
  content:" stricken text end";
}
:where(del)::before{
  content:"deletion start ";
}
:where(del)::after{
  content:" deletion end";
}
:where(ins)::before{
  content:"insertion start ";
  }
:where(ins)::after{
  content:" insertion end";
}
 
/**
* 埋め込みコンテンツによるオーバーフローを回避する
* 埋め込みコンテンツ（音声、動画、画像など）がコンテナからはみ出さないようにします。
*/
:where(audio,iframe,img,svg,video){
  max-block-size:100%;
  max-inline-size:100%;
}
 
/**
* fieldsetによるオーバーフローを防止する
* デフォルトのmin-inline-size: min-contentをリセットして、子要素によるfieldsetの拡張を防止します。
*/
:where(fieldset){
  min-inline-size:0;
}
 
/**
* ラベルをブロック要素にする
* input, select, textareaのlabel要素をブロック要素にします。
*/
:where(label):has(+:where(textarea,input,select)){
  display:block;
}
 
/**
* textareaのブロックサイズを大きくする
* テキストエリアのデフォルトの高さは小さいので、少し大きくします。
*/
:where(textarea:not([rows])){
  min-block-size:6em;
}
 
/**
* フォーム要素のフォントスタイルを継承する
* button, input, select, textareaのfont-familyとfont-sizeは、ページの他の部分と同じにします。
*/
:where(button,input,select,textarea){
  font-family:inherit;
  font-size:inherit;
}
 
/**
* 検索入力のスタイルを正規化する
* macOSおよびiOSの検索入力の角丸を削除し、背景色を正規化します。
*/
:where([type="search"]){
  -webkit-appearance:textfield;
}
 
/* iOS only */
@supports(-webkit-touch-callout:none){
  :where([type="search"]){
    border:1pxsolid-apple-system-secondary-label;
    background-color:canvas;
  }
}
 
/**
* 一部の入力欄で方向を維持する
* 右から左に記述する言語では一部の入力欄は左揃えのままにする必要がありますが、プレースホルダは右揃えにする必要があるため、値が空でない場合のみに限ります。
*/
:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(
    :placeholder-shown
  ){
  direction:ltr;
}
 
/**
* 表のスタイルを改善する
* デフォルトのスタイル設定では表が見づらいため、paddingと折り返し境界線を追加します。
*/
:where(table){
  border-collapse:collapse;
  border:1pxsolid;
}
 
:where(th,td){
  border:1pxsolid;
  padding:0.25em0.5em;
}
 
/**
* ダイアログのフェードイン
* ダイアログ要素と背景にフェードインとフェードアウトのトランジションを追加します。
*/
:where(dialog)::backdrop{
  background:oklch(0%00/0.3);
}
 
:where(dialog),
:where(dialog)::backdrop{
  opacity:0;
  transition:opacity300msease-out,display300msallow-discrete,
    overlay300msallow-discrete;
}
 
:where(dialog[open]),
:where(dialog[open])::backdrop{
  opacity:1;
}
 
@starting-style{
  :where(dialog[open]),
  :where(dialog[open])::backdrop{
    opacity:0;
  }
}
 
/**
* [hidden]の詳細度を向上させる
* [hidden]属性を持つ要素が誤って非表示解除されにくくなり、同時に見つかるまでの機能が維持されます。
*/
[hidden]:not([hidden="until-found"]){
  display:none!important;
}

sponsors

Related Posts

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp