ملخص: غالبًا ما يبالغ الأشخاص في هندسة الحلول، مما يؤدي إلى وقوعهم في مشكلات مع CSS الخاص بهم. في هذه المقالة، سنلقي نظرة على أقل قدر من CSS الذي تحتاجه لإنشاء صفحة ذات مظهر لائق.
الجزء الممتع في إنشاء موقع ويب هو أنه إذا قمت بكتابة HTML الخاص بك ولا شيء آخر، فسيكون لديك موقع ويب سريع الاستجابة.
من المؤكد أنه إذا كانت لديك صور، فيمكن أن تسبب بعض مشكلات تجاوز السعة.
لذلك يمكننا أن نبدأ الأمور بإصلاح ذلك:
img { max-width: 100%; display: block;}من الممكن أن يكون لديك مقاطع فيديو أو ملفات SVG تتسبب أيضًا في حدوث مشكلات (لكن هذا أقل احتمالًا مع ملفات SVG)، لذلك إذا كنت بحاجة إلى ذلك، يمكنك التوسع في هذا الأمر قليلًا.
img,svg,video { max-width: 100%; display: block;}تحسين الطباعة
أول شيء يمكننا القيام به هو تغيير عائلة الخطوط نظرًا لأن الوضع الافتراضي ليس مثيرًا للغاية على الإطلاق.
سوف نستخدم فقط الأساسية system-ui لهذا المثال. إنه يتمتع بدعم جيد جدًا هذه الأيام، ويبدو جيدًا على كل نظام دون الحاجة إلى القلق بشأن تحميل أي خطوط إضافية.
بشكل عام، حجم الخط صغير أيضًا، حتى نتمكن من تحسينه، ويكون ارتفاع الخط الافتراضي دائمًا ضيقًا بعض الشيء، لذا فإن أي شيء يقع ضمن النطاق 1.5 إلى 1.7 يجب أن يكون:
body { font-family: System UI; font-size: 1.25rem; line-height: 1.5;}على الرغم من أنه ليس مثاليًا، إلا أنه يمثل بالفعل تحسنًا كبيرًا مقارنة بالإعدادات الافتراضية المعتادة.
إضافة دعم الوضع الداكن
يحب الكثير من الأشخاص الوضع المظلم، لذا دعونا نقوم بتمكينه بناءً على تفضيلات نظام المستخدم.
يمكننا القيام بذلك باستخدام color-scheme ملكية:
html { color-scheme: light dark;}سيؤدي هذا إلى تعيين أنماط وكيل المستخدم إما على سمة فاتحة أو داكنة، بناءً على تفضيلات نظام المستخدمين.
إذا كنت تفضل ذلك، يمكننا القيام بذلك بدون CSS أيضًا!
أتش تي أم أل لانج="en" نظام الألوان="light dark">أتش تي أم أل>ملاحظة صغيرة حول اتباع تفضيلات النظام
على الرغم من أن هذا مفيد حقًا، إلا أنه من أفضل الممارسات السماح للمستخدمين بتبديل نظام الألوان يدويًا أيضًا.
يفضل بعض الأشخاص سمة النظام الداكنة، ولكن سمات موقع الويب الفاتحة، والعكس صحيح.
تقييد عرض المحتوى
يعد طول الخط أحد أهم الأشياء عندما يتعلق الأمر بسهولة قراءة النص.
نحن عموما”https://practicaltypography.com/line-length.html”>تريد المحاولة والدخول في مكان ما في نطاق يتراوح بين 45 إلى 90 حرفًا لكل سطر (للنص الأساسي، وليس العناوين).
لجعل موقع الويب أكثر قابلية للقراءة، سنقوم بتحديد عرض المحتوى باستخدام main العنصر وبعض سحر CSS:
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto;}ال min() ستختار الوظيفة هنا أصغر ما في الأمر أيضًا 70ch أو 100% - 4rem. لأننا داخل أ min() وظيفة، لا نحتاج إلى استخدام calc().
مهما كان الناتج من الدالة min()، فإن العرض أقل من 100%، لذلك ستظل الصفحة عالقة على الجانب الأيسر من إطار العرض.
يمكننا بعد ذلك استخدام هامش السطر: تلقائي لتوسيطه، حيث يعمل هذا على هوامش المحور السطري، لذلك في أي أوضاع كتابة أفقية، يعني ذلك أن كلا من الهامش الأيسر والهامش الأيمن تلقائيان.
قد ترغب في تبديل المحدد الرئيسي لـ .container أو .wrapper حتى تتمكن من التحكم بشكل أكبر في مكان استخدامه.
وبذلك، يبدو ملف CSS النهائي كما يلي:
html { color-scheme: light dark;}body { font-family: system-ui; font-size: 1.25rem; line-height: 1.5;}img,svg,video { max-width: 100%; display: block;}main { max-width: min(70ch, 100% - 4rem); margin-inline: auto;}بناء على رأس هذا
هذه مجرد بداية سريعة لبدء الأمور على أرض الواقع، على الرغم من أنه يمكن استخدامها لصفحة بسيطة جدًا أيضًا.
ومع ذلك، في أغلب الأحيان، قد ترغب في البناء على هذا الأمر، ولكن يجب أن يكون قادرًا على العمل كنقطة انطلاق جيدة!