とほほのスタイルシート入門(CSSサポート状況一覧)

概要

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

記号の意味

Ｃ１ Cascading Style Sheet Level 1
ｅ３ Internet Explorer 3.0(Windows 95)
ｅ４ Internet Explorer 4.0(Windows 95)
ｅ５ Internet Explorer 5.0(Windows 95)
Ｎ４ Netscape Navigator 4.0(Windows 95)

◎ 仕様で定義されているもの。IEやNNで動作確認できたもの。
○ 定義されているが、動作を確認していないもの。
△ 定義されているが、動作しないもの。
× サポートされていないもの。
？ 不明。

値の意味

{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%)

サポート状況一覧

-------------------------------------------
| Ｃ ｅ ｅ ｅ Ｎ |
| １ ３ ４ ５ ４ |
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | background: {color}
| ◎ ◎ ◎ ◎ ◎ | background: {url}
| ◎ ◎ ◎ ◎ ◎ | background: repeat
| ◎ ◎ ◎ ◎ ◎ | background: repeat-x
| ◎ ◎ ◎ ◎ ◎ | background: repeat-y
| ◎ ◎ ◎ ◎ ◎ | background: no-repeat
| ◎ ◎ ◎ ◎ × | background: scroll
| ◎ ◎ ◎ ◎ × | background: fixed
| ◎ ◎ ◎ ◎ × | background: left
| ◎ ◎ ◎ ◎ × | background: center
| ◎ ◎ ◎ ◎ × | background: right
| ◎ ◎ ◎ ◎ × | background: top
| × ◎ ◎ ◎ × | background: middle
| ◎ ◎ ◎ ◎ × | background: bottom
| ◎ ◎ ◎ ◎ × | background: {%}
| ◎ △ ◎ ◎ × | background: {length}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | background-color: {color}
| ◎ × △ ○ × | background-color: transparent
-------------------------------------------
| ◎ × ◎ ◎ ◎ | background-image: {url}
| ◎ × ◎ ◎ ◎ | background-image: none
-------------------------------------------
| ◎ × ◎ ◎ ◎ | background-repeat: repeat
| ◎ × ◎ ◎ ◎ | background-repeat: repeat-x
| ◎ × ◎ ◎ ◎ | background-repeat: repeat-y
| ◎ × ◎ ◎ ◎ | background-repeat: no-repeat
-------------------------------------------
| ◎ × ◎ ◎ × | background-attachment: scroll
| ◎ × ◎ ◎ × | background-attachment: fixed
-------------------------------------------
| ◎ × ◎ ◎ × | background-position: {%}
| ◎ × ◎ ◎ × | background-position: {length}
| ◎ × ◎ ◎ × | background-position: top
| ◎ × ◎ ◎ × | background-position: center
| ◎ × ◎ ◎ × | background-position: bottom
| ◎ × ◎ ◎ × | background-position: left
| ◎ × ◎ ◎ × | background-position: center
| ◎ × ◎ ◎ × | background-position: right
-------------------------------------------
| ◎ × ◎ ◎ ◎ | border: thin
| ◎ × ◎ ◎ ◎ | border: medium
| ◎ × ◎ ◎ ◎ | border: thick
| ◎ × ◎ ◎ ◎ | border: {length}
| ◎ × ◎ ◎ ◎ | border: none
| ◎ × △ ○ × | border: dotted
| ◎ × △ ○ × | border: dashed
| ◎ × ◎ ◎ ◎ | border: solid
| ◎ × ◎ ◎ ◎ | border: double
| ◎ × ◎ ◎ ◎ | border: groove
| ◎ × ◎ ◎ ◎ | border: ridge
| ◎ × ◎ ◎ ◎ | border: inset
| ◎ × ◎ ◎ ◎ | border: outset
| ◎ × ◎ ◎ ◎ | border: {color}
-------------------------------------------
| ◎ × ◎ ◎ × | border-top: {borderと同じ}
| ◎ × ◎ ◎ × | border-right: {borderと同じ}
| ◎ × ◎ ◎ × | border-bottom: {borderと同じ}
| ◎ × ◎ ◎ × | border-left: {borderと同じ}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | border-width: thin
| ◎ × ◎ ◎ ◎ | border-width: medium
| ◎ × ◎ ◎ ◎ | border-width: thick
| ◎ × ◎ ◎ ◎ | border-width: {length}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | border-top-width: thin
| ◎ × ◎ ◎ ◎ | border-top-width: medium
| ◎ × ◎ ◎ ◎ | border-top-width: thick
| ◎ × ◎ ◎ ◎ | border-top-width: {length}
| ◎ × ◎ ◎ ◎ | border-right-width: thin
| ◎ × ◎ ◎ ◎ | border-right-width: medium
| ◎ × ◎ ◎ ◎ | border-right-width: thick
| ◎ × ◎ ◎ ◎ | border-right-width: {length}
| ◎ × ◎ ◎ ◎ | border-bottom-width: thin
| ◎ × ◎ ◎ ◎ | border-bottom-width: medium
| ◎ × ◎ ◎ ◎ | border-bottom-width: thick
| ◎ × ◎ ◎ ◎ | border-bottom-width: {length}
| ◎ × ◎ ◎ ◎ | border-left-width: thin
| ◎ × ◎ ◎ ◎ | border-left-width: medium
| ◎ × ◎ ◎ ◎ | border-left-width: thick
| ◎ × ◎ ◎ ◎ | border-left-width: {length}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | border-color: {color}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | border-style: none
| ◎ × △ ○ × | border-style: dotted
| ◎ × △ ○ × | border-style: dashed
| ◎ × ◎ ◎ ◎ | border-style: solid
| ◎ × ◎ ◎ ◎ | border-style: double
| ◎ × ◎ ◎ ◎ | border-style: groove
| ◎ × ◎ ◎ ◎ | border-style: ridge
| ◎ × ◎ ◎ ◎ | border-style: inset
| ◎ × ◎ ◎ ◎ | border-style: outset
-------------------------------------------
| × × ○ ○ × | clip: auto
| × × ○ ○ × | clip: rect({length}, {length}, {length}, {length})
-------------------------------------------
| ◎ × ◎ ◎ ◎ | clear: none
| ◎ × ◎ ◎ ◎ | clear: left
| ◎ × ◎ ◎ ◎ | clear: right
| ◎ × ◎ ◎ ◎ | clear: both
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | color: {color}
-------------------------------------------
| × × ◎ ◎ × | cursor: auto
| × × ◎ ◎ × | cursor: crosshair
| × × ◎ ◎ × | cursor: default
| × × ◎ ◎ × | cursor: hand
| × × ◎ ◎ × | cursor: move
| × × ◎ ◎ × | cursor: e-resize
| × × ◎ ◎ × | cursor: ne-resize
| × × ◎ ◎ × | cursor: nw-resize
| × × ◎ ◎ × | cursor: n-resize
| × × ◎ ◎ × | cursor: se-resize
| × × ◎ ◎ × | cursor: sw-resize
| × × ◎ ◎ × | cursor: s-resize
| × × ◎ ◎ × | cursor: w-resize
| × × ◎ ◎ × | cursor: text
| × × ◎ ◎ × | cursor: wait
| × × ◎ ◎ × | cursor: help
-------------------------------------------
| ◎ × △ ○ ◎ | display: block
| ◎ × △ ○ ◎ | display: inline
| ◎ × △ ○ ◎ | display: list-item
| ◎ × ◎ ◎ ◎ | display: none
-------------------------------------------
| × × ◎ ◎ × | filter: {filter}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | float: left
| ◎ × ◎ ◎ ◎ | float: right
| ◎ × ◎ ◎ ◎ | float: none
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | font: style variant weight size/height family
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | font-family: serif
| ◎ △ ◎ ◎ △ | font-family: sans-serif
| ◎ △ ◎ ◎ △ | font-family: cursive
| ◎ △ ◎ ◎ △ | font-family: fantasy
| ◎ ◎ ◎ ◎ ◎ | font-family: monospace
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | font-size: xx-small
| ◎ ◎ ◎ ◎ ◎ | font-size: x-small
| ◎ ◎ ◎ ◎ ◎ | font-size: small
| ◎ ◎ ◎ ◎ ◎ | font-size: medium
| ◎ ◎ ◎ ◎ ◎ | font-size: large
| ◎ ◎ ◎ ◎ ◎ | font-size: x-large
| ◎ ◎ ◎ ◎ ◎ | font-size: xx-large
| ◎ ◎ △ ○ ◎ | font-size: larger
| ◎ ◎ ◎ ◎ ◎ | font-size: smaller
| ◎ ◎ ◎ ◎ ◎ | font-size: 10cm
| ◎ ◎ ◎ ◎ ◎ | font-size: 10em
| ◎ ◎ ◎ ◎ ◎ | font-size: 10ex
| ◎ ◎ ◎ ◎ ◎ | font-size: 10in
| ◎ ◎ ◎ ◎ ◎ | font-size: 10mm
| ◎ ◎ ◎ ◎ ◎ | font-size: 10pc
| ◎ ◎ ◎ ◎ ◎ | font-size: 10pt
| ◎ ◎ ◎ ◎ ◎ | font-size: 10px
| ◎ ◎ ◎ ◎ ◎ | font-size: 10%
-------------------------------------------
| ◎ △ ◎ ◎ ◎ | font-style: normal
| ◎ ◎ ◎ ◎ ◎ | font-style: italic
| ◎ × ◎ ◎ × | font-style: oblique
-------------------------------------------
| ◎ × ◎ ◎ × | font-variant: normal
| ◎ × ◎ ◎ × | font-variant: small-caps
-------------------------------------------
| × △ × × × | font-weight: extra-light
| × △ × × × | font-weight: light
| × △ × × × | font-weight: demi-light
| × △ × × × | font-weight: medium
| × △ × × × | font-weight: demi-bold
| × ◎ × × × | font-weight: extra-bold
| ◎ × △ ○ △ | font-weight: normal
| ◎ ◎ ◎ ◎ ◎ | font-weight: bold
| ◎ × ◎ ◎ ◎ | font-weight: bolder
| ◎ × △ ○ △ | font-weight: lighter
| ◎ × △ ○ △ | font-weight: 100
| ◎ × △ ○ △ | font-weight: 200
| ◎ × △ ○ △ | font-weight: 300
| ◎ × △ ○ △ | font-weight: 400
| ◎ × △ ○ △ | font-weight: 500
| ◎ × ◎ ◎ ◎ | font-weight: 600
| ◎ × ◎ ◎ ◎ | font-weight: 700
| ◎ × ◎ ◎ ◎ | font-weight: 800
| ◎ × ◎ ◎ ◎ | font-weight: 900
-------------------------------------------
| × × ◎ ◎ ◎ | left: {length}
| × × ◎ ◎ ◎ | left: {%}
| × × ◎ ◎ ◎ | left: auto
-------------------------------------------
| ◎ × ◎ ◎ × | letter-spacing: normal
| ◎ × ◎ ◎ × | letter-spacing: {length}
-------------------------------------------
| ◎ × ◎ ◎ ◎ | line-height: normal
| ◎ × ◎ ◎ ◎ | line-height: {number}
| ◎ ◎ ◎ ◎ ◎ | line-height: {length}
| ◎ ◎ ◎ ◎ ◎ | line-height: {%}
-------------------------------------------
| ◎ × ◎ ◎ × | list-style: {type}
| ◎ × ◎ ◎ × | list-style: {position}
| ◎ × ◎ ◎ × | list-style: {url}
-------------------------------------------
| ◎ × ◎ ◎ × | list-style-image: {url}
| ◎ × ◎ ◎ × | list-style-image: none
-------------------------------------------
| ◎ × ◎ ◎ × | list-style-position: inside
| ◎ × ◎ ◎ × | list-style-position: outside
-------------------------------------------
| ◎ × ◎ ◎ ◎ | list-style-type: disc
| ◎ × ◎ ◎ ◎ | list-style-type: circle
| ◎ × ◎ ◎ ◎ | list-style-type: square
| ◎ × ◎ ◎ ◎ | list-style-type: decimal
| ◎ × ◎ ◎ ◎ | list-style-type: lower-rmoan
| ◎ × ◎ ◎ ◎ | list-style-type: upper-roman
| ◎ × ◎ ◎ ◎ | list-style-type: lower-alpha
| ◎ × ◎ ◎ ◎ | list-style-type: upper-alpha
| ◎ × ◎ ◎ ◎ | list-style-type: none
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | margin: {length}
| ◎ ◎ ◎ ◎ ◎ | margin: {%}
| ◎ × ◎ ◎ ◎ | margin: auto
| ◎ ◎ ◎ ◎ ◎ | margin-left: {length}
| ◎ ◎ ◎ ◎ ◎ | margin-left: {%}
| ◎ × ◎ ◎ ◎ | margin-left: auto
| ◎ ◎ ◎ ◎ ◎ | margin-right: {length}
| ◎ ◎ ◎ ◎ ◎ | margin-right: {%}
| ◎ × ◎ ◎ ◎ | margin-right: auto
| ◎ ◎ ◎ ◎ ◎ | margin-top: {length}
| ◎ ◎ ◎ ◎ ◎ | margin-top: {%}
| ◎ × ◎ ◎ ◎ | margin-top: auto
| ◎ × ◎ ◎ ◎ | margin-bottom: {length}
| ◎ × ◎ ◎ ◎ | margin-bottom: {%}
| ◎ × ◎ ◎ ◎ | margin-bottom: auto
-------------------------------------------
| × × ○ ○ × | overflow: scroll
| × × ○ ○ × | overflow: hidden
| × × ○ ○ × | overflow: visible
| × × ○ ○ × | overflow: auto
-------------------------------------------
| ◎ × ◎ ◎ ◎ | padding: {length}
| ◎ × ◎ ◎ ◎ | padding: {%}
| ◎ × ◎ ◎ ◎ | padding-top: {length}
| ◎ × ◎ ◎ ◎ | padding-top: {%}
| ◎ × ◎ ◎ ◎ | padding-right: {length}
| ◎ × ◎ ◎ ◎ | padding-right: {%}
| ◎ × ◎ ◎ ◎ | padding-bottom: {length}
| ◎ × ◎ ◎ ◎ | padding-bottom: {%}
| ◎ × ◎ ◎ ◎ | padding-left: {length}
| ◎ × ◎ ◎ ◎ | padding-left: {%}
-------------------------------------------
| × × ○ ○ × | page-break-before: auto
| × × ○ ○ × | page-break-before: always
| × × ○ ○ × | page-break-before: left
| × × ○ ○ × | page-break-before: right
-------------------------------------------
| × × ○ ○ × | page-break-after: auto
| × × ○ ○ × | page-break-after: always
| × × ○ ○ × | page-break-after: left
| × × ○ ○ × | page-break-after: right
-------------------------------------------
| × × ◎ ◎ ◎ | position: absolute
| × × ◎ ◎ ◎ | position: relative
| × × ◎ ◎ ◎ | position: static
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | text-align: left
| ◎ ◎ ◎ ◎ ◎ | text-align: center
| ◎ ◎ ◎ ◎ ◎ | text-align: right
| ◎ × △ ○ △ | text-align: justify
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | text-decoration: none
| ◎ ◎ ◎ ◎ ◎ | text-decoration: underline
| ◎ × ◎ ◎ × | text-decoration: overline
| ◎ ◎ ◎ ◎ ◎ | text-decoration: line-through
| ◎ × △ ○ ◎ | text-decoration: blink
-------------------------------------------
| ◎ ◎ ◎ ◎ ◎ | text-indent: {length}
| ◎ ◎ ◎ ◎ ◎ | text-indent: {%}
-------------------------------------------
| × × × ○ × | text-junsify: auto
| × × × ○ × | text-junsify: inter-word
| × × × ○ × | text-junsify: newspaper
| × × × ○ × | text-junsify: distribute
| × × × ○ × | text-junsify: distribute-all-lines
| × × × ○ × | text-junsify: inter-ideo-graph
-------------------------------------------
| ◎ × ◎ ◎ ◎ | text-transform: capitalize
| ◎ × ◎ ◎ ◎ | text-transform: uppercase
| ◎ × ◎ ◎ ◎ | text-transform: lowercase
| ◎ × ◎ ◎ ◎ | text-transform: none
-------------------------------------------
| × × ◎ ◎ ◎ | top: {length}
| × × ◎ ◎ ◎ | top: {%}
| × × ◎ ◎ ◎ | top: auto
-------------------------------------------
| ◎ × ◎ ◎ ◎ | vertical-align: baseline
| ◎ × ◎ ◎ × | vertical-align: sub
| ◎ × ◎ ◎ × | vertical-align: super
| ◎ × ◎ ◎ ◎ | vertical-align: top
| ◎ × ◎ ◎ ◎ | vertical-align: text-top
| ◎ × ◎ ◎ ◎ | vertical-align: middle
| ◎ × ◎ ◎ ◎ | vertical-align: bottom
| ◎ × ◎ ◎ ◎ | vertical-align: text-bottom
| ◎ × × × ？ | vertical-align: {%}
-------------------------------------------
| × × ◎ ◎ × | visibility: visible
| × × ◎ ◎ × | visibility: hidden
| × × ◎ ◎ × | visibility: inherit
-------------------------------------------
| ◎ × ◎ ◎ △ | width: {length}
| ◎ × ◎ ◎ △ | width: {%}
| ◎ × ◎ ◎ △ | width: auto
-------------------------------------------
| ◎ × ◎ ◎ × | height: {length}
| ◎ × ◎ ◎ × | height: auto
-------------------------------------------
| ◎ × × ？ ◎ | white-space: normal
| ◎ × × ？ ◎ | white-space: pre
| ◎ × × ？ × | white-space: nowrap
-------------------------------------------
| ◎ × × ？ × | word-spacing: normal
| ◎ × × ？ × | word-spacing: {length}
-------------------------------------------
| × × ◎ ◎ × | z-index: {number}
| × × ◎ ◎ × | z-index: auto
-------------------------------------------
| × × ◎ ◎ × | A:hover { ... }
| ◎ ◎ ◎ ◎ ◎ | A:link { ... }
| ◎ × ◎ ◎ ？ | A:active { ... }
| ◎ × ◎ ◎ ◎ | A:visited { ... }
-------------------------------------------
| ◎ × × ？ × | P:first-line { ... }
| ◎ × × ？ × | P:first-letter { ... }
-------------------------------------------
| ◎ ？ ○ ○ ？ | !important
| ◎ ？ ○ ○ ？ | @import url(...)
| × × ○ ○ × | @font-face { ... }
| × × × ？ ○ | @fontdef url(...)
-------------------------------------------