deprecated reset

Next.css сбросить модуль

Сброс CSS -модуль является частью Framework Next.CSS. Этот модуль сбрасывает стили CSS по умолчанию для вашего проекта Next.CSS. Вы можете использовать на всех современных веб -сайтах с модульными пучками, такими как WebPack, Rollup, Parcel.

Next.css на GitHub

Как установить

Вы можете установить с помощью менеджеров NPM или пряжи .

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

Как использовать

Простой импорт в ваш проект, этот модуль содержит только правила селектора элементов.

 import '@nextcss/reset' ; 

Почему вы должны использовать

Некоторые HTML -элементы имеют стиль по умолчанию в браузерах и некоторые HTML -элементы, которые называются различными в каждом браузерах. Этот модуль сбросит эти стили.

Функции

• Сбросить наиболее распространенные стили HTML -элементов
• Сбросить контур и подчеркнуть выделение
• Сбросить перетаскивание
• Сбросить тяну, чтобы обновить и прокрутить цепочки
• Сбросить щипни и прикоснуться к жестам
• Установите размер ящика
• Установите системный стек шрифтов с размером шрифта 14px и высотой 1.4 линии

Что включено - tl; dr

На каждом HTML-элементе: установите border-box в качестве box-sizing по умолчанию, отключить функцию Drag and Drop и outline .

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

Установите по умолчанию font-size на 14px , отключите Tap highlighting для мобильных устройств, включите Smooth font rendering , отключите Text size increase algorithm для устройств Apple.

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

Отключить pinch zoom и другие touch gestures , отключившись pull to refresh , rubber banding и функции scroll chaining , установить max-width на body как 100 viewport width , сброс margin по умолчанию, установите по умолчанию line-height и 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' ;
}

Сбросить margin по умолчанию и свойства font на заголовках и абзаце.

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

Исправить динамический small тег

 small {
  font-size : 85 % ;
}

Сбросить color и text-decoration по ссылкам.

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

Сбросить button тег

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

Ограничить width изображения и сбросить border .

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

Сбросить border , shadow , font и установить font-size на 16px на общих входных элементах. Размер шрифта 16px Избегайте изменения размера viewport на устройствах 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;
}

Сброс margin , padding и list-style в списках.

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

Сбросить border горизонального правления

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

Сбросить границу table и font-weight

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

th {
  font-weight : inherit;
}

Сбросить border Iframe

 iframe {
  border : 0 ;
}

Сбросить margin и padding на общих html -элементах

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

Сбросить font на тег adrress

 address {
  font : inherit;
}

Производственная сборка

Мы настоятельно рекомендуем использовать postcss с autoprefixer и postcss-purgecss . Этот стек расширит правила CSS с помощью специфических префиксов браузера, таких как -webkit и удалит неиспользованные стили в производственной сборке.

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

Наши postcss.config.js config. Вам необходимо настроить параметр content для вашего проекта.

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

Лицензия

MIT Лицензия. Copyright (C) 2021 Zsolt Tovis