メディアクエリ(CSS3 media queries)とその周辺

先日、Gridressのメモを書いた。

メディアクエリに関する話題は事欠かないようで、今日は、Regions.js
どんなものなのか？
以下のhtmlブロックでarticleの中身を、　article-region のブロックに流し込みますよというもの

    <div id="article">
      <p>1Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      ...
      <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="article-region" id="article-region-1"></div>
    <div class="article-region" id="article-region-2"></div>
    <div class="article-region" id="article-region-3"></div>
</div>

単純なブロックに流し込めるだけでなく、もう少しすごいよみたいな空気

CSS3 regions: Rich page layout with HTML and CSS3 | Adobe Developer Connection

日本語では、まだ使えなさそうですが、皆、メディアクエリに　関心　集中？

メディアクエリのデモ、（IE以外のブラウザで、）

Media Queries | メディアクエリー

Media queries - MDN

Responsive Web Design とGridress - ミショニポー

データバインディング

WordPress JSON API + jQuery Template - ミショニポー

jQuery TemplateでRSSを表示する - ミショニポー

CSS3やhtml5は、とても新鮮なものですが、だからといって、例えば、メディアクエリは、完成されたものでもなく、もう2年も前から紹介されているもので、そんなに新しい物でもない
むしろ、こういったものが多くのWEBパブリッシングにかかわる人に受け入れられるものかどうか計り、標準化の計画をしているのだろうと思う。

ただ、htmlとCSSだけで私たちは、パブリッシングのすべてをまかなっているわけではありません。
もう一方では、ユーザーエージェントもどんどん変化していくことでしょう。

例えば、PHPはサーバサイドのものですから、ユーザーのブラウザのサイズを直接とることはできませんが、

<script language="javascript">
//if (window.location.search == "") {
<?php if(!preg_match('!(width=|height=)!',$_SERVER['QUERY_STRING'])){?>
window.location.href = window.location + "?width=" + screen.width + "&height=" + screen.height;
<?php }?>
//}
</script>

みたいな事をすれば、うまくいくかもしれないとか、組み合わせたりすることで、いろいろな工夫ができます。

だから、ルールの奴隷になる必要はなくて、むしろ、そういう工夫のほうが楽しいことが多いと思っている

memo

CSSnamespace ちょっと

<?xml version="1.0" encoding="utf-8"?>
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta name="author" content="" />
	<link rel="help" href="http://d.hatena.ne.jp/tenman/20110618" />
	<title>例</title>
	<style type="text/css">
		@namespace tenman url(http://www.w3.org/1999/xhtml);
		tenman|p{display:none;}
		tenman|p.color{color:red;display:block;}
	</style>
</head>
<body>
	<p>表示されない段落。</p>
	<p class="color">test</p>
</body>
</html>