要約：シンプルなマークアップを元に各ブラウザの実装レベルに応じて、様々なスタイリングをしていく方が楽だし、いろんな閲覧者が幸せになれるんじゃないかなと思った次第
全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。
例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。
で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、
- Natalie Downe » Blog Archive » Inline image quotes
- CSSで引用をデザインする。 – DesignWalker
- 第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
- イメージ無しのblockquoteで引用を表示するCSSサンプル – WEBデザイン BLOG
たいていは、幅固定だったり、blockquoteタグの中で使えるタグの種類や数が限られていたり、不自然な空要素があったりするわけです。要するにIE6などの後方互換性対策ですよね。こういうのは引用だけではなく、いろんなCSSスタイリングの方法論で見られます。
で、これはストリクタの戯言と言うのではなくて、なんだかスタイリングのために変な制限をかけたり、不自然なマークアップをしたりするのが、どうも機械の都合に併せて人間が動いているように思えて釈然としない気持ちになるのですね。
ちなみに私ならこう書きます。
CSSソースコードblockquote{
width: 70%;
background: white url("blockquote_mark_end.png") right bottom no-repeat;
padding: 15px;
margin: 15px;
}
blockquote > *:first-child{
background: transparent url("blockquote_mark_start.png") left top no-repeat;
}
blockquote p.citation{
text-align: right;
}これで以下のすっきりとしたコードでも、きちんとスタイリングできます（引用符のサイズが大きいため、今回は p.citation に背景画像はつけませんでした）
HTMLソースコード<blockquote>
<dl>
<dt>引用タイトル</dt>
<dd><p>あのイーハトーヴォのすきとおった風、<br />
夏でも底に冷たさをもつ青いそら、<br />
うつくしい森で飾られたモリーオ市、<br />
郊外のぎらぎらひかる草の波。 </p></dd>
</dl>
<p class="citation"><cite>宮沢賢治氏の小説より</cite></p>
</blockquote>
- 引用タイトル
あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。宮沢賢治氏の小説より
しかし、WinIE6はfirst-child擬似要素に対応していませんので、以下のように補正CSSを追加します。これでWinIE6は点線で囲まれた感じで引用を表現することになります。
CSSソースコードblockquote{
background: white none;
border: 1px dotted gray;
}このように必ずしも全てのブラウザに同じスタイリングを提供する必要はないだろうし、むしろCSSの実装レベルに応じて（実装レベルが低いものはそれなりに、高いものはそれを活かして）積極的に見せ方を変えていってもよいのではないでしょうか。
既にこのサイトはWinIE6の実装レベルやバグも考慮して（文章の読解に影響を与えない程度で）、スタイリングをWinIE6とそれ以外で区別するようにしてきました。
空要素を意識して作ったり、妙な制限に縛られたりするよりも、実装レベルに応じたスタイリングをする方が後方互換性に必要以上に引きづられることもないですし、何より楽だと思うのですがどうですかね。
You can write a document as simple as you like.
In many ways, the simpler the better.
はてなブックマークでの反応に対するお答え
ブラウザに応じてとか基本的に邪魔にしか思えないからなあ。ま、どっちみち一部の受け手は発信側のページのソースをザクザクに切り刻んでスクラップにしてブラウジングするけどね。
邪魔にしか思えない
というのはどうしてですかね。やはり違うブラウザで見たときに違う見た目になって、そのたびに考えないといけないからでしょうか。であるならば、ちょくちょくブラウザを変えて同じサイトをみることってほとんど無いですし、大きく操作に影響するほどでなければよいと思っているのですが、どうでしょう。
blockquoteの中にタイトルとか.citationとか、メタ情報を入れるのはinvalidな気がするんだ。dlで整形してるのもアウトだと思う。
本筋とは別の話ではあるんですがコメント、議論参照先はこのへん。
blockquote内は引用内容のみ入れるべきで、メタ情報は入れるべきではないと言うことですかね。私はこれについては議論はあって賛否両論あるけれども、少なくともXHTML仕様的にはinvalid
ではないと思っていたんですが。どっちかというと言語文法的にinvalid
ということですかね。それならわかります（引用タイトルを混ぜたのは確かにまずかったと思います）
UAが対応してくれるのなら、できればblockquote要素のcite属性およびtitle属性のみですませるのが一番良いのですが、それは現状できませんので（かといって、javascriptを動員するのは大げさな気がしますし）。
リテラシの低いお客さんはそれだと納得してくれません。/ 分からない人はどんな説明しても分からないからなぁ / ブラウザによって見た目変えるのはいいけど、個人的にはその辺どうすんの？とか思った。
仕事だったら、jQueryとかのjavascriptライブラリを使ってでも、無理矢理同じ見た目にすると思います。ただ、仕事以外ならあんまり取りたくない面倒くさい手なので、今回は修正CSS使って対処しとこうよという風に書いたのです。
プロの人はたいへんだ。
いちいち修正CSS書いたりするんだったら、ちょっとぐらい変なマークアップするよ的な意見（だと読み取ったんですが）も想定してました。僕はちょっと修正CSSを書いた方が変なマークアップ繰り返すより楽かなと思ったんですよね。まぁ、提案であって押しつける気はないんでまた機会があったら考えてみてください。
言及されました、クロスブラウザ対応は運営者が楽な方法で、なるべく多くの環境に適応できるといいですね ::: creazy photographという記事もあわせてどうぞ。
Popularity: 3% [?]
- キーワード：
サイト内
サイト外
読者のコメント
0件