ممارسات CSS المتقدّمة لمواقع الجهات الحكومية الإماراتية

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

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

استخدام @supports لاكتشاف ميزات المتصفّح

تُعَدُّ استعلامات ميزاتCSS ، التي تم تقديمها من خلال قاعدة @supports في وحدة قواعد CSS الشرطية المستوى الثالث والتي بدأ تنفيذها في المتصفحات حوالي عام 2013، وسيلة تتيح للمطورين الكشف عمّا إذا كان المتصفح يدعم خاصية أو قيمة معينة في CSS قبل تطبيقها. تُعَدُّ هذه التقنية ضرورية لتحقيق مبدأ التحسين الرشيق، أي إثراء تجربة المستخدم في المتصفحات الحديثة، مع السماح في الوقت نفسه بالتدهور الرشيق في البيئات الأقدم أو الأقل قدرة.

يضمن استخدام @supports أن يظلّ المستخدمون على المنصّات الأقدم يحصلون على تجربة وظيفية سليمة، دون التعرّض لأنماط مكسورة أو غير مدعومة. كما يتيح للمطوّرين تطبيق أحدث الميزات دون التضحية بأساسيات سهولة الاستخدام.

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

  
    @supports (display: grid) {
      .layout {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  

  
    <div class="supports-[display:grid]:grid supports-[display:grid]:gap-4">
      <!-- grid layout applied only if supported -->
    </div>
  

  
    @supports (display: grid) {
      .layout {
        display: grid;
        gap: 1rem;
      }
    }
  

التعامل مع الاتجاه: الطولي مقابل العرضي

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

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

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

TailwindCSS

  
    <div class="portrait:bg-white landscape:bg-gray-100">
      <!-- Different background depending on orientation -->
    </div>
  

Vanilla CSS

  
    @media (orientation: portrait) {
      .container {
        background-color: white;
      }
    }
    @media (orientation: landscape) {
      .container {
        background-color: #f7f7f7;
      }
    }
  

إخفاء المحتوى عن الواجهة المرئية مع إظهاره لقارئات الشاشة

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

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

<span class="sr-only">سياق إضافي لقارئات الشاشة</span>
  

  
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  

العرض الشرطي باستخدام استعلامات الوسائط

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

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

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

TailwindCSS

  
    <div class="hidden md:block print:hidden">
      <!-- Visible on medium screens and above, hidden in print -->
    </div>
  

Vanilla CSS

  
    @media screen and (min-width: 768px) {
      .block-md {
        display: block;
      }
    }
    @media print {
      .no-print {
        display: none;
      }
    }
  

استهداف أساليب الإدخال (الفأرة مقابل اللمس)

استخدم ميزات الوسائط لتخصيص التفاعل بناءً على قدرات الجهاز.

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

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

TailwindCSS

رغم أن TailwindCSS في الإصدار 3 x لا يوفّر فئة جاهزة لهذا الغرض، إلا أنه يمكنك تحقيق ذلك بالأسلوب المبيّن أدناه:

      
        @layer utilities {
          @media (hover: hover) and (pointer: fine) {
            .hover-enabled:hover {
              @apply bg-black;
            }
          }
        }
      
    

Vanilla CSS

أزل شرط ‎@layer‎ من المثال أعلاه.

      
        @media (hover: hover) and (pointer: fine) {
          .hover-enabled:hover {
            background-color: black;
          }
        }
      
    

الاعتبارات الخاصة بالاتجاه من اليمين إلى اليسارمع الخصائص المنطقية

استخدم الخصائص المنطقية لتجنّب تعديل الأنماط يدويًا عند تصميم واجهات تدعم الاتجاه من اليمين إلى اليسار

يُعدّ ذلك مهمًا بشكل خاص في البيئات ثنائية اللغة مثل دولة الإمارات العربية المتحدة، حيث يُتوقّع من الخدمات الرقمية دعم كل من اللغة العربية والإنجليزية بسلاسة.

تقليديًا، كان المطوّرون يستخدمون خصائص مثل margin-left أو padding-right أو text-align: left، وهي خصائص ثابتة مرتبطة باتجاه معين وتتطلب تعديلات صريحة عند دعم الاتجاه من اليمين إلى اليسار. وهذا لا يزيد من تعقيد ملفات CSS فحسب، بل يفتح المجال أيضًا لظهور أخطاء واحتمالات لعدم تناسق العرض البصري.

الخصائص المنطقية مثل padding-inline-start و margin-inline-end تتكيف تلقائيًا بناءً على اتجاه النص، مما يتيح للمطوّرين كتابة كود أنظف وأكثر متانة يراعي اتجاه لغة المحتوى بشكل ديناميكي. ويسهم ذلك في تقليل عبء الصيانة وتحسين إمكانية الوصول ودعم التعريب.

TailwindCSS

      
        <div class="ps-4 pe-6"> <!-- padding-start / padding-end -->
          <!-- Works for both LTR and RTL -->
        </div>
      
    

Vanilla CSS

      
        .element {
          padding-inline-start: 1rem;
          padding-inline-end: 6rem;
        }
      
    

تظلّ CSS واحدة من أقوى — وأحيانًا من أكثر الأدوات التي يُساء فهمها — في حقيبة أدوات المطوّر. إن إتقان التفاصيل الدقيقة لـ CSS الحديثة، ودمجها مع قوة الفئات المساعدة في Tailwind، يُتيح لمطوّري الجهات الحكومية في دولة الإمارات بناء تجارب متجاوبة، وسهلة الوصول، وسهلة الصيانة.

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