Getting started

Browser support

In SCSS, we do not manually add vendor prefixes. Instead, we rely on Next.js, which automatically compiles CSS using Autoprefixer. Autoprefixer processes the compiled CSS and adds the necessary vendor prefixes based on the defined browser support. This ensures cross-browser compatibility for the latest CSS3 features without requiring manual prefixing.

Configuring browser support with Autoprefixer settings

Autoprefixer is an integral part of the project building process. To customize its settings, create a browserslist key in your package.json like so:

{
  "browserslist": [
    ">= 0.5%",
    "last 2 major versions",
    "not dead",
    "Chrome >= 60",
    "Firefox >= 60",
    "Firefox ESR",
    "iOS >= 12",
    "Safari >= 12",
    "not Explorer <= 11"
  ]
}

This example uses Bootstrap's default browser list. For optimal compatibility, consider analyzing your visitors' browsers and operating systems, then adjust the Browserlist settings accordingly based on that data.

For more detailed information on available Browserlist options, visit Browserlist on GitHub.

Top