deprecated resetダウンロード - deprecated resetソースコードのダウンロード

deprecated reset

その他のソースコード

1.0.0

ダウンロード

next.cssリセットモジュール

リセットCSSモジュールは、next.cssフレームワークの一部です。このモジュールは、次の.CSSプロジェクトにデフォルトのCSSスタイルをリセットします。 Webpack、Rollup、Parcelなどのモジュールバンドラーを使用して、すべての最新のWebサイトで使用できます。

githubのnext.css

インストール方法

NPMまたはYARNパッケージマネージャーでインストールできます。

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 、 scroll chaining機能、 bodyのmax-width 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 、および一般的な入力要素で16pxにfont-sizeをリセットします。 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;
}

生産ビルド

autoprefixerおよびpostcss-purgecssを使用してpostcssを使用することを強くお勧めします。このスタックは、 -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' ] ,
} ;