CSS Lintの日本語訳。普通に書いたCSSだと問答無用で警告文が出る。やってられるか！
でもどういった理由でエラーが出るのかは知っておいて損はないと思うので、いくつか訳してみた。多分結構多くの人が遭遇する警告だと思う。何せ自分が遭遇した警告だしね！
| 原文 | 日本語訳 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
SSLを使っているサイトへのリンクのプロトコルをhttp:から書くかhttps:から書くか
リンク先がSSLを使っていることが分かっているとき、リンクのhref属性をhttp:から書くのと、https:と 「s」 を付けて書くの、どっちが正しいの？という話。
僕はhttp:から書くのが正しいと思っている。http:でアクセスしてもリンク先がSSLを使っていればhttps:になるし、例えばTwitterがSSLを使わなくなったら、https:でアクセスした場合、アクセスできなかったり、警告文が出たりといったリスクもあるし。
- SSLを使っている場合
-
- http://twitter.com/hoge
- アクセスできる
- https://twitter.com/hoge
- アクセスできる
- SSLを使っていない(使わなくなった)場合
-
- http://twitter.com/hoge
- アクセスできる
- http://twitter.com/hoge
- アクセス出来ないもしくは何かしらの不都合が起き得る
まぁそんなことはしないと思うけれども、そういった可能性もあるし、ならばhttp:でアクセスして、SSLとしてリクエストを返すかどうかは、そのリンク先に委ねた方が良いのではないかな、と思っている。CSSでの記述に関しても、相対パスや絶対パスで書けばSSLを使っているか使っていないかでプロトコルは決まるし(https://～のサイトから読み込むCSSは、画像パスが /hoge.png と指定してあれば https://～/hoge.png となる)。(プロトコルをhttp:で限定しているのは、リンク先がWWW(ハイパーテキスト? ハイパーメディア?)だと分かり切っているから。でもそれだと先ほどの「SSLを使っていると分かり切っているから」という理由と同じになるので、本当は//www.example.com/のようにスラッシュから書くのが正しいのだと思うけど、今回はhttp:に限定する。あとはhttps:のサイトからCSS内の画像パスなどをhttp:で記述すると警告文が出たりするみたいだけど(SSLページでブラウザにセキュリティ警告メッセージを出させないコツ « DRYOUT プログラマー社員のブログ)、それも今回は割愛。あくまで外部サイトにアクセスするときの話に限定する。)
…以上が何も調べないで漠然とそうだと思っていた(思い込んでいた)内容。
実際に調べてみた。というかみんなの小粋空間で大体答えが出てた。 => HTMLやCSSでのプロトコル表記（http:、https:）の省略について: 小粋空間
ただ、結局表題の「SSLを使っているサイトへのリンクのプロトコルをhttp:から書くかhttps:から書くか」どっちが正しいのか分からなかった。どっちも正しいのかな…。
とりあえずhttp://t.co/、https://t.co/ともにTwitterへのリンクはhttp:からだった。
HTML 4.01最(再)小化
以前終了タグが省略可能な要素という記事を書いたことがあるのだけど(5年前…)、もっと省略した書き方を当時教えてもらったのだけど忘れてしまったので、もう一度調べながら書いてみた。
確かSGML宣言をすることでもっと省略できるとかだったので、上記を参考に調べてみると、HTML4におけるSGML宣言ではOMITTAGとSHORTTAGが両方YESなので、タグと属性名の省略が可能で、タグそのものを圧縮して書くこともできる。(…で合ってる？)
ということで以下のHTMLを省略してみた。
元のHTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>HTML 4.01 Omissible & Minimized Elements Example</title>
</head>
<body>
<h1>HTML 4.01 Omissible & Minimized Elements Example</h1>
<p>Sample text 1</p>
<p>Sample text 2</p>
<p>Sample text 3</p>
<ul>
<li>Sample list 1</li>
<li>Sample list 2</li>
<li>Sample list 3</li>
</ul>
<table>
<tr>
<td>Sample table 1</td>
<td>Sample table 2</td>
<td>Sample table 3</td>
</tr>
<tr>
<td>Sample table 4</td>
<td>Sample table 5</td>
<td>Sample table 6</td>
</tr>
</table>
<p><a href="http://validator.w3.org/check/referer">Validator</a></p>
</body>
</html>省略したHTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv=content-type content="text/html;charset=utf-8"
<title/HTML 4.01 Omissible & Minimized Elements Example/
<h1/HTML 4.01 Omissible & Minimized Elements Example/
<p>Sample text 1
<>Sample text 2
<>Sample text 3
<ul/
<li>Sample list 1
<>Sample list 2
<>Sample list 3
/
<table/
<tr
<td>Sample table 1
<>Sample table 2
<>Sample table 3
<tr
<td>Sample table 4
<>Sample table 5
<>Sample table 6
/
<p><a href=http://validator.w3.org/check/referer>ValidatorView Demo: HTML 4.01 Omissible & Minimized Elements Example
警告出まくりだけど、ちゃんとValid HTMLとなる。まともに表示されないけど。実はあまり理解できなくてちょこちょこ修正しながらValidatorかけてたのは内緒。
タグの省略について
SGML宣言して省略して遊んでたときに見つけた記事(これ見つけたから今回の記事書こうと思った)。html要素とかbody要素は省略して書くべきとのこと。パフォーマンスのために省略すべきということなら、正直Googleぐらいでかいサイトならいざ知らず、個人サイトとか中規模程度の企業サイトなら「そこじゃなくね？」とか思う。もっと他にできることあるだろうと。
IE6とかJSとかそこそこ弊害もあるし、「すべき」としてしまうのはちょっと強引かなぁと思ったのだけど、それについてはコメントで結構突っ込まれてた。
あ、でも何か一貫したポリシーの元で行う(社内のコーディングガイドラインに従うとか)ならアリだと思う。
追記
@yoruaki 「HTML 4.01最(再)小化」の記事拝見しました。最後のa要素ですが、文法的には問題ありませんがこういう風に解釈されないでしょうか? <a href=”http:”></a>http://validator.w3.org/check/referer >Validator
拝見＆ご指摘ありがとうございます。その部分について、Validatorの警告を見てみます。
<p><a href=http://validator.w3.org/check/referer>Validator
For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the “/” character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible “self-closing” tag, then you need to use XHTML or HTML5.
This warning and related errors may also be caused by an unquoted attribute value containing one or more “/”. Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.
「このドキュメントでは、バリデータは従来のルールに従うと、<FOO />のように解釈し、紛らわしい警告やエラーメッセージを引き起こし、著者の期待を裏切ります。この解釈はHTML4や他のSGMLベースのHTML文書によって起こされます。このメッセージを回避するには、単純に”/”を削除すればOKです。ただし(“NB:” = “Nota Bane / 注意せよ”)、<FOO />を空要素タグとして解釈させたい場合は、XHTMLやHTML5を使用する必要があります。
この警告及び関連するエラーは、引用符で囲まれていない1つ、もしくは複数の”/”を含む属性値によって引き起こされます。 例: <a href=http://w3c.org<W3C</a> 解決策としては、値を引用符で囲むことです。」
こんなところですかね。もう警告文が複雑でいざ訳して文章にすると大変ですね…。
というわけで、上記の警告のように<a href />と解釈されるならば、仰るとおり<a href="http:"</a>http://validator.w3.org/check/referer>Validatorという風に解釈されると思います。
まぁそう解釈される可能性もあるよ、という警告なので(他にも16個も警告が…ｗ)、ネタとして見ていただければと思います。省略して書くために、調べたりなどの工数が3倍ぐらいかかるというなんとも非効率な書き方です…。