先日、Webブラウザ「Mozilla Firefox」のバージョン50.0がリリースされた。
俺がメインに使っているブラウザがこのFirefoxで、Web開発にもこれを使っているので、つまりこのブログはFirefoxの影響を受けているわけだ。
まあ、某OSの標準ブラウザと違って、Web標準への準拠とかパフォーマンスに問題があるわけじゃないんだけど。あんまり言うと戦争が起こるので自重。
そのバージョン50のリリースノートを見ていると、ひとつの項目が目に留まった。
角丸の点線と破線？
border-radius を用いて作成された角丸の点線と破線の描画に関する不具合を修正しました
引用元：https://www.mozilla.jp/firefox/50.0/releasenotes/
あ、アレか……
そう、俺はずっと以前から気になっていた。
このページの下のほうにもある。
コメントフォームの下、「コメントに使用できるHTMLタグ▼」という部分をクリックすると出てくる、HTMLタグの説明の外枠（破線）がまさにそれ。
CSSプロパティの border-radius を使うと、通常は直角である要素の四隅を角丸にすることができる。
で、そうして角丸にした外枠の線種 border-style を点線 dotted または破線 dashed にすると、従来のFirefoxではなんと、角丸の部分のみ実線 solid で表示されてしまっていたのだ。
Google Cromeでは以前から正しく点線や破線になっていたから、ようやくというか、今さらというか。
まあそれほど重大な問題でもなかったけど、これで見た目が良くなるね。
さらに言えば、破線の間隔や長さにちょっと違和感が……まあいっか。
よくわからない方向け
つまり、次の画像の上半分の状態だったのが、下半分の状態になったということ。
画像を表示できないみたい。
間違い探し
四隅の線が……つまりそういうことだ。
まとめ
今回は、このたびのFirefoxのアップデートで角丸の描画に関するバグが修正された話を紹介した。
こういった細かい修正はよくあることだが、突然Webページの見た目が変わることになるので、アップデートの際はしっかり確認・把握したほうがいいだろう。
また、この件ではChromeとFirefoxで見た目に僅かな違いがあったことになる。
しかし僅かな違いとはいっても、ディテールにこだわってデザインしている場合には気になるかもしれない。
そもそもFirefoxでの実装が間違っていたのだが、こういった差異に影響されにくいWebデザインを心掛けることも重要ではないだろうか。
こめんと