deprecated reset

Module de réinitialisation suivant.css

Réinitialiser le module CSS fait partie du framework suivant.css. Ce module réinitialise les styles CSS par défaut pour votre projet Next.css. Vous pouvez utiliser dans tous les sites Web modernes avec des bundlers de modules, comme WebPack, Rollup, Parcel.

Suivant.css sur github

Comment installer

Vous pouvez installer avec les gestionnaires de packages NPM ou de fil .

npm i @nextcss/reset
yarn add @nextcss/reset

Comment utiliser

Importation simple dans votre projet, ce module ne contient que des règles de sélecteur d'éléments.

 import '@nextcss/reset' ; 

Pourquoi tu devrais utiliser

Certains éléments HTML ont un style par défaut dans les navigateurs et certains éléments HTML sont différents dans chaque navigateur. Ce module réinitialise ces styles.

Caractéristiques

• Réinitialisez les styles d'élément HTML les plus courants
• Réinitialiser le contour et la mise en évidence
• Réinitialisez la traînée et la chute
• Réinitialiser la traction pour actualiser et faire défiler le chaînage
• Réinitialiser le zoom de pincement et les gestes tactiles
• Dimensionnement de la boîte
• Définissez la pile de polices système avec une taille de police 14px et une hauteur de ligne 1.4

Ce qui est inclus - tl; dr

Sur tous les éléments HTML: Définissez border-box en tant que box-sizing , désactivez la fonction Drag and Drop et de réinitialiser outline .

 * ,
: before ,
: after {
  box-sizing : border-box;
  -webkit-user-drag : none;
  outline : none;
}

Définissez font-size sur 14px , désactivez Tap highlighting pour les appareils mobiles, activez Smooth font rendering , désactivez Text size increase algorithm pour les appareils Apple.

 html {
  font-size : 14 px ;
  -webkit-tap-highlight-color : transparent;
  -webkit-font-smoothing : antialiased;
  -webkit-text-size-adjust : 100 % ;
}

Désactiver pinch zoom body d'autres touch gestures margin désactiver max-width pull to refresh , 100 viewport width rubber banding et Systen Font Stack défiler les fonctionnalités line-height scroll chaining

 body {
  touch-action : pan-x pan-y;
  overscroll-behavior : none;
  max-width : 100 vw ;
  margin : 0 ;
  line-height : 1.4 ;
  font-family : ui-sans-serif , system-ui , -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , 'Helvetica Neue' ,
    Arial , 'Noto Sans' , sans-serif , 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' ;
}

Réinitialisez les propriétés margin et font par défaut sur les en-têtes et le paragraphe.

 h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
p {
  margin : 0 ;
  font : inherit;
}

Correction small étiquette dynamique

 small {
  font-size : 85 % ;
}

Réinitialisez color et text-decoration sur les liens.

 a {
  color : inherit;
  text-decoration : none;
}

Réinitialiser la balise button

 button {
  background-color : inherit;
  border : 0 ;
  color : inherit;
  padding : 0 ;
}

Limiter width de l'image et réinitialiser border .

 img {
  max-width : 100 % ;
  height : auto;
  border : none;
}

Réinitialiser border , shadow , font et régler font-size sur 16px sur les éléments d'entrée communs. Taille de la police 16px Évitez de redimensionner viewport sur les appareils Apple.

 input ,
textarea ,
select {
  font : inherit;
  font-size : 16 px ;
  border : 1 px solid;
  border-radius : 0 ;
  background-clip : padding-box;
}

fieldset {
  border : 1 px solid;
}

Réinitialiser margin , padding et list-style des listes.

 ul ,
ol {
  margin : 0 ;
  padding : 0 ;
  list-style-type : none;
}

Réinitialiser border de la règle horizonale

 hr {
  border : none;
  border-bottom : 1 px solid;
}

Réinitialiser la bordure table et la tête de la tête de la tête font-weight

 table {
  border-spacing : 0 ;
  border-collapse : collapse;
}

th {
  font-weight : inherit;
}

Réinitialiser la border iframe

 iframe {
  border : 0 ;
}

Réinitialiser margin et padding sur les éléments HTML communs

 menu {
  margin : 0 ;
  padding : 0 ;
}

form ,
figure ,
pre ,
blockquote ,
dl ,
dd {
  margin : 0 ;
}

Réinitialiser font sur la balise adrress

 address {
  font : inherit;
}

Construction de production

Nous recommandons fortement d'utiliser postcss avec autoprefixer et postcss-purgecss . Cette pile étendra les règles CSS avec des préfixes spécifiques au navigateur, comme -webkit et supprimera les styles inutilisés dans la construction de production.

npm i -D postcss autoprefixer @fullhuman/postcss-purgecss

Notre config postcss.config.js . Vous devez configurer le paramètre content pour votre projet.

 module . exports = {
  plugins :
    process . env . NODE_ENV === 'production'
      ? [
          'autoprefixer' ,
          [
            '@fullhuman/postcss-purgecss' ,
            {
              content : [ './{pages,components}/**/*.{js,jsx}' ] ,
              safelist : [ 'html' , 'body' ] ,
              defaultExtractor : ( content ) => content . match ( / [w-/:]+(?<!:) / g ) || [ ] ,
            } ,
          ] ,
        ]
      : [ 'autoprefixer' ] ,
} ; 

Licence

Licence MIT. Copyright (C) 2021 Zsolt Tovis