前回エントリーのCSS3に関する記述の訂正

訂正

全力でウソ付いてるところあったので、前回のエントリーを謹んで訂正。

ブログリニューアルついでに、ブラウザのCSS3実装に関する所感 ( おしらせ )

ツイッターでうちのエントリーにコメントくださった @edvakf @vant 方々、ありがとうございます。大分、適当なことを申しておりました。

HTML5的な実装は先進的なイメージがあるOperaですが、CSS3の実装具合はモダンブラウザとしては落第点な気がします。マルチプルバックグラウンド(背景の複数指定)・グラデーション・角丸がダメな感じ。背景とグラデは、MozillaとWebkitがクリアしてる上に、今回のデザイン的に見劣りが激しいので、個人的に評価が下がっています。ごめんOpera。

大半が誤っておりました。以下訂正。

正しくは

角丸の件

一番悲しい所で、自分の書いてたCSSのborder-radiusの周りが、下記みたいになっている所がありました。border-bottom-right-radius: 5px;とかborder-bottom-left-radius: 5px;とか抜けてました。確認しよう自分!

 #root_nav .slideNav {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
}
/* ↓が足りてなかった */
 #root_nav .slideNav {
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;

}

背景の複数指定の件

背景の複数指定の件は、Opera自身が対応してない他ブラウザの接頭辞つきgradientが、混ざっていたからみたいです。対応してない表記は無視して、画像だけでも出すと思い込んでいましたが、そんなに都合よくないようで。ふつうの画像 x 2なら、複数表示されました。

グラデーションの件

グラデーションはOperaでも書く方法があるみたいです。間違いをコメントしたりしてくださってた方が、こんなこと仰っていて。自分の技術力だとSVGは調べるところから始まるわけですが、出来たらやってみたいと思います。

Operaさんすみませんでした

ともあれ、確認不足のまま誤った情報流していてごめんなさい!マイナーなつもりのブログでも、意外な所から見られていることが分かったので、今後はもうちょっと緊張感をもってブログ書きます。HTML5とかCSS3のような、関心が高くてデリケートな話題は気を使わないといけないですねー。

そんなわけで修正したらOperaでの表示も大分直っています。結局、モダンブラウザなら良いところまでちゃんと対応しているようで。めでたしめでたし!


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search