<IE11対応>実務で使うGridレイアウト【機能編】
前回の記事(「実務で使うGridレイアウト【環境構築編(gulp)】」)では、最新版のAutoprefixerの導入と、Grid機能を有効にする設定について解説しました。今回は【機能編】として、IE11への対応を踏まえた上でGridレイアウトを利用するために気をつけなければならないポイントを解説します。 ※なお、Gridレイアウトそのものの基本的な使い方については既に習得している
前回の記事(「実務で使うGridレイアウト【環境構築編(gulp)】」)では、最新版のAutoprefixerの導入と、Grid機能を有効にする設定について解説しました。今回は【機能編】として、IE11への対応を踏まえた上でGridレイアウトを利用するために気をつけなければならないポイントを解説します。 ※なお、Gridレイアウトそのものの基本的な使い方については既に習得している
ブラウザの種類・バージョンで書式が大きく違って何かとやっかいなlinear-gradient()の 対応状況をまとめてみました。 使用したサンプルはこちら。 表示結果比較の画面キャプチャはこちら 【結果】 ●-webkit-gradient(linear,left top,left bottom,from(#FC0),to(#fff)); [対応]Chrome/Safari4+/iOS4+/Android2.x/ ●-webkit-linear-gradient(top,#FC0,#fff); [対応]Chrome/Safari5+/iOS5+ ●-webkit-linear-gradient(to bottom,#FC0,
CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、 その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。 参考:http://www.css-lecture.com/log/css3/css3-gradient.html そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決