とりあたまログ

プロパティ名の先頭に*(アスタリスク)をつけるとIEでのみ適用され、
IE以外ではエラーで無視される。文法違反。
セレクタの先頭につけられることもある。

スターハック

セレクタの前に「* html 」をつけるとIEでのみ適用される。
任意の要素の子要素であるhtmlを意味し、IE以外ではhtmlの親要素は無いという解釈でどこにも適用されない。

IE7スターハック

セレクタの前に「*:first-child+html 」をつけるとIE7でのみ適用される。

[0回]

idiomatic-css/translations/ja-JP at master · necolas/idiomatic-css · GitHub

[0回]

Media Type

以下のような記述でスタイルシートの対象メディアタイプを特定する。

@import url("fancyfonts.css") screen;
@media print {
  /* 印刷用のスタイルシートがここに入る */
}

<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css" />

認識されるメディアタイプ

handheld：携帯端末
print：ページ素材を対象とした、または印刷プレビューモードの画面表示
screen：主としてコンピュータのカラー画面
他にall, braille, embossed, projection, speech, tty, tvがある。

Media types - CSS 2.1 spec (ja)

Media Queries

メディアクエリは、メディアタイプと、特定のメディア特性に関する条件を比較する0以上の式から構成される。

記述例

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(color.css) screen and (color);

カンマは論理式のORを表し、‘and’キーワードは論理式のANDを表す。

@media screen and (color), projection and (color) { … }

論理式のNOTは、‘not’キーワードで表すことができる。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

古いユーザーエージェントにスタイルシートを解釈させないために、‘only’キーワードを使用できる。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

メディア特性

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

ほとんどのメディア特性は‘min-’または‘max-’といったオプションの接頭辞を受け入れ、"～以上"や"～以下"という制限を表現できる。

Media Queries (ja)

IEへの対応

css3-mediaqueries.jsを使えばIEでもMedia Queriesが使える。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

[0回]