Implementation example of CSS Reset style reset

Time:2019-11-17

All browsers have attached default styles, which are applied to every page, called “user agent style sheet”. (ladder is required as follows)

Chromium UA stylesheet -Google Chrome & Opera

Mozilla UA stylesheet – firefox

WebKit UA stylesheet – safari

Although most of them are the same, there are many different styles, such as search input box

So we need to reset CSS processing, unify different browser differences to confirm the starting standard of team development, and make up for the “shortcomings” of browser.

html{
   /*The standard font size can be changed dynamically if the REM adaptation is used on the mobile side * /
  font-size:14px;
  /*Use IE box model (personal choice, I usually set width as the real size of the box, including padding and border)*/
  box-sizing: border-box;
  
}

html,body{
   /*When clicking a link or clickable element in some mobile browsers, a translucent gray background will appear*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*Enhance the experience effect of mobile terminal scrolling*/
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
   /*Consistent with browser window height*/
  height: 100%;
}

body{
   /*Some backgrounds are light gray by default, so they are uniformly set to pure white*/
  background: #fff;
   /*According to the antd, don't use Microsoft YaHei in the company. It's not recommended to use REM for fonts * /
  font:14px,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
  'Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'
   /*Make fonts smoother*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Remove the browser’s default margin and padding, and delete some unnecessary tags by yourself

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form,
pre,
blockquote,
figure{
margin: 0;
padding: 0;
}

a{
   / * little hand * /
  cursor: pointer;
   /*Unlink default underline*/
  text-decoration:none;
   /*It's also done in antd, see if your team needs such a style*/
  transition: color 0.3s ease;
}

ol,
ul{
   /*Remove the ugly style * /
  list-style:none     
}

Some of the attributes of these nodes do not inherit the style of the parent node. All of them inherit it, and cancel the effect of outline and outline

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
color: inherit;
outline: none;
}

button,
input[type='submit'],
input[type='button'] {
 /*Clickable small hand*/
cursor: pointer;
}
 /*Canceling the action button of some browser digital input controls, namely, application, can change the appearance of the controls * /
input[type='number'] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
/**
 *Remove borders and padding from Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 *Let hidden in HTML5 display correctly in ie10
 */

[hidden] {
  display: none;
}
template {
 /*Some browsers will display template, but the template tag is also used less, so it's optional * /
display: none;
}

CSS Reset address

I will continue to add it later. Let’s go together.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

JQuery’s promise

Promise is an asynchronous programming specification, transliteration to understand –“Prometheus” Prometheus is a hero in Greek mythology, whose name means “prophet”. Promise was originally named “futures”. It can be seen that promise does not mean literally “oath”, “promise”, etc., but “prophet” and “future”. Promise is to solve the most headache in asynchronous programmingCallback nesting region […]