CSS Secret Garden: 明るさ調整による強調の解除_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

多くの場合、特定の UI 要素に注意を払うようにユーザーに強調し、思い出させるために、要素の後ろに半透明の暗いオーバーレイを追加してコンテンツを暗くする必要があります。たとえば、ライトボックスや「クイック ツアー」インターフェイスでは、多くの場合、この効果が必要になります。

この効果を実現する最も一般的な手法は、追加の HTML 要素を追加して明るさを調整し、次のように CSS を適用することです:

.overlay { /* For dimming */    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    background: rgba(0,0,0,.8);}.lightbox { /* The element to draw attention to */    position: absolute;    z-index: 1;    /* [rest of styling] */}

ダーク オーバーレイの目的は、ユーザーの注意を必要な場所に引き付けることです。要素の上と要素の後ろのコンテンツが暗くなっていることに注目してください。 .lightbox は Z インデックスが高いため、暗いオーバーレイの上に配置できます。これはすべてまったく問題ありませんが、追加の HTML 要素が必要です。つまり、CSS だけでは効果を適用できません。大したことではありませんが、できれば避けたい不便です。幸いなことに、ほとんどの場合は対処できます。

疑似要素ベースのソリューション

次のように、疑似要素を使用して追加の HTML 要素の必要性を排除できます:

body.dimmed::before {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 1;    background: rgba(0,0,0,.8);}

これは少し優れたソリューションであり、CSS 経由で直接適用できることも意味します。 この効果。ただし、問題は、

要素の ::before 疑似要素の上に他のものが適用される可能性があるため、これはあまり便利ではないことです。つまり、この効果を適用したい場合は、通常、淡色表示されたクラスに適用する JavaScript が必要になります。

この問題は、要素自体の ::before 擬似要素にダーク オーバーレイを適用し、それに z-index:-1 を与えて要素の下に配置することで解決できます。これにより携帯性の問題は解決されますが、Z 軸の位置を非常に正確に制御できるわけではありません。最終的には要素の下に配置されるか (これが望ましい)、要素とその親のいくつかの下に配置される場合があります。

もう 1 つの問題は、疑似要素には独自の JavaScript イベントがないことです。オーバーレイに単一の要素を使用する場合、イベント ハンドラーをそれに追加できます。たとえば、ユーザーがオーバーレイをクリックしたときにハイライト ウィンドウを閉じることができます。ハイライトしたい同じ要素上で疑似要素を使用する場合、ユーザーがオーバーレイをクリックしたのか要素をクリックしたのかを検出するのが難しくなる可能性があります。

box-shadow のソリューション

擬似要素ソリューションは非常に柔軟で、オーバーレイに対するほとんどの人の期待に応えます。ただし、単純な使用例やプロトタイピングの場合は、ボックス シャドウの拡散半径を取得し、各辺で指定するサイズまで拡大することができます。これは、ゼロ オフセットとゼロ ブラーで非常に大きなシャドウを作成し、すばやくカジュアルな方法でオーバーレイをシミュレートできることを意味します。

うわー

最初に合格したソリューションの明らかな問題は、非常に大きな解像度 (> 2000px) で問題が発生することです。わずかに大きな数値を使用することでこれを軽減することも、ビューポート単位を使用して問題を完全に解決して、「オーバーレイ」が常にビューポートよりも大きくなるようにすることもできます。異なる水平方向と垂直方向のスプレッド半径の値を使用することはできないため、ビューポートの単位は vmax にする必要があります。 vmax という単位に詳しくない場合は、1vmax は 1vw または 1vh の大きい方と同じです。 100vw はビューポートの幅と等しく、100vh はビューポートの高さの値と等しくなります。したがって、ニーズを満たす最小値は 50vmax で、各側に追加されるため、オーバーレイの最終的なサイズは 100vmax + 要素のサイズになります。

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

このテクニックは非常に素早く簡単に適用できますが、その有用性を制限する 2 つのかなり深刻な問題があります。発見しましたか？

まず第一に、要素のサイズはビューポートに関連しており、ページとは何の関係もないため、要素がposition:fixedで配置されていない限り、ページをスクロールするとオーバーレイの境界が表示されます。 ; またはページ自体 巻くのに十分な長さではありません。さらに、ページは非常に長くなる可能性があるため、スプレッド半径を大きくすることでこれを賢明に克服しようとはしません。代わりに、固定位置の要素、またはページが非常に小さくスクロールしない場合にのみ、この手法を使用することをお勧めします。

第二に、単一の要素 (または疑似要素) をオーバーレイとして使用することは、必要な要素にユーザーの注意を向けるだけではありません。また、ポインタ イベントをキャプチャするため、ページの残りの部分とのマウス操作も防止されます。 box-shadow にはこのプロパティがありません。したがって、マウス操作イベント自体をキャプチャすることなく、特定の要素にユーザーの注意を向けるのに視覚的に役立つだけです。これが許容されるかどうかは、特定の使用例によって異なります。

backdrop解决方案

如果你想要变成焦点的元素是一个模式对话框

（

元素通过它的 showModal() 方法显示），它已经有一个覆盖层了，通过用户代理样式表。这种原生的覆盖还可以通过 ::backdrop 伪元素来添加样式，例如，让它变暗一点：

dialog::backdrop {    background: rgba(0, 0, 0, .8);}

这种方法唯一需要注意的地方是，在编写的时候，浏览器的支持是非常有限的，所以一定要在使用前检查其当前状态。记住，即使它不被支持，如果对话框没有覆盖层的话，也不会影响到什么东西，因为它只是一个用户体验的改善。