doctype とクラス名の大文字小文字
◆ 互換モードだと大文字小文字が区別されない
既存ページのスタイルをコピーしていじっているとなぜかコピーしたのに動きが違うと困ることがありました
調べてみると HTML5 のdoctype 宣言があって strict として HTML が解釈されると CSS のクラス名は大文字小文字を別とみなすようです
この HTML で最初に
をいれるかどうかで見た目が変わります
doctype がないと互換モードなので大文字小文字を区別しません
その結果 class に指定した test は .Test と .test の両方にマッチするので背景色も文字色も変わります
doctype があると .test にしかマッチしないので文字色はデフォルトのままです
普段クラス名に大文字を使うことが全くないので全然気づきませんでした
そろそろ doctype に悩まされないように strict モードをデフォルトにしてほしいのですが 互換性重視してるのでならないでしょうねー
今の時代に互換モードで新しく作られたようなサイトは見る必要もないようなのが多いと思いますし 古いサイトも減ってきているのでずれてたらユーザが互換モードを ON にするくらいでいいと思うのですけどね
昔のページを表示するためだけで今のものを作るのに全くいらない機能のためにすごく不便になってます
ウェブページ作る側の問題だから せめてブラウザ設定で自分だけはデフォルトを strict モードってできるだけでもいいのですけどね
調べてみると HTML5 のdoctype 宣言があって strict として HTML が解釈されると CSS のクラス名は大文字小文字を別とみなすようです
<style>
.Test {
color: red;
}
.test {
background: greenyellow;
}
</style>
<div class="test">TEXT</div>
この HTML で最初に
<!doctype html>
をいれるかどうかで見た目が変わります
doctype がないと互換モードなので大文字小文字を区別しません
その結果 class に指定した test は .Test と .test の両方にマッチするので背景色も文字色も変わります
doctype があると .test にしかマッチしないので文字色はデフォルトのままです
普段クラス名に大文字を使うことが全くないので全然気づきませんでした
そろそろ doctype に悩まされないように strict モードをデフォルトにしてほしいのですが 互換性重視してるのでならないでしょうねー
今の時代に互換モードで新しく作られたようなサイトは見る必要もないようなのが多いと思いますし 古いサイトも減ってきているのでずれてたらユーザが互換モードを ON にするくらいでいいと思うのですけどね
昔のページを表示するためだけで今のものを作るのに全くいらない機能のためにすごく不便になってます
ウェブページ作る側の問題だから せめてブラウザ設定で自分だけはデフォルトを strict モードってできるだけでもいいのですけどね