Master Modern CSS Reset Techniques to Eliminate Browser Inconsistencies

CSS Reset is the foundation for building stable cross‑browser styles, eliminating default differences among browsers. Here are modern CSS Reset techniques to solve most compatibility issues and boost development efficiency.

1. Modern Box‑Model Reset

Use a smarter box‑model reset to ensure consistent element sizing calculations.

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Prevent margin collapse */
  min-height: 0;
  min-width: 0;
}
html {
  /* Fix iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
  /* Smooth scrolling */
  scroll-behavior: smooth;
}
/* Prevent overflow content from breaking layout */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

2. Typography Base Reset

Unify text rendering across browsers.

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Improve CJK text display */
  -webkit-text-size-adjust: 100%;
}
/* Standardize heading styles */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
/* Reset link styles */
a {
  color: inherit;
  text-decoration: none;
}

3. Form Element Standardization

Eliminate default style differences of form controls across browsers.

4. List Style Reset

Unify the appearance of lists.

5. Media Element Optimization

Ensure consistent behavior of media elements across browsers.

6. Scrollbar Behavior Unification

Standardize scrollbar behavior across browsers.

7. Touch Interaction Optimization

Improve touch experience on mobile devices.

8. Print Style Optimization

Ensure correct display when printing web pages.

@media print {
  /* Color and background handling for print */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Avoid page breaks inside links */
  a {
    page-break-inside: avoid;
  }

  /* Show full URL in printed links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

Feel free to add more.