CSS Grid を autoprefixer で IE11 対応させる時の Tips｜yiio
autoprefixer@9.8.6 を使ってつまづいた部分をメモっておきます。 1. grid-template-rows を明示的に指定する // NG .container { display: grid; grid-template-columns: 1fr 1fr; } // OK .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }2. grid-template-rows と grid-template-columns は同じブロック内で宣言する// NG .container { ... @media screen and (max-width: 840px) { grid-template-columns: 1fr; } } // OK .contai
IE11 と CSS Grid の 7 つの約束 - Qiita
はじめに 2020 年 7 月現在、私のシェア率は国内でだいたい10% 弱です。 どうか、私への対応を諦める前にそのことを覚えておいて欲しいのです。 - Internet Explorer 11 WebブラウザシェアランキングTOP10(日本国内・世界) CSS Grid を IE11 で使用する上での注意点を確認していきます。 ※ Gulp および Autoprefixer を使用した IE11 対応を前提とします。また環境構築の手法については本記事では触れないものとします。 CSS Grid が私に何を求めているのか、私がそれを理解できるように記述してほしいのです 私はモダンなプロパティをベンダープレフィックス無しで理解することができません。 CSS Grid も例外ではないため、私の友人である Autoprefixer を介してそれを理解できるように変換して欲しいのです ひとつひとつ
CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】※2021年 aspect-ratioプロパティ追記 ｜株式会社くふうしずおか
Home ブログ CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】※2021年 aspect-ratioプロパティ追記 今回は、CSSでサムネイル画像を描画する方法を、自分用のメモも兼ねていくつか紹介します。 段階を追って、divなどのブロック要素で縦横比率を守ったボックスを作る方法と imgタグを使用した場合、ieに対応した場合、background-imgを使用した場合に、それぞれ内接リサイズ・外接リサイズで表示する方法をまとめました。 内接リサイズ:画像全体が枠内に収まるようにリサイズする。画像の長辺に合わせた方法。 外接リサイズ:枠からはみ出す部分はカットする。画像の短辺を枠に合わせた方法。 ①divの縦横比を固定してレスポンシブにする方法 サムネイルではレスポンシブ対応するために、CSSだけでアスペクト比を固定したい、という場合が多いと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
