كان تصميم الويب سريع الاستجابة من نواح كثيرة رد فعل على الهواتف المحمولة. قبل ظهور الهواتف الذكية، كان عدد قليل جدًا من الأشخاص يفكرون بجدية في الشكل الذي يجب أن تبدو عليه مواقع الويب على الأجهزة المحمولة. وقد تغير ذلك مع الزيادة المفاجئة في عدد الهواتف المحمولة التي تحتوي على متصفحات ويب مدمجة.
شجع تصميم الويب سريع الاستجابة على التفكير الذي شكك في الافتراضات. بينما كان من الشائع سابقًا افتراض أن موقع الويب سيتم عرضه فقط على جهاز كمبيوتر مكتبي، إلا أنه من الشائع الآن أن تصميم موقع الويب ذاته للهواتف والأجهزة اللوحية كذلك. في الواقع، تجاوز استخدام الأجهزة الجوّالة الآن استخدام أجهزة الكمبيوتر المكتبي على الويب.
ستعمل طريقة التفكير سريعة الاستجابة هذه على تحسين أدائك في المستقبل. من المحتمل تمامًا أن يتم عرض مواقع الويب الخاصة بك على أجهزة وشاشات لا يمكننا تخيلها اليوم. وتتجاوز طريقة التفكير هذه ما هو أبعد من الشاشات. حتى الآن، يستخدم الأشخاص أجهزة بدون شاشات للوصول إلى المحتوى الذي تقدّمه. يمكن للمساعدين الصوتيين استخدام مواقعك الإلكترونية إذا كنت تستخدم أساسًا قويًا لترميز HTML الدلالي.
هناك أيضًا تجارب في عالم الشاشات. هناك أجهزة في السوق اليوم مزودة بشاشات قابلة للطي. يقدم هذا بعض التحديات لتصميماتك.
شاشات مزدوجة
يمكن لمستخدمي الأجهزة القابلة للطي اختيار ما إذا كانوا يريدون أن يشغل متصفّح الويب الخاص بهم شاشة واحدة فقط من الشاشات أو أن يغطّيوا كلا الشاشتَين. إذا كان المتصفح يمتد إلى كلتا الشاشتين، فسيتم تقسيم موقع الويب المعروض بواسطة الفصل بين الشاشتين. لا يبدو رائعًا.
شرائح إطار العرض
تتوفّر ميزة وسائط تجريبية مصمَّمة لاكتشاف ما إذا كان موقعك الإلكتروني يُعرض على جهاز بشاشة مزدوجة أم لا. الاسم المقترح لميزة الوسائط هو viewport-segments. يتوفّر نوعان: horizontal-viewport-segments وvertical-viewport-segments.
إذا عرضت ميزة الوسائط horizontal-viewport-segments القيمة 2 وسجّلت vertical-viewport-segments القيمة 1، هذا يعني أنّ المفصّلة في الجهاز يتم تشغيلها من أعلى إلى أسفل، ما يؤدي إلى تقسيم المحتوى إلى لوحتَين جنبًا إلى جنب.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
إذا عرضت ميزة الوسائط vertical-viewport-segments القيمة 2 في حال كانت القيمة horizontal-viewport-segments تبلغ 1، يتم تشغيل المفصّلة من جانب إلى آخر مع تقسيم المحتوى إلى لوحتَين، واحدة فوق الأخرى.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
إذا أبلغَ كل من vertical-viewport-segments وhorizontal-viewport-segments عن قيمة 1، هذا يعني أن الموقع الإلكتروني يتم عرضه على شاشة واحدة فقط، حتى إذا كان الجهاز يحتوي على أكثر من شاشة واحدة. يعادل ذلك عدم استخدام أي استعلام عن الوسائط.
متغيرات البيئة
ولن تساعدك ميزة وسائط viewport-segments وحدها في تصميم هذه المفصّلة المزعجة. أنت بحاجة إلى طريقة لمعرفة حجم المفصّلة. وهنا يأتي دور متغيرات البيئة.
تسمح لك متغيرات البيئة في CSS بتحليل التدخلات غير الملائمة إلى الأجهزة في أنماطك. على سبيل المثال، يمكنك التصميم بدرجة أكبر على هاتف iPhone X باستخدام قيم البيئة safe-area-inset-top وsafe-area-inset-right وsafe-area-inset-bottom وsafe-area-inset-left. ويتم تضمين هذه الكلمات الرئيسية في دالة env().
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
تعمل متغيرات البيئة مثل الخصائص المخصّصة. وهذا يعني أنّه يمكنك استخدام خيار احتياطي في حال عدم توفّر متغيّر البيئة.
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
لكي تعمل متغيرات البيئة هذه على iPhone X، عليك تعديل العنصر meta الذي يحدّد معلومات viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
سيشغل تنسيق صفحتك الآن إطار العرض بالكامل ويملأ المستند بأمان بالقيم الداخلية التي يوفرها الجهاز.
بالنسبة إلى الشاشات القابلة للطي، يتم اقتراح ستة متغيرات بيئة جديدة: viewport-segment-width وviewport-segment-height وviewport-segment-top وviewport-segment-left وviewport-segment-bottom وviewport-segment-right.
فيما يلي مثال على تخطيط يحتوي على عمودين، أحدهما أعرض من الآخر.
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
بالنسبة للشاشات المزدوجة ذات مفصلة عمودية، قم بتعيين العمود الأول ليكون عرض الشاشة الأولى والعمود الثاني ليكون عرض الشاشة الثانية.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
تعامل مع الشاشات المزدوجة على أنها فرصة. ربما يمكن استخدام شاشة واحدة لعرض محتوى نصي قابل للتمرير بينما تعرض الأخرى عنصرًا ثابتًا مثل صورة أو خريطة.
المستقبل
هل ستتوفّر الشاشات القابلة للطيّ أحدث ابتكاراتنا؟ من يدري. لم يكن أحد ليتوقّع أي مدى انتشار الأجهزة الجوّالة، لذا من المفيد التفكير متفتحًا بشأن أشكال الأجهزة المستقبلية.
قبل كل شيء، من المفيد التأكّد من أنّ مواقعك الإلكترونية يمكنها الاستجابة لأيّ مشكلة تستقبلها في المستقبل. وهذا ما يمنحك إياه التصميم سريع الاستجابة: ليس مجرد مجموعة من التقنيات العملية، ولكن طريقة التفكير التي ستخدمك جيدًا وأنت تنشئ شبكة الإنترنت في المستقبل.
التحقّق من استيعابك
اختبر معلوماتك حول تكوينات الشاشة
ما هو الاستعلام عن الوسائط الذي يستهدف جهازًا قابلاً للطي في وضع أفقي مقسّم؟
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)ما المتغيرات البيئية؟ مثال: env(safe-area-inset-top)