[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ
Post on:2016年1月27日
sponsors
IE8がサポート外になり、喜んでいる制作者の人も多いと思います。
正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。
古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。
イラスト: Girls Design Materials
まずは、2016年1月12日にIEの古いバージョンのサポートが終了したので、IE8-10がサポート外になると何が使えるか確認しておきましょう。
×のほとんどは、IE6-8です。
実質IE11と考えると、flexbox, border-imageなども利用できるので他のモダンブラウザとほぼ同じです。こうなると難点はSafariのプレフィックスですね。
Pure CSS animated article grid
flexboxを使ったレスポンシブ対応のカード型レイアウト。
コマ数を落としているので分かりにくいかもしれませんが、レイアウトが変更されるとアニメーションが発動します。
flexboxの基本的な使い方は、下記ページが参考になります。
ラインを使ったメニューのシンプルなデザインから、凝ったアニメーションをするものまで。リストで実装したナビゲーションに、外部ファイルとclassを加えるだけで簡単に実装できます。
去年の暮れあたりからCSSのフィルタを使ったサイトが増えてきました。写真を加工するだけでなく、オーバーレイで文字を重ねたり、使い方はいろいろです。
cssFiltersでは、さまざまなエフェクトを見ながら作成でき、コードも生成してくれます。
ボーダーはソリッドなカラーだけではありません。美しいグラデーションを適用することもできます。
「object-fit」は画像や動画などをどのように配置させるかのプロパティで、比率を維持したまま配置できます。
※IEは非サポートです（参考: Can I use）。
Awesome Bootstrap Checkbox -GitHub
デモページ
Bootstrapも4から、IE8のサポートが終了しました。Pure CSSで実装されたかわいいチェックボックスとラジオボタンです。このCSSは3用と4用が用意されています。
参考: Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用
アイコンをクリック・タップすると、フルクリーンタイプのメニューをさまざまなアニメーションで表示します。
CSSで実装されたアコーディオン。
各パネルがラジオボタンで開閉する仕組みで、その際に使用する「input:checked」のサポートはIE9+となります。
ホバーすると、アニメーションで拡大表示されるパネル。実際のデモではもっと美しく、そして細かくアニメーションしています。
伸び縮みするかわいいパンくずリスト。
デフォルト表示はすべて閉じてしまっていますが、表示ページがアクティブになっていてもよいですね。
CSS Hover Effect using :after Psuedo Element
付箋紙のようなかわいいパネル。:after擬似要素はIE8+対応なので、現状問題無しです。
さらにパワーアップ版という感じで、伸縮のアニメーションだけでなく、エレメントの構成、配置なども変更されます。しかもPure CSSの実装です。
縦長ページでスクロールすると、プロダクトと背景がパースをつけて配置されるエフェクト。これもPure CSSです。
sponsors
