deprecated reset 다운로드 - deprecated reset 소스 코드 다운로드

deprecated reset

기타 소스코드

1.0.0

다운로드

다음 .CSS 재설정 모듈

재설정 CSS 모듈은 Next.css 프레임 워크의 일부입니다. 이 모듈은 Next.css 프로젝트의 기본 CSS 스타일을 재설정합니다. Webpack, Rollup, Parcel과 같은 모듈 번들러가있는 모든 최신 웹 사이트에서 사용할 수 있습니다.

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 및 scroll chaining 기능 기능, 100 viewport width , max-width body 재설정, 기본 line-height margin 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 글꼴 크기 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' ] ,
} ;