CSS Academy · درس

إعادة ضبط CSS وتوحيدها

أزل الأنماط الافتراضية غير المتسقة للمتصفحات باستخدام عمليات إعادة ضبط CSS وأوراق أنماط التطبيع.

إعادة ضبط CSS وتوحيدها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

المشكلة: اختلاف الإعدادات الافتراضية للمتصفحات

يحتوي كل متصفح على ورقة أنماط user-agent مضمّنة تتضمن أنماطًا افتراضية للعناوين والهوامش والمسافات الداخلية والقوائم وعناصر النماذج. وتختلف هذه الإعدادات بين المتصفحات، مما يؤدي إلى مظهر غير متسق.

CSS Reset

تزيل CSS reset كل الإعدادات الافتراضية للمتصفح، مما يمنحكم نقطة بداية فارغة. يضبط reset الشهير من Eric Meyer الهوامش والمسافات الداخلية والعديد من الخصائص على الصفر أو none.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS Normalize

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

المفاضلة بين Reset و Normalize

مقارنة:

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

CSS Reset حديث

يستهدف reset حديث شائع (من Josh Comeau) أكثر الإعدادات الافتراضية تأثيرًا:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

الصور كعناصر كتلية

يؤدي جعل الصور display: block إلى إزالة الفجوة الافتراضية المضمّنة (الناجمة عن line-height) أسفل الصور داخل الحاويات:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

نمط إعادة ضبط القوائم

أزيلوا علامات القوائم والمسافة البادئة عند تنسيق قوائم التنقل أو قوائم واجهة المستخدم المخصصة:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

إعادة ضبط عناصر النماذج

لا ترث عناصر النماذج (input وbutton وtextarea) الخط افتراضيًا في كثير من المتصفحات. ومن الإصلاحات الشائعة:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Preflight في Tailwind

يتضمن Tailwind CSS عملية إعادة ضبط خاصة به تُسمى Preflight، وهي مبنية على modern-normalize. إذا كنتم تستخدمون Tailwind، فستكون عملية إعادة الضبط مطبقة لديكم تلقائيًا.

موضع وضع Reset

ضعوا ورقة أنماط reset/normalize أولًا دائمًا، قبل أي أنماط للمكونات أو الأدوات المساعدة. ويضمن ترتيب cascade أن تتغلب أنماطكم على reset من دون تعارض في specificity.

اعتبارات Reset المخصص

أنشئوا reset بسيطًا خاصًا بكم ومصممًا لمشروعكم بدلًا من تضمين reset كامل من جهة خارجية. أدرجوا القواعد التي تحتاجون إليها فقط للحفاظ على صغر حجم CSS.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

تحقق سريع

ما الفرق الأساسي بين CSS reset وCSS normalize؟

خلاصة

تختلف الأنماط الافتراضية للمتصفحات. تزيل CSS resets جميع الإعدادات الافتراضية، بينما تجعلها normalize.css متسقة. تركز عمليات reset الحديثة على القواعد الأكثر تأثيرًا، مثل box-sizing: border-box، وتحديد حد أقصى لعرض الصور، وجعل الخطوط موروثة في عناصر النماذج. حمّلوا reset أولًا دائمًا.

الأسئلة الشائعة

هل درس «إعادة ضبط CSS وتوحيدها» مجاني؟

نعم — نص درس «إعادة ضبط CSS وتوحيدها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعادة ضبط CSS وتوحيدها»؟

أزل الأنماط الافتراضية غير المتسقة للمتصفحات باستخدام عمليات إعادة ضبط CSS وأوراق أنماط التطبيع. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إعادة ضبط CSS وتوحيدها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy