deprecated reset

next.css重置模塊

重置CSS模塊是Next.CSS框架的一部分。該模塊為您的下一個項目重置默認的CSS樣式。您可以在所有帶有模塊串件的現代網站中使用，例如WebPack，lollup，carcel。

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 ，禁用Apple設備的Text size increase algorithm 。

 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和滾動鍊鍊功能，將body上的max-width設置為100 viewport width ，重置默認margin ，設置默認line-height和Systen Font Stack 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' ;
}

重置標題和段落上的默認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字體尺寸避免在Apple設備上調整viewport大大大小。

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

重置iframe border

 iframe {
  border : 0 ;
}

在常見的HTML元素上重置margin和padding

 menu {
  margin : 0 ;
  padding : 0 ;
}

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

重置adrress標籤上的font

 address {
  font : inherit;
}

生產建造

我們強烈建議將postcss與autoprefixer和postcss-purgecss一起使用。該堆棧將使用瀏覽器特定前綴（例如-webkit擴展CSS規則，並將刪除生產構建中未使用的樣式。

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

執照

麻省理工學院許可證。版權（C）2021 ZSOLT TOVIS