CSSパネルではbackgroundやborder、marginといった短縮プロパティを展開する機能が実装された。

CSSパネルのコンテキストメニュー。メニューに「Expand Shorthand Properties」が追加されている

CSSパネルのコンテキストメニューに「Expand Shorthand Properties」が追加されている。実際にCSS短縮プロパティを利用したHTMLを用意し、この機能を試してみよう。

css.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS Panel Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/stylesheet">
    <style type="text/css">
    <!--
    h1
    {
        border : 1px solid #444444;
        margin : 10px;
        padding : 5px;
    }
    -->
    </style>
  </head>
  <body>
     <h1>CSS Panel Test</h1>
  </body>
</html>

Firefox/Firebugでの表示結果は次のとおり。

css.htmlの表示結果

css.htmlのスタイルシートをFirebugのCSSパネルで確認。border / margin / paddingを使用している

CSSパネルのコンテキストメニューからExpand Shorthand Propertiesを有効にすると、この短縮プロパティが展開される。展開されたあとのプロパティは、個別に変更が可能だ。

Expand Shorthand Propertiesを有効にした状態。それぞれの短縮プロパティが展開された

border-left-widthの値を変更。展開されたあとのプロパティは、個別に変更ができる

短縮プロパティが利用されている場合でもこの機能を使えば、微調整が簡単におこなえる。展開後のCSSは範囲を指定してコピーができるので、元CSSを整形する場合にも役立ちそうだ。