في الآونة الأخيرة ، نشرنا موقع Mabiloft الجديد على الويب مع تصميم نظيف أعيد تصميمه بالكامل والكثير من الرسوم التوضيحية والرسوم المتحركة الجديدة الرائعة.
بعد قيام مصممنا بعمل رائع ، بعد التفكير في الموقع ورسمه ، نحن المطورين ، نحتاج إلى تنفيذ التصميم ، والحفاظ عليه نظيفًا وكاملاً لكل جهاز ، من شاشة 2K الكبيرة التي نكتب عليها الرمز إلى iPhone 4 القديم باستخدامه شاشة 3.5 بوصة.
بعد بضعة أسابيع ، كان الموقع جاهزًا تقريبًا ونظرت فيه للتأكد من أن كل شيء يعمل كما ينبغي. لاحظت أن تخطيط الصفحة الرئيسية لم يتم عرضه بشكل صحيح على جهاز iPad الخاص بنا ، لقد غيرت بسرعة بعض قواعد CSS وقمت بإصلاح الخطأ ، لكن ... أدى ذلك إلى مشاكل في عرض المخطط على جميع أجهزة الكمبيوتر المحمولة المزودة بشاشة صغيرة
تبحث عن حل لهذه المشكلة ، لقد وجدت أنه يمكنني جعل كلا التخطيطين مثاليين باستخدام تعبيرات وسائط CSS فقط دون اللجوء إلى استخدام JavaScript.
في الحقيقة ، قبل ذلك استخدمت تعبيرات وسائط CSS بشكل أساسي لجعل المخطط متجاوبًا باستخدام
أقصى عرض وعرض أصغر .
لقد اكتشفت الآن أن تعبيرات وسائط CSS ليست مجرد عروض بحد أقصى للعرض ، ولكن أيضًا العديد من القيم المختلفة. والبعض منهم يمكن أن يكون مفيدا حقا في الحياة اليومية.
إذن ما هو هذا التعبير الإعلامي الذي أتحدث عنه؟ ربما سمعت عن البعض. لكنني سلطت الضوء أيضًا على العديد من الإصدارات الجديدة التي يمكن أن يكون استخدامها مفيدًا للغاية
حجم منفذ العرض
نعم ، أنا أتحدث عن
العرض والطول والعرض الأدنى والطول الأدنى والعرض الأقصى والارتفاع الأقصى .
هل يحتاجون إلى مقدمة خاصة؟ سأكون موجزا.
تُستخدم وظائف الوسائط هذه لتعيين أنماط مختلفة لأحجام مختلفة للشاشة. أنها مفيدة للغاية في تطوير نظام استجابة.
نظرًا لأن وظيفتي
العرض والارتفاع يمكنهما فقط تعيين أنماط للحجم الدقيق للنطاق ، فمن الأرجح أنك ستستخدم البادئات
القصوى والدقيقة. على سبيل المثال ، في الكود التالي ، لن يتم تطبيق الأنماط إلا إذا كان ارتفاع منفذ العرض أكبر من 320 بكسل.
body { background-color: #FFD23F; } @media screen and (min-height: 320px) { body { background-color: #EE4266; } }
لكن يمكنك أيضًا مزج هذه الوظائف للتعامل مع مجموعة من الأحجام
body { background-color: #FFD23F; } @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; } }
يوضح المثال التالي كيفية استخدام دالة max-width لتغيير لون الخلفية وفقًا لعرض النطاق
body { background-color: #0EAD69; } @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; } } @media screen and (max-width: 1280px) { body { background-color: #FFD23F; } } @media screen and (max-width: 960px) { body { background-color: #EE4266; } } @media screen and (max-width: 600px) { body { background-color: #540D6E; } }
اتجاه الشاشة
الاتجاه هو ميزة وسائط جيدة تتيح لك إجراء تغييرات حسب اتجاه الشاشة. يمكن أن يكون لها معنيان:
عمودي (عمودي) و
أفقي (أفقي / ألبوم).
ولكن ما الذي يعتبره المستعرض صورة أفقيًا؟ ستبدأ قيمة الصورة في التغييرات في كل مرة يكون فيها ارتفاع النطاق أكبر من العرض. وبالمثل ، إذا كان العرض أكبر من الارتفاع ، فسيتم اعتبار منفذ العرض "أفقي".
على سبيل المثال ، يعطي هذا الرمز النتيجة التالية:
body { background-color: #FFD23F; } @media screen and (orientation: landscape) { body { background-color: #EE4266; } }
نسبة العرض إلى الارتفاع
تشبه وظيفة الوسائط هذه وظيفة التوجيه ، ولكنها أكثر دقة. يمكنك تعيين القواعد لنسبة العرض إلى الارتفاع المحددة التي تحتاج إليها. على سبيل المثال ، يمكنك ضبط تصميمات مختلفة للهواتف ذات الشاشات 16/9 و 18/9.
يمكن أن تحتوي هذه الوظيفة أيضًا على البادئة
القصوى والدقيقة لمعالجة مجموعة من الشاشات بنسب أبعاد مختلفة.
التوجيه والمؤشر
لذا ، سأحاول شرح وظائف الوسائط هذه بأبسط ما يمكن ، لأنها مفيدة للغاية.
تتعلق كل من وظائف وسائط
التحويم والمؤشر بتعريف آلية الإدخال الرئيسية على الموقع. على سبيل المثال ، فأر. أو إصبع إذا كنت تستخدم الهاتف الذكي. لتحديد جميع آليات الإدخال ، يمكنك استخدام
أي مؤشر تحريك ووظائف
أي مؤشر .
الآن ، ماذا يفعلون؟
تتيح وظيفة
التحويم (
وأي تحوم ) للمتصفح معرفة ما إذا كانت آلية الإدخال الرئيسية يمكن أن
تحوم فوق العناصر (على سبيل المثال ، مثل مؤشر الماوس).
يمكنك استخدام هذه الوظيفة لتحديد آلية الإدخال الرئيسية التي
- تحوم: تحوم ، قد تحوم فوق العناصر
- hover: لا شيء ، لا يمكن التحويم فوق العناصر أو عدم وجود آلية إدخال تحوم على الإطلاق
متى يستحق استخدام؟ على سبيل المثال ، عندما تريد معالجة رسوم متحركة تحوم على الأجهزة المحمولة ، حيث لا يمكن لآلية الإدخال (الإصبع) التحويم فوق العناصر.
تسمح وظائف
المؤشر (
وأي مؤشر ) للمتصفح بمعرفة ما إذا كانت آلية الإدخال الرئيسية بها مؤشر (على سبيل المثال ، ماوس) ، وإذا كان الأمر كذلك ، ما مدى دقة ذلك.
يمكنك استخدام هذه الوظيفة لتحديد آلية الإدخال الرئيسية ، والتي:
- المؤشر: الخشنة ، ويشمل دقة المؤشر محدودة
- المؤشر: جيد ، يتضمن مؤشر دقيق
- المؤشر: لا شيء ، لا يشمل المؤشر
هذا مفيد ، على سبيل المثال ، لزيادة مساحة الضغط على الأجهزة مع مؤشر غير دقيق.
مهلا ، كل شيء ممل. أين هي الميزات الجديدة الرائعة التي تم ذكرها من قبل؟ها هم!
يرجى ملاحظة أن الوظائف التالية تجريبية ولديها حاليا دعم محدود للغاية.
الألوان المقلوبة
تعد ميزة اللون المقلوب مفيدة للغاية إذا كنت بحاجة إلى تطبيق بعض الأنماط عندما يكون لألوان النظام نفس الإعداد.
لماذا تمكين انعكاس لون النظام؟ هذا مفيد عادةً إذا كنت ترغب في تحسين قابلية القراءة.
ضع في اعتبارك أيضًا أن هناك ممارسة جيدة أخرى تتمثل في زيادة الخط وتقليل الخطورة عند قلب الألوان. هذا هو بالضبط ما يمكنك القيام به مع تعبيرات الوسائط.
هذه الوظيفة لها قيمتان فقط:
- معكوس : تطبيق الأنماط إذا كانت الألوان مقلوبة
- لا شيء : تطبيق الأنماط الافتراضية
هنا مثال! عندما يتم عكس الألوان ، يزيد حجم النص
.text { font-size: 24px; } @media screen and (inverted-colors: inverted) { .text { font-size: 36px; } }
يرجى ملاحظة أن هذه الميزة مدعومة حاليًا فقط على Safari (على نظامي MacOS و iOS). يمكن الاطلاع
هنا على قائمة محدثة دائمًا بالمتصفحات المدعومة
.نظام الألوان المفضل
هذه إحدى ميزاتي المفضلة ، وآمل أن تصبح شعبية تدريجياً.
تتيح الوظيفة للمطورين تعيين خيارات تصميم مختلفة للعناصر إذا تغير نظام الألوان. يسمح كل من Windows و macOS للمستخدمين بتغيير نظام ألوان النظام من الضوء إلى الظلام والعكس صحيح. قدمت iOS 13 أيضًا هذه الميزة ، وبالنسبة لمستخدمي Android ، ستتوفر هذه الميزة مع ظهور Android Q.
دعم المتصفح هو أيضا لائق. تدعم هذه الميزة في الوقت الحالي أحدث إصدارات Google Chrome و Mozilla Firefox و Safari. على الأجهزة المحمولة ، يتم دعمه أيضًا بواسطة جميع المتصفحات الرئيسية باستثناء Opera. يمكن الاطلاع هنا على قائمة محدثة دائمًا بالمتصفحات المدعومة.
قيم هذه الوظيفة بديهية للغاية:
- ضوء : تطبيق الأنماط إذا كان المستخدم يفضل سمة الضوء
- dark : تطبيق الأنماط إذا كان المستخدم يفضل سمة مظلمة
- عدم التفضيل : تطبيق الأنماط الافتراضية
تعرف على مدى روعة هذه الميزة في المثال أدناه!
.appbar { background-color: #EE4266; } .fab { background-color: #424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h2 { color: #fff; } .fab { background-color: #EE4266; } }
تعيين سمة مظلمة النظام يجعل الصفحة مظلمة أيضًاتقليل الرسوم المتحركة
هذا هو أيضا مهم جدا. أنا شخصياً أحب الرسوم المتحركة والانتقالات ، وأعتقد أن الرسوم المتحركة الصحيحة يمكنها حقًا تحسين قابلية استخدام الموقع. ولكن لا يحب الجميع الرسوم المتحركة ، والأهم من ذلك ، قد يعاني بعض الأشخاص من اضطرابات دهليزية يمكن أن تسبب دوار الحركة والدوخة. لقد وجدت
مقالة مفيدة تشرح هذه الظواهر جيدًا.
بشكل عام ، على أنظمة تشغيل سطح المكتب والجوال الأكثر أهمية ، هناك خيار إمكانية الوصول الذي يسمح لك بحل هذه المشاكل عن طريق الحد من تنقل العناصر.
هذه الوظيفة يمكن أن يكون لها معنيان:
- تقليل : يتم تطبيق الأنماط إذا كان المستخدم لا يرغب في رؤية الرسوم المتحركة والانتقالات. عادة ما تستخدم هذه القيمة لتعطيلها.
- عدم التفضيل : يطبق الأنماط العادية
تحقق من هذه الميزة في المثال أدناه:
.pulse { animation: pulse 2s infinite; } @media screen and (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
تتوقف الرسوم المتحركة المموجة عند قيام المستخدم بتحديد تنقل العناصر المنخفضتوافق المتصفح لهذه الميزة جيد جدًا. في الوقت الحالي ، لا يدعمها سوى Edge و IE. يمكن الاطلاع
هنا على قائمة محدثة دائمًا بالمتصفحات المدعومة
.استنتاج
لقد كانت تجربة ممتعة بالنسبة لي ، لقد تعلمت بعض الميزات الجديدة التي ربما سأستخدمها الآن أكثر من مرة.
أود أن أذكر بعض الوظائف
الإضافية ، مثل مستوى
الإضاءة ، والتي يمكن استخدامها للتحقق من مستوى الإضاءة المحيطة ، ولكن معظم وظائف تعبير الوسائط التي تم تقديمها مؤخرًا لا تزال غير مدعومة من أي من المتصفحات ، لذلك ... لم يحن الوقت بعد.
أمثلة التعليمات البرمجيةيمكنك قراءة أمثلة الكود
هنا . الرمز متاح للجمهور
على جيثب .
من نحننحن فريق من المطورين الشباب والمصممين ومقرها في بادوفا ، إيطاليا. نحن نطور تطبيقات ومواقع للهاتف المحمول ومستعدون دائمًا لإنشاء شيء رائع.