قد تظهر البطاقة نفسها في عمود جانبي ضيق وصفحة رئيسية واسعة. الاعتماد على Media Queries المرتبطة بعرض الشاشة قد يجعل البطاقة تتصرف بشكل خاطئ عندما تتغير مساحة الحاوية داخل الشاشة نفسها. تسمح Container Queries للمكون بتغيير تخطيطه وفق المساحة المتاحة له، مع الحفاظ على قواعد استجابة عامة للصفحة.
حدد حدود المكون قبل كتابة الاستعلام
اجعل البطاقة وحدة مستقلة تحتوي عنوانًا وصورة ووصفًا وإجراءات، ثم حدد العنصر الذي سيعمل كحاوية قياس. لا تطبق الاستعلام على عنصر لا يملك سياق حاوية مناسبًا. اختر نقاط التحول بناءً على موضع انكسار المحتوى فعليًا، لا على أسماء أجهزة افتراضية.
استخدم تخطيطًا مرنًا أولًا
قبل إضافة الاستعلامات، استعمل Grid و Flexbox و minmax وقيود العرض المناسبة لتجنب الانكسارات البسيطة. لا تحتاج كل زيادة في العرض إلى قاعدة CSS جديدة. أضف Container Query عندما يتغير تركيب المكون نفسه، مثل الانتقال من صورة أعلى النص إلى صورة جانبية أو تغيير ترتيب الأزرار.
افصل استجابة الصفحة عن استجابة المكون
تظل Media Queries مفيدة للهيكل العام والتنقل ومساحات الصفحة، بينما تضبط Container Queries تفاصيل البطاقات والأجزاء المعاد استخدامها. إذا تغير عرض الشريط الجانبي بسبب فتح لوحة أدوات، ينبغي أن تتكيف البطاقة دون انتظار تغيير عرض نافذة المتصفح. اختبرها في جميع الأماكن التي يعاد فيها استخدامها.
راجع النص العربي واللغات المختلطة
قد يستهلك عنوان عربي طويل مساحة مختلفة عن عنوان إنجليزي قصير. لا تفترض عددًا ثابتًا من الأسطر، وتأكد من أن الأرقام والوسوم والأزرار لا تتداخل في الاتجاه RTL. استخدم فواصل ومساحات مناسبة حول الكلمات اللاتينية، واختبر التكبير إلى 200% حتى لا يعتمد التخطيط على مقاس خط واحد.
ضع اختبارات بصرية للمساحات الحرجة
اختبر المكون عند عروض حاوية متعددة داخل الصفحة نفسها، وليس عند مقاسات شاشة شائعة فقط. افحص القص الأفقي ومواضع الأيقونات ومساحة الضغط وأطوال العناوين. عند إضافة مكون جديد، أدرجه في صفحة مرجعية ضيقة ومتوسطة وواسعة، ثم راجع التباين والتركيز وإمكانية الوصول.
شارك في تقييم ونقاش المقال
رأيك يضيف قيمة للمقال ويساعدنا على تحسين المحتوى والنقاش حوله.
النقاش
جارٍ تحميل التعليقات…