search

tangway / flag-guessing-game-frontend

0 stars 0 forks source link

install and use `autoprefixer` so that it takes care of cross browser compatibility for css properties #40

Open tangway opened 7 months ago

tangway commented 7 months ago

when i realized that the newer media query syntax that uses the comparison operator like @media (width < 500px) isn't recognized on an older iphone, i decided to look into using autoprefixer so as to solve all browser vendor related compatibility issues. setup is easy by just installing the package and then making a postcss.config.cjs file in the root of the Vite React project. it is a project that is still regularly updated according to changes in CSS standards, the most recent release was just 3 days ago. so yeah it looks like it's all pros and no cons for using this tool.

// this is how postcss.config.cjs looks like
module.exports = {
  plugins: [
    require('autoprefixer')
  ],
};
tangway commented 7 months ago

realized that with or without autoprefixer the build css already has the same vendor prefixes added. it is likely that Vite in its default usage of PostCSS has a configuration for autoprefixer. autoprefixer is one of the plugins in PostCSS as you can see here: https://github.com/postcss/autoprefixer