لقد تعلمت رسم مواقع الويب بالطريقة القديمة: النظر إلى شفرة المصدر ومحاولة إعادة إنتاج ما رأيته. بالإضافة إلى أنني أخذت كتابًا غريبًا عن أشياء غير مرئية (مثل PHP / MySQL) - وانطلق.



يعود الأمر إلى عام 1999 عندما كنا نكتب <font size="4" color="#000000">وما إلى ذلك ، وكان DHTML رائجًا .



عندما ظهرت CSS ، لم يكن أسلوبي في التعلم مختلفًا. لكنني أتمنى حقًا أن أخصص وقتًا لتعلم CSS بشكل صحيح - وفقدت الكثير من المفاهيم الأساسية.



إليك بعض الأشياء التي لم أكن أعرفها ولكني أرغب في معرفتها مسبقًا.

كتلة ، مضمنة ومضمنة كتلة

على الرغم من أنني كنت أعرف عن هذه الخصائص ، إلا أنني لم أفهمها تمامًا لفترة طويلة.



بالمختصر:

• blockتتوسع عناصر الكتلة أفقيًا لتحتل سطرًا كاملاً (مثل الرأس). يمكننا تطبيق الحشو العمودي عليها.
  
  
• inlineتتوسع العناصر المضمنة أفقيًا بما يكفي لاستيعاب المحتوى (مثل العناصر strongأو em). ونحن لا يمكن تطبيق الحشو الرأسي لهم ، وأنها بحاجة عادة إلى وضعها داخل عنصر كتلة.
  
  
• inline-blockتتشابه عناصر الكتلة المضمنة مع العناصر المضمنة ، ولكن يمكنك تطبيق حشوة رأسية عليها (مما يجعلها مفيدة لكائنات مثل الأزرار).

في المثال أدناه ، تحتوي عناصر الكتلة على مخطط أزرق ، والعناصر المضمنة لها خلفية برتقالية ، وعنصر كتلة مضمن بمخطط أحمر.

الصور مضمنة

هذه الصور inlineالافتراضية ليست مشكلة ، لكنها قد تكون مربكة عند محاولة وضعها أو إضافة حشوة رأسية.



إذا كانت مجموعتك لا تحتوي على هذا ، أقترح إضافة القاعدة التالية:

img {
    display: block;
}

هذا سيجعل سلوكهم أكثر قابلية للتنبؤ به. قد ترغب أيضًا في الإضافة max-width: 100%;حتى لا تنفجر من عبوتها.

كيف يتم حساب الطول والعرض

بشكل افتراضي ، يتم حساب عرض / ارتفاع الصندوق عن طريق إضافة:

• منطقة المحتوى
  
  
• منطقة التعبئة
  
  
• منطقة الحدود

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



إذا كان لدينا CSS التالية:

.some-class {
    width: 50%;
    padding: 2em;
    border: 0.1rem;
}

سيكون إجمالي العرض المحسوب .some-class:



50% + 4em + 0.2 rem



هذا بسبب خاصية مسماة box-sizingبقيمة افتراضية content-box. تعني هذه القيمة أنه widthيتم تطبيق الخاصية على منطقة المحتوى: يتم إضافة كل شيء آخر في الأعلى.



يمكننا تغيير هذا لجميع العناصر بالقاعدة التالية:

* {
    box-sizing: border-box;
}

بالعودة إلى مثالنا ، سيتم الآن حساب عرض العنصر من الحد ، وبالتالي فإن إجمالي عرض العنصر لدينا هو 50٪.



ماذا يحدث للحدود والحشو؟ لا تزال هذه الخصائص / القيم سارية ، لكنها لا تؤثر على العرض الكلي للعنصر: فهي داخل منطقة محددة.



تحقق من Codepen لرؤيتها في العمل:

الحشو

لم نناقش الهامش هنا لأن المساحة المتروكة هي المسافة بين العناصر ، لذا فهي ليست جزءًا من هذا الحساب.

الحشو والحشو ليسا متماثلين

إذا لم يكن للعنصر خلفية أو حد ، فقد يبدو أن الحشو والحشو متماثلان. هذا ليس صحيحا!

• margin هي المسافة بين العناصر
  
  
• padding هي المساحة داخل العنصر

هذا يجعل المساحة المتروكة مفيدة للعناصر التي لها خلفية. غالبًا لا نريد أن يكون المحتوى قريبًا من حافة حاوية العنصر ، بل نسمح paddingله بذلك.

حشوة ماصة

لقد كان هذا مزعجًا للمبتدئين في CSS لفترة طويلة. تصف راشيل أندرو هذه الخاصية على النحو التالي:

« , . , , ».

إذا كان لدينا عنصرا كتلة مع margin-bottom: 1emعنصر واحد وعلى margin-top: 1.5 emالعنصر الموجود أسفله مباشرة ، فإن المساحة الإجمالية بين العنصرين ستكون متساوية 1.5 em.



يمكن ملاحظة ذلك هنا:







عندما تلتقي حشوة ، تمتص الحشوة الأكبر حجم الحشو الأصغر. إذا كان لديهم نفس القيمة ، فإنهم يمتصون بعضهم البعض.



حسابات المسافة البادئة أسهل على الفور. يمكن أن يغير أيضًا نهجنا في إدارة المسافة البادئة ، وفي هذه المرحلة يمكن أن يكون محدد البومة Lobotomised والتقنيات المماثلة مفيدة .



ملاحظة: لا يتم امتصاص الحشو عند تعيين الأصل على display: gridأو display: flex.

تحتوي المتصفحات على ورقة أنماط افتراضية

CSS تعني أوراق الأنماط المتتالية. لذلك ، لا ينبغي أن يكون مفاجئًا أن الشلال هو أحد المفاهيم الأساسية لـ CSS.



بينما قد نعرف كيف تتفاعل أوراق الأنماط الخاصة بنا مع بعضها البعض ، يجب أن نتذكر أن هناك دائمًا ورقة أنماط متصفح افتراضية. يتم تحميله قبل أي أوراق أنماط مخصصة ، مما يجعل من السهل إعادة إعلان القيم الموجودة.



تختلف الأنماط المُعلنة اعتمادًا على المتصفح ، ولكنها سببًا افتراضيًا:

• الرؤوس لها أحجام مختلفة
  
  
• نص أسود
  
  
• القوائم معلمة بالنقاط
  
  
• يمكن أن تحتوي العناصر على أي خاصية display(على سبيل المثال ، blockأو inline)

و عدة أشياء أخرى.



حتى إذا كانت هناك ورقة أنماط واحدة فقط على الموقع ، فسيتم دائمًا دمج ورقة الأنماط هذه مع الأنماط الافتراضية للمتصفح.

استخدم الوحدات النسبية في كل مكان

من pxالمغري استخدام وحدات البكسل ( ) لأنها سهلة الفهم: أعلن عن حجم خط يبلغ 24 بكسل وسيكون النص 24 بكسل. لكن هذا لا يضمن راحة المستخدمين ، خاصة أولئك الذين يغيرون حجم المحتوى على مستوى المتصفح أو يقوموا بالتكبير.



لقد بدأت في استخدامه لفترة طويلة لتحديد حجم الخط em(ولاحقًا rem). استغرق الأمر وقتا أطول لسيد موثوق emو remالمسافة البادئة، والهوامش، تباعد بين الحروف والحدود.



فهم الفرق بين emو remأمر بالغ الأهمية لإدارة الوحدات النسبية. على سبيل المثال ، يمكننا استخدام emالاستعلامات @mediaوالمساحة الرأسية ، ولكن remلعرض الحدود المتسق.



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

العناصر الزائفة :: قبل و :: بعد تحتاج إلى محتوى

شبه عناصر ::beforeو ::afterتتطلب مواصفات إلزامية للممتلكات content، حتى لو كان لا يزال فارغا:

.some-class::before {
    content: '';
}

إذا كان مفقودًا ، فلن يتم عرض العنصر الزائف .

وحدة الفصل

الوحدة ch(الحرف) مفيدة ، على وجه الخصوص ، لتعيين عرض عنصر ما تقريبًا بعدد الأحرف في سطر النص.



لماذا حول؟ من الناحية الفنية ، ch لا يحسب العدد الفعلي للأحرف في سلسلة .



تعتمد الوحدة chعلى عرض الحرف 0. كتب إريك ماير عن هذا :

"القناة الواحدة عادة ما تكون أعرض من الرمز المتوسط ​​، عادة حوالي 20-30٪."

إذا كنت تستخدمه للتحكم في حجم الفقرات وما شابه ذلك ، فهناك اختلاف يجب مراعاته.

التدفق الطبيعي

لقد سمعت هذا المصطلح عدة مرات لكنني لم أفهمه تمامًا لفترة طويلة. يعني "التدفق العادي" أن العناصر معروضة على الصفحة كما تظهر في شفرة المصدر.



على سبيل المثال ، إذا كتبنا:

<h2>Heading</h2>
<p>Paragraph text.</p>

نتوقع أن <h2>Heading</h2>تظهر قبل أو أعلى <p>Paragraph text.</p>. هذا هو التدفق الطبيعي .



إذا تم إخراج عنصر من التدفق الطبيعي ، فلن يظهر في هذا الموقع. تعتبر العناصر العائمة والموضوعة بشكل مطلق مثالاً جيدًا.

زخرفة الدولة: التركيز

لقد تعلمت لأول مرة عن المحددات الزائفة :hover، :focusوفي :activeسياق روابط التصميم. في ذلك الوقت ، بدت جميع أمثلة استخدامها على النحو التالي:

a {
    color: black;
}
a:hover,
a:focus,
a:active {
    color: red;
}

ومع ذلك ، فمن الأفضل ترتيب الدول بشكل مختلف:focus .



:focusهي الحالة التي ينقر فيها المستخدم أو يمرر فوق العناصر المركزة على الصفحة (على سبيل المثال ، الروابط). عندما ينقر المستخدم عليه [tab]، لا يعرف أين سيكون التركيز.



بالإضافة إلى ذلك ، إذا ركز المستخدم على عنصر تم تحريكه بالفعل ، فلن يعرف مكان التركيز.



لكل هذه الأسباب ، من الأفضل أن تصمم بطريقة :focusمختلفة عن :hoverو :active. على سبيل المثال:

a:hover,
a:active {
    /* styles */
}
a:focus {
    /* styles */
}

: nth-child ()

انظر إلى هذا الرمز : هل







ترى الأسطر الفردية في الخلفية؟ على الرغم من أن المحدد p:nth-child(even)يفترض اختيار خطوط زوجية.



ومع ذلك ، فإن المحدد :nth-child()يحسب كل الأشقاء . لا يؤدي تحديد عنصر في محدد (على سبيل المثال p:nth-child()) إلى بدء المحدد من العنصر الأول من ذلك النوع.



بدلاً من ذلك ، يعني تحديد عنصر في المحدد أن القاعدة ستنطبق فقط على هذا النوع من العناصر. إذا قمنا بتبديل مثالنا إلى عناصر فردية p:nth-child(odd)، فسنرى ما يلي:

• h1 لا يبرز ، رغم أنه شقيق غريب
  
  
• pيتم وضع علامة على العناصر التي تستوفي المعايير (الفقرات الثانية والرابعة والسادسة)

دعنا نعود إلى المثال الأول. لنفترض أننا نريد إبراز العناصر المتساوية في الخلفية p. في هذه الحالة ، من الأفضل أن نستخدم محددًا زائفًا مختلفًا تمامًا ، p:nth-of-type(even)







وهذا هو الفرق الرئيسي بين :nth-child()و :nth-of-type(). هناك اختلاف بسيط هنا ، لكنه سيتجنب بعض الالتباس.

فى الختام

فإنه من السهل لإتقان أساسيات CSS، ولكن فهم كيف و ماذا عمل الأشياء بالطريقة التي تفعل غير حاسمة .



إذا قضيت المزيد من الوقت في شبابي في هذا الأمر ، يمكنني كتابة رمز أسرع يكون أكثر كفاءة واستقرارًا.

أنظر أيضا:

• ” CSS القديمة والجديدة. تاريخ تصميم الويب "
• " مطورو CSS - لماذا يحتاجهم العالم؟ "
• " حالة CSS "