deprecated reset

Next.css reiniciar módulo

El módulo CSS de reinicio es parte del marco Next.CSS. Este módulo restablece los estilos CSS predeterminados para su proyecto Next.css. Puede usar en todos los sitios web modernos con agrupadores de módulos, como Webpack, Rollup, Parcel.

Next.css en Github

Cómo instalar

Puede instalar con los administradores de paquetes de NPM o hilo .

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

Cómo usar

Importación simple a su proyecto, este módulo contiene solo reglas de selección de elementos.

 import '@nextcss/reset' ; 

Por qué deberías usar

Algunos elementos HTML tienen un estilo predeterminado en los navegadores y algunos elementos HTML diseñados diferentes en cada navegador. Este módulo restablecerá estos estilos.

Características

• Restablecer estilos de elementos HTML más comunes
• Restablecer el esquema y el resaltado de toque
• Restablecer arrastre y soltar
• Restablecer Pull para actualizar y desplazarse
• Restablecer zoom de pellizco y gestos táctiles
• Dimensionamiento de la caja
• Establezca la pila de fuentes del sistema con tamaño de fuente 14px y altura de 1.4 línea

Lo que está incluido - TL; Dr

En cada elemento HTML: configure border-box como box-sizing predeterminado, desactive la función Drag and Drop y restablecer outline .

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

Establezca font-size predeterminado en 14px , desactive Tap highlighting para dispositivos móviles, habilite Smooth font rendering , desactive Text size increase algorithm para dispositivos Apple.

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

Desactive pinch zoom y otros touch gestures , desactive pull to refresh , rubber banding y características scroll chaining , establezca max-width en body como 100 viewport width , reinicie margin predeterminado predeterminado, establece line-height predeterminada y Systen Font Stack

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

Restablecer margin predeterminado y las propiedades font en los encabezados y el párrafo.

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

Arreglar etiqueta small dinámica

 small {
  font-size : 85 % ;
}

Restablecer color y text-decoration en enlaces.

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

Etiqueta button de reinicio

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

Limite width la imagen y border de reinicio.

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

Restablecer border , shadow , font y establecer font-size en 16px en elementos de entrada comunes. Tamaño de fuente 16px Evite cambiar el tamaño viewport en los dispositivos 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;
}

Restablecer margin , padding y list-style en las listas.

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

Restablecer border de la regla horizonal

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

Restablecer el borde table y la cabeza de la tabla font-weight

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

th {
  font-weight : inherit;
}

Restablecer border de iframe

 iframe {
  border : 0 ;
}

Restablecer margin y padding en elementos HTML comunes

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

Restablecer font en la etiqueta adrress

 address {
  font : inherit;
}

Construcción de producción

Recomendamos encarecidamente usar postcss con autoprefixer y postcss-purgecss . Esta pila extenderá las reglas CSS con prefijos específicos del navegador, como -webkit y eliminará los estilos no utilizados en la construcción de producción.

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

Nuestra configuración postcss.config.js . Debe configurar el parámetro content para su proyecto.

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

Licencia

Licencia MIT. Copyright (c) 2021 ZSOLT TOvis