CSS

スタイルシート入門(対応状況一覧)

概要

各ブラウザのスタイルシートサポート状況を調べてみたので、その一覧を示します。

記号の意味

C1 Cascading Style Sheet Level 1
e3 Internet Explorer 3.0(Windows 95)
e4 Internet Explorer 4.0(Windows 95)
e5 Internet Explorer 5.0(Windows 95)
N4 Netscape Communicator 4.01(Windows 95)
N6 Netscape 6.1(Windows XP)

O 仕様で定義されているもの。ブラウザで動作確認できたもの。
o 定義されているが、動作を確認していないもの。
e 定義されているが、動作しないもの。
x サポートされていないもの。
? 未調査。不明。

値の意味

{length} は長さを表します。例えば次のような値を指定します。

99cm ... centimeters
99em ... element's font M
99ex ... element's font x
99in ... inches
99mm ... millimeters
99pc ... picas
99pt ... points
99px ... pixels

{%} は割合を表します。例えば次のような値を指定します。

99%

{url} はURLを表します。例えば次のような値を指定します。

url(http://〜/〜)

{color} は色を表します。例えば次のような値を指定します。

red
#FF0000
#F00
rgb(255,0,0)
rgb(100%,0%,0%)

サポート状況一覧

+-----------------+
| C C e e e e N N |
| 1 2 3 4 5 6 4 6 |
+-----------------+
| x O x x x x x x | azimuth
+-----------------+
| O O x O O O x O | background: {background-attachment}
| O O O O O O O O | background: {background-color}
| O O O O O O O O | background: {background-image}
| O O x O O O x O | background: {background-position}
| O O x O O O O O | background: {background-repeat}
+-----------------+
| O O x O O O x O | background-attachment: scroll|fixed
+-----------------+
| O O x O O O O O | background-color: {color}
| O O x ? ? O x O | background-color: transparent
+-----------------+
| O O x O O O O O | background-image: {url}
| O O x O O O x x | background-image: none
+-----------------+
| O O x O O O x O | background-position: {%}
| O O x O O O x O | background-position: {length}
| O O x O O O x O | background-position: top|center|bottom
| O O x O O O x O | background-position: left|center|right
+-----------------+
| O O x O O O O O | background-repeat: repeat|repeat-x|repeat-y|no-repeat
+-----------------+
| O O x O O O O O | border: {border-width} {border-style} {border-color}
+-----------------+
| O O x O O O O O | border-color: {color}
+-----------------+
| O O x O O O O O | border-style: none|solid|double|groove|ridge|inset|outset
| O O x ? ? O x O | border-style: dotted|dashed
+-----------------+
| O O x O O O O O | border-width: {length}|thin|medium|thick
+-----------------+
| O O x O O O x O | border-top: {border}
| O O x O O O x O | border-right: {border}
| O O x O O O x O | border-bottom: {border}
| O O x O O O x O | border-left: {border}
+-----------------+
| O O x O O O O O | border-top-width: {border-width}
| O O x O O O O O | border-right-width: {border-width}
| O O x O O O O O | border-bottom-width: {border-width}
| O O x O O O O O | border-left-width: {border-width}
+-----------------+
| O O x O O O O O | clear: none|left|right|both
+-----------------+
| x O x O O O x O | clip: auto
| x O x O O O x O | clip: rect({length}, {length}, {length}, {length})
+-----------------+
| O O O O O O O O | color: {color}
+-----------------+
| x O ? ? ? ? ? ? | content:
+-----------------+
| x O ? ? ? ? ? ? | counter-increment:
| x O ? ? ? ? ? ? | counter-reset:
+-----------------+
| x O ? ? ? ? ? ? | cue:
| x O ? ? ? ? ? ? | cue-after:
| x O ? ? ? ? ? ? | cue-before:
+-----------------+
| x O x O O O x x | cursor: auto|crosshair|default|hand|move
| x O x O O O x x | cursor: e-resize|ne-resize|nw-resize|n-resize
| x O x O O O x x | cursor: se-resize|sw-resize|s-resize|w-resize
| x O x O O O x x | cursor: text|wait|help
+-----------------+
| x O ? ? ? ? ? ? | direction:
+-----------------+
| O O x e O O O O | display: block|inline|list-item
| O O x O O O O O | display: none
+-----------------+
| x O ? ? ? ? ? ? | elevation:
+-----------------+
| x O ? ? ? ? ? ? | empty-cells:
+-----------------+
| x x x O O O x x | filter: {filter}
+-----------------+
| O O x O O O O O | float: left|right|none
+-----------------+
| O O O O O O O O | font: style variant weight size/height family
+-----------------+
| O O O O O O O O | font-family: serif|monospace
| O O e O O O O O | font-family: sans-serif|cursive|fantasy
+-----------------+
| O O O O O O O O | font-size: small|x-small|xx-small
| O O O O O O O O | font-size: medium
| O O O O O O O O | font-size: large|x-large|xx-large
| O O O e o O O O | font-size: larger|smaller
| O O O O O O O O | font-size: 10cm|10em|10ex|10in|10mm|10pc|10pt|10px|10%
| x O ? ? ? ? ? ? | font-size-adust:
+-----------------+
| x O ? ? ? ? ? ? | font-stretch:
+-----------------+
| O O e O O O O O | font-style: normal
| O O O O O O O O | font-style: italic
| O O x O O O x O | font-style: oblique
+-----------------+
| O O x O O O x O | font-variant: normal|small-caps
+-----------------+
| x ? e x x ? x x | font-weight: extra-light|light|demi-light|medium|demi-bold
| x ? O x x ? x x | font-weight: extra-bold
| O O O O O O O O | font-weight: normal|bold
| O O x O O O O O | font-weight: bolder|lighter
| O O x O O O O O | font-weight: 100|200|300|400|500|600|700|800|900
+-----------------+
| O O x O O O x O | height: {length}
| O O x O O O x O | height: auto
+-----------------+
| x ? x O O O O O | left: {length}
| x ? x O O O O O | left: {%}
| x ? x O O O O O | left: auto
+-----------------+
| x O x x O O x x | line-break: normal
| x O x x O O x x | line-break: strict
+-----------------+
| O O x O O O x O | letter-spacing: normal
| O O x O O O x O | letter-spacing: {length}
+-----------------+
| O O x O O O O O | line-height: normal
| O O x O O O O O | line-height: {number}
| O O O O O O O O | line-height: {length}
| O O O O O O O O | line-height: {%}
+-----------------+
| O O x O O O x O | list-style: {type} {position} {url}
+-----------------+
| O O x O O O x O | list-style-image: {url}|none
+-----------------+
| O O x O O O x O | list-style-position: inside|outside
+-----------------+
| O O x O O O O O | list-style-type: disc|circle|square|decimal
| O O x O O O O O | list-style-type: lower-rmoan|upper-roman
| O O x O O O O O | list-style-type: lower-alpha|upper-alpha
| O O x O O O O O | list-style-type: none
+-----------------+
| O O O O O O O O | margin: {length}|{%}|auto
| O O O O O O O O | margin-left: {length}|{%}|auto
| O O O O O O O O | margin-right: {length}|{%}|auto
| O O O O O O O O | margin-top: {length}|{%}|auto
| O O x O O O O O | margin-bottom: {length}|{%}|auto
+-----------------+
| x O ? ? ? ? ? ? | marker-offset:
+-----------------+
| x O ? ? ? ? ? ? | marks:
+-----------------+
| x O ? ? ? ? ? ? | max-height:
| x O ? ? ? ? ? ? | max-width:
| x O ? ? ? ? ? ? | min-height:
| x O ? ? ? ? ? ? | min-width:
+-----------------+
| x O ? ? ? ? ? ? | orphans:
+-----------------+
| x O ? ? ? ? ? ? | outline:
| x O ? ? ? ? ? ? | outline-color:
| x O ? ? ? ? ? ? | outline-style:
| x O ? ? ? ? ? ? | outline-width:
+-----------------+
| x O x o O O x O | overflow: scroll|hidden|visible|auto
| x x x o O O x x | overflow-x: scroll|hidden|visible|auto
| x x x o O O x x | overflow-y: scroll|hidden|visible|auto
+-----------------+
| O O x O O O O o | padding: {length}|{%}
| O O x O O O O o | padding-top: {length}|{%}
| O O x O O O O o | padding-right: {length}|{%}
| O O x O O O O o | padding-bottom: {length}|{%}
| O O x O O O O o | padding-left: {length}|{%}
+-----------------+
| x O ? ? ? ? ? ? | page:
+-----------------+
| x ? x o o O x ? | page-break-before: auto|always|left|right
| x ? x o o O x ? | page-break-after: auto|always|left|right
| x O x ? ? ? ? ? | page-break-inside: avoid|auto|inherit
+-----------------+
| x O ? ? ? ? ? ? | pause:
| x O ? ? ? ? ? ? | pause-after:
| x O ? ? ? ? ? ? | pause-before:
+-----------------+
| x O ? ? ? ? ? ? | pitch:
| x O ? ? ? ? ? ? | pitch-range:
+-----------------+
| x O ? ? ? ? ? ? | play-during:
+-----------------+
| x ? x O O O O o | position: absolute|relative|static
+-----------------+
| x O ? ? ? ? ? ? | quotes:
+-----------------+
| x O ? ? ? ? ? ? | richness:
+-----------------+
| x O ? ? ? ? ? ? | right:
+-----------------+
| x ? x x O O x x | ruby-align: auto|left|center|right
| x ? x x O O x x | ruby-align: distribute-letter
| x ? x x O O x x | ruby-align: distribute-space
| x ? x x O O x x | ruby-align: line-edge
+-----------------+
| x ? x x o ? x x | ruby-overhang: auto
| x ? x x o ? x x | ruby-overhang: none
| x ? x x o ? x x | ruby-overhang: whitespace
+-----------------+
| x ? x x O O x x | ruby-position: above|inline
+-----------------+
| x O ? ? ? ? ? ? | size:
+-----------------+
| x O ? ? ? ? ? ? | speak:
| x O ? ? ? ? ? ? | speak-header:
| x O ? ? ? ? ? ? | speak-numeral:
| x O ? ? ? ? ? ? | speak-punctuation:
+-----------------+
| x O ? ? ? ? ? ? | speech-rate:
+-----------------+
| x O ? ? ? ? ? ? | stress:
+-----------------+
| x O ? ? ? ? ? ? | table-layout:
+-----------------+
| O O O O O O O O | text-align: left|center|right
| O O x e O O e O | text-align: justify
+-----------------+
| O O O O O O O O | text-decoration: none
| O O O O O O O O | text-decoration: underline
| O O x O O O x O | text-decoration: overline
| O O O O O O O O | text-decoration: line-through
| O O x x x x O x | text-decoration: blink
+-----------------+
| O O O O O O O O | text-indent: {length}
| O O O O O O O O | text-indent: {%}
+-----------------+
| x ? x x o ? x ? | text-junsify: auto
| x ? x x o ? x ? | text-junsify: inter-word
| x ? x x o ? x ? | text-junsify: newspaper
| x ? x x o ? x ? | text-junsify: distribute
| x ? x x o ? x ? | text-junsify: distribute-all-lines
| x ? x x o ? x ? | text-junsify: inter-ideo-graph
+-----------------+
| x O ? ? ? ? ? ? | text-shadow:
+-----------------+
| O O x O O O O o | text-transform: capitalize
| O O x O O O O o | text-transform: uppercase
| O O x O O O O o | text-transform: lowercase
| O O x O O O O o | text-transform: none
+-----------------+
| x ? x O O O O o | top: {length}
| x ? x O O O O o | top: {%}
| x ? x O O O O o | top: auto
+-----------------+
| x ? x x 5 O x x | text-underline-position: below
| x ? x x 5 O x x | text-underline-position: above
+-----------------+
| x O ? ? ? ? ? ? | unicode-bidi:
+-----------------+
| O O x O O O O o | vertical-align: baseline
| O O x O O O x ? | vertical-align: sub
| O O x O O O x ? | vertical-align: super
| O O x O O O O o | vertical-align: top
| O O x O O O O o | vertical-align: text-top
| O O x O O O O o | vertical-align: middle
| O O x O O O O o | vertical-align: bottom
| O O x O O O O o | vertical-align: text-bottom
| O O x x x ? ? ? | vertical-align: {%}
+-----------------+
| x ? x O O O x O | visibility: visible|hidden|inherit
+-----------------+
| x O ? ? ? ? ? ? | voice-family:
+-----------------+
| x O ? ? ? ? ? ? | volume:
+-----------------+
| O O x x ? ? O o | white-space: normal
| O O x x ? ? O o | white-space: pre
| O O x x ? ? x ? | white-space: nowrap
+-----------------+
| x O ? ? ? ? ? ? | windows:
+-----------------+
| O O x O O O e O | width: {length}|{%}|auto
+-----------------+
| x x x x O O x x | word-break: normal|break-all|keep-all
+-----------------+
| O O x x ? ? x O | word-spacing: normal
| O O x x ? ? x O | word-spacing: {length}
+-----------------+
| x O x O O O x ? | z-index: {number}|auto
+-----------------+
| x O x O O O x O | A:hover { ... }
| O O O O O O O O | A:link { ... }
| O O x O O O x O | A:active { ... }
| O O x O O O O O | A:visited { ... }
+-----------------+
| O O x x ? ? x ? | P:first-line { ... }
| O O x x ? ? x ? | P:first-letter { ... }
| x O ? ? ? ? ? ? | P:first-child { ... }
+-----------------+
| O O ? o o ? ? ? | !important
| O O ? o o ? ? ? | @import url(...)
| x O x o o ? x ? | @font-face { ... }
| x O x x ? ? o ? | @fontdef url(...)
+-----------------+

<< PAGE TOP >>


CSS
Ryuumu