CSSで物事を隠すためのさまざまな方法を比較します

CSSを使用してコンテンツを隠すことは簡単で解決された問題であると思うでしょうが、複数のソリューションがあり、それぞれがユニークです。

開発者は最も一般的にディスプレイを使用します。ページ上のコンテンツを非表示にするものはありません。残念ながら、このコンテンツを隠すこのように、このコンテンツは読者を選別するために「アクセスできない」ようになったため、防弾ではありません。それを使用するのは魅力的ですが、特に何かが視覚的に隠されることを意図している場合、それに手を伸ばさないでください。

事実は、CSSに物事を「隠す」方法はたくさんあります。ここで各テクニックを確認し、どの使用といつ使用するかを決定するのに役立つ要約で物事を締めくくります。

テクニック間の違いを見つける方法

コンテンツを隠す方法の違いを確認するには、いくつかのメトリックを導入する必要があります。メソッドを比較するために使用するメトリック。私は、レイアウト、パフォーマンス、アクセシビリティに影響を与える4つの特定の領域に焦点を当てた質問をすることで、それを分解することにしました。

1. アクセシビリティ：隠されたコンテンツは、スクリーンリーダーによって読まれていますか？
2. ドキュメントフロー： 隠された要素はドキュメントレイアウトに影響しますか？
3. レンダリング：Hidden Elementのボックスモデルはレンダリングされますか？
4. イベントトリガー：要素はクリックまたはフォーカスを検出しますか？

基準が邪魔にならないようになったので、メソッドを比較しましょう。繰り返しますが、CSSに物事を隠すときに決定を下すための参照として使用できるように、すべてを最後にまとめます。

方法1：表示プロパティ

ディスプレイを使用してコンテンツを非表示にすることに注意して、この投稿を開始しました。そして、私たちが確立したように、それを使用して要素を非表示にすることは、要素がまったく生成されないことを意味します。それはdomにありますが、実際にレンダリングされることはありません。

要素はマークアップに表示されます。ページを検査すると、要素が表示される可能性があります。ボックスモデルは、すべての子供にも適用されるページに生成も表示もありません。

さらに、要素にイベントリスナー（クリックまたはホバリングなど）がある場合、それらはまったく登録しません。すでに説明したように、すべてのコンテンツはスクリーンリーダーによって無視されます。ここには、2つの可視ボタンとディスプレイ付きの隠しボタンがあります。なし。 3つのボタンにはクリックイベントがありますが、2つの可視ボタンのみがクリックをレンダリングして登録します。

ディスプレイは、画像リクエストの発射に影響を与える唯一のプロパティです。 Imageタグ（または親要素）に、インラインCSSまたはセレクターによる表示セットが表示されない場合、画像はダウンロードされます。一方、画像がバックグラウンドプロパティで適用されている場合、ダウンロードされません。

これは、HTMLドキュメントが解析され、タグに遭遇したときにパーサーがCSSを適用していないためです。一方、バックグラウンドプロパティを持つ要素に画像を適用すると、パーサーが画像が呼び出されるCSSを適用していないため、画像はダウンロードされません。この動作は、すべての最新のブラウザで一致しています。唯一の例外はIE 11で、どちらの場合も画像をダウンロードします。

方法2：可視性プロパティ

要素の可視性プロパティが非表示に設定されている場合、要素は「視覚的に非表示」です。 「視覚的に隠されている」ことは、表示されるものとよく似ています。これは、要素のボックスモデルが存在することを意味し、画面上のスペースを占有し続ける寸法がありますが、そこにないように見えます。

目に見えないマントを着ていると想像してください。あなたが人間の目に見えなくても、あなたは物理的にそこにいます。

しかし、それは「視覚的に隠されていない」と「表示されていない」の違いが終わりです。実際、可視性とディスプレイで隠された要素は、アクセシビリティとイベントトリガーの点で同じように動作します。目に見えない要素は、読者をスクリーニングするためにアクセスできず、最後の例とまったく同じデモで見られるように、イベントを登録しませんが、単にディスプレイを交換するだけです。

方法3：不透明なプロパティ

不透明なプロパティは、要素の視覚的側面にのみ影響します。要素の不透明度をゼロに設定すると、要素は完全に透明になります。繰り返しますが、それは視界によく似ています。隠されている場所には、目に見えない要素に見えないマントをドレープしていますが、それでも物理的に存在します。

言い換えれば、私たちが持っているのは、他の要素と同様に機能する中空の透明な要素であり、目に見えません。可視性の方法によく似ていますよね？違いは、完全に透明な要素がスクリーンリーダーがまだアクセスしやすく、次の例で表示されているように、クリックなどのイベントを登録できることです。

方法4：位置プロパティ

絶対的な位置決めで画面をオフスクリーンに押し込むことは、開発者がしばしば物事を隠すもう1つの方法です。上部と左を使用して、画面から遠く離れて要素をプッシュすることができ、それが見られることはありません。それは家の外にクッキーの瓶を隠すようなものであるので、子供（または多分！）がそれらを見つけることができません。

「絶対」はここでのキーワードです。位置を絶対に設定すると、要素がドキュメントフローから取り出されます。これは、DOMの自然な位置に遵守されなくなったと言う方法です。言い換えれば、ページはそのためのスペースを確保しません。これにより、要素が視覚的に要素をノックアウトし、1つがある場合は最も近い位置にある要素に配置します。

「隠された」要素をドキュメントフローから取り出し、-9999pxの値で最上部に向かって相殺することにより、絶対的な位置を活用します。

 。隠れた {
  位置：絶対;
  上：-9999px;
  左：-9999px;
}

非表示の要素にフォーカス可能なコンテンツが含まれている場合、ページはフォーカスのときに要素にスクロールし、突然のジャンプを作成します。

方法5：「視覚的に隠された」クラス

これまでのところ、ポジション方法は、CSSで物事を隠すためのアクセシビリティに優しい方法に最も近いものです。しかし、突然のページジャンプを引き起こすフォーカスコンテンツの問題はあまりありません。アクセス可能な隠れへの別のアプローチは、絶対的な位置、クリッププロパティ、隠されたオーバーフローを組み合わせています。スコット・オハラは2017年にそれをブログに戻しました。

 .visyally-hidden：not（：focus）：not（：active）{
  クリップ：rect（0 0 0 0）; 
  クリップパス：挿入図（50％）;
  高さ：1px;
  オーバーフロー：隠し;
  位置：絶対;
  ホワイトスペース：nowrap; 
  幅：1px;
}

それを分解しましょう。

ドキュメントフローから要素を削除する必要があります。これを行う最良の方法は、位置：Absoluteを使用することです。これにより要素が削除されますが、画面から押し出ることはありません。

 。
  位置：絶対;
}

幅と高さのプロパティをゼロに設定することにより、要素を隠すことができます。残念ながら、一部のスクリーンリーダーは幅と高さがゼロの要素を無視するため、それは機能しません。私たちにできることは、それを2番目に低い値、1pxに設定することです。つまり、コンテンツはスペースに簡単にオーバーフローするため、オーバーフローも必要です。視覚的にこぼれないようにするために隠されています。

 。
  高さ：1px;
  オーバーフロー：隠し;
  位置：絶対;
  幅：1px;
}

その1ピクセルの正方形を非表示にするには、CSSクリッピングプロパティを使用できます。スクリーンリーダーに影響を与えないため、この状況に最適です。コンテンツはそこにありますが、再び視覚的に隠されています。注意すべきことは、クリップがクリップパスを支持して廃止されたが、インターネットエクスプローラーの古いバージョンをサポートする必要がある場合はまだ必要であるということです。

 。
  クリップ：rect（0 0 0 0）;
  クリップパス：挿入図（50％）;
  高さ：1px;
  オーバーフロー：隠し;
  位置：絶対;
  幅：1px;
}

「視覚的に隠された」クラスのパズルのもう1つの部分は、単語間の白い間隔を削除する奇妙さであり、1つの大きな単語のように声を出して読まれるという奇妙さです。たとえば、「Welcome Back Home」は「WelcomeBackhome」として読み上げられます。

この問題の簡単な解決策は、ホワイトスペースを設定することです：Nowrap：

 。
  クリップ：rect（0 0 0 0）;
  クリップパス：挿入図（50％）;
  高さ：1px;
  オーバーフロー：隠し;
  位置：絶対;
  ホワイトスペース：nowrap;
  幅：1px;
}

そして、最後に！最後に考慮すべきことは、ネイティブフォーカスとアクティブサイトを備えた特定の要素が焦点を合わせているときに表示できるようにすることですが、段落などの他の要素が表示されないようにします。それを使用することができます：そのためには擬似セレクターではありません。

 .visyally-hidden：not（：focus）：not（：active）{
  クリップ：rect（0 0 0 0）;
  クリップパス：挿入図（50％）;
  高さ：1px;
  オーバーフロー：隠し;
  位置：絶対;
  ホワイトスペース：nowrap;
  幅：1px;
}

名誉ある言及

私たちがカバーした5つよりもさらに多くの方法があります。たとえば、Text-Indentプロパティは、ポジションメソッドのように画面からテキストを押し出すことができます。

 。隠れた {
  テキストインデント：-9999EM;
}

残念ながら、このアプローチはRTLの書き込みモードではありません。これにより、私たちがカバーした他のソリューションよりも適応性が低くなります。

別の方法は、変換を使用して、要素を邪魔にならないようにスケーリングまたは移動することです。不透明度のように、視覚的にのみ同じように機能します。

 。隠れた {
  変換：スケール（0）;
}

すべてをまとめましょう！

コンテンツを視覚的に非表示にしますが、それでもアクセスできるソリューションに到達しました。次に、表示：なしの使用を停止する必要がありますか？いいえ、これは依然として要素を完全に（視覚的およびアクセスしやすい）隠す最良の方法です。

とはいえ、反対の結果を達成したい場合は、画面読者から何かを隠したい場合、Aria-Hidden = "true"属性は画面リーダーからコンテンツを非表示にしますが、視覚的には非表示になることに言及する価値があります。

それで、ここにすべてのアプローチを比較する完全な表があります。それを使用して、次にその状況で自分自身を見つけるときにコンテンツを隠す方法に関する決定を導きます。

以上がCSSで物事を隠すためのさまざまな方法を比較しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。