آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

الفرق بين normalize.css و reset.css

عند تغيير خصائص مثل left و top، يتسبب ذلك في إعادة حساب التخطيط (reflow) وإعادة الرسم (repaint)، مما يؤثر على أداء الصفحة. لتحسين الأداء، يمكن استخدام
الفرق بين normalize.css و reset.css

توحيد أنماط المتصفحات: دليل شامل لاستخدام normalize.css و reset.css وتحسين أداء الويب

مقدمة

عند تطوير مواقع الويب، تواجه المطورين مشكلة شائعة وهي اختلاف الأنماط الافتراضية للمتصفحات. هذه الأنماط، مثل الهوامش، الحشوات، وأنماط الخطوط، تختلف من متصفح لآخر، مما يؤدي إلى ظهور الصفحات بشكل غير متسق. لحل هذه المشكلة، يتم استخدام مكتبات مثل normalize.css و reset.css. في هذا المقال، سنستعرض الفرق بينهما، وكيفية استخدامهما، بالإضافة إلى نصائح لتحسين أداء الصفحات.

الفرق بين normalize.css و reset.css

الفرق بين normalize.css و reset.css
reset.css

الهدف: إعادة تعيين جميع الأنماط الافتراضية للمتصفحات إلى صفر أو قيمة ثابتة.
المنهج: يزيل جميع الأنماط الافتراضية مثل الهوامش، الحشوات، وأنماط العناصر مثل <h1> إلى <h6> <ul> <ol> وغيرها.
النتيجة: بعد تطبيقه، تبدأ جميع العناصر من نقطة الصفر، مما يتطلب من المطور تعيين كل الأنماط يدويًا.
الاستخدام: يُفضل استخدامه عندما تريد تحكمًا كاملاً في التصميم دون أي تأثيرات من أنماط المتصفح الافتراضية.
مثال:


html, body, div, span, h1, h5, h3, p, a, img, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
    
normalize.css

الهدف: تحسين الأنماط الافتراضية للمتصفحات لجعلها أكثر تناسقًا عبر المتصفحات المختلفة بدلاً من إعادة تعيينها.
المنهج: يحافظ على العديد من الأنماط الافتراضية المفيدة ويعمل على توحيدها بين المتصفحات. على سبيل المثال، يحافظ على أنماط الخطوط الأساسية، الهوامش، والحشوات، لكنه يضمن أن تكون متسقة عبر المتصفحات.
النتيجة: يوفر أساسًا أكثر تناسقًا للتصميم دون الحاجة إلى إعادة تعيين كل شيء من الصفر.
الاستخدام: يُفضل استخدامه عندما تريد بدء التصميم من نقطة متسقة عبر المتصفحات مع الحفاظ على بعض الأنماط الافتراضية المفيدة.
مثال:


html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
    
مقارنة سريعة بين reset.css و normalize.css
الميزة reset.css normalize.css
الهدف إعادة تعيين الأنماط إلى الصفر توحيد الأنماط عبر المتصفحات
التعامل مع الأنماط يزيل جميع الأنماط الافتراضية يحسن الأنماط الافتراضية
التحكم يتطلب تعيين كل الأنماط يدويًا يوفر أساسًا متسقًا للتصميم
الاستخدام عندما تريد تحكمًا كاملاً عندما تريد بدء تصميم متسق
دعم المتصفحات القديمة (مثل IE6 و IE7)

بعض المتصفحات القديمة مثل Internet Explorer 6 و 7 لا تدعم بعض خصائص CSS الحديثة. لحل هذه المشكلة، يمكن استخدام بعض الحيل البرمجية:

دعم display: inline-block في IE6 و IE7

.element {
    display: inline-block;
    *display: inline; /* يستهدف IE6 و IE7 */
    zoom: 1; /* يعمل على تفعيل خاصية hasLayout في IE */
}
    
التعامل مع وضع التباين العالي في Internet Explorer

متصفح Internet Explorer يدعم وضع التباين العالي (High Contrast Mode)، والذي يغير الألوان لتحسين إمكانية الوصول. يمكن استخدام محددات الوسائط للتعامل مع هذا الوضع:


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
    .header {
        background: #fff;
        color: #000;
    }
}
@media screen and (-ms-high-contrast: white-on-black) {
    .header {
        background: #000;
        color: #fff;
    }
}
    
استهداف متصفحات محددة (مثل IE6 و IE7 و IE8)
استهداف IE6 و IE7

.hide-on-ie6-and-ie7 {
    *display: none; /* يستهدف IE6 و IE7 */
}
    
استهداف IE8

@media \0screen {
    .hide-on-ie8 {
        display: none;
    }
}
    
تحسين الأداء باستخدام transform و opacity

عند تغيير خصائص مثل left و top، يتسبب ذلك في إعادة حساب التخطيط (reflow) وإعادة الرسم (repaint)، مما يؤثر على أداء الصفحة. لتحسين الأداء، يمكن استخدام خصائص مثل transform و opacity لأنها لا تتسبب في إعادة حساب التخطيط.

مثال بدون تحسين:

#box {
    left: 0;
    top: 0;
    transition: left 0.5s, top 0.5s;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: gray;
}
#box.active {
    left: 100px;
    top: 100px;
}
    
مثال مع تحسين:

#box {
    left: 0;
    top: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: gray;
    transition: transform 0.5s;
    transform: translate3d(0, 0, 0);
}
#box.active {
    transform: translate3d(100px, 100px, 0);
}
    

الخلاصة

  • reset.css: يُستخدم عندما تريد بدء التصميم من الصفر مع تحكم كامل.
  • normalize.css: يُستخدم عندما تريد بدء التصميم من نقطة متسقة مع الحفاظ على بعض الأنماط الافتراضية.
  • دعم المتصفحات القديمة: يمكن استخدام حيل برمجية مثل zoom و *display لدعم المتصفحات القديمة.
  • وضع التباين العالي: يمكن استخدام محددات الوسائط للتعامل مع وضع التباين العالي في Internet Explorer.
  • تحسين الأداء: استخدام transform و opacity بدلاً من left و top لتحسين أداء الصفحة.

نصائح أخيرة

  • اختر بين normalize.css و reset.css بناءً على احتياجات مشروعك.
  • استخدم تقنيات تحسين الأداء مثل transform و opacity لتحسين تجربة المستخدم.
  • تأكد من دعم المتصفحات القديمة إذا كان جمهورك يستخدمها.

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

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق