頼まれて作ってたウェブサイトで、「電話番号のところを赤字にして」といわれて。
それで、言われたとおりに電話番号の色を、スタイルシートで赤字にした。
もともとstrongタグで囲ってあったから、そこにcssでcolor:redと指定する、ごく当たり前のことをした。
もちろんこちらのPC上では赤字になってるんだけど、「赤字になってない」といわれる。
PCでChrome、Edge、Firefoxでチェックしても赤字。
私のAndroidスマホからChromeで見ても赤字。
iPadからChromeで見ても赤字。
ところが、iPadのSafariで見たときだけ色が変わらない。
しかも色だけ無視されて、font-sizeとかfont-weightは効いてる。
あれこれテストページ作ってみたり色々試してみても、どうしてもSafariだけ色指定を無視する。!importantつけてみたり、継承関係が紛れないようにbody直下に置いてみたり、色々やったんだけどダメ。
あるいは、HTMLの構造上全く同じはずのテストページでは色が変わっているのに、本番のページでは変わらない。
それで数時間悩んでようやくわかったのが、Safariは10桁前後の数字や、000-0000-0000といった文字列を勝手にリンクにする。そしてその時、直接指定されてるCSSも無視して、aタグのCSSを上書きする（無断でリンクを挿入していることもわきまえずに、通常通りにリンクに対するCSSを適用してる、というべきか）。
奇しくも作ってたウェブページでは、同じブロックにあるリンクが、下線とか色変えがなくてもリンクであることが明白なものだったから、a、a:visitedともに通常文字色と同じ色を指定して、text-decoration:noneにしてあった。
一応こういうときのために古いiPadをひとつ用意してあったからよかったものの、手元になかったら解決も原因究明もしようがなかったぞ……。
勝手にいらんことするのを止めるためには、head内に
<meta name="format-detection" content="telephone=no">
と入れておけばいいそうですね。Safariのためにいちいち特別対応してやらんといかんのね。これ常識やったんかなあ。今時それくらいのことはやるブラウザもあると想定できるべきだっただろうか。しかし基本的に「やれといったことをやる（いわなければやらない）」というのがコンピューターの世界ではないのか。
