Совместимость браузера CSS со стилевыми компонентами и Gatsby

Я оформляю свой сайт Gatsby.js с помощью стилевых компонентов CSS-in-JS.

Gatsby (или styled-components, или 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 и styled-компонентами я бы хотел сделать это:

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

Могу ли я опустить эти -moz или же -webkit декларации и все еще в конечном итоге с Croww-браузер совместимый CSS?

1 ответ

Решение

styled-components Библиотека выбрала авто-префиксные стили поставщиков, поэтому вам не нужно указывать -moz или же -webkit extensions,

Библиотека будет иметь дело с вами. Это сделано с stylis парсер, который styled-components использует под. Вы можете проверить их предварительный просмотр, чтобы увидеть, какие из них добавлены.

Другие вопросы по тегам