كيف تنشئ صفحات ويب متجاوبة وثيمات ألوان جذابة بأقل قدر من أكواد CSS

في عالم الويب الحديث، أصبح تصميم المواقع المتجاوبة (Responsive Web Design) وتوفير تجربة مستخدم شخصية أمرًا لا غنى عنه. يفضل المستخدمون اليوم تصفح المواقع التي تتكيف بسلاسة مع أجهزتهم المختلفة وتفضيلاتهم الشخصية، مثل الوضع الفاتح (Light Mode) أو الداكن (Dark Mode). لحسن الحظ، لا يتطلب تحقيق هذه المرونة الكثير من أكواد CSS المعقدة.

في هذا المقال، سنستكشف كيف يمكننا الاستفادة من قوة استعلامات الوسائط CSS media queries والخصائص المخصصة custom properties لإنشاء صفحات ويب متجاوبة وثيمات ألوان جذابة بأقل جهد ممكن، مما يضمن تجربة تصفح محسّنة لزوار موقعك.

تلبية تفضيلات المستخدمين للألوان: الوضع الفاتح والداكن

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

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

 :root {
  color-scheme: light dark;
 }

 @media (prefers-color-scheme: light) {
  :root {
   --text-primary: #24292e;
   --background: white;
   --shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px 0px;
  }
 }

 @media (prefers-color-scheme: dark) {
  :root {
   --text-primary: white;
   --background: #24292e;
   --shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px 0px;
  }
 }

كما ترى، يمكنك استخدام الخصائص المخصصة لتعيين جميع أنواع القيم. لاستخدام هذه المتغيرات مع عناصر CSS الأخرى، استخدم الدالة var():

 header {
  color: var(--text-primary);
  background-color: var(--background);
  box-shadow: var(--shadow);
 }

في هذا المثال البسيط، سيقوم عنصر header الآن بعرض الألوان المفضلة للمستخدم وفقًا لإعدادات المتصفح الخاصة به. تختلف طرق تعيين أنظمة الألوان المفضلة من قبل المستخدم باختلاف المتصفحات.

اختبار ثيمات الألوان في المتصفحات

الوضع الفاتح والداكن في فايرفوكس (Firefox)

يمكنك اختبار الوضعين light و dark في متصفح فايرفوكس (Firefox) عن طريق كتابة about:config في شريط العنوان. إذا ظهر تحذير، اقبله، ثم اكتب ui.systemUsesDarkTheme في شريط البحث. اختر قيمة Number للإعداد، ثم أدخل 1 للوضع الداكن أو 0 للوضع الفاتح.

الوضع الفاتح والداكن في برايف (Brave)

إذا كنت تستخدم متصفح برايف (Brave)، يمكنك العثور على إعدادات ثيم الألوان في Settings > Appearance > Brave colors.

تحقيق التجاوبية باستخدام المقاييس المتغيرة (Variable Scaling)

يمكنك أيضًا استخدام خاصية مخصصة لضبط حجم النصوص أو العناصر الأخرى بسهولة اعتمادًا على حجم شاشة المستخدم. تختبر ميزة الوسائط width عرض منفذ العرض (viewport). بينما تطابق width: _px حجمًا دقيقًا، يمكنك أيضًا استخدام min و max لإنشاء نطاقات. استعلم باستخدام min-width: _px لمطابقة أي شيء يزيد عن _ بكسل، و max-width: _px لمطابقة أي شيء يصل إلى _ بكسل.

استخدم هذه الاستعلامات لتعيين خاصية مخصصة على :root لإنشاء نسبة قياس:

 @media (min-width: 360px) {
  :root {
   --scale: 0.8;
  }
 }

 @media (min-width: 768px) {
  :root {
   --scale: 1;
  }
 }

 @media (min-width: 1024px) {
  :root {
   --scale: 1.2;
  }
 }

بعد ذلك، اجعل العنصر متجاوبًا باستخدام الدالة calc(). إليك بعض الأمثلة:

 h1 {
  font-size: calc(42px * var(--scale));
 }

 h2 {
  font-size: calc(26px * var(--scale));
 }

 img {
  width: calc(200px * var(--scale));
 }

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

 h1 {
  font-size: calc(5rem * var(--scale));
 }

 h2 {
  font-size: calc(1.5rem * var(--scale));
 }

 p {
  font-size: calc(1rem * var(--scale));
 }

دمج الخصائص المخصصة لمرونة أكبر

بالطبع، يمكنك أيضًا ضرب خاصيتين مخصصتين معًا. على سبيل المثال، تعيين --max-img كخاصية مخصصة على :root يمكن أن يساعد في توفير الوقت لاحقًا عن طريق عدم الاضطرار إلى تحديث قيمة بكسل في أماكن متعددة:

 img {
  max-width: calc(var(--max-img) * var(--scale));
 }

الخلاصة التقنية

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