deprecated reset

Next.CSS Redefinir módulo

Redefinir o módulo CSS faz parte do próximo.CSS Framework. Este módulo redefine os estilos CSS padrão para o seu projeto Next.css. Você pode usar em todos os sites modernos com pacotes de módulos, como webpack, rollup, parcela.

Next.css no github

Como instalar

Você pode instalar com os gerentes de pacotes NPM ou de fios .

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

Como usar

Importação simples para o seu projeto, este módulo contém apenas regras de seletor de elementos.

 import '@nextcss/reset' ; 

Por que você deve usar

Alguns elementos HTML possuem um estilo padrão nos navegadores e alguns elementos HTML de estilo diferentes em cada navegador. Este módulo redefine esses estilos.

Características

• Redefinir estilos de elemento HTML mais comuns
• Redefinir contorno e toque de destaque
• Redefinir arrastar e soltar
• Redefinir puxar para atualizar e rolar o encadeamento
• Redefinir zoom de pitada e gestos de tocar
• Defina o tamanho da caixa
• Defina a pilha de fontes do sistema com tamanho de fonte 14px e 1.4 altura de linha

O que está incluído - tl; dr

Em todos os elementos HTML: defina border-box como box-sizing , desative o recurso Drag and Drop e redefinir outline .

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

Defina font-size padrão como 14px , desative Tap highlighting para dispositivos móveis, ative Smooth font rendering , desative 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 % ;
}

Desative pinch zoom e outros touch gestures , desative pull to refresh , rubber banding e scroll chaining , defina max-width no body como 100 viewport width , redefinir margin padrão, defina line-height padrão e 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' ;
}

Redefina as propriedades margin padrão e font sobre títulos e parágrafos.

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

Corrigir small tag dinâmico

 small {
  font-size : 85 % ;
}

Redefinir color e text-decoration nos links.

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

Redefinir a tag button

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

Limitar width da imagem e border redefinida.

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

Redefinir border , shadow , font e definir font-size para 16px em elementos de entrada comuns. Tamanho da fonte de 16px Evite redimensionar viewport nos 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;
}

Redefinir margin , padding e list-style nas listas.

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

Redefinir border da regra horizonal

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

Redefinir a borda table e a mesa da cabeça da cabeça font-weight

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

th {
  font-weight : inherit;
}

Redefinir border do Iframe

 iframe {
  border : 0 ;
}

Redefinir margin e padding em elementos HTML comuns

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

Redefinir font em tag adrress

 address {
  font : inherit;
}

Construção de produção

Recomendamos fortemente usar postcss com autoprefixer e postcss-purgecss . Essa pilha estenderá as regras CSS com prefixos específicos do navegador, como -webkit e removerá estilos não utilizados na construção da produção.

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

Nossa configuração postcss.config.js . Você precisa configurar o parâmetro content do seu projeto.

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

Licença

MIT Licença. Copyright (C) 2021 Zsolt Tovis