ساشا جريف تساءل بصراحة ما إذا كانت CSS أصبحت كبيرة جدًا ، كما تعلم. مع كل الأشياء الجيدة التي تم شحنها في المتصفحات خلال العامين الماضيين - استفسارات الحاويات! بناء جملة اللون النسبي! طبقات تتالي! الخصائص المنطقية! نطاقات في استعلامات وسائل الإعلام! التحولات الفردية! :has() منتقى! - وكل ما هو في الأفق المحتمل - تبديل CSS! التعشيش! خلط اللون! الرسوم المتحركة المرتبطة بالتمرير! أنماط النطاق! - هناك بالتأكيد منحنى تعليمي مختلف لـ CSS في هذه الأيام للوافدين الجدد والمتمرسين على حد سواء.
ربما كان هناك وقت كان من الممكن فيه معرفة معظم خصائص CSS وكيفية عملها. لقد ولت تلك الأيام منذ زمن بعيد ، على الأقل بالنسبة لليد القديمة مثلي. لكن هذا النوع من الأسئلة يطرح السؤال: ما CSS الذي يجب أن تعرفه تمامًا؟
فينكاس ستونيس مؤخرًا طعنة في القائمة. كريس ضع واحدًا معًا استنادًا إلى الميزات التي تم إصدارها منذ CSS3. ربما يكون لديك فكرة عما ستدرجه في القائمة. إذا اضطررت إلى وضع أفضل 5 معًا وقصر نفسي على الخصائص والمحددات فقط ، فقد يبدو الأمر كالتالي ...
writing-mode
لا أستطيع أن أقول ما يكفي عن writing-mode منشأه. ما يجعله مهمًا - خاصة من منظور التعلم - هو أنه يضعك لمبادئ شاملة تراعي صياغة المخططات ، بغض النظر عن لغة المستخدم. فهم جيد ل writing-mode سيؤدي إلى فهم الخصائص والقيم المنطقية، وهذه بدورها مهدت الطريق لفهم تدفق المستندات والتفكير من حيث block, inline, startو end بدلا من الاتجاهات المادية.
display
أجد صعوبة في تصديق أن أي شخص يمكنه كتابة CSS جيدًا دون أن يكون لديه فهم قوي لـ display منشأه. إنها خاصية وإطار عمل لإنشاء التخطيطات. لا يوجد Flexbox أو CSS Grid بدونها ، مما يجعلها نوعًا ما مثل حارس البوابة لفهم تلك الميزات المهمة.
بالإضافة إلى ذلك display خاصية يكمل تماما writing-mode. هذا بالضبط ما ستحتاجه مرة واحدة writing-mode لقد عرّضك لتدفق المستندات والتوجيهات المنطقية. ستحتاج إلى خاصية إما لتغيير التدفق الطبيعي لعنصر (مثل تغيير عنصر كتلة إلى عنصر مضمن) أو البدء في وضع الأشياء (مثل إنشاء سياق تخطيط مرن) وهذا هو المكان display يأتي دور.
margin / padding / border
آه ، أنا أغش تمامًا هنا ولكني أفكر في التعلم margin, paddingو border معا أمر لا مفر منه. كلهم جزء من نموذج الصندوق، كلها تساعد في التباعد والتصميم ، وكلها تتطلب التعرف عليها وحدات طول CSS. إن معرفة ما هي هذه الخصائص مصممة للقيام به وكيف تساهم في الحجم المحسوب لعنصر ما يمنحك بالتأكيد المزيد من التحكم في التصميم ، ويبدد أي ارتباك حول سبب كون العنصر بالحجم الذي هو عليه - صداع CSS شائع!
::before و ::after
واحد آخر حيث أغش قليلاً. نعم، ::before و ::after عنصران زائفان فرديان ، لكن مرة أخرى ، لا أستطيع أن أتخيل التعرف على أحدهما دون الآخر. إنها ثنائية!
أتذكر كيف كان الأمر مذهلاً بالنسبة لي عندما علمت أن هذه موجودة ويمكن استخدامها لإنشاء كل شيء منها تأثيرات واجهة المستخدم الرائعة لإكمال الرسوم التوضيحية أحادية div. إنه يفتح إمكانيات جديدة ويوفر نظرة خاطفة أولى على مدى قوة CSS حقًا.
@media
عفوًا ، أنا بالفعل في العنصر الخامس والأخير في القائمة وأشعر أنه لا يزال هناك الكثير من مزايا CSS التي تنتمي هنا. ولكن إذا اضطررت إلى اختيار شيء أخير ، فسيكون كذلك تساؤلات الإعلام. لماذا ا؟ لأنه مكون أساسي لإنشاء تخطيطات مرنة ومرنة وسياقات عرض مختلفة. استفسارات الحاويات قد ينتهي به الأمر إلى شطب هذا من قائمتي أثناء نضوجها ، ولكن في الوقت الحالي ، @media هو أساس رائع للتصميم سريع الاستجابة.
أبعد من ذلك، @media هي خطوة أولى لطيفة في الصفات الشرطية لـ CSS. ما إذا كنا نكتب استعلامًا بناءً على نوع الجهاز المستخدم (على سبيل المثال ، screen or print) أو عندما يلبي إطار عرض المتصفح معايير معينة (على سبيل المثال ، width >= 768px)، و @media بناء الجملة مفيد بشكل لا يصدق لإنشاء تخطيطات تم تحسينها لظروف مختلفة.
أوه ، ولم نتطرق حتى إلى كيفية القيام بذلك @media يتعلق بإمكانية الوصول ، وذلك بفضل قدرته على تطبيق الأنماط بناءً على تفضيلات المستخدم (على سبيل المثال، prefers-reduced-motion). لذلك ، بالإضافة إلى صياغة المخططات الشرطية ، تعد الاستعلامات عن الوسائط خطوة تالية جيدة نحو فهم التصميم الشامل.
شريفة يذكر
يعد تقطير CSS في قائمة من خمس خصائص ومحددات يجب معرفتها أمرًا صعبًا ، خاصة الآن بعد أن أصبحت CSS أقوى اليوم مما كانت عليه ، على سبيل المثال ، قبل خمس سنوات. هناك عدد من العناصر الأخرى التي أردت حقًا تضمينها ، مثل (بدون ترتيب معين):
calc()has()colorfontoverflowposition(خاصة هذا)z-index
لكني أقف إلى جانب اختياراتي. يعد تعلم CSS أكثر أهمية من حفظ قائمة الخصائص. إنها رحلة وأعتقد أن الخمسة الذين اخترتهم ينحتون مسارًا تعليميًا صغيرًا لطيفًا يمهد الطريق لكتابة قواعد أسلوب جيدة والخطوات التالية للتعمق أكثر في CSS.
حسنًا ، أخبرني عنك!
لا أوافق مع قائمتي؟ يجب! أراهن أن لديك بعض الآراء الذكية وأريد أن أرى كيف يمكنك تقريب قائمة أفضل 5.
