كيف تتعلم CSS

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

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

أساسيات اللغة

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

المحددات ، أكثر من مجرد فئة

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

المحددات التي تعد جزءًا من مواصفات المستوى 3 (ربما سمعت عنها يشار إليها باسم محددات المستوى 3) تتمتع بدعم متصفح ممتاز. للحصول على نظرة مفصلة على المحددات المتنوعة التي يمكنك استخدامها ، راجع مرجع MDN.

تعمل بعض المحددات كما لو كنت قد طبقت فئة على شيء ما في المستند. على سبيل المثال p:first-child كما لو أضفت فئة إلى العنصر p الأول ، تُعرف هذه بمحددات الفئة الزائفة . تعمل محددات العناصر الزائفة كما لو تم إدراج عنصر ديناميكيًا ، على سبيل المثال ::first-line بطريقة مشابهة span مسافة حول السطر الأول من النص. ومع ذلك ، سيتم إعادة تطبيقه إذا تغير طول هذا السطر ، ولن يكون الأمر كذلك إذا قمت بإدراج العنصر. يمكنك أن تصبح معقدة إلى حد ما مع هذه المحددات. في CodePen أدناه مثال على عنصر زائف مقيد بفئة زائفة. نستهدف العنصر p الأول بـ :first-child الأولى ، ثم يختار محدد ::first-line الأول من هذا العنصر ، ويتصرف كما لو تمت إضافة مسافة حول هذا السطر الأول لجعله غامقًا و تغيير اللون.

الميراث والشلال

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

ملحوظة : لفهم كل هذه الأشياء ، أقترح قراءة The Cascade and Inheritance ، في مقدمة MDN لـ CSS.

إذا كنت تكافح من أجل الحصول على بعض CSS للتطبيق على عنصر ما ، فإن متصفحك DevTools هو أفضل مكان للبدء ، ألق نظرة على المثال أدناه حيث لدي عنصر h1 مستهدف بواسطة محدد العناصر h1 وجعل العنوان برتقاليًا. أنا أستخدم أيضًا فصلًا دراسيًا ، والذي يحدد h1 لإعادة التدوير. يكون الفصل أكثر تحديدًا وبالتالي فإن h1 أرجواني. في DevTools ، يمكنك ملاحظة أن محدد العنصر مشطوب لأنه لا ينطبق. بمجرد أن ترى أن المتصفح يحصل على CSS الخاص بك (لكن شيئًا آخر قد ألغاه) ، يمكنك البدء في معرفة السبب.

نموذج الصندوق

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

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

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

يمكن أن يساعدك Browser DevTools مرة أخرى في فهم نموذج الصندوق قيد الاستخدام. في الصورة أدناه ، أستخدم Firefox DevTools لفحص مربع باستخدام نموذج مربع content-box الافتراضي. تخبرني الأدوات أن هذا هو نموذج الصندوق قيد الاستخدام ، ويمكنني رؤية الحجم وكيفية إضافة الحدود والحشو إلى العرض الذي قمت بتعيينه.

ملاحظة : قبل IE6 ، استخدم Internet Explorer نموذج الصندوق البديل ، مع الحشو والحدود التي تدخل المحتوى بعيدًا عن العرض المحدد. لذلك لفترة من الوقت استخدمت المتصفحات نماذج Box مختلفة! عندما تشعر بالإحباط بسبب مشكلات التشغيل البيني اليوم ، كن سعيدًا لأن الأمور قد تحسنت ، لذلك لا نتعامل مع المتصفحات التي تحسب عرض الأشياء بشكل مختلف.

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

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

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

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

سياقات التنسيق

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

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

ملاحظة : أحدث إصدار من مواصفات العرض يغير قيم display لتعلن صراحة عن القيمة الداخلية والخارجية. لذلك ، في المستقبل قد تقول display: block flex; ( block هي الجزء الخارجي flex كونها داخلية).

اقرأ المزيد عن display في MDN.

يجري داخل أو خارج التدفق

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

هذا هو الأكثر وضوحًا مع العناصر الموضوعة تمامًا. إذا أعطيت position: absolute من التدفق ، فستحتاج إلى التأكد من عدم وجود موقف يتداخل فيه عنصر التدفق الخارج ويجعل جزءًا آخر من التخطيط غير قابل للقراءة.

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

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

تخطيط

لأكثر من خمسة عشر عامًا ، كنا نقوم بالتخطيط في CSS بدون تصميم لنظام تخطيط الوظائف. لقد تغير هذا. لدينا الآن نظام تخطيط قادر تمامًا يتضمن Grid و Flexbox ، ولكن أيضًا تخطيط متعدد الأعمدة وطرق التخطيط القديمة المستخدمة لغرضها الحقيقي. إذا كان تخطيط CSS لغزًا بالنسبة لك ، فانتقل إلى البرنامج التعليمي MDN Learn Layout ، أو اقرأ مقالتي Getting Started With CSS Layout هنا في Smashing Magazine.

لا تتخيل أن أساليب مثل الشبكة و Flexbox تتنافس بطريقة ما . من أجل استخدام Layout بشكل جيد ، ستجد أحيانًا أن المكون هو الأفضل كمكون مرن وأحيانًا يكون Grid. في بعض الأحيان ، ستحتاج إلى سلوك العمود المتدفق لـ multicol. كل هذه اختيارات صحيحة. إذا كنت تشعر أنك تقاتل ضد الطريقة التي يتصرف بها شيء ما ، فهذا بشكل عام علامة جيدة جدًا على أنه قد يكون من المفيد التراجع خطوة إلى الوراء وتجربة نهج مختلف. نحن معتادون على القرصنة في CSS لجعلها تفعل ما نريد ، ومن المرجح أن ننسى أن لدينا عددًا من الخيارات الأخرى لتجربتها.

التخطيط هو مجال خبرتي الرئيسي وقد كتبت عددًا من المقالات هنا في Smashing Magazine وفي أماكن أخرى لمحاولة المساعدة في ترويض مشهد Layout الجديد. بالإضافة إلى مقالة Layout المذكورة أعلاه ، لدي سلسلة كاملة على Flexbox - ابدأ بما يحدث عند إنشاء حاوية Flexbox Flex. على الشبكة بالمثال ، لدي مجموعة كاملة من الأمثلة الصغيرة لشبكة CSS - بالإضافة إلى فيديو تعليمي.

بالإضافة إلى ذلك - وخاصة للمصممين - تحقق من Jen Simmons وسلسلة فيديو Layout Land الخاصة بها.

انتقام

لقد فصلت Alignment عن Layout بشكل عام لأنه بينما تم تقديم معظمنا إلى Alignment كجزء من Flexbox ، فإن هذه الخصائص تنطبق على جميع طرق التخطيط ، ومن الجدير فهمها في هذا السياق بدلاً من التفكير في "Flexbox Alignment" أو "محاذاة شبكة CSS." لدينا مجموعة من خصائص المحاذاة التي تعمل بطريقة مشتركة حيثما أمكن ذلك ؛ لديهم بعد ذلك بعض الاختلافات بسبب الطريقة التي تتصرف بها طرق التخطيط المختلفة.

في MDN ، يمكنك البحث في Box Alignment وكيف يتم تنفيذه في Grid و Flexbox و Multicol و Block Layout. هنا في مجلة Smashing ، لدي مقال يغطي على وجه التحديد المحاذاة في Flexbox: كل ما تحتاج لمعرفته حول Alignment In Flexbox.

تحجيم

لقد أمضيت الكثير من عام 2018 أتحدث عن مواصفات التحجيم الداخلي والخارجي ، ومدى ارتباطها بشبكة Grid و Flexbox على وجه الخصوص. على الويب ، اعتدنا على ضبط الحجم بالأطوال أو النسب المئوية ، حيث تمكنا من إنشاء تخطيطات من نوع الشبكة باستخدام العوامات. ومع ذلك ، يمكن لأساليب التخطيط الحديثة القيام بالكثير من توزيع المساحة بالنسبة لنا - إذا سمحنا لها بذلك. إن فهم كيفية تخصيص Flexbox للمساحة (أو وحدة Grid fr ) يستحق وقتك.

هنا في مجلة Smashing ، كتبت عن Sizing in Layout بشكل عام وأيضًا عن Flexbox في ما هو حجم هذا الصندوق المرن ؟.

الرسم المتجاوب

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

فيما يلي بعض الأدلة البسيطة للتصميم سريع الاستجابة ، وللاستفسارات الإعلامية ، بشكل عام ، تحقق من مقالتي استخدام استعلامات الوسائط للتصميم المستجيب في 2018. ألقي نظرة على فائدة استعلامات الوسائط ، وأعرض أيضًا الميزات الجديدة القادمة استعلامات الوسائط في المستوى 4 من المواصفات.

الخطوط والطباعة

إلى جانب Layout ، شهد استخدام الخطوط على الويب تغيرًا كبيرًا في العام الماضي. الخطوط المتغيرة ، التي تتيح لملف خط واحد أن يكون له اختلافات غير محدودة ، هنا. للحصول على نظرة عامة حول ماهيتها وكيفية عملها ، شاهد هذا الحديث القصير الممتاز من Mandy Michael: Variable Fonts and the Future of Web Design. أيضًا ، أوصي بالطباعة الديناميكية باستخدام CSS الحديث والخطوط المتغيرة بواسطة Jason Pamental.

لاستكشاف الخطوط المتغيرة وقدراتها ، هناك عرض توضيحي ممتع من Microsoft بالإضافة إلى عدد من الملاعب لتجربة الخطوط المتغيرة - يعتبر Axis Praxis الأكثر شهرة (أحب أيضًا Font Playground).

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

التحولات والرسوم المتحركة

تعد CSS Transforms and Animation شيئًا أبحث عنه على أساس الحاجة إلى المعرفة. لا أحتاج في كثير من الأحيان لاستخدامها ، ويبدو أن بناء الجملة يقفز مباشرة من رأسي بين الاستخدامات. لحسن الحظ ، يساعدني المرجع على MDN في الخروج ، وأود أن أقترح البدء بالأدلة حول استخدام تحويلات CSS واستخدام الرسوم المتحركة لـ CSS. يحتوي Zell Liew أيضًا على مقال لطيف يقدم شرحًا رائعًا لتحولات CSS.

لاكتشاف بعض الأشياء الممكنة ، قم بإلقاء نظرة على موقع Animista.

أحد الأشياء التي يمكن أن تكون مربكة بشأن الرسوم المتحركة هو الطريقة التي يجب اتباعها. بالإضافة إلى ما يتم دعمه في CSS ، قد تحتاج إلى تضمين JavaScript أو SVG أو Web Animation API ، وهذه الأشياء كلها تميل إلى التجمع معًا. في حديثها ، اختر مغامرتك للرسوم المتحركة المسجلة في An Event Apart ، تشرح فال هيد الخيارات.

استخدم أوراق الغش كتذكير وليس كأداة تعليمية

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

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

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