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パネルのコンテキストメニューからExpand Shorthand Propertiesを有効にすると、この短縮プロパティが展開される。展開されたあとのプロパティは、個別に変更が可能だ。
短縮プロパティが利用されている場合でもこの機能を使えば、微調整が簡単におこなえる。展開後のCSSは範囲を指定してコピーができるので、元CSSを整形する場合にも役立ちそうだ。