🌟 CSS (overflow:hidden VS display:none)
overflow:hidden VS display:none
cssコンテンツ領域を隠す方法
1. overflow: hidden
2. display: none
3. visibility: hidden
きほんどうさ
1. overflow: hidden
コンテンツを要素サイズに切り取ります.親要素の範囲外の子要素の一部は表示されません.
可視性:hiddenが元の空間を保つことを知っていれば、内容だけを隠すことができます!(画面上の領域が完全に削除されたように見えるdisplay:noneとUIは全く異なる)
2. display : none
画面上の任意の領域を占有することなく、完全に削除されるようにします.スペースの削除
3. visibility: hidden
この要素は表示されませんが、画面上で領域を占めています.
overflow:hidden VS display:none
display:none,visibility:hidden(国内のスクリーンリーダーは可読ですが、海外のスクリーンリーダーは可読ではありません)スクリーンリーダーとして読めないのでアクセス性は良いです.❌
オーバーフロー:hiddenはdisplay:none、visibility:hiddenよりもアクセスしやすいです.スクリーンリーダーはhiddenを読み取ることができるからです.👍
✅ NAVER
position: Absolute
って何ですか?
ページレイアウトにスペースを割り当てることなく、通常のドキュメントフローから要素を削除します.最も近い位置の祖先要素に対して
位置相対配置、オーバーフロー:hiddenとして非表示.
✅ Daum
ダウムも相対的に配置され、オーバーフロー:非表示になります.
✅추가
画像置換(Image Replacement,IR)技術は、Webアクセス性を遵守する方法の一つであり、画像を表示できないユーザに代替テキストを提供する方法である.このため、通常、imgラベルのalt属性に画像の代替テキストを入力します.overflow:hidden
が最適な方法のようです.
🧡 naver 스타일
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
🧡 daum 스타일
.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
Reference
この問題について(🌟 CSS (overflow:hidden VS display:none)), 我々は、より多くの情報をここで見つけました https://velog.io/@skh9797/CSS-overflowhidden-VS-displaynoneテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol