タイトルのままです。
どういうケースか
一番わかりやすいスニペットをおいておくとこんな感じです。
意図してこういうスタイル指定になることは稀だと思いますが、フロントエンドフレームワークを利用していると意図せずこのようなスタイルがあたっている可能性があります。
<html><body><divid="main"style="background-color: #fff;"><divid="color"style="background-color: rgba(0, 0, 0, 0.2)"><spanstyle="background-color: inherit;">aaa</span></div></div></body></html>何が起こるか
こうなります。
更に、 mainの色を変えると更に事件が起きます。例えば色を #a00にしてみます。
くすんだ赤になりました。
意図したものであれば問題ないですが、意図せずグレーの要素が消えることになります。
何故か
colorの半透明なグレーを spanが継承した結果、色が乗算され、結果的に spanの色が濃くなってしまいます。
更に mainを赤くしたことで、赤の上に半透明のグレーがかかるため、色がくすみます。考えてみれば当然で、背景を透かして見るためにアルファチャンネルは存在しています。
こうならないようにするために
アルファチャンネルの色を継承しない
イテレータで生成したような連続する要素に対して個別のスタイルが当てられるようなシステムで、意図せず透過色を利用しており、その上にボタンの真ん中に文字をセンタリングする目的で更に別なタグがあるような場合で、背景色を継承しないとスタイルがおかしくなるようなCSS設計を行っているページで起こるかもしれません。
何度も言いますが、意図したものであれば気にする必要はありません。問題は意図しないケースです。
XD / Figma で opacity が指定されている色はそのまま使う前に確認する
最近はXDやFigmaが登場したため、デザイナーとフロントエンドエンジニアの分業が進んでいます。結果、デザイナーは「デザイナーに色を伝えなくても勝手にコピーして使ってくれるだろう」と思い、エンジニアは「デザイナーが指定した色に意味があるんだろう」と思ってもよいと考えてしまうフシがでてきます。
デザイナーは見た目上の色が出ていればよいと考え、エンジニアはただ指定された色をそのまま使うというような実装を行っていると、本当にこの画面のデザインでやりたかったことが置いてけぼりになり、結果的におかしなスタイルがあたってしまうということが起きます。
デザイナーとエンジニアが分業しているようなプロジェクトでは、見た目のチェックをデザイナーにも依頼するのがよいでしょう。
まとめ
デザイナー一同に置かれましては、エンジニアと共同でXD / Figmaを見る環境で仕事をしているのであれば、極力アルファチャンネルで色を合わせるのはお控えいただけますと、エンジニアが非常に楽になるので、協力していただけると幸いです🙇♂️また、ページの新設や修正の際は、レビューにも付き合ってもらえると嬉しいです。