W3C CSS検証サービスのエラー箇所を修正したい

質問

お世話になります。

YUI（Yahoo! UI Library）のReset CSSをW3CのCSS検証サービスでエラーが出ないように修正をしています。

試行錯誤を繰り返し、いくつかあったエラー・警告は修正できたのですが、

input, textarea, select
{
*font-size:100%;
}

上記の部分のみエラーが出てしまいます。この部分の記述を

input, textarea, select
{
font-size:100%;
}

上記のように*を外すとエラーが出なくなるのですが、*があるのとないのではどのような違いがあるのか？*を外した場合、リセットCSSとしての本来の役割（ブラウザごとの初期値の違いをリセットする）を果たす上で問題が出ないのかどうか？という事が、イマイチわかりません。

仮に*を外した場合、リセットCSSとしての役割を果たす上で何か問題が出るのであれば、どのような問題が出るのか？また、その場合、どのように修正すればリセットCSSとしての本来の役割を果たしつつ、W3CのCSS検証サービスでエラーが出ないように出来るかご教授頂ければ幸いでございます。

よろしくお願いいたします。

回答No.4

tenderfeel

Conditional Commentsというものがあります。

IEに対するハックであれば、その箇所をこのコメントに置くことで
同等の効果が得られます。

<!--[if IE 7]>
<style>
/*スタイルシートへのリンクでもOK */
input, textarea, select
{
font-size:100%;
}
</style>
<![endif]-->

これはIE55からサポートされているのでIE全般に効果がありますが
CSSが分断されるのでメンテナンス性が落ちますし
reset cssのバージョンが上がった時に都度直さなければなりません。
いっそIE7以下のハックは全部消す方が楽です。

YUIのCSSを作っている人もエラーが出るのは百も承知だと思いますが、
運用の諸々を考えるとエラーには目をつぶってハックを使う方が現実的ということです。

参考URL：

http://www.quirksmode.org/css/condcom.html

回答No.3

k0021

質問の回答と異なりますが

漢字にルビ（読み仮名）をふるを使用していますが。

上文字にルビをふるとおかしく表示されますので。
layout-grid-mode:lineを指定により対応していますが

W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、検証ではエラーになりますが。
見た目を重視していますのでエラーは、無視して使用しています。

参考に画像を添付します。
左側がlayout-grid-mode:lineを未指定で右側がlayout-grid-mode:lineを指定のプラウザ表示状態(写真表示です)を表示しますが。

お礼

ありがとうございます。

回答No.2

outbrave

*font-size:100%;
この記述は CSSハックと呼ばれていて Internet Explorer 7 とそれ以下のブラウザに対応することができますが、正式ではありませんから W3C 検証ではエラーになります。

対処方法は、この記述を削除しても正しく表示されるような HTML と CSS を書くことです。

お礼

お忙しいところ、ご回答いただきまして、ありがとうございます。

ご回答いただいた内容を頭に入れつつ、再考してみようと思います。

回答No.1

ORUKA1951

スタイルシートの文法は
セレクタ{宣言}
　セレクタは,で区切ってグループ化できます。
　セレクタは基点となるセレクタに、接続子でつなげていきます。

宣言は、プロパティ:値;の組になります。これも;で区切ってまとめることができます。

プロパティには、たくさんありますが*なんてのが頭に付くものはありません。付けてはなりません。

　スタイルシートで、*は全称セレクタで、CSS2より追加されました。(プロパティではありません)詳細度は0です。
　CSS2は、基点となるセレクタを書くことになりましたから、クラスセレクタは.(class名)ではなく、div.(class名)と書くことになりましたが、同じclass名を持つすべての要素に適用させるためには、*(全称セレクタ)を書きます。
　CSS1との後方互換のため、.(class名)と書かれているような場合は、* とみなします。

　すなわち、すべての要素に対して、【継承しない】プロパティを指定する場合は、
*{margin:0;padding:0;}
と言う風に書きます。
　これは、オーサリングツールが書き出すスタイルシートでよく見かけるリセット方法ですが、本来は望ましくありません。スタイルシートは、極力、本来の文書構造やデフォルト(ブラウザの持つ)のプレゼンテーションを打ち消すことは非推奨です。
　具体的には
・ブロック要素は、異なるブロックであることを明確にするため前後にマージンをとる
・行内要素は、一行に収まるように整形する。
　とか
　blockquoteは左右にマージンをとる。リストは前にマージンを取り、階層があれば逐次インデントさせる。
　などをすべて消してしまいます。そのため、デフォルトのデザインでよいものも改めて再設定することになり、スタイルシートが極めて煩雑になってしまいます。

　全称セレクタで、すべてのスタイルをリセットするのは望ましくありません。

　また、あなたが書かれたfont-sizeは継承されるプロパティですから、本来は記述する必要がありません。デフォルトはmediumです。

input, textarea, select{*font-size:100%;}
}
　は、書いてはならないところに*という文字が書かれているから、エラーになるのです。
→4.1.8 宣言とプロパティ（Declarations and properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#declaration )

　エラー処理を読まれたらわかるように、デフォルトがmedium なので、エラーとして無視されても、*を取り除いて正しい宣言にしても、結果は同じです。

お礼

お忙しいところ、ご回答頂きましてありがとうございます。

私の説明が悪かったのだと思いますが、今回の質問では、全称セレクタ云々についてお聞きしてるわけではなく、また、スタイルをリセットすることの是非を問うているわけでもありません。

YUI（Yahoo! UI Library）のReset CSSをW3CのCSS検証サービスでエラーが出ないように修正をしていく上で、*を外すとどういった問題があるのか？という事が理解できなかったためにかような質問をさせて頂きました。

少し補足をさせて頂くとすれば、YUI（Yahoo! UI Library）のReset CSSでは、なぜわざわざ*をつけるという記述方法を取ったのかという事が理解できず、理解できないだけに何か特別な理由があってこのような書き方をしているのかどうかが分からなかった為、『*があるのとないのではどのような違いがあるのか？』、『*を外した場合、リセットCSSとしての本来の役割を果たす上で問題が出ないのかどうか？』という点について質問をさせて頂きました次第でございます。

＞プロパティには、たくさんありますが*なんてのが頭に付く
＞ものはありません。付けてはなりません。

まさに仰る通りです。それでもあえて*を頭に付けているのには何らかの特別な理由があっての事なのか？という事が調べてもわからず、そうしないと何らかの問題が出たりしないか？という事が気になってこのような質問をさせて頂きました。

＞また、あなたが書かれたfont-sizeは継承されるプロパティで
＞すから、本来は記述する必要がありません。デフォルトは
＞mediumです。

はい。デフォルト値については存じ上げております。また、私が書いたCSSではなく、YUI（Yahoo! UI Library）のReset CSSにはこのように書いてあり、それをW3CのCSS検証サービスでエラーが出ないように修正をしているという前提条件でございます。