CSS2.1とCSS３の違いを教えて下さい。

質問

HTMLの勉強中の作家です。
色々悩んだ末にサイトをHTML5に移行作業中です。

テキストを読んでもCSS３の書式がイマイチよく分かりません。
(CSS2.1の)指定は背景色、文字色(１部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。

あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。
CSS2.1を３にするためにはどこをどう変えれば良いのでしょうか？

ちなみに

@charset "UTF-8";
.ryoko {
color : #407133;}
.kazumi {
color : #336070;}
div,p {
color : #222222;}
p { font-family: Arial, Helvetica, sans-serif;}
body {
background-color:#e0ffe0;}
a:link {
color : #0000ff;}
a:visited {
color : #003333;}
a:hover {
color : #660000;}
a:active {
color:#660066;}
p{
margin: 1px 0px 1em 0px;
font-size:95%;
line-height:103%;}
div {
color : #222222;}
div { font-family: Arial, Helvetica, sans-serif;}
div{
margin: 1px 0px 1em 0px;
font-size:95%;
line-height:103%;}
.akeru{ line-height:1em; }

↑これです。テキストとCSS3について説明されているＨＰと各マチマチなもので戸惑っています。

回答No.4

think49 · ベストアンサー

#1,2,3 です。

ソースは省略しないで正確に書いていただけると有り難いのですが…。
質問文のソースには @font-face は存在しないので、#1 の時点では CSS2 でも CSS3 でも問題ないと判断しました。

> 「2.1で検証しました。エラー(CSS3の『@font-face』 が含まれています)」
"CSS2.1" として検証しているのですから、"CSS3" で定義されているプロパティに警告を出すのは当然です…。
[検証する] のボタンを押す前に [オプション] フィールドから "CSS3" の [Profile] を指定してください。

お礼

たびたびありがとうございます。

整理して説明します。
○約６時間かけてソース(CSS2.1)を(CSS3に)三分の一程度改変。
↓
○まだ作業の途中でしたが「一旦チェックをかけてみよう」とチェック。
↓
○エラー(テキストを見ながら作成したのに、どこをどう直して良いのか分からず)
↓
○「やっぱり才能ないな、自分」と脱力＆作成したCSS3を保存せずに消去。
↓
○気を取り直してリベンジ！(どこをどういじれば良いのやら。。)それで質問。

と、言った次第です。
…って、えぇ!?　すみません。。。「オプション」・・・見落としていました。上記ソースで…CSS3を選択して再検証してみたら。。合格(汗)

すみませんでした！
並びにありがとうございます！(自動で判別されるものだとばかり思い込んでいました)。
本当に本当にありがとうございます！

回答No.5

yyr446

CSS2.1とCSS3の違いは何？

今の段階の私の理解ですが、

　CSS3では、機能ごとにモジュールとして仕様が定義され、勧告される。
ベンダー/メーカー（ブラウザー等のユーザーエージェントを提供する人たち）は、どのモジュールを実装するか決め、実装するモジュールの機能を満足させればよい。一方CSS2.1ではCSS2.1の勧告を全てを実装しようと目指していた。

　CSS3で新たなセレクター書式や、プロパティ・属性がモジュール毎に登場するけど、ユーザーは、それを使いたかったら使えばよい。CSS2.1で作ったCSSを書き換える必要は全く無い。（※HTML5はCSS3を使えとはどこにも書いてないような気がする。）

正確にはやっぱり↓をよく読む事です。

http://www.w3.org/TR/2001/WD-css3-roadmap-20010523/

※あやしいテキストや回答にひっかかたりするぐらいなら、上を翻訳ツールで訳した方が幸せかも。

お礼

ありがとうございます！

HTML5は理解できたのですけれど、CSS3の本には新要素の書式しか載っていなくて「2.1と3では出来ることの幅が違う」と、これだけしか理解できずに、…かと言って英語が得意というわけでもないためW3Cの原文を読むこともできず。翻訳サイトで翻訳するとおかしな日本語に。。。おかしな日本語でも何となく言いたいことは分かるのですけれど…。

サイトの紹介をありがとうございます。

昨夜…、回答を締め切ったはずが(けっこう うっかり者です)。
６時間悪戦苦闘した結果…「オプション」の選択をしていなかった…だなんて。
夫に話して苦笑されました。

回答No.3

think49

#1,2 です。

繰り返しますが、CSS検証に使ったツールは何でしょうか？

> エラーメッセージは「2.1と3の混在(判定は2.1でした)」
何の事やらさっぱりわかりません…。
掲示されたソースは CSS2 でも CSS3 でも適合すると思うのですが。
CSS3 にしか存在しないプロパティを使えば、そこだけは確実に CSS3 と判定できますが、それ以外の部分(どちらでも定義されているプロパティ)についてはどちらを意識したものかは機械的に判断する術があるとは思えません。

例えば、colorプロパティは CSS2.1, CSS3 の両方に存在します。
http://zng.info/specs/css3-color.html#foreground
http://www.w3.org/TR/CSS2/colors.html#colors
タイプセレクタも CSS2.1, CSS3 の両方に存在します。
http://zng.info/specs/css3-selectors.html#type-selectors
http://www.w3.org/TR/CSS2/selector.html#type-selectors
つまり、"p { color: red; }" と書いたとき、それが CSS2.1 なのか CSS3 なのかを判断することは出来ません。
どちらでも問題ないからです。

お礼

ありがとうございます。
http://jigsaw.w3.org/css-validator/
↑こちらを使いました。

言葉足らずでお手数かけまして、すみません。
確か・・・。「2.1で検証しました。エラー(CSS3の『@font-face』 が含まれています)」。。。このような内容でした(三分の一ほど改変してみて試しにチェックをかけて撃沈)。

つまり…、CSS自体は2.1なのにCSS3の要素が混ざっている…ということですよね？
CSS3で組んだつもりだったのですけれど(しかも６時間かけて悪戦苦闘した結果です・泣)。

回答No.2

think49

#1 です。

> つまり、何も変える必要はありません。
厳密には、同じプロパティでも挙動が変わることはあり得ます。
該当する W3C の文書を確認しておくのがベストだとは思います。

お礼

重ね重ねありがとうございます。

HTML5＋CSS2.1という組み合わせは有りなのだろうか。。。(今後何かマズイことはあるのだろうか)などと悩んでいます。

回答No.1

think49

CSS2.1 にあるプロパティは CSS3 にもあります。(後方互換性有り)
つまり、何も変える必要はありません。

> CSSのチェックをかけるとエラーが出ます。
掲示されたソースを http://jigsaw.w3.org/css-validator/ でチェックしてみましたが、エラーはありませんでした。
validator に何を使っていて、どこにどんなエラーが出てくるのでしょう？

> テキストとCSS3について説明されているＨＰと各マチマチなもので
基本的に W3C か W3C を翻訳した文書を信用してください。

CSS2.x
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.d-toybox.com/spec/CSS2.1/appendixC/
http://hp.vector.co.jp/authors/VA022006/css/
http://www.w3.org/TR/CSS2/
CSS Text Level 3
http://www.w3.org/TR/css3-text/

お礼

年の瀬のお忙しい中、ありがとうございます！
説明不足で申し訳ございません。

2.1では「合格」しましたけれど、３にしようと思い、テキストにあるとおりに@や#を付けてみたりしているのですけれど(今月から勉強を始めたひよっこです)。

エラーメッセージは「2.1と3の混在(判定は2.1でした)」、諦めて改変した外部CSSを上書き保存をせずに消してしまったため、正確なメッセージを提示できなくてすみません。

HTML5＋CSS2.1でも特に問題はないのでしょうか？(この辺もよく分かっていません)
現状、テキストのみの何の飾り気もないサイトですのでCSSの移行に疑問を持ちつつもHTML5＋CSS3という(テキストの)図式に疑問を感じつつも、(新しいページから)ぼちぼち移行作業をしています。

ＨＰの紹介をありがとうございます。