リファレンスの最近のブログ記事

CSSを勉強するのに役立つWebサービス・サイトをご紹介します。

英語のサイトで恐縮ですが、HTML5とCSS3の実装状況をまとめたサイトがありましたので紹介します。これをみると、SafariやFirefoxが優秀で、IEは最新版の8でも、実装が追いていないのがわかります。IEのシェアは日本では大きいのでもう少し頑張っていただきたい事ですね。

ブラウザ別HTML5、CSS3実装状況

プロパティ名使用できる値初期値適用対象継承適用メディアタイプ
azimuth<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inheritcenter全要素する聴覚
background-attachment scroll | fixed | inherit scroll 全要素しない聴覚
background-color <color> | transparent | inherit transparent 全要素しない聴覚
background-image <uri> | none | inherit none 全要素しない聴覚
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0% ブロックレベル要素と置換要素しない聴覚
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat 全要素しない聴覚
background [background-color || background-image || background-repeat || background-attachment || background-position] | inherit see individual properties 全要素しない聴覚
border-collapse collapse | separate | inherit separate テーブルとインラインテーブル要素する聴覚
border-color [ <color> | transparent ]{1,4} | inherit see individual properties 全要素しない聴覚
border-spacing <length> <length>? | inherit 0テーブルとインラインテーブル要素する聴覚
border-style <border-style>{1,4} | inherit see individual properties 全要素しない聴覚
border-top border-right border-bottom border-left [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties 全要素しない聴覚
border-top-color border-right-color border-bottom-color border-left-color <color> | transparent | inherit the value of the color property 全要素しない聴覚
border-top-style border-right-style border-bottom-style border-left-style <border-style> | inherit none 全要素しない聴覚
border-top-width border-right-width border-bottom-width border-left-width <border-width> | inherit medium 全要素しない聴覚
border-width <border-width>{1,4} | inherit see individual properties 全要素しない聴覚
border [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties 全要素しない聴覚
bottom <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
caption-side top | bottom | inherit top テーブルのcaption要素yes 聴覚
clear none | left | right | both | inherit none ブロックレベル要素しない聴覚
clip <shape> | auto | inherit auto ブロックレベル要素と置換要素しない聴覚
color <color> | inherit depends on user agent 全要素する聴覚
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before疑似要素と:after疑似要素しない全メディア
counter-increment [ <identifier> <integer>? ]+ | none | inherit none 全要素しない全メディア
counter-reset [ <identifier> <integer>? ]+ | none | inherit none 全要素しない全メディア
cue-after <uri> | none | inherit none 全要素しない聴覚
cue-before <uri> | none | inherit none 全要素しない聴覚
cue [ cue-before || cue-after ] | inherit see individual properties 全要素しない聴覚
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto 全要素する聴覚、インタラクティブ
direction ltr | rtl | inherit ltr 全要素する聴覚
display inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline 全要素しない全メディア
elevation <angle> | below | level | above | higher | lower | inherit level 全要素する聴覚
empty-cells show | hide | inherit show テーブルセル(th,td)要素する聴覚
float left | right | none | inherit none all、but see 9.7 しない聴覚
font-family [[ <family-name> | <generic-family> ] [、<family-name>| <generic-family>]* ] | inherit depends on user agent 全要素する聴覚
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium 全要素する聴覚
font-style normal | italic | oblique | inherit normal 全要素する聴覚
font-variant normal | sm全メディア-caps | inherit normal 全要素する聴覚
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal 全要素する聴覚
font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | sm全メディア-caption | status-bar | inherit see individual properties 全要素する聴覚
height <length> | <percentage> | auto | inherit auto 非置換要素とインライン要素、テーブルカラムとカラムグループを除く全要素しない聴覚
left <length> | <percentage> | auto | inherit auto positionが指定された要素しない聴覚
letter-spacing normal | <length> | inherit normal 全要素する聴覚
line-height normal | <number> | <length> | <percentage> | inherit normal 全要素する聴覚
list-style-image <uri> | none | inherit none display: list-itemが指定された要素する聴覚
list-style-position inside | outside | inherit outside display: list-itemが指定された要素する聴覚
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc display: list-itemが指定された要素する聴覚
list-style [ list-style-type || list-style-position || list-style-image ] | inherit see individual properties display: list-itemが指定された要素する聴覚
margin-right margin-left <margin-width> | inherit 0テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
margin-top margin-bottom <margin-width> | inherit 0テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
margin <margin-width>{1,4} | inherit see individual properties テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
max-height <length> | <percentage> | none | inherit none すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
max-width <length> | <percentage> | none | inherit none すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
min-height <length> | <percentage> | inherit 0すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
min-width <length> | <percentage> | inherit 0すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
orphans <integer> | inherit 2ブロックレベル要素する聴覚、ページ式
outline-color <color> | invert | inherit invert 全要素しない聴覚、インタラクティブ
outline-style <border-style> | inherit none 全要素しない聴覚、インタラクティブ
outline-width <border-width> | inherit medium 全要素しない聴覚、インタラクティブ
outline [ outline-color || outline-style || outline-width ] | inherit see individual properties 全要素しない聴覚、インタラクティブ
overflow visible | hidden | scroll | auto | inherit visible 非置換ブロックレベル要素、テーブルセル、およびインラインブロック要素しない聴覚
padding-top padding-right padding-bottom padding-left <padding-width> | inherit 0テーブル列のグループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブルコラムグループ、およびテーブルコラム以外のすべての要素しない聴覚
padding <padding-width>{1,4} | inherit see individual properties テーブル列のグループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブルコラムグループ、およびテーブルコラム以外のすべての要素しない聴覚
page-break-after auto | always | avoid | left | right | inherit auto ブロックレベル要素しない聴覚、ページ式
page-break-before auto | always | avoid | left | right | inherit auto ブロックレベル要素しない聴覚、ページ式
page-break-inside avoid | auto | inherit auto ブロックレベル要素する聴覚、ページ式
pause-after <time> | <percentage> | inherit 0全要素しない聴覚
pause-before <time> | <percentage> | inherit 0全要素しない聴覚
pause [ [<time> | <percentage>]{1,2} ] | inherit see individual properties 全要素しない聴覚
pitch-range <number> | inherit 50全要素する聴覚
pitch <frequency> | x-low | low | medium | high | x-high | inherit medium 全要素する聴覚
play-during <uri> [ mix || repeat ]? | auto | none | inherit auto 全要素しない聴覚
position static | relative | absolute | fixed | inherit static 全要素しない聴覚
quotes [<string> <string>]+ | none | inherit depends on user agent 全要素する聴覚
richness <number> | inherit 50全要素する聴覚
right <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
speak-header once | always | inherit once テーブルヘッダー情報がある要素する聴覚
speak-numeral digits | continuous | inherit continuous 全要素する聴覚
speak-punctuation code | none | inherit none 全要素する聴覚
speak normal | none | spell-out | inherit normal 全要素する聴覚
speech-rate <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium 全要素する聴覚
stress <number> | inherit 50全要素する聴覚
table-layout auto | fixed | inherit auto テーブルとインラインテーブル要素しない聴覚
text-align left | right | center | justify | inherit a nameless value that acts as left if direction is ltr、right if direction is rtl ブロック要素とテーブル要素とインラインブロック要素する聴覚
text-decoration none | [ underline || overline || line-through || blink ] | inherit none 全要素N/A聴覚
text-indent <length> | <percentage> | inherit 0ブロック要素とテーブル要素とインラインブロック要素する聴覚
text-transform capitalize | uppercase | lowercase | none | inherit none 全要素する聴覚
top <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
unicode-bidi normal | embed | bidi-override | inherit normal all elements、but see prose しない聴覚
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline インライン要素とテーブルセル(th,td)要素しない聴覚
visibility visible | hidden | collapse | inherit visible 全要素する聴覚
voice-family [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit depends on user agent 全要素する聴覚
volume <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium 全要素する聴覚
white-space normal | pre | nowrap | pre-wrap | pre-line | inherit normal 全要素する聴覚
widows <integer> | inherit 2ブロックレベル要素する聴覚、ページ式
width <length> | <percentage> | auto | inherit auto 非置換要素、インライン要素、テーブルの行要素(tr, thead, tbody, tfoot)を除く全要素しない聴覚
word-spacing normal | <length> | inherit normal  する聴覚
z-index auto | <integer> | inherit auto positionが指定されている要素しない聴覚

関連リンク