Modern CSS Solutions: Modern CSS Reset

In the early years (actually not very early), I wrote several articles about CSS Reset - how much do you know about reset.css .

Describes in detail two CSS reset schemes commonly used in the industry at that time: reset.css and Normalize.css.

Take the more recommended Normalize.css as an example, its core idea is:

1. Unify the performance of some elements across all browsers, protect useful browser default styles instead of completely zeroing them out, and make them behave consistently across browsers;
2. Provide generalized representation for most elements;
3. Fixed some browser bugs and made them consistent across all browsers;
4. Improved the usability of CSS with some neat details;
5. Provides detailed documentation to let developers know the rendering rules of different elements under different browsers;

Today, Normalize has come out to the eighth version -- normalize.css V8.0.1 , and with it is the huge change in the browser market environment.

IE has gradually retired from the stage of history, and the days of dealing with huge differences and different compatibility issues between browsers seem to be gone. Although there are still differences in the treatment of standards by different manufacturers today, and there are still differences in some details, we no longer need to reset the default browser styles like in the past.

To this day, we hear more of the term modern CSS solution . It removes the most basic presentation of page styles, but also focuses on user experience and accessibility . This may also be a link that we tend to ignore when writing CSS in the past.

Modern CSS Reset

One of my favorite CSS Reset solutions lately is from -- Modern-CSS-Reset .

Its core ideas are:

1. Reset sensible defaults
2. Focus on user experience
3. Focus on accessibility

The source code of the entire Reset is relatively simple:

 /* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Some of the more interesting points, just look at the box model:

 *,
*::before,
*::after {
  box-sizing: border-box;
}

Normalize.css is not recommended to do this. Most of the elements box-sizing are actually content-box , but for actual development, all elements are set to border-box It's actually an easier way to do it.

Take a look at some of the practices in terms of user experience and accessibility :

 html:focus-within {
  scroll-behavior: smooth;
}

scroll-behavior: smooth means smooth scrolling, of course, here is the setting to html:focus-within pseudo-class, instead of directly giving html to give smooth scrolling, the purpose of this is only for When using the keyboard tab key to switch the focus page, the page can be smoothly scrolled and switched, which brings a better user experience.

If we set the following CSS:

 html {
  scroll-behavior: smooth;
}

There may be a side effect, for example, when we find elements on the page (using Ctrl + F, or Commond + F on Mac), this CSS code may seriously slow down our search speed:

Look at this code again:

 @media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

I used to use the CSS prefers-* specification to improve the accessibility and robustness of the website . prefers-reduced-motion .

The prefers-reduced-motion rule query is used to reduce the animation effect. Except for the default rule, there is only one syntax value prefers-reduced-motion: reduce . After this rule is turned on, it is equivalent to telling the user agent that the page he wants to see, Some types of animations that are uncomfortable for some people with visual motor impairments can be removed or replaced.

Original text: Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

Vestibular motion disorders are patients with visual movement disorders, which translates to vestibular movement disorders , a type of disease that can cause dizziness. For example, an animation flashes many times a second, which can cause discomfort to the patient.

The method of use is still the above code:

 .ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

If we have some animation like this:

When the user opens prefers-reduced-motion: reduce , this animation should be removed.

The code in the above Reset is used to weaken all the animation effects on the page when the user turns on the corresponding option. It belongs to the consideration of accessibility.

Combined with the actual environment

Of course, combined with the actual environment, the current domestic overall does not pay much attention to accessibility-related content.

Moreover, many businesses simply cannot abandon some old browsers and still need to be compatible with the IE series.

Therefore, for the current Reset scheme, it can be flexibly matched:

1. If your business scenarios still need to consider some old browsers and still need to be compatible with IE series, most of the functions of Normalize.css are still very good choices
2. If your business scenario only focuses on Chrome or Chromium kernel, many of the contents in Normalize.css may actually be compatible adaptations that are never encountered or used in practice, and can be simplified as necessary
3. If your business is global and your users are not only in China, you should start to consider more accessibility- related content. The above Modern CSS Reset can be used for reference.

Therefore, it should be more appropriate to absorb multiple common/well-known Reset solutions in the industry to form suitable ones for your own business according to actual business needs.

Here are some common and modern CSS Reset schemes:

Reset solution	Introduction	Github Stars count
normalize.css	A modern alternative to CSS Reset	47.1K
sanitize.css	Provides consistent, cross-browser default styles for HTML elements and useful default styles	4.8K
reseter.css	Future alternatives to Normalize.css and CSS Reset	981
Modern-CSS-Reset	Small but beautiful, a modern CSS Reset scheme that resets sensible defaults	2.4K

You will see, in fact, everyone claims to be a modern CSS Reset solution, but in fact a lot of the Reset work done internally is not usable at all. Some people like small and beautiful, some people like big and comprehensive . When actually using it, you need to make specific trade-offs. It is the best to combine the magic changes into one that suits you.

At last

Well, this is the end of this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.