
2016年1月12日から、Microsoftが「各OSでサポートされる最新バージョンのInternet Explorerだけ」を、技術サポートとセキュリティアップデートの対象とするようになりました。
https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/
弊社が制作に携わっているウェブサイトでも、IE9以降を対象ブラウザとするケースが増えています。IE8(まで)を切ることによって、それまで画像やヘルパーライブラリを使わなければ実現できなかったような様々な表現を、CSSだけで実装できるようになります。
今後、こうした「IE9/10から使えるCSS」について、実例を挙げつつ取り上げてみたいと思います。
もくじ
補足
取り上げるCSSはCan I Use…で「IE9以降およびその他のブラウザでサポートされているもの」を中心にピックアップしていく予定です。
IE8時代から完全にサポートされていたもの
(リンク先は全てCan I Use…の当該項目のページです)
- CSS position:fixed
- CSS Table display
- CSS 2.1 selectors
- CSS min-width, min-height, max-with, max-height
- CSS inline-block
- CSS Counters
- CSS outline
- CSS3 Box-sizing
- CSS3 Text-overflow
- CSS3 word-break
IE8時代から部分的にサポートされていたもの
(リンク先は全てCan I Use…の当該項目のページです)
- ::first-letter CSS pseudo-element selector
- letter-spacing CSS property
- CSS Generated content for pseudo-elements
- @font-face Web fonts
- CSS3 selectors
- CSS3 Opacity
- CSS background-attachment
- CSS writing-mode property
- CSS3 Overflow-wrap
- CSS page-break properties
IE9からサポートされるもの(IE8では非対応)
(リンク先は全てCan I Use…の当該項目のページです)
- CSS currentColor value
- CSS3 Box-shadow
- CSS3 Colors
- CSS3 Media Queries
- CSS3 Background-image options
- CSS3 2D Transforms
- CSS3 Multiple backgrounds
- CSS background-position edge offsets
- CSS3 Border-radius (rounded corners)
- getComputedStyle
- SVG in CSS backgrounds
- calc() as CSS unit value
- rem (root em) units
参考:IE10からサポートされるもの(IE9では非対応)
(リンク先は全てCan I Use…の当該項目のページです)
- :optional CSS pseudo-class
- CSS user-select: none
- CSS3 Text-shadow
- CSS3 Transitions
- CSS Gradients
- CSS font-feature-settings
- CSS Animation
- CSS Repeating Gradients
- TTF/OTF – TrueType and OpenType font support
- CSS3 3D Transforms
- Flexible Box Layout Module
- Media Queries: resolution feature
- Font unicode-range subsetting
- :indeterminate CSS pseudo-class
- CSS3 Multiple column layout
- ::placeholder CSS pseudo-element