HOME

ABOUT

ARCHIVES

CONTACT

browser

ウェブデザイナー必見!ブラウザ毎HTML5 & CSS3サポート状況

ウェブデザインを行う上で、ブラウザ毎にサポート状況が違うためベンダープレフィックスをつけたり、条件分岐コメントをつけたりと細々と対応しなければいけません。正直めんどくさいと思うのが常ですが、仕方ありません。

いちいち確認するのもめんどうなので、サポート状況の一覧を作成しました。参考までに。

CSS3 Properties

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
RGBA × × ×
HSLA × × ×
Box Sizing × ×
Background Size × × ×
Multiple Backgrounds × × ×
Border Image × × × × ×
Border Radius × × ×
Box Shadow × × ×
Text Shadow × × × ×
Opacity × × ×
CSS Animations × × × ×
CSS Columns × × × ×
CSS Gradients × × × ×
CSS Reflections × × × × × × × × ×
CSS Transforms × × ×
CSS Transforms 3D × × × × × × ×
CSS Transitions × × × ×
CSS FontFace
FlexBox × × × × × ×
Generated Content × ×
DataURI × ×
Pointer Events × × × × × × ×
Display: table × ×
Overflow Scrolling × × × × × × × × × × × × × ×
Media Queries × × ×

CSS3 Selectors

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Begins with ×
Ends with ×
Matches ×
Root × × ×
nth-child × × ×
nth-last-child × × ×
nth-of-type × × ×
nth-last-of-type × × ×
last-child × × ×
first-of-type × × ×
last-of-type × × ×
only-child × × ×
only-of-type × × ×
empty × × ×
target × × ×
enabled × × ×
disabled × × ×
checked × × ×
not × × ×
nth-child × × ×
General Sibling ×

HTML5 Web Applications

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Local Storage × ×
Session Storage × ×
Post Message × ×
Offline Applications × × × ×
Workers × × × ×
Query Selector × ×
WebSQL Database × × × × × × ×
Indexed Database × × × × × × × ×
Drag and Drop
Hash Change (Event) × ×
History Management × × × ×
WebSockets × × × × ×
GeoLocation × × × ×
Touch × × × × × × × × × × × × × ×
File API × × × ×
Meter element × × × × × ×
disabled × × ×
Progress element × × × ×

HTML5 Graphics & Embedded Content

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Canvas × × ×
Canvas Text × × ×
SVG × × ×
SVG Clipping Paths × × ×
SVG Inline × × ×
SMIL × × ×
WebGL × × ×
Audio × × ×
Video × × ×

HTML5 Audio Codecs

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Audio: ogg/vorbis × × × × × × ×
Audio: mp3 × × × × × × × ×
Audio: wav × × × × ×
Audio: AAC × × × × × × × ×

HTML5 Video Codecs

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Video: ogg/theora × × × × × × ×
Video: H.264 × × × × × × × ×
Video: WebM × × × × × × ×

HTML5 Forms Inputs

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Form: Search × × × ×
Form: Phone × × × ×
Form: URL × × × ×
Form: Email × × × ×
Form: DateTime × × × × × × × × × × × ×
Form: Date × × × × × × × × ×
Form: Month × × × × × × × × ×
Form: Week × × × × × × × × ×
Form: Time × × × × × × × × ×
Form: LocalTime × × × × × × × × ×
Form: Number × × × × × × × ×
Form: Range × × × × × ×
Form: Colour × × × × × × × × ×

HTML5 Forms Attributes

Chrome Firefox OPERA Safari Chrome Firefox OPERA IE
25 20 12 15 5.1 6 25 15 12 6 7 8 9 10
Form: Autocomplete × × × ×
Form: Autofocus × × × ×
Form: List × × × × × ×
Form: Placeholder × × × ×
Form: Min × × × × ×
Form: Max × × × × ×
Form: Multiple × × × ×
Form: Pattern × × × ×
Form: Required × × × ×
Form: Step × × × × ×

IEのサポート状況の悪さ…oh…

また新しい更新情報があり次第、こちらのリストも更新します。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)