css-scrollbars-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Scrollbars Styling Module Level 1 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<style>
#ex-parts {
	position: relative;
	height: 10em;
	background-repeat: no-repeat;
	background-size: contain;
	background-clip: padding-box;
	background-image: url("data:image/webp;base64,UklGRgABAABXRUJQVlA4IPQAAACQBgCdASoPAIEAPpE+mUglo6KhJy2wsBIJaQDPa3xARInCazfbZPNkMvfsOQoxCCG/4Aplqz+UUDr57NZYAP7yfv/VHQ99Rku784DE11EU98j5YZfhSNPox5wa/eKfr4trpM5Oi36Qyi+XhdhHVYE0/rRKArBDfb/HsqJ8/05A7zEUDORJjYPwZAnQfh9x7sjmXrtYdAvwGbvBd138TdHgJ3xAIq15ffOCKAlQZF6qKNGWBEG3FDLPso24yAZGCfFDmT96vBsLCg1/jU7ssBtkPznICDjJhWhTIvWI7f6+SzDec1XJYRGW3fA2gmJ6BVnhs4AA");
}

#ex-parts > div {
	position: absolute;
	left: 2em;
}
</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand,
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	let context_prop = '';

	return this.html.replace(
		/%[\w~一-鿆]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'p':
	if( indicator === '@') {
		context_prop = `#valdef-${key}-`;
	}
	break;
case 'pe': 
	text = `::${key}`;
	break;
case 'vt':
	text = `&lt;${key}&gt;`;
	href = context_prop + key;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'v':
	href = context_prop + key;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'issue':
	text = `課題 #${key}`;
	href = `~CSSissue/${key}`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:CSS Scrollbars Styling Module Level 1
spec_date:2024-09-13
trans_update:2024-09-14
source_checked:210709
page_state_key:CSS
original_url:https://drafts.csswg.org/css-scrollbars-1/
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:css-ux,css
conformance:css
copyright:2024,permissive
trans_1st_pub:2018-10-30

●●class_map
p:property
css:css
e:element
pe:pseudo
v:value
v1:value
t:type
vt:type

●●tag_map
p:code
t:var
vt:var
pe:code
css:code
e:code
v:code
v1:code
m:code
c:code
em:em

●●original_id_map

●●mdn_urls
propdef-scrollbar-color:CSS/scrollbar-color
propdef-scrollbar-width:CSS/scrollbar-width

●●link_map

	●p
p.scrollbar-color:#propdef-scrollbar-color
p.scrollbar-width:#propdef-scrollbar-width
p.color-scheme:~CSSCOLORADJUST#propdef-color-scheme

v1.auto:#valdef-scrollbar-color-auto
	v.auto:#valdef-scrollbar-color-auto
	v.auto:#valdef-scrollbar-width-auto
	v.thin:#valdef-scrollbar-width-thin
	v.none:#valdef-scrollbar-width-none
	vt.color:#valdef-scrollbar-color-color

p.overflow:~CSSOVERFLOW3#propdef-overflow

t.color:~CSSCOLOR#typedef-color

e.body:~HEsections#the-body-element

	●用語
筋:#track
ツマミ:#thumb
~button:#buttons

	●用語（CSS
算出d値:~CASCADE#computed-value

算出d色:~CSSCOLOR#computed-color

~scroll容器:~CSSOVERFLOW3#scroll-container
上層~scrollbar:~CSSOVERFLOW3#overlay-scrollbars

利用者~stylesheet:~CASCADE#cascade-origin-user

根~要素:~CSSDISP#root-element

離散的:~WANIM#discrete

疑似要素:~SELECTORS4#pseudo-element

	●用語（外部

●●words_table1


●●words_table

	●UI
contrast::::コントラスト
	~contrast用の:contrasting
hover:
ツマミ:thumb::つまみ
筋:track::~::トラック
固定-:fix::~
隠され:hideされ:~
隠す:hideする:~
scrollwheel::::スクロールホイール
wheel::::ホイール
track-pad::::トラックパッド
不快:discomfort:~
切詰めら:crampさ:切り詰めら
美観:aesthetic:~
	もっぱら美観のために:over aesthetic considerations
UX:
component::::コンポーネント
上層:overlay::~::オーバーレイ
	~~上層:on top of
	~~上層:over
touch::::タッチ
tap::::タップ
手指:finger:指
滑らす:slideする::~::スライドする
fade::::フェード
	滑らす／~fadeする:fading or sliding in/out of

	~scroll能:scrollability
	~scrollしている:scrolling
	環境設定において:configuration option/setting
	利用者が直に操作する以外の手段:other means instead of direct user manipulation
	十分:enough
	足りて:sufficient
	足るもの:sufficient
	足らなくなる:yield insufficient
	馴染み易さ:familiarity
	~UI:interface
	利用-能:usability
	利用-不能:unusable
	部品:piece
	動かせる:moving
	〜へ~scrollする:scroll -up/-down/ left right
	最も上端にあり，内容の先頭に~scrollされ:scrollar is all the way to the top

	●呈示
幅:width::~
形状:shape::~
色付ける:colorする::~
色付けら:colorさ::~
色付け:coloring::~
太さ:thickness::~
	~~太さ:wide
	~~太めな:wide
	より~~太い:wider
	~~太く:wider
	~~太く-:enlarge
	~~細く:narrower
	小さな:small
	より小さい:smaller
細い:thinな::~
細く:thinに::~
	より細い:thinner
	細い見かけの:thin-looking
	極細:tiny
明な:lightな:明るい
	より明な:lighter
暗な:darkな:暗い
	より暗な:darker
外形線:outline::~
縦:vertical:~
横:horizontal:~
強調:highlight:~
影:shadow:~
質感:texture:~
浮動-:float::~
部位:part:~
	各~部位:parts
描画n:rendition::描画::レンディション
design::::デザイン
gradient:
ベタ:solid:~
質素:featureless:~
色調:tint:~
濃淡:shade:~
	濃淡が均一:single shade of
色相:hue:~
光度:luminosity:~
輝き:glow:~
彩度:saturation:~
	とは彩度が多少異なる色:more or less saturated variant
刻目:notch:刻み目
矩形:rectangle:~
塗る:paintする:~
描く:drawする:~
一様:uniform:~
背後:behind:~
幾何:geometry:~

	上向き:upward
	下向き:downward
	三角:triangle
	灰色:gray
	水色:blue
	ほのかに:subtle
	真中:in the middle
	居座る:sit
	両脇:flanked
	丸まった:rounded

	●CSS
	の~style:styling
	名前を付与した:named

	●仕様
変種:variant:~
発展-:evolve:~
原型案:prototyping:~
質問票:questionnaire:~
質問:question:~
回答:answer:~
達成基準:success criterion:~
	達成基準:SC
精緻:fine:~
完璧:perfect:~
欠如:lack:~
toolkit:
控える:refrainする:~
無視r:disregard:無視することに
proprietary::::プロプライエタリ
切替えた:switchした:切り替えた
策:strategy:~
手助け:facilitate:~
模式図:anatomy:~
裁量:discretion:~
利点:advantage:~

	必要性:needs
	必要としている:needs
	相互運用能:interop
	より適する:fit better
	より適する:better suit
	-:describe
	謝意を:thanks to
	選んだ:choose
	選ぶ:choose
	~~選択:choice
	~~追加:more
	いずれにせよ:nonetheless
	〜不能になる:prevent 〜 from being able to
	~~調整:tune
	支持を受けて:in favor of
	その引き換えに:at the expense of
	そそるものに:tempting
	誤ち:mistake
	得る:get
	~~条項:provision
	~~供給:provision
	何も見つかっていない:no 〜 have been identified
	~~最終的な~~決定権を握る:ultimately 〜 have the last word
	傾向に:tend
	念頭に置く:mindful
	好ましい:preferable
	~~認識:acknowledge
	事実:fact
	勧告候補:CR
	^en:boilerplate
	と称される:refered to as
	だとしても:nevertheless
	必ずしもそうなるとは:will necessarily be the case
	によっては:different
	年代初頭の:early XXXs
	（例：:<span class="non-normative">…family of…</span>
	かまわない:free to
	常に〜ようにする:anyway
	様々な〜組み合わせて:by any of a variety of
	まるごと:altogether
	事実:fact
	できるようにする:let
	文脈に応じた:contextual

	●未分類
選択-:select::~
	設定し直す:reset
	画像:PNG
WebKit:
	~WebKit:Webkit
配列法:arrangement:~

	主な:main
	:thereof
	沿って:top of
	以下にする:no more than
	対する:against
	指す:refer
	ごく:very
	の周り:around
	〜周りの:around
	各部:pieces
	-:previous
	こともある:sometimes
	多過ぎる:too much
	〜から〜にかけて:going

●●images
＠css-scrollbars/
	parts｜height:129px;｜｜.svg
non-flat-bar｜height:17px;｜｜.webp
flat-bar｜height:15px;｜｜.webp


●●ref_normative

[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-COLOR-5]
    Chris Lilley; et al. ＜CSS Color Module Level 5＞. URL: https://drafts.csswg.org/css-color-5/
[CSS-COLOR-ADJUST-1]
    Elika Etemad; et al. ＜CSS Color Adjustment Module Level 1＞. URL: https://drafts.csswg.org/css-color-adjust-1/
[CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. ＜CSS Overflow Module Level 3＞. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-VALUES-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/
[WEB-ANIMATIONS-1]
    Brian Birtles; et al. ＜Web Animations＞. URL: https://drafts.csswg.org/web-animations-1/

●●ref_informative

[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[WCAG21]
    Michael Cooper; et al. ＜Web Content Accessibility Guidelines (WCAG) 2.1＞. URL: https://w3c.github.io/wcag/guidelines/22/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Scrollbars Styling Module Level 1</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-scrollbars-1/
公表履歴
	https://www.w3.org/standards/history/css-scrollbars-1/
実装報告
	https://wpt.fyi/results/css/css-scrollbars?label=experimental&amp;label=master&amp;aligned
フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-scrollbars-1">CSSWG Issues Repository</a>
編集
	<a href="http://tantek.com/contact">Tantek Çelik</a> (Mozilla)
	<a href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (Microsoft)
	<a href="https://florian.rivoal.net/">Florian Rivoal</a> (Invited Expert)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-scrollbars-1/Overview.bs">GitHub Editor</a>
テスト一式
    https://wpt.fyi/results/css/css-scrollbars/
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-scrollbars-1

</script>

</head>
<body>

<header>
	<hgroup>
<h1>CSS Scrollbars Styling Module Level 1</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>
	<section id="abstract">
◎要約

<p>
この~CSS~moduleは、
~scrollbarの視覚的な~style法に波及する~propを定義して，
~scrollbarの［
色, 幅
］用の制御を導入する。
◎
This CSS module defines properties to influence the visual styling of scrollbars, introducing controls for their color and width.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、
編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
この~CSS~moduleは、
~scrollbarの視覚的な~style法に波及する~propを導入する
— 次が含まれる
⇒＃
色（ `scrollbar-color$p ）,
太さ（ `scrollbar-width$p ）
◎
This CSS module introduces properties to influence the visual styling of scrollbars, including their color (scrollbar-color) and thickness (scrollbar-width).
</p>

		<section id="scope">
<h3 title="Scope">1.1. 視野</h3>

<p>
この~moduleは、
特定的に~scrollbar~control自体を~styleするためにある
（この~level 1 では、
それらの色や幅など）
— ~layoutや内容を~scroll可能にするかどうかではなく。
【！All layout impacts and... → § 1.1.1】
◎
The CSS Scrollbars Module is specifically for styling scrollbar controls themselves, e.g. their color & width in Level 1, and not their layout nor whether any content is scrollable. All layout impacts and content scrollability are specified in the CSS Overflow Module.
</p>

<p>
~scrollbar周りの主な利用事例として，
この~moduleが解決しようと意図するものは、
次に挙げられる
— いずれも，`文書化された利用事例＠https://www.w3.org/wiki/Css-scrollbars#Use-cases$に基づく：
◎
Based on documented use-cases, there are three main use-cases around scrollbars this module intends to resolve:
</p>
<ul>
	<li>
~web~appの~UIに より適するよう，~scrollbarを色付ける。
◎
Coloring scrollbars to fit better into the UI of a web application.
</li>
	<li>
~scrollしている区画が小さいときに，より細い~scrollbarを利用する。
◎
Using a thinner scrollbar when the scrolling area is small.
</li>
	<li>
次を許容するために，~UAが供する~scrollbarを隠す
⇒
~scroll能の他の側面に影響することなく~scrollするための，
~custom【！interface】~UIの`~~供給＠#_custom-scrollbar-provision$。
◎
Hiding UA-provided scrollbars, to allow the provision of custom interfaces for scrolling without affecting other aspects of scrollability.
</li>
</ul>

			<section id="out-of-scope">
<h4 title="Out Of Scope">1.1.1. 視野から外れるもの</h4>

<p>
~scrollbarの［
内部~構造, ~layout, 環境設定
］および［
~scrollbarの色付け
］に対する精確な制御は、
この仕様の視野から外れる。
何故なら、［
~scrollbarの構造や~style付け規約は、
~platformごとに異なる
］ことに加え，［
~OSは、
自身による~scrollbarの設計を
— より良い利用者~体験を供するために —
継続的に発展させる
］ので。
例えば，［
~scrollbarを成す特定の部位を選択するための疑似要素
］も考慮されたが、
却下された。
この~levelの精緻な制御は，作者をそそるものになろうが、
様々な部位たちの配列法
— あるいは，それら各~部位が在るかどうか —
には依存できない。
多過ぎる制御を供することは，一部の~platformにおいては完璧な結果を得ることを作者に許容するが、
その引き換えに，他の~platformは非互換化される結果になる。
◎
The internal structure, layout, and configuration of scrollbars, as well as precise control over their coloring, is out of scope. This is because different platforms have different scrollbar structures and styling conventions, and operating systems continuously evolve their scrollbar designs to provide better user experience. Pseudo-elements for selecting specific parts of a scrollbar, for example, were considered and rejected. While this level of fine control would be tempting for authors, the arrangement of the various parts—or whether they’re even all present—cannot be depended on. Providing too much control would allow authors to get perfect results on some platforms, but at the expense of broken results on others.
</p>

<p class="note">注記：
~scrollbarに関係する［
`-webkit-^pe が接頭された疑似要素
］を~Webに公開したことは、
~CSS~WG, ~WebKit 両者による誤ちと見なされる。
次を見よ
⇒＃
`§ 標準でない特能との相互作用＠#color-compat$（§ ~scrollbarの色）,
`§ 標準でない特能との相互作用＠#width-compat$（§ ~scrollbarの太さ）
◎
Note: Exposing the scrollbar-related ::-webkit- prefixed pseudo-elements to the Web is considered a mistake by both the CSS Working Group and Webkit. Nevertheless, see § 2.1 Interaction with non-standard features and § 3.1 Interaction with non-standard features.
</p>

			</section>
		</section>
		<section id="values">
<h3 title="Values Definitions">1.2. 値~定義</h3>

<p class="trans-note">【
この節の内容は、
`~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。
】</p>

		</section>
	</section>
	<section id="scrollbar-color">
<h2 title="Scrollbar Colors: the scrollbar-color property">2. ~scrollbarの色： `scrollbar-color^p ~prop</h2>

◎名 `scrollbar-color@p
◎値 `auto$v | `color$vt{2}
◎初 `auto$v
◎適 `~scroll容器$
◎継 される
◎百 受容しない
◎算 指定された~keyword／ 2 個の`算出d色$
◎
specified keyword or two computed colors
◎順 文法に従う
◎ア 算出d値の型による
◎表終

<p>
この~propは、
要素の~scrollbarの色を設定することを，作者に許容する。
◎
This property allows the author to set colors of an element’s scrollbars.
</p>

<p>
~UAは、
`根~要素$に設定された `scrollbar-color^p 値を表示域に適用するモノトスル。
◎
UAs must apply the scrollbar-color value set on the root element to the viewport.
</p>

<p class="note">注記：
`overflow$p ~prop（および，その下位prop）と違って、
~HTML `body$e 要素に設定された `scrollbar-color^p 値は，表示域へは伝播されない。
◎
Note: Unlike overflow (and overflow-*) properties, scrollbar-color value set on the HTML body element are not propagated to the viewport.
</p>

<dl>
	<dt>`auto@v</dt>
	<dd>
~UAが~scrollbarの色を決定する。
~UAは，~platform規約に従うベキであるが、
`color-scheme$p や文脈に応じた他の情報に則って，
~pageに もっと適するよう色を調整してもヨイ。
◎
The user agent determines the colors of the scrollbar. It should follow platform conventions, but may adjust the colors in accordance with color-scheme or other contextual information to better suit the page.
</dd>

	<dt id="valdef-scrollbar-color-color" class="prod">`color$t{2}</dt>
	<dd>
~UAは、
当の要素の~scrollbarの描画を
— ［
1 個目／2 個目
］に指定された色を［
`ツマミ$／`筋$
］に適用して —
調整するベキである。
◎
The user agent should use the specified colors to adjust the rendering of the element’s scollbars, if any, applying the first color to the thumb of the scrollbar, and the second color to the track of the scrollbar.
</dd>
</dl>

<p>
`筋@
（ `track^en ）とは、
~scrollbarの背景を指す
— それは、
一般に，~scrollしている位置に関わらず固定される。
◎
The track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.
</p>

<p>
`ツマミ@
（ `thumb^en ）とは、
~scrollbar上の動かせる部位を指す
— それは、
通例的に，`筋$に沿って浮動する。
◎
The thumb refers to the moving part of the scrollbar, which usually floats on top of the track.
</p>

<p>
~scrollbarには、
`~button@
と称される追加的な~controlを含むものもある
— それらは，通例的には、
`筋$の~~上層にて，~scrollbarの上端や下端に居座る。
この仕様は、
~buttonが在る場合に，それが どう色付けられるかは定義しない。
◎
Some scrollbars also include additional controls, refered to as buttons, which usually sit at the top or bottom of the scrollbar on top of the track. This specification does not define whether and how buttons—​if present—​are colored.
</p>

<figure>
<x-diagram
	id="ex-parts"
	role="img"
	aria-describedby="_dgm-parts"
>
<div style="top:-0.2em;">← ~button</div>
<div style="top:2em;">← ツマミ</div>
<div style="top:6em;">← 筋</div>
<div style="bottom:-0.2em;">← ~button</div>
</x-diagram>

<p class="alt" hidden id="_dgm-parts">
ある縦~scrollbar
— 背景を成す筋の~~上層には、［
上端には “上へ~scrollする” ~button（上向き三角）,
下端には “下へ~scrollする” ~button（下向き三角）,
これらの合間に移動-可能なツマミ
］がある。
ツマミは、
最も上端にあり，内容の先頭に~scrollされたことを指示している。
これら各~部位には、
~labelが付与されている。
◎
A vertical scrollbar with a 'scroll-up' button at the top containing an upwards triangle, a 'scroll-down' button at the top containing an downwards triangle, a movable thumb indicating that the scrollar is all the way to the top, all over a background track. Each of these parts is labeled.
</p>

<figcaption>
ある~scrollbarの模式図
◎
Anatomy of a scrollbar
</figcaption></figure>

<p>
この~propが `auto$v 以外の値に算出される場合、
実装は，次のようにしてもヨイ
⇒
既定の~platform~UI描画よりも単純な~scrollbarを描画して、
それに則って色付ける。
◎
If this property computes to a value other than auto, implementations may render a simpler scrollbar than the default platform UI rendering, and color it accordingly.
</p>

<p class="note" id="_custom-scrollbar-provision">注記：
~UAは、
~nativeな~scrollbarの色を~custom化~不能なこともある
— たぶん，［
それらがどう構造されるか／
~nativeな~toolkitが与える制御の欠如
］に因り。
上の~~条項は、［
既定とは異なるように構築され，~UAがどう色付けるかを知る~scrollbar
］に置換することを~UAに許容する。
◎
Note: Sometimes the UA is unable to customize the colors of native scrollbars, perhaps due to how they’re structured, or to a lack of control given by the native toolkit. The provision above allows the UA to replace them with differently-constructed scrollbars, which it does know how to color.
</p>

<p class="note">注記：
~UAには、
~scrollbarを描画する際に指定された色を利用することが期待されるが、［
ツマミ~全体／筋~全体
］を［
質素なベタな単-色で塗る必要がある
］ことは含意しない。
指定された色は、
各~部位~用の色調として利用でき，［
強調, 影, 質感, 等々
］用に当の色よりも［
明な／暗な
］色を伴う濃淡を利用できる。
◎
Note: User Agents are expected to use the color in the rendering of the scrollbar, but that does not imply they need to paint the entire thumb or track with a single solid featureless color. The specified color can be used as a tint for part of the component, lighter or darker shades of the color can be used for highlights, shadows, texture…
</p>

<div class="example" id="non-flat">
<p>
次の~CSSが与えられたとする：
◎
↓ The following image represents a possible rendition of a scrollbar＼
given the following css:
</p>

<pre class="lang-css">
scrollbar-color: #8eb0dc #d2d4d6;
</pre>

<p>
~scrollbarの~designは、［
濃淡が均一な灰色, その~~上層に濃淡が均一な水色
］にされたものに限られない。
次の画像は、
アリな描画nを表現する。
`ツマミ$には、
上端から下端にかけて ほのかな濃淡を与える~gradientがあり，
より暗な［
外形線, 真中の刻目
］もある。
すべての色は，指定された水色の濃淡から導出されている。
明な灰色な`筋$には，より暗な外形線がある。
この~designには、
`~button$も含まれている。
◎
This specific design is not only that single shade of blue over that single shade of gray: the thumb has a subtle vertical gradient going from a lighter shade at the top to a slightly darker shade at the bottom, darker notches in the middle, as well as a darker outline, all derived from the specified shade of blue; the light gray track has a darker outline. This design also happens to include buttons.
</p>

<p class="alt" hidden id="_dgm-non-flat-bar">
横~scrollbarには、
明な灰色な筋（外形線も伴う）の~~上層に，水色な［
質感, 濃淡, 外形線
］を伴うツマミがあり，
両脇には “左へ~scrollする” ~button, “右へ~scrollする” ~buttonがある。
これは、
2000年代初頭の~scrollbar~designに共通的に見られたものである。
◎
A horizontal scrollbar with a textured, shaded and outlined blue thumb, over a light gray track which is itself outlined, and flanked by two 'scroll left' and 'scroll right' buttons, as was commonly seen in scrollbar designs of the early 2000s
</p>

<p>
だとしても、
作者は，必ずしもそうなるとは見做せない
— 次の画像に見られるとおり、
~platformや~UAによっては，`筋$も`ツマミ$もベタな色で描画されることもあるので。
◎
Nevertheless, authors cannot assume that this will necessarily be the case, as on a different platform or a different user agent the rendering could be a solid color thumb over a solid color track, as seen below.
</p>

<p class="alt" hidden id="_dgm-flat-bar">
横~scrollbarには、
明な灰色な筋, その~~上層に水色な丸まった矩形を成すツマミがあるが、
どちらも質素である。
これは、
2020年代初頭の~scrollbar~designに共通的に見られたものである。
◎
A horizontal scrollbar with a blue featureless rounded rectangle as a thumb over a featureless light gray track, as was commonly seen in scrollbar designs of the early 2020s
</p>
</div>

<p>
実装は、
下層の~platformに対応する部位が存在しない場合には，どの色も無視してヨイ。
◎
Implementations may ignore any of the colors if the corresponding part do not exist on the underlying platform.
</p>

<p>
作者は、［
`scrollbar-color$p ~propに特定の色~値を利用するとき
］は，［
指定した色どうしの~contrastが十分になる
］ことを確保するベキである。
~UAは、
`auto$v 値に対しては［
自身が利用する色どうしの~contrastが十分になる
］ことを確保するベキである。
`WCAG21$r `§ 達成基準 1.4.11 非~textの~contrast＠~TR/WCAG21/#non-text-contrast$
を見よ。
~UAは、
明示的な利用者-選好に基づいて，これらの~contrast要件を無視してもヨイ
（例えば、
利用者が環境設定において［
常に特定0の~scrollbar色を確保する／
~system既定の~scrollbarを利用する
］ことを選んだとき）。
◎
When using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them. For the auto value, UAs should ensure the colors they use have enough contrast. See WCAG 2.1 SC 1.4.11 Non-text Contrast [WCAG21]. UAs may ignore these contrast requirements based on explicit user preferences (for example, when users choose a configuration option/setting that always ensures a particular scrollbar color / use of system default scrollbars).
</p>

<p class="note">注記：
実装は、［
利用者による~scrollbarとのヤリトリ（例：~hoverする／作動化する）に対し，視覚的に応答する
］ために［
指定された色を適用する方法
］において，全部的な裁量を有する。
実装は、
その事実による利点をとって，指定された色に対し［
それを~scrollbarを成す どの部位に適用するか改める／
それより［
暗な／明な
］濃淡を利用する／
それとは彩度が多少異なる色を利用する
］こと等々もできる。
◎
Note: Implementations can take advantage of the fact that they have full discretion in how to apply the specified colors in order to visually respond to user interactions with the scrollbar (e.g. hovering or activating): they could alter which scrollbar parts the specified colors apply to, use darker or lighter shades of the specified colors, more or less saturated variants…
</p>

<p>
~UAは、
~scrollbarを`筋$を伴わずに表示する場合には，
`ツマミ$とその背後にあるものとの適度な~contrastを確保するモノトスル。
しかしながら，
作者が`筋$の色を全部的に透明になるよう設定した場合には、
~UAは，［
作者が供した~contrastは、
筋が不可視でも足るものである
］と見做してもヨイ。
◎
If the user agent displays the scrollbar without the track, they must ensure reasonable contrast between the thumb and what is behind it. However, if the author set the color of the track to be fully transparent, the user agent may assume that the author has provided for sufficient contrast even with an invisible track.
</p>

<p class="note">注記：
このことは、
概して，`上層~scrollbar$の事例において関連する
— ［
`筋$が決して表示されない~platform
］においても［
~mouse~wheelや~track-pad以外で~scrollbarとヤリトリされたときに限り，`筋$が表示される~platform
］においても。
このことは、［
進行中な~scroll演算は無く，~scrollbarはヤリトリされて`も^emいない間
］は~scrollbar全体が隠される事例
— `上層~scrollbar$は、
それに該当することが多い —
には，適用されない。
◎
Note: This is typically relevant in the case of overlay scrollbars, either on platforms where the track is never displayed, or on platforms where it is only displayed when the scrollbar is being interacted with but not when scrolling with the mouse wheel or the track-pad. This does not apply in cases where the entire scrollbar is hidden as is often the case with overlay scrollbars while no scroll operation is ongoing and when the scrollbar is not being interacted with either.
</p>

<div class="note">
<p>注記：
~UAは、［
~platform,
設計~~選択,
何が実用的な実装になるか
］に依存して，これを様々な手段を組み合わせて達成してもかまわない
— 次に挙げるものなど：
◎
Note: The user agent is free to achieve this by any of a variety of means, depending on the platform, on design choices, or on what is practical to implement, such as:
</p>
<ul>
	<li>
~contrastはすでに足りているものと決定できた場合には、
何もしない。
◎
Doing nothing if it can determine that contrast is already sufficient
</li>
	<li>
ツマミの［
~design／幾何
］により［
ツマミを成す何らかの部位は、
背後に何があるかに関わらず常に可視になる
］ことが確保される場合には、
何もしない
◎
Doing nothing if the design and geometry of the thumb ensures that some part of it will always be visible regardless of what is behind it
</li>
	<li>
`ツマミ$の周りに［
外形線／影／輝き
］を追加することにより~contrastを供する
（場合によっては、［
~contrast用の色として`筋$の色を利用して／
`ツマミ$の色に異なる濃淡を利用して
］）。
◎
Adding an outline, shadow, or glow around the thumb to provide contrast (possibly using the track color as the contrasting color, or possibly using a different shade of the thumb color)
</li>
	<li>
`ツマミ$の色が一様でなくなるよう，ツマミに何らかの［
質感／幾何
］を追加する。
◎
Adding some texture or geometry to the thumb so that it’s color isn’t uniform
</li>
	<li>
~contrastが足らなくなる所では、
常に`筋$を描くようにする。
◎
Drawing the track anyway in cases where not doing so yields insufficient contrast
</li>
	<li>
`ツマミ$の色を`筋$の色で置換する
— そうした方が良い~contrastを供するときには。
◎
Replacing the thumb color with the track color when that provides better contrast
</li>
	<li>
`ツマミ$に指定された色の色相を保全しつつ その光度を改める。
◎
Altering the luminosity of the specified thumb color while preserving its hue
</li>
	<li>
`ツマミ$に指定された色をまるごと無視rして，
自動的に決定される代替な色を利用する。
◎
Disregarding the specified thumb color altogether and use automatically determined alternative
</li>
</ul>
</div>

		<section id="color-compat">
<h3 title="Interaction with non-standard features">2.1. 標準でない特能との相互作用</h3>

<p>
［
要素／`疑似要素$
］の `scrollbar-color$p の`算出d値$が初期~値 `auto$v 以外をとる所では、
~UAは，~scrollbarの描画に波及する作者~用の代替な標準でない手段
（例： `webkit-scrollbar^pe 疑似要素など）
があっても それを無視するモノトスル。
◎
On any element or pseudo-element where the computed value of scrollbar-color is anything other than the initial auto value, user agents must ignore any alternative non-standard means for authors to influence the rendering of scrollbars, such as the ::webkit-scrollbar family of pseudo-elements.
</p>

		</section>
	</section>
	<section id="scrollbar-width">
<h2 title="Scrollbar Thickness: the scrollbar-width property">3. ~scrollbarの太さ： `scrollbar-width^p ~prop</h2>

◎名 `scrollbar-width@p
◎値 `auto$v | `thin$v | `none$v
◎初 `auto$v
◎適 `~scroll容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎
specified keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、［
要素の~scrollbarに欲される太さを指定する
］ことを，作者に許容する。
◎
This property allows the author to specify the desired thickness of an element’s scrollbars.
</p>

<div class="advisement">
<p>
この~propの首な目的は、［
自身の~pageの~scrollbar用に特定0の美観を選ぶこと
］を作者に許容することではなく、［
自身の~page内の ある種の［
小さな，あるいは切詰められた要素
］用には，小さい~scrollbarの方が望ましい
］ことを作者が指示できるようにすることにある。
◎
The primary purpose of this property is not to allow authors to choose a particular scrollbar aesthetic for their pages, but to let them indicate for certain small or cramped elements of their pages that a smaller scrollbar would be desirable.
</p>

<p>
~scrollbarは、
~pageとヤリトリするために本質的な~UIの仕組みである。
~OSは、
馴染み易さを通して利用-能を改善するため，
そのような~controlに一貫性を求める傾向にある
— 自身に特有な［
選好や必要性
］がある利用者は、［
~OS／~UA
］設定群を通して，~scrollbarを含む様々な~UI~componentの外観を調整できる。
◎
Scrollbars are a UI mechanism essential to interact with the page. Operating systems tend to want consistency in such controls to improve usability through familiarity, and users with specific preferences or needs can adjust the appearance of various UI components, including scrollbars, through OS or UA settings.
</p>

<p>
この~propの利用は，特定の~UX目標の~supportにおいて適切になるが、
さもなければ，作者は、
そのような利用者-選好を上書きしないよう利用を控えるべきである。
◎
While using this property in support of specific UX goals is appropriate, authors should otherwise refrain from overriding such user preferences.
</p>
</div>

<dl>
	<dt>`auto@v</dt>
	<dd>
実装は、
既定の~scrollbar横幅を利用するモノトスル。
◎
Implementations must use the default scrollbar width.
</dd>
	<dd class="note">注記：
ほとんどの~systemにおいては，これは、
伝統的な，いくぶん~~太めな~scrollbarに対応する。
しかしながら、
利用者は
— ［
~OS／~UA
］設定群を通して —
この既定が何に対応するか変更する能を持つこともある
— 場合によっては、
既定の~scrollbarを典型的なものより~~太くまたは~~細くするような。
◎
Note: On most systems, this corresponds to the traditional somewhat wide scrollbar. However, through OS or UA settings, users can have the ability to change what this default corresponds to, possibly making the default scrollbar wider or narrower than is typical.
</dd>

	<dt>`thin@v</dt>
	<dd>
実装は、
`auto$v より細い~scrollbarを利用するベキである。
これは、［
~platformにより供される~scrollbarの細い変種,
既定の~platform~scrollbarより細い~customな~scrollbar
］のどちらにもなり得る。
いずれにせよ、
~scrollbarは，十分に利用-可能な~~太さを保ち続けるモノトスル
（実装者は、
`WCAG21$r `§ 達成基準 2.5.5 ~target~size＠~TR/WCAG21/#target-size$
に諮るよう望むことになろう）。
◎
Implementations should use thinner scrollbars than auto. This may mean a thin variant of scrollbar provided by the platform, or a custom scrollbar thinner than the default platform scrollbar. The scrollbar must nonetheless remain wide enough to be usable. (Implementers may wish to consult WCAG 2.1 SC 2.5.5 Target Size. [WCAG21])
</dd>
	<dd class="note">注記：
~UAは、
~~細い~scrollbarの利用-能を確保するためとして，様々な策を利用できる。
一例として，`上層~scrollbar$の事例では、
利用者が~scrollbarとヤリトリする試みに呼応して，それを動的に~~太くできる。
~touch~screenを備える機器~上の~UAは、
視覚的に小さな~touch~targetとヤリトリするのを手助けするためとして，
手指による~tapをどう解釈するかも調整できる。
◎
Note: User agents can use various strategies to ensure the usability of narrow scrollbars. For instance, in the case of overlay scrollbars, they can dynamically enlarge the scrollbar in response to a user attempting to interact with it. User agents on devices with touch screens can also adjust how they interpret finger taps to facilitate interacting with visually small touch targets.
</dd>

	<dd>
~UAは、
この値を無視rして，
`auto$v として扱ってもヨイ
— 一例として、
利用者が何らかの［
~UA／~OS
］設定を通して，細い~scrollbarに対する不快を指示したとき
（~UAには、
そのような設定を供することが奨励される）。
◎
User agents may disregard this value and treat it as auto, for instance when the user has indicated discomfort for thin scrollbars through some UA or OS setting. (User agents are encouraged to provide such a setting.)
</dd>
	<dd class="note">注記：
一部の~platformは、
既定では［
それ以上は適度に細くできない，極細な~scrollbar
］しか備えない。
そのような事例では、
この値は `auto$v として挙動する。
◎
Note: Some platforms only have a tiny scrollbar by default which cannot be reasonably made thinner. In such cases, this value will behave as auto.
</dd>

	<dt>`none@v</dt>
	<dd>
実装は、
~scrollbarを表示しないモノトスル
— しかしながら、
他の手段による要素の~scroll能は影響されない。
◎
Implementations must not display any scrollbar, however the element’s scrollability by other means is not affected.
</dd>
	<dd class="advisement">
この値を利用すると、
~mouseのみの利用者は，~scroll不能になり得る。
作者は、
次を確保するベキである
⇒
~mouseのみの利用者が
— ~scrollwheelが無いときでも —
隠された内容に到達できる
◎
Using this value can prevent mouse-only users from being able to scroll. Authors should ensure that mouse-only users can still reach hidden content, even if they have no scrollwheel.
</dd>
	<dd class="advisement">
この値を利用する作者は、
次を供するベキである
⇒
［
もっと内容があるときは，~scrollすることがアリであること
］を視覚的に~hintするための［
代替／等価
］な何か
◎
Authors that use none should provide an alternative/equivalent visual hint that scrolling is possible and there is more content.
</dd>
	<dd class="note">注記：
利用者による直な操作では要素を~scrollできない
（~program的な手段でしか~scrollできない）
状況においては、
<code class="css">`scrollbar-width$p: `none$v</code>
ではなく
<code class="css">`overflow$p: `hidden^v</code>
の方が適切である。
◎
Note: For situations where an element is to be scrolled only by programmatic means, and not by direct user manipulation, overflow: hidden is appropriate, not scrollbar-width: none.
</dd>
</dl>

<div class="note">
<p>注記：
利用者は、
`thin$v ~styleによる
~scrollbarは利用-不能と見出したときは，
次の規則を自身の`利用者~stylesheet$に含めれる：
◎
Note: Users who find the thin style of scrollbars unusable can include the following rule in their user style sheet:
</p>

<pre class="lang-css">
* { scrollbar-width: auto !important; }
</pre>

<p>
これは、
すべての~scrollbarが
— 作者~styleに関わらず —
［
~OS／~UA
］設定群に従って~sizeされることを確保する。
◎
This will ensure that all scrollbars are sized as per OS and UA settings regardless of author styles.
</p>
</div>

<p>
`根~要素$に設定された `scrollbar-width$p の値は、
表示域に適用するモノトスル。
◎
UAs must apply the scrollbar-width value set on the root element to the viewport.
</p>

<p class="note">注記：
`overflow$p ~prop（および，その下位prop）と違って、
~HTML `body$e 要素に設定された `scrollbar-width^p 値は，表示域へは伝播されない。
◎
Note: Unlike the overflow property (and its longhands), a scrollbar-width value set on the HTML body element is not propagated to the viewport.
</p>

<p class="note">注記：
この仕様は、
~scrollbarの正確な位置や形状,
その~animation
（その~viewを［
滑らす／~fadeする
］など）
は，定義しない。
◎
Note: This specification does not define the exact position or shape of the scrollbar, or any animation thereof, such as fading or sliding in/out of view.
</p>

		<section id="width-compat">
<h3 title="Interaction with non-standard features">3.1. 標準でない特能との相互作用</h3>

<p>
［
要素／`疑似要素$
］の `scrollbar-width$p の`算出d値$が初期~値 `auto$v 以外をとる所では、
~UAは，~scrollbarの描画に波及する作者~用の代替な標準でない手段
（例： `webkit-scrollbar^pe 疑似要素など）
があっても それを無視するモノトスル。
◎
On any element or pseudo-element where the computed value of scrollbar-width is anything other than the initial auto value, user agents must ignore any alternative non-standard means for authors to influence the rendering of scrollbars, such as the ::webkit-scrollbar family of pseudo-elements.
</p>

		</section>
	</section>
	<section id="acknowledgments">
<h2 title="Appendix A. Acknowledgments">謝辞</h2>

◎非規範的

<p>
この仕様は、
次に挙げる方々による~feedbackと貢献がなければアリでなかった
— 彼らに感謝する：
◎
The CSS Working Group and the Editors of this specification would like to express our gratitude to the following people, as this specification would not have been possible without their feedback and contributions:＼
</p>

<div lang="en">
Chris Lilley, Emilio Cobos Álvarez, Eric Shepherd, Eric Willigers, fantasai, Greg Whitworth, jonjohnjohnson, L. David Baron, Luke Warlow, Oriol Brufau, Patrick H. Lauke, Rene Haas, Rick Byers, Simon Fraser, Tab Atkins Jr., Xidorn Quan.
</div>

<p>
［
利用事例, 原型案, 実装, ~feedback
］を寄せられた
<a lang="en" href="https://xanthir.com/">Tab Atkins</a>,
<a lang="en" href="https://www.upsuper.org/">Xidorn Quan</a>
両氏に謝意を。
~accessibilityの考査（ `3315$issue ）に貢献された
<a lang="en" href="https://www.splintered.co.uk">Patrick H. Lauke</a>
氏に謝意を。
◎
Thanks to the use-cases, prototyping, implementation, and feedback from Tab Atkins and Xidorn Quan. Thanks to accessibility review and contributions (#3315) from Patrick H. Lauke.
</p>

	</section>
	<section id="changes">
<h2 title="Appendix B. Changes">変更点</h2>

◎非規範的

<dl>
	<dt id="changes-since-2021-12-09">
`2021年 12月 9日 勧告候補＠~TR/2021/CR-css-scrollbars-1-20211209/$【！20211200】
からの変更点
◎
Changes since the 9 December 2021 Candidate Recommendation
</dt>
	<dd>
`scrollbar-width$p の~animation型を`離散的$に切替えた
— この~propがとる値は~keywordに限られる事実を反映するよう。
◎
Switched the Animation type of scrollbar-width to discrete, reflecting the fact that this property only takes keyword values.
</dd>

	<dt id="changes-since-2021-12-02">
`2021年 12月 2日 作業草案＠~TR/css-scrollbars-1/$
からの変更点
◎
Changes since the 2021-12-02 Working Draft
</dt>
	<dd>
勧告候補~用の `boilerplate^en 変更。
◎
Boilerplate changes for CR
</dd>

	<dt id="changes-since-2021-08-05">
`2021年 8月 5日 作業草案＠~TR/2021/WD-css-scrollbars-1-20210805/$
からの変更点
◎
Changes from the 2021-08-05 Working Draft
</dt>
	<dd>
~~細い~scrollbarの~accessibilityに関する要件を “ベキ” から “モノトスル” に切替えた。
（ `6675$issue ）
◎
Switched "should" to a "must" with regards to accessibility of narrow scrollbars. (see Issue 6675)
</dd>

	<dt id="changes-since-2018-09-25">
`2018年 9月 25日 最初の公な作業草案＠~TR/2018/WD-css-scrollbars-1-20180925/$
からの変更点：
◎
Changes from the 2018-09-25 First Public Working Draft
</dt>
	<dd>
`scrollbar-color$p 用の値 `light^v, `dark^v を除去した
— ［
値 `auto$v1 を `color-scheme$p や文脈に応じた他の情報に則って~~調整する
］ことを~UAに許容することへの支持を受けて。
（ `6438$issue ）
◎
#6538: removed light and dark values of scrollbar-color in favor of allowing the UA to tune auto in accordance with color-scheme or other contextual information.
</dd>
	<dd>
`scrollbar-color$p の算出d値を［
指定された~keyword／ 2 個の`算出d色$
］に変更した。
（ `3237$issue ）
◎
#3237: scrollbar-color computed value changed to: specified keyword or two computed colors
</dd>
	<dd>
視野を明確化した
— ~layoutや~scroll能ではなく，~scrollbar~control自体を~styleするものであるよう。
（ `4693$issue ）
◎
#4693: Clarified scope: styling scrollbar controls themselves, no layout or scrollability.
</dd>
	<dd>
［
`scrollbar-color$p,
`scrollbar-width$p
］に対する~accessibilityの考慮点を~~追加して更新した。
（ `3315$issue ）
◎
#3315: More and updated accessibility considerations for scrollbar-color and scrollbar-width.
</dd>
</dl>

	</section>
	<section id="security-privacy-considerations">
<h2 title="Appendix C. Security and Privacy">~security／~privacy</h2>

◎非規範的

		<section id="security-considerations">
<h3 title="Considerations for Security">~securityの考慮点</h3>

<p>
この仕様に特有な~securityに関する懸念はまだ何も見つかっていない。
◎
No specific concerns regarding security have been identified for this specification.
</p>

		</section>
		<section id="privacy-considerations">
<h3 title="Considerations for Privacy">~privacyの考慮点</h3>

<p>
この仕様に特有な~privacyに関する懸念はまだ何も見つかっていない。
◎
No specific concerns regarding privacy have been identified for this specification.
</p>

		</section>
		<section id="security-privacy-self-review">
<h3 title="Self-review questionnaire">自己-考査~質問票</h3>

<p>
`自己-考査~質問票による考慮する質問＠~SECQ#questions$に対する回答は
【この訳では、~~影響があるものだけ挙げる（他の質問に対する回答は “いいえ” 等）】：
◎
Per the Self-Review Questionnaire: Security and Privacy: Questions to Consider
</p>

<dl>
	<dt>
この仕様は、
~UAの~native~UIに対する何らかの制御を生成元に許容するか？
◎
Does this specification allow an origin some measure of control over a user agent’s native UI?
</dt>
	<dd>
許容する。
各種 `scrollbar-*^p ~propは、
~pageが［
~UAの~native~UIに備わる~scrollbar
］の色と幅を変更することを，可能化する
— 例えば、
次に挙げるものなどの
⇒＃
~pageの~UIwindow／
~pageに埋込まれ，~frame化された内容 ／
~page内にある，~overflowしていて~scrollbarを伴う要素
◎
Yes. The scrollbar-* properties enable the page to change the color and width of the scrollbar of the user agent’s native UI, e.g. scrollbars on the page’s window, on framed content embedded in the page, or on overflowing elements with scrollbars in the page.
</dd>
</dl>

		</section>
	</section>
	<section id="accessibility-considerations">
<h2 title="Considerations for accessibility">~accessibilityの考慮点</h2>

◎非規範的

<p>
`scrollbar-width$p ~propの定義に注記したとおり、
作者は，［
この~propを利用することによる，~accessibilityへの含意
］を念頭に置く必要がある。
~scrollbarは、
~UAの~UIを成す重要な部品である
— ~web~site作者が，その~sizeを もっぱら美観のために変更することは、
適切でない。
この~propが可用なのは、［
~web~pageの切詰められた区画においては、
細い~scrollbarの方が空間の利用が効率的になる
］ことを［
作者が指示したいと求める事例
］を~supportするためである。
しかしながら，そのようなものに対する~~最終的な~~決定権は、
利用者が
— 自身の~UAを通して —
~~握る必要がある。
◎
As noted in the definition of the property, authors need to be mindful of the accessibility implications of using scrollbar-width: thin. Scrollbars are a important piece of the user agent’s interface, and it is not appropriate for a web site author to change their size over aesthetic considerations. The property is available to support cases where the author wants to indicate that in a cramped area of the web page a thin scrollbar would be a more effective use of space. However, ultimately, the user, through their user agent, needs to have the last word on such things.
</p>

<p>
~scriptや~proprietaryな拡張を介して，~customな細い見かけの~scrollbarを築いている作者は、
そのような事例には，この~propを利用することが好ましい
— この~propは、
それを上書きする機会を利用者に与えるので。
◎
Using this property in such cases is preferable to authors building a custom thin-looking scrollbar in via script or proprietary extensions, because it does give the user the opportunity to override it.
</p>

<p>
`利用者~stylesheet$は、
そのような上書きを供する。
加えて，~UAには、［
細い~scrollbarを利用したくないと求めることを利用者が表出できるようにする
］ための設定を公開することが奨励される。
◎
User style sheets do provide such an override, and additionally, user agents are encouraged to expose a setting letting users express that they do not want thin scrollbars to be used.
</p>

<p>
~CSS~WGは、［
一部の利用者は、
典型的なものより~~太い~scrollbarを必要としている
］ことを~~認識している。
~OSや~UAは，利用者が選好を表出できるようにする手段を提供でき、
そのような事例では，~CSSは その~~選択を尊守することになる。
◎
The CSS Working Group also acknowledges the needs of some users to have scrollbars that are wider than is typical. Operating systems and user agents can offer a means to let users express that preference, and in such cases, CSS will honor that choice.
</p>

	</section>
</main></div>