同时定义标准属性 "grid-row "以实现兼容性。

Question

我得到一个警告VS代码 "还定义标准属性'grid-row'的兼容性 "这段代码。

header {
  -ms-grid-row: 1;       /* warning here */
  -ms-grid-column: 1;    /* warning here */
  -ms-grid-column-span: 2;
  grid-area: header;
}
main {
  -ms-grid-row: 2;       /* warning here */
  -ms-grid-column: 2;
  grid-column: main;
  min-height: calc(100vh - 150px);
}

aside {
  -ms-grid-row: 2;
  -ms-grid-column: 1;    /* warning here */
  -ms-grid-row-span: 2;
  grid-row: sidebar;
  background-color: #c8ac6a;
}

footer {
  -ms-grid-row: 3;      /* warning here */
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: footer;
  background-color: whitesmoke;
}

main {
  -ms-grid-row: 2;      /* warning here */
  -ms-grid-column: 2;
  grid-column: main;
  min-height: calc(100vh - 150px);
}

aside {
  -ms-grid-row: 2;
  -ms-grid-column: 1;   /* warning here */
  -ms-grid-row-span: 2;
  grid-row: sidebar;
  background-color: #c8ac6a;
}

footer {
  -ms-grid-row: 3;     /* warning here */
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: footer;
  background-color: whitesmoke;
}

如何解决这个问题？

Answer 1

如果你想的话，你可以通过将这个设置为 ignore:

CSS > Lint: 供应商前缀

  When using a vendor-specific prefix, also include the standard property.

你之所以收到警告，是因为你使用了一个或多个这样的键。

-ms-grid-row
-ms-grid-column

的元素中，而不同时使用标准的非前缀版本。

grid-row
grid-column

所以在每个元素中，如果你有 -ms-grid-row 还包括，在它之后的同一个选择器中。grid-row 同理 -ms-grid-column 放置 grid-column 后，在同一个选择器中。 警告就会消失。 这是一个很好的做法。 比如说。

header {
  -ms-grid-row: 1;   /* warning has gone away */
  grid-row: 1;

  -ms-grid-column: 1;
  -ms-grid-column-span: 2;

  grid-column: 2;
  grid-area: header;
}

或者设置 CSS > Lint: Vendor Prefix 到 ignore 你就不会看到警告--但我不建议这样做。 你应该包括这些键的标准无前缀版本。