忍者ブログ

とりあたまログ

Home > css

アスタリスクハック(Asterisk Hack)

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

スターハック


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

IE7スターハック


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

拍手[0回]

PR

Media TypeとMedia Queries

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回]

カレンダー

03 2020/04 05
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30

バーコード

ブログ内検索