HuntExams Academy
HTML/CSSAdvanced#css#cross-browser

What are common cross-browser compatibility issues in CSS and how do you handle them?

Differences in default box-sizing, flexbox bugs in older Safari, gap support in flexbox on older browsers, and vendor-specific rendering of form elements are common. Use a CSS reset/normalize, vendor prefixes (autoprefixer), feature queries (@supports), and tools like caniuse.com to check support.

Example
@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (display: grid) {
  .layout { display: flex; flex-wrap: wrap; }
}
/* Autoprefixer adds: -webkit-, -moz- automatically via build tools */

Related Questions

1
HTML/CSSBeginner#css#cross-browser

What is a CSS reset or normalize.css and why use one?

Open
2
HTML/CSSAdvanced#css#performance

What is critical CSS and how does it improve page performance?

Open
3
HTML/CSSIntermediate#css#performance

What are CSS sprites and why were/are they used?

Open