الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

NEXT.CSS RESET MODULE

تعد وحدة إعادة تعيين وحدة CSS جزءًا من إطار عمل NEXT.CSS. تعيد هذه الوحدة إعادة تعيين أنماط CSS الافتراضية لمشروع Next.css الخاص بك. يمكنك استخدام جميع مواقع الويب الحديثة مع حزم الوحدات ، مثل WebPack و Rollup و Parcel.

Next.css على github

كيفية التثبيت

يمكنك التثبيت مع مديري حزم NPM أو YARN . 

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

كيفية استخدام

استيراد بسيط لمشروعك ، تحتوي هذه الوحدة على قواعد محدد العناصر فقط. 

 import '@nextcss/reset' ;

لماذا يجب أن تستخدم

تحتوي بعض عناصر HTML على نمط افتراضي في المتصفحات وبعض عناصر HTML مصممة مختلفة في كل متصفحات. سوف هذه الوحدة إعادة تعيين هذه الأنماط.

سمات

  • إعادة تعيين أنماط العناصر HTML الأكثر شيوعًا
  • إعادة تعيين الخطوط العريضة واضغط على تسليط الضوء
  • إعادة تعيين السحب والإسقاط
  • إعادة تعيين سحب لتحديث وتمرير السلاسل
  • إعادة ضبط Zoom Zoom وإيماءات اللمس
  • تعيين الحجم مربع
  • تعيين مكدس خط النظام مع حجم خط 14px وارتفاع خط 1.4

ما هو مدرج - TL ؛ د.

في كل عناصر 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 {
  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' ] ,
} ;

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا. حقوق الطبع والنشر (ج) 2021 Zsolt Tovis

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل