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

Question

我正在使用样式化组件CSS-in-JS对我的Gatsby.js网站进行样式设计。

Gatsby（或样式组件或Webpack）是否使我的CSS兼容？

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

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

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

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在下面使用的解析器的完成。您可以查看他们的实时预览以查看添加了哪些。