世の中には一切HTMLのない、一切マークアップのないウェブページがあります。如何にして、そんな事を実現しているのか。そのアイデアを紹介します。
真っ白なソース、その隠し味
https://mathiasbynens.be/demo/css-without-html
こちらが、マークアップのないウェブページです。
やあ！僕のソースコードを見てみて 🙂
と書いてありますね。そして実際に確認するとソースコードは真っ白！そうです、一切マークアップされていないのです。headもbodyも、一文字もありません。
このカラクリの秘密はHTTPヘッダーにあります。
Link in HTTP-Header
この画像はHTTPヘッダーを表示したものです。そしてここで重要なのはLink: <css-without-html.css>;rel=stylesheetです。お気づきかと思いますが、これは、Link:ヘッダーを使ってスタイルシートを指定しているのです。
「え、スタイルシートってHTML内の<link rel=”stylesheet”>でしか指定できないじゃないの？」と思った人もいるかもしれませんが、HTML以外にも<link href=””>を利用できるようにLink:(リンクヘッダー)というものが定められています。機能としてはほぼ<link href=”” rel=””>と同じような役割で、例えば、pdfファイルにLinkヘッダーを使ってHTMLバージョンのurl情報を示したり、画像ファイルにライセンス情報やcanonicalなurlを示したりが可能なわけです。(Googleもサポートしています)
省略された<html>と<body>
見えないところでスタイルシートを読み込んでいることがわかったわけですが、HTMLソースには一切エレメントがありません。このスタイルシートは一体何をスタイリングしているのでしょうか。cssを見てみましょう。
なんと！html{}やbody{}があります。そしてbody::afterのcontentには
O HAI! Have a look at my source code 🙂
もあります。すなわち、ブラウザ上では<html>も<body>も存在することになっているのです。コイツらは一体どこからやってきたのでしょうか。
実はhtmlもbodyもブラウザが自動的に創りだしたものなんです。そうなんです、実は<body>や<head>、<html>でさえも省略することが許されているのです。このページがvalidなhtmlといえるのかどうか怪しいところですが、条件さえクリアすれば仕様上タグの省略は問題ないのです。省略されたheadやbodyなどのタグはブラウザが補完してくれます。勝手に作ってくれるので!!(document.head || document.body)はtrueです。
GoogleのHTMLスタイルガイドには数バイトのパフォーマンスのために、省略出来るタグは省略せよ、という記述もあります。頭おかしいですね 😉
画して無から有が生まれた
種を明かせば、コンテンツをcssに隠し、cssをレスポンスヘッダーに隠し、マークアップを省略してと、まあ、よくやるもんです。まったく実用性はないですが、アイデアとしては面白いですね。
photo:Erick Dimas
ブランクスペース 😉