そこに多くの隠し要素法は、プロジェクトの実際のニーズに応じて最も適切な選択をするために時間を使用します。今日は、この分野における関連知識について学ぶために一緒にされています。
1.不透明度
.hide-opacity {
opacity: 0;
}
复制代码以下のチャートによってGIFは、我々は、と結論付けることができますopacity隠された要素は次の特性があります。
- ただ、まだ視覚的、隠し要素を非表示スペースを占有し、他の要素のレイアウトに影響を与えます
- ユーザーとの対話に応じることはまだでき
- まだ介して取得することができますDOM要素は、DOMのイベントに応答することができます
- 自分の子供や孫はあなたが要素をリセットしても
opacity: 1表示することができません - 要素とそのすべての内容は、スクリーン・リーダー・ソフトウェアを読み込まれます（テストしていません）
2.可視性
.hide-visibility {
visibility: hidden;
}
复制代码gifのアクションフィギュアに従うことにより、私たちは同じことを結論付けることができますvisibility隠された素子特性：
- 隠し要素は、さらに他の要素のレイアウトに影響を与える、スペースを占有しています
- 任意のユーザーとの対話に応答しません
- まだ介して取得することができますDOM要素は、DOMのイベントに応答することはできません
- 再配置することができる子孫要素を
visibility: visible表示します - スクリーンリーダーソフトウェアの要素も非表示になります（テストしていません）
3.表示
それは本当の意味での隠し要素です。
.hide-display {
display: none;
}
复制代码gifのアクションフィギュアに従うことにより、我々は、と結論付けることができますdisplay: none隠された素子特性：
- 本当の意味での隠し要素は、任意のスペースを占有しません。
- ユーザーは、自分と直接対話することはできません
- それでもDOMを通じて要素を取得することができます
- 自分の子供や孫はあなたが要素をリセットしても
display: block表示することができません - スクリーンリーダーは、要素の内容を読み取ることができません（テストしていません）
transitionアニメーションは失敗します
4.隠されました
HTML5の新しいhiddenプロパティは、直接要素を非表示にすることができます。
<div hidden>
我是被隐藏的元素
</div>
复制代码特徴：
display安定したパフォーマンス。
5.位置
.hide-position {
position: absolute;
top: -9999px;
left: -9999px;
}
复制代码特徴：
- 実際に画面の表示領域外に表示、視覚的に隠す、スペースを取りませんが、他の要素のレイアウトに影響を与えることはありません。
- ユーザーは、自分と直接対話することはできません
- コンテンツ要素は、画面読み取りソフトウェアが読みすることができます（テストしていません）
- それでもDOMを通じて要素を取得することができます
- その子孫要素がで表示することはできませんに対応する属性を再設定します
6.クリップパス
達成するための要素を切断することによって隠されました。
.hide-clip {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
复制代码特徴：
- まだ、スペースを占有し、他の要素のレイアウトに影響を与える視覚的、隠された要素を非表示にします
- ユーザーは、自分と直接対話することはできません
- コンテンツ要素は、画面読み取りソフトウェアが読みすることができます（テストしていません）
- それでもDOMを通じて要素を取得することができます
- その子孫要素がで表示することはできませんに対応する属性を再設定します
7.オーバーフロー
要素の幅と高さを提供することによって0隠された要素を。
.hide-overflow {
width: 0;
height: 0;
overflow: hidden;
}
复制代码追加する必要がありoverflow: hiddenそうでない場合は自分の子供や孫はまだ要素を表示することができ、次のアクションフィギュアを説明することができます。
特徴：
- 視覚的に隠す、隠された要素は任意のスペースを占有しない、それは他の要素のレイアウトに影響を与えることはありません。
- ユーザーは、自分と直接対話することはできません
- コンテンツ要素は、画面読み取りソフトウェアが読みすることができます（テストしていません）
- それでもDOMを通じて要素を取得することができます
- その子孫要素がで表示することはできませんに対応する属性を再設定します
8.変換
.hide-transform {
transform: translate(-9999px, -9999px);
}
复制代码若しくは
.hide-transform {
transform: scale(0);
}
复制代码特徴：
- まだ、スペースを占有し、他の要素のレイアウトに影響を与える視覚的、隠された要素を非表示にします
- ユーザーは、自分と直接対話することはできません
- コンテンツ要素は、画面読み取りソフトウェアが読みすることができます（テストしていません）
- それでもDOMを通じて要素を取得することができます
- その子孫要素がで表示することはできませんに対応する属性を再設定します
他の
それはプレーンテキストで隠されている場合は、設定することができます
.hide-text {
text-indent: -9999px;
}
复制代码若しくは
.hide-text {
font-size: 0;
}
复制代码もう一つは、无障碍设计规范内側：
<div aria-hidden="true"></div>
复制代码違い
実際には8つの簡単な方法隠し要素、上記のリスト、私たちの視覚効果を与える、これらの方法では、（私たちが隠れて呼んでいるもの）の要素を非表示にすることができます。しかし、画面は、画面上の見えない要素（隠し要素）としてのみ出力機構、ではない（スクリーンリーダーはに依存しているため、そのうちのいくつかは、まだ画面読み上げソフトウェアから読み出すことができるアクセシビリティツリー詳しく説明します）。それらの間で明確にするために、我々は3つのに分類されます。
- 完全に隠されました
- 視覚的に隠します
- セマンティック隠し
次のように隠された3つのタイプの結論します：
| 可視性の状態 | 画面で | アクセシビリティツリー（画面読み上げソフトなど） |
|---|---|---|
| 完全に隠されました | 隠します | 隠します |
| 視覚的に隠します | 隠します | 目に見えます |
| セマンティック隠し | 目に見えます | 隠します |
完全に隠されました
上記の8つの方法については、それは完全にちょうどこれらの3の下に隠すことができます。
- 表示：なし
- 可視性：隠されました
- 新しいHTML5隠し属性
視覚的に隠します
- 不透明度
- ポジション
- 変換
- クリップパス
- オーバーフロー
セマンティック隠し
- アリア - 隠された=「true」を
その他の違い
| 隠す方法 | 元の空間を占有 | ユーザーとの直接的な相互作用 | DOMイベントに直接応答 |
|---|---|---|---|
| 不透明度 | それはあります | それはあります | それはあります |
| 可視 | それはあります | ノー | ノー |
| 表示 | ノー | ノー | ノー |
| 隠されました | ノー | ノー | ノー |
| ポジション | ノー | ノー | ノー |
| クリップパス | それはあります | ノー | ノー |
| オーバーフロー | ノー | ノー | ノー |
| 変換 | それはあります | ノー | ノー |
遂に
読書のためのおかげで、私はあなたの助けを願っています。原因私の限られたレベルに、不適切な紙の場所がある場合には非常に感謝し、私を修正してください。
注意
私は公共の数みんなの注目を歓迎前端帮帮忙一緒に学習し、一般的な進歩を交換して、。
参考：