deprecated reset

NEXT.CSS RESET -Modul

Das Reset CSS -Modul ist Teil des Next.CSS -Frameworks. Dieses Modul setzt die Standard -CSS -Stile für Ihr nächstes.css -Projekt zurück. Sie können auf allen modernen Websites mit Modulbundler wie Webpack, Rollup und Paket verwenden.

Weiter.css auf GitHub

So installieren

Sie können mit NPM- oder Garnpaketmanagern installieren.

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

Wie man benutzt

Ein einfacher Import in Ihr Projekt enthält dieses Modul nur Element -Selektorregeln.

 import '@nextcss/reset' ; 

Warum sollten Sie verwenden

Einige HTML -Elemente haben einen Standardstil in Browsern und einige HTML -Elemente, die in jedem Browser unterschiedlich gestaltet sind. Dieses Modul setzt diesen Stil zurück.

Merkmale

• Setzen Sie die häufigsten HTML -Elementstile zurück
• RETSET -Umriss und Tap -Hervorhebung
• Drag & Drop zurücksetzen
• Ziehen Sie den Ziehen zurück, um zu aktualisieren und zu verketten
• Rückenrinsen Zoom zurücksetzen und Gesten berühren
• Boxgröße festlegen
• Setzen Sie den Systemschriftstapel mit 14px -Schriftgröße und 1.4 -Linienhöhe

Was ist enthalten - tl; Dr.

Bei allen HTML-Elementen: Setzen Sie border-box als Standard box-sizing , deaktivieren Sie die Drag and Drop -Funktion und setzen Sie outline zurück.

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

Stellen Sie font-size auf 14px fest, deaktivieren Sie Tap highlighting für mobile Geräte, aktivieren Sie Smooth font rendering , deaktivieren Sie Text size increase algorithm für Apple-Geräte.

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

Deaktivieren Sie pinch zoom und andere touch gestures , deaktivieren Sie pull to refresh , rubber banding und scroll chaining Kettenfunktionen zu erstellen, max-width auf body als 100 viewport width , die margin zurückzusetzen, Standard line-height und Systen Font Stack festzulegen

 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' ;
}

Setzen Sie den Standard margin und font für Überschriften und Absätze zurück.

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

Dynamisches small Tag beheben

 small {
  font-size : 85 % ;
}

color und text-decoration auf Links zurücksetzen.

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

button -Tag zurücksetzen

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

Begrenzen Sie die width und setzen Sie border zurück.

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

border , shadow , Schatten, font und font-size auf 16px auf gemeinsamen Eingangselementen einstellen. 16px Schriftgröße vermeiden Sie die Größe viewport auf Apple -Geräten.

 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;
}

RESET margin , padding und list-style in Listen.

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

border der horizonalen Herrschaft zurücksetzen

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

table und Tabellenkopf font-weight zurücksetzen

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

th {
  font-weight : inherit;
}

Iframe border zurücksetzen

 iframe {
  border : 0 ;
}

margin und padding auf gemeinsame HTML -Elemente zurücksetzen

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

font auf adrress -Tag zurücksetzen

 address {
  font : inherit;
}

Produktionsbau

Wir empfehlen dringend, postcss mit autoprefixer und postcss-purgecss zu verwenden. Dieser Stapel erweitert die CSS -Regeln mit browserspezifischen Präfixen wie -webkit und entfernen ungenutzte Stile im Produktionsbau.

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

Unsere postcss.config.js config. Sie müssen den content für Ihr Projekt konfigurieren.

 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' ] ,
} ; 

Lizenz

MIT -Lizenz. Copyright (C) 2021 ZSolt Tovis