紅孔雀

■[Google Gadgets] Google Gadgets スタイルシート指定の注意点

Google Gadgets で、ワイルドカードを使用してスタイルを指定すると、うまく反映されない場合がある、という話です。

問題

Google Gadgets でスタイルシートの設定をしたところ、ワイルドカード（*1）を使用して指定したスタイルが反映されない、という問題が発生しました。

現象を再現できる最小の Gadget-Spec は以下の通りです：

<Module>
  <Content type="html">
  <![CDATA[
  <style type="text/css">
  * { font-family : monospace }
  </style>
  <div>hoge</div>
  <div>piyo</div>
  ]]>
  </Content>
</Module>

原因

原因を調べて分かったことは、Gadget の描画されるページに含まれるスタイルシート（Gadget-Spec の <Content> 内に書いたものではなく、Gadget が描画されるページ自体のスタイルシート）があります。調べたときは、以下のような指定がありました：

body,td,div,span,p{font-family:arial,sans-serif;}
a {color:#0000cc; }
a:visited { color:#551a8b; }
a:active { color:#ff0000; }
body {margin: 0px;padding: 0px;   background-color: white;   }

ワイルドカードによって指定したスタイルは、上のスタイルによって上書きされてしまいます。冒頭の Gadget-Spec では「* { font-family : monospace }」として等幅フォントに指定し、「<div>hoge</div>」と「<div>piyo</div>」の部分のフォントを変更しようとしていますが、上のスタイルシートに含まれる「body,td,div,span,p{font-family:arial,sans-serif;}」に含まれる div に対する指定によって（font-family の指定が）上書きされています。結果として、「ワイルドカードで指定したスタイルが反映されない」という問題になってしまいました。

対策

• ワイルドカードは使わずに、直接要素名を指定してスタイルを与える。
• 「*, div { font-family: monospace }」のように上書きされる要素を追加して指定する。

後者の場合、Gadget が表示されるページのスタイルシートが変更された場合に Gadget の表示が乱れてしまう可能性があります。

Permalink | コメント(0) | トラックバック(0) | 09:36