Firefox の最新版、Firefox 35 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。
CSS プロパティで、要素に対して様々なエフェクトをかけることができる CSS Filter がデフォルトで有効になった他、@font-face 規則における WOFF2 フォントのサポートなどが行われています。
CSS Filter について
CSS Filter は、Filter Effects 1.0 仕様内で策定が進められている CSS プロパティの仕様で、要素に対して様々なエフェクトをかけることができます。
現時点では、下記のようなフィルターが定義されています。
grayscale()
: グレースケールsepia()
: セピアsaturate()
: 彩度hue-rotate()
: 色相(色相環の回転)invert()
: 反転opacity()
: 透明度brightness()
: 明るさcontrast()
: コントラストblur()
: ぼかしdrop-shadow()
: ドロップシャドウcustom()
: カスタムエフェクト
例えば、filter: opacity(50%);
のように指定することで、opacity: 0.5;
と指定したのと同じようなエフェクトを適用できます。
このプロパティを実際に使用して半透明なガラス効果を付けるっていうのを過去に紹介していますので、参考まで。
@font-face 規則で WOFF2 フォントをサポート
@font-face 規則で WOFF2 フォント (WOFF File Format 2.0) が使用できるようになりました。WOFF2 は高い圧縮率によって、WOFF1 などに比べて、より軽くなっていますので (他より 30% 程度ファイルサイズを削減できてるらしい)、Web サイトのパフォーマンスを確保しながら Web フォントが利用可能です。
/* 指定例 */ @font-face { font-family: "Example Font"; font-style: normal; font-weight: 400; src: local(Example font), url(example.woff2) format("woff2"), url(example.woff) format("woff"), url(example.ttf) format("ttf"), url(example.eot) format("eot"); }
インスペクタも進化
インスペクタは、::before
および ::after
を使用して追加した疑似要素を確認することが可能になりました。また、ソースマップへの対応も行われ、Firefox と CSS プリプロセッサを組み合わせた開発が捗ります。
その他、セキュリティアップデート
ところで、Firefox 35 for developers (日本語版) では、「HTML Imports をサポート」 と書かれていますが、これは去年末の Mozilla Hacks の記事で書かれたとおり、当面の間、HTML Imports のサポートは行わないとのことで、実際にはまだ有効になっていません。
また、緊急 3 項目を含む、計 9 項目にわたるセキュリティアップデートが行われています。Firefox 35 で行われたセキュリティアップデートについて詳しくは下記のページを参照してください。