Not Quick a Nine

日々の気になることを、独断と偏見で綴る、バカ親父ブログです

蛍光ペン風CSSがスマホ表示で黒くなる現象を改善してみた

このブログでは強調表示のCSS蛍光ペン風のエフェクトを使っています。

先日久々にこのブログをスマホで見てみたら、その蛍光ペン風の表示がどうも黒く滲んでいるんですよね

こんな風にね

あら??と思ってPCで見てみると普通にキレイなグラデーションになっています。

でも、スマホでみると黒ずんでる

なんでしょ???

今日はなんでこんな風になっちゃうのか?

どうしたら解決できるのか?を備忘録的に書いておきたいと思います。

黒くなってる人は結構いるっぽい

Googleで検索してみると、蛍光ペンにするCSSを導入したは良いけど、ブラウザによっては黒くなっちゃって困ってるけどそのまま使ってますって人が結構いるっぽい。

まぁ、書いてある文字は読めるし、気にしなきゃいいっちゃぁ良いんですが、やはり些細な事が気になるA型としては、キッチリと直しておきたい部分です。

なぜこうなってしまうのか?

ではなぜこうなってしまうんでしょうか??

蛍光ペン風にするのに指定しているCSSはこちらです。
このコードを「設定-詳細設定-headに要素を追加」の中に書いています。

/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 30%, rgba(102,204,255,1) 80%) !important;
}
/* bタグは太字 */
article b{
    font-weight:bold !important;
}
</style>

この中の linear-graident内の記述には、transparent ってのが怪しいんじゃないの??

と思い、調べてみました。

やはり犯人は transparentだった

色々と transparent について調べてみると、CSSの事が書いてあるとあるサイトに transparentについての記述がありました。

そこにはこうあります。

transparent is defined as rgba(0, 0, 0, 0)

つまり、transparent は rgba(0,0,0,0) と定義されている。

すなわち、透明の黒と定義されているらしいのです。

transparent = rgba(0,0,0,0)

CSS's "transparent" may not be transparent,

A protip by chris morgan about css.

coderwall.com

グラデーションの色指定を変えてあげれば良い。

ならば、transparentを使わずに、そのままrgbaの指示をしてあげれば良いんですよ。

rgba(102,204,255,1) に変わっていく透明の色なんだから
transparent の代わりに、rgba(102,204,255,0) の指定にしてあげれば良いわけです。

先程の記述内、linear-gradientの部分をこの様に変更します。

background:linear-gradient(to bottom, rgba(102,204,255,0) 30%, rgba(102,204,255,1) 80%) !important;

これでこの様な思い通りの表示に変わります。

まとめ

今回の現象は、ブラウザによってCSSの解釈が違う為に起こった現象のようです。
異なるブラウザでの動作確認は忘れずに行う必要がありそうです。

ではでは(^.^)/~~~