teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2020/03/27 04:51

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,8 +1,8 @@
1
- かつて、 Netscape や Internet Explorer などの古いブラウザが `block-start`, `inline-start` にあたる箇所を**独自仕様**により切り取っていました。これに端を発して、切り取られる箇所へ要素を移動させることで、「視覚系ブラウザでは確認出来ず、スクリーンリーダーや検索エンジンにのみ認識可能なテキストを作る手法」が横行しました。
1
+ かつて、 Netscape や Internet Explorer などの古いブラウザが `block-start`, `inline-start` にあたる箇所を**独自仕様**により切り取っていました。これに端を発して、切り取られる領域へ要素を移動させることで、「視覚系ブラウザでは確認出来ず、スクリーンリーダーや検索エンジンにのみ認識可能なテキストを作る手法」が横行しました。
2
2
 
3
3
  そのような状況で両方向へのスクロールを許可した場合、この手法を用いている多くの Web サイトのレイアウトに大きな影響を与えてしまいます。そこで互換性を考慮し、 [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#scrolling-direction) では以下のようにスクロールコンテナの `block-start`, `inline-start` にあたる箇所の**オーバーフローした領域を切り取らなければならない**と決められました。簡単にいえば、 Lhankor_Mhy さんの回答にあるとおり、「実装上の問題が習慣化し事実上の仕様と化している」ということになります。
4
4
 
5
5
  > ### [§ 3.3. Scrolling Origin, Direction, and Restriction](https://www.w3.org/TR/css-overflow-3/#scrolling-direction)
6
6
  > The **initial scroll position**, that is, the initial position of the box’s scrollable overflow region with respect to its border box, prior to any user or programmatic scrolling that changes it, is dependent on the box’s writing mode, and is by default the block-start/inline-start edge of the box’s padding edge.
7
7
 
8
- > Due to Web-compatibility constraints, UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).
8
+ > Due to Web-compatibility constraints, UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box.