>> 
Firefox 13 リリース、一部の接頭辞(-moz-)のサポート終了と疑似クラスの要素の調査
 >> 
Firefox 13 リリース、一部の接頭辞(-moz-)のサポート終了と疑似クラスの要素の調査

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Firefox 13 リリース、一部の接頭辞(-moz-)のサポート終了と疑似クラスの要素の調査

  • このエントリーをはてなブックマークに追加
Firefox 13 リリース、一部の接頭辞(-moz-)のサポート終了と疑似クラスの要素の調査背中を鍛える為にダンベルを購入した管理人です。


Firefox 13 がリリースされて、個人的に気になった「接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了」、「疑似クラスの要素の調査」を試してみました。




Firefox 13 がリリースされましたね

Firefox 13 がリリースされて新しい "スタートページ"、Chromeのよくアクセスするページのような機能の "新しいタブページ"、Gmail などの "SPDY 対応サイトで読み込み時間短縮"などの改善が行われました。


今回のエントリーでは個人的に気になった以下の二点を試してみました。
  • 接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了
  • 疑似クラスの要素の調査

▼ Firefox13 の新しいスタートページ

新しいスタートページ

参考サイト「Firefox 13.0 リリースノート




接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了

Firefox 13 から Firefox 4 以降での接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポートが終了する事を知っていましたが、Firefox 13 がリリースされた時はすっかり忘れていました。そんな時にユーザースタイルでいじったFC2の管理画面を見て思い出して修正しました。。。



Firefox 12 と Firefox 13 での表示

▼ Firefox 12 で表示

接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了

▼ Firefox 13 で表示

接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了

上記の二つの画像は Firefox 12Firefox 13 でFC2の管理画面を表示した状態です。

二つの画像の白抜き部分を見比べると Firefox 12 で適用されている角丸(-moz-border-radius)が Firefox 13 では適用されなくなっていました。


※ このFC2の管理画面はオリジナルのユーザースタイルで改編してあります



ユーザースタイルの確認、修正

接頭辞付きのborder-radiusとbox-shadowのサポート終了

Firefox 13 で適用されていない箇所のスタイルシートを見てみると -moz-border-radius の文字が黒色に表示され "適用されていない状態" になっていたので、接頭辞 -moz- を外して "適応状態(文字がピンク色)" にしました。



実際の表示確認

接頭辞付きの -moz-border-radius* と -moz-box-shadow のサポート終了

表示確認すると Firefox 13 でも角丸(border-radius)が適応されました。



公開しているWebサイトで接頭辞 -moz- を外しても良い?
上記では Firefox 4 以降で使用するユーザースタイルの修正の解説ですが「Firefox 13 の後方互換性に関わる修正」を読むと "Firefox 4 以降のサポートを終了する" と表記されているので公開しているWebサイトで Firefox 3.6 にも対応させたいという人は border-radius と box-shadow に接頭辞 -moz- を残す必要があります。

▼ 2012年5月の日本のブラウザシェア率のグラフ。Firefox 3.6 の利用率は1.24%

Source: StatCounter Global Stats - Browser Version Market Share (2012年5月)




※ 参考サイト「Firefox 13 の後方互換性に関わる修正 | Mozilla Developer Street (modest)




疑似クラスの要素の調査

疑似クラスの要素の調査

疑似クラスの要素の調査やデバッグが可能になりました。

方法はコンテキスト(右クリック)メニューから「要素の調査」を選択し、表示された要素名の吹き出しの上でコンテキスト(右クリック)メニューを開くと :hover、:active、:focus の三つの疑似クラスにチェックを入れる事で選択(ロック)できます。



疑似クラスの要素の調査

上記は :hover、:active、:focus の三つの疑似クラスにチェックを入れてロックした状態です。
これにより :hover、:active、:focus の時の要素の調査やデバッグを行う事ができます。


※ 参考サイト「Firefox 13 の主な新機能を紹介します | Mozilla Developer Street (modest)
関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks