Совместимость браузера 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
использует под. Вы можете проверить их предварительный просмотр, чтобы увидеть, какие из них добавлены.