Firefox 35 が正式リリース、CSS Filter がデフォルトで有効に

Firefox の最新版、Firefox 35 が正式リリースされ、自動更新も提供開始されました。CSS Filter がデフォルトで有効になった他、@font-face 規則における WOFF2 フォントのサポートなどが行われています。

FirefoxFirefox の最新版、Firefox 35 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSS プロパティで、要素に対して様々なエフェクトをかけることができる CSS Filter がデフォルトで有効になった他、@font-face 規則における WOFF2 フォントのサポートなどが行われています。

Firefox 35

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 のインスペクタは疑似要素を確認することが可能に

その他、セキュリティアップデート

ところで、Firefox 35 for developers (日本語版) では、「HTML Imports をサポート」 と書かれていますが、これは去年末の Mozilla Hacks の記事で書かれたとおり、当面の間、HTML Imports のサポートは行わないとのことで、実際にはまだ有効になっていません。

また、緊急 3 項目を含む、計 9 項目にわたるセキュリティアップデートが行われています。Firefox 35 で行われたセキュリティアップデートについて詳しくは下記のページを参照してください。

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?