読みやすさのための背景フィルター互換性ソリューション (CSS フィルター互換性ソリューション)_html/css_WEB-ITnose

潜在的な問題は、ブラウザーがフィルターをサポートしていない場合、テキストが読めないことです。これはアクセシビリティの原則に反しており、最も完璧なビジュアルであっても役に立ちません。

フィルターをサポートする場合とサポートしない場合の効果の比較

したがって、ぼやけた写真を処理するには事前に準備が必要ですが、デザイナーは動的ぼかしを実装することを主張します。 、Appleとは異なり、効果は同じですが、どうすればよいですか？ユーザーがアップロードした写真の場合はどうなるでしょうか?そうですね、画像処理サーバーが必要ですが、費用がかかりそうです。

フィルターをサポートしていないブラウザーに代わりにカラー レイヤーを使用させるトリックを思いつきました。この解決策は完璧ではありませんが、非常に読みやすくなっています。

の効果はサポートしていません。 filter

基本実装

単純に背景にフィルターを追加するよりも、要素にフィルターを追加する方が互換性が高いため、背景として疑似要素を使用します。

.backdrop { position: relative }.backdrop::after { content: ""; /* 铺满整个父元素 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 放到父元素内容的下层 */ z-index: -2; /* 像父元素一样展示背景 */ background: #222 url("inspirational-landscape-and/or-laughing-with-salad.jpg");}

特殊効果を追加します

この時点で、デザイナーは背景画像をぼかし、わずかに暗くする効果を追加しました。 。

/* 不要忘记前缀，Safari >9.1 和所有 Chrome 仍然需要 -webkit- */filter: blur(4px) brightness(75%);

これでは十分ではありません。フィルターをサポートしていないブラウザは、読み取りに重大な影響を及ぼします。

素晴らしいヒント

フィルターに opacity() 効果があることを聞いたことがありますか?広くサポートされている不透明度属性と比較すると、少し役に立たないように思えますが、この属性の存在により、互換性ソリューションが可能になります。

.backdrop::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 把它放到其它伪元素的上面，但是仍在父元素内容的下面 */ z-index: -1; /* 让遮罩层足够的暗，无论什么背景都可以看清楚上面的文字 */ background: rbgba(0,0,0, 0.5); /* 使用滤镜完全隐藏它？？ */ filter: opacity(0%);}

フィルター フィルターがサポートされている場合, 画像付きの疑似要素はぼやけて少し暗くなり、この黒いマスクレイヤーは完全に透明になります。フィルターがサポートされていない場合、表示効果は完璧ではありませんが、上記のテキストを読むことが妨げられることはありません。

CodePen の例はここにあります。気に入っていただければ幸いです:

CodePen の Taylor Hunt (@tigt) による、読みやすさのためのフォールバックを使用したペン フィルターされた背景を参照してください。鏡の使い方もこれにインスピレーションを受けているのか、カバンの中に入れています。

代わりに @supports を使用してみてはいかがでしょうか?

ブラウザーの CSS 機能検出 (@supports) のサポートはフィルターと一致します。 置き換え後のコードは、

@supports (filter: blur(4px) brightness(75%)) or (-webkit-filter: blur(4px) brightness(75%)) {  /* 浏览器支持 filter 的话... */}

このように書いても間違いありません。すべては個人の好みによって異なります。 CanIUse の使用状況データを確認したところ、まだ @supports をサポートしていない環境がいくつかあります:

Chrome 18–27

• Safari 8.x
• UCブラウザ 9.9 (この記事の執筆時点)

2016 年 5 月

まで、上記のブラウザの合計使用シェアは米国で約 3.6%、全世界で 10.5% です。 （海の向こうのUCの人気のおかげです）。これらの数値は時間の経過とともに徐々に減少します。その時点で、より明確な CSS を記述したい場合は @supports を使用することをお勧めします。