CSS 浏览器与样式组件的兼容性

Question

我正在使用 styled-components CSS-in-JS 来设计我的 Gatsby.js 网站。

styled-components 是否让我的 CSS 跨浏览器兼容？

例如，假设我正在设计表单样式。使用传统的 CSS 我会做类似的事情：

button, input, select, textarea {
  margin: 0;
  width: 100%;
       border-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

对于样式组件，我想这样做：

const Form = styled.form`
  button, input, select, textarea {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
`

我可以省略这些 -moz 或 -webkit 声明并最终得到跨浏览器兼容的 CSS 吗？

Answer 1

styled-components 库具有 opted for 自动前缀供应商样式，因此您无需提供 -moz 或 -webkit extensions.

图书馆会帮你处理的。它是通过 stylis styled-components 在下面使用的解析器完成的。您可以查看他们的实时预览以查看添加了哪些。

CSS 浏览器与样式组件的兼容性

CSS browser compatibility with styled-components

styled-components

css-in-js