新しめのCSSプロパティ「mix-blend-mode」
はじめまして。ykrmaruです。
フロントエンドエンジニアをやってますが、情報のキャッチアップが最近あまりできてなく、他の方の記事など読んでみようと思いnoteを始めることにしました。よろしくお願いします。
noteは自分の備忘録的に使うことも想定してるので、全然最新じゃないこともつらつら書いてしまうと思いますが、ご了承ください。
ところで、4月から新アニメが色々とスタートしてますが、私が一番気に入ったのがこちら。
Vivy -Fluorite Eye’s Song-というアニメです。
アニメの詳細は公式サイトなどを御覧いただきたいのですが、このサイトのグロナビエリア（PC表示の右のハンバーガーメニューのところ）の見た目が気になりました。（※左上のロゴ部分も同じですね）
背景色に連動してPNG画像の文字色が変化してる。シームレスに変化するのが気持ちいいっ！
どうやってんのかなーJS？？と思って調べてみたら、mix-blend-modeというCSSプロパティが使われてました。
これ、そういえば使用の提案されたけど「IE対応してないから無理ー」で使ったことなかったやつ！
VivyのサイトはIE用に別でなにかやってるっぽいのですが、詳しくはわからず。（わかったら追記します）
一応↑のようなやり方も出てきました。
2021年8月でMicrosoft365のIEサポートが終了するので、IEを切り捨て始めたところが増えましたね。
IE除外になれば、新しいCSSプロパティ色々使えるようになって、JS使わなくても色々表現できるようになるので、一気にフロントエンドの世界が明るくなりそうな予感がしてます。
早くIEを気にしなくていい開発やりたいですねー
-----
2021年6月24日追記
実際に仕事でmix-blend-modeを使う機会があったので、IEに対応させるポリフィルとかあるのか、色々調べました。
なかった！！！！！
なかったよぉぉぉ・・・
で、考えたのは、対象の透過させたい文字が白文字だったので、text-shadowを使う方法でした。
そして、IEハックでIEのみに適用させてみた。
.l-header {
mix-blend-mode: exclusion;
&__inner {
h1 {
font-size: 22px;
color: $white;
@media all and (-ms-high-contrast: none) {
text-shadow: 1px 1px 3px rgba($color: #000000, $alpha: 0.7);
}
}
}
}こうするしかなかったですね。
他に妙案を思いついた方がいらっしゃれば教えて下さい。
IE11の命が来年の6月までになったので、IEに苦しめられるのもあと少しですね。
Webエンジニアのみなさん、あと一踏ん張り頑張りましょう！