web-dev-qa-db-ja.com

CSS：表示：グリッドおよび/または-ms-grid

両方またはdisplay: grid/-ms-gridを1つのスタイルシートに使用する方法はありますか。HTMLハックまたはJavaScriptを使用して、グリッドレイアウトでページが表示されているブラウザーの種類を照会する必要がありますか。

例：

次のスタイリングは機能しないようです

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}
csscss3internet-explorergrid-layoutcss-grid
14
Mr. Bean

新しいCSSグリッドレイアウト構文を時代遅れのIEに変換することは、本当に難しいことです。ベンダープレフィックスを追加するだけではありません。

IEは、CSSグリッドレイアウトの新しいバージョンに存在するもののサポートを非常に限定しています。 IEのサポートはありません

  • 自動配置とそのフローの選択（_grid-auto-flow_ CSSプロパティ）;
  • 列/行の繰り返し（repeat関数、および_auto-fill_や_auto-fit_などの特別な値）。これは、場合によっては、grid-template-columns: repeat(4, 1fr)を_-ms-grid-columns: 1fr 1fr 1fr 1fr_に置き換えることができ、これが完全に機能するように、明示的な値に置き換える必要があることを意味します。しかし、grid-template-columns: repeat(auto-fill, 1fr)のようなものがある場合、IEでこれを実装することは不可能です。
  • グリッドセルのギャップ（_grid-row-gap_、_grid-column-gap_、_grid-gap_ CSSプロパティ）。追加のグリッドトラックを使用してギャップを偽造できます。
  • 自動生成されたトラック（_grid-auto-columns_、_grid-auto-rows_ CSSプロパティ）;
  • 名前付きグリッド領域（_grid-area_、_grid-template-areas_ CSSプロパティ）。

IEのこの可能性を忘れてください。

また、サポートされているIEプロパティの値はサポートされていません

自動配置

IE実装では自動配置の動作はありません。つまり、グリッドの自動配置機能を使用するのではなく、すべてを配置する必要があります。

アイテムを配置しない場合、グリッドの最初のセルにアイテムが積み重ねられます。つまり、グリッドアイテムごとに明示的に位置を設定する必要があります。そうしないと、最初のセルに配置されます。このようなマークアップがある場合：

_.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}_
_<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>_

IEでこれが表示されます

IE grid demo

したがって、IE（ケースのレイアウトを変換できることがわかっている場合）のCSSグリッドを開発する場合、基本的に2つのオプション（方法論）があります。

  • IE browser and other browsersに異なるマークアップを生成します。この場合、マークアップの類似性は気にしません（grid-template-rows: repeat(150px, 50px)の値は無効なので、 _grid-template-rows: 150px 50px_）が必要でした。

    _.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px 50px;
  grid-gap: 1vw;
  
  display: -ms-grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;
}

.grid-item {
  /* style just for demo */
  background-color: yellow;
}

/* Explicit placement for IE */
/* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
.grid-item:nth-child(2) {
  -ms-grid-column: 3;
}

.grid-item:nth-child(3) {
  -ms-grid-column: 5;
}

.grid-item:nth-child(4) {
  -ms-grid-column: 7;
}

.grid-item:nth-child(5) {
  -ms-grid-row: 3;
}

.grid-item:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.grid-item:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.grid-item:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}_
    _<div class="container">
  <div class="grid-item">1,1</div>
  <div class="grid-item">1,2</div>
  <div class="grid-item">1,3</div>
  <div class="grid-item">1,4</div>
  <div class="grid-item">2,1</div>
  <div class="grid-item">2,2</div>
  <div class="grid-item">2,3</div>
  <div class="grid-item">2,4</div>
</div>_

  • IEブラウザに対して非常に似たマークアップを生成します。この場合、すべてのブラウザに対するマークアップは非常に似ています。異なるアプローチを気にする必要はないため、これはより保守性があります。

    _.container {
  display: -ms-grid;
  display: grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;
  grid-template-rows: 150px 1vw 50px;
}

.grid-item {
  /* style just for demo */
  background-color: yellow;
}

.grid-item:nth-child(2) {
  -ms-grid-column: 3;
  grid-column: 3;
}

.grid-item:nth-child(3) {
  -ms-grid-column: 5;
  grid-column: 5;
}

.grid-item:nth-child(4) {
  -ms-grid-column: 7;
  grid-column: 7;
}

.grid-item:nth-child(5) {
  -ms-grid-row: 3;
  grid-row: 3;
}

.grid-item:nth-child(6) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 3;
  grid-column: 3;
}

.grid-item:nth-child(7) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 5;
  grid-column: 5;
}

.grid-item:nth-child(8) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 7;
  grid-column: 7;
}_
    _<div class="container">
  <div class="grid-item">1,1</div>
  <div class="grid-item">1,2</div>
  <div class="grid-item">1,3</div>
  <div class="grid-item">1,4</div>
  <div class="grid-item">2,1</div>
  <div class="grid-item">2,2</div>
  <div class="grid-item">2,3</div>
  <div class="grid-item">2,4</div>
</div>_
28
Vadim Ovchinnikov

displayルールを正しく構成する必要があります。あなたが持っているものは無効です。

_display: grid -ms-grid;
_

また、_grid-template-rows_ルールは無効です。最初の引数は、繰り返し回数を指定する整数であると想定されています。

_grid-template-rows: repeat(150px, 50px);
_

また、repeat()表記が older specs に存在するとは思わない。 現在の仕様 で導入されたように見えるので、IEはサポートしません。

_-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);
_

最後に、公式の（W3C）プロパティを接頭辞付きのバージョンの後に配置して、カスケードで優先されるようにするのが最善です（ more details ）。

これを試して：

_.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}
_
7
Michael_B

Vadimによる答えは、あなたがすべきことである。しかし、痛みを和らげるために使用できるCSSトリックがいくつかあります。

。 IEをサポートするWebサイトにグリッドを使用するかどうかを決定するには、このブログ投稿を必ず読んでください： https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to -use-the-ie-implementation-of-css-grid-layout /

前の質問に対する答えが「はい」の場合は、次をお読みください。

  1. Autoprefixerを使用します。 CSSグリッドのプロパティの一部をIEに相当するものに置き換えます。ただし、グリッドプロパティの複雑さ（繰り返し、最小、スパンなど）を考慮すると、自動プレフィックスはすべてのケースをカバーできません。

  2. 仕様に準拠したCSSを作成したいが、それでもIEが@supports() at-ruleである場合に使用します。より高度なものを使用するために使用します。 grid-gapsなどのグリッドプロパティ：

    .card-list {
  grid-row: 4;
  grid-column: 1 / 3;
  padding: 1.5vh 1vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.card {
  margin-bottom: 1vh;
}
.card:nth-of-type(odd) {  /* takes care of IE */
  margin-right: 1vh;
  grid-column: 1;
}
.card:nth-of-type(even) {
  grid-column: 2;
}

@supports(grid-gap: 1vh) { /* still using standard code! */
  .card-list {
    grid-gap: 1vh;
  }
  .card {
    margin-right: 0;
    margin-bottom: 0;
  }
}
0
kumarharsh