هناك حدود للقيام بذلك قمنا بإزالتها بأساليب جديدة — إن تحديد القدرات عند التهيئة غير مرن إلى حد ما، فإذا تغير شيء ما، سيتعين علينا إعادة تحميل الصفحة بأكملها.
هذا مفيد لأن الأجهزة أصبحت أقل قابلية للتنبؤ بها الآن: يمكن للهواتف أن تُفتح لتصبح أجهزة لوحية، ويمكن لأجهزة الكمبيوتر المحمولة أن تتحول إلى أجهزة لوحية، ويمكنك توصيل لوحة مفاتيح وفأرة بالعديد من الأشياء…
يبدو الأمر مختلفًا إذا كنت معتادًا على الطريقة القديمة، ولكن من المحتمل أن يكون أي شيء كنت تفعله في مُهيئ لا يزال ممكنًا وأكثر استجابة للقدرات المتغيرة.
يمكنك ذلك، والآن أصبح أكثر دقة ويمكنك إظهار/إخفاء المحتوى بشكل شرطي داخل نفس القالب بدلاً من استبدال القالب بأكمله. على سبيل المثال، لدينا كائن عرض (viewport object) في خدمة القدرات (capabilities service) الخاصة بنا الآن…
في قالب…
{{#if this.capabilities.viewport.lg}}
محتوى للشاشات الكبيرة
{{/if}}
{{#if this.capabilities.viewport.sm}}
محتوى للشاشات الصغيرة جداً
{{/if}}
أو في جافاسكريبت (JS)…
get myContent() {
if (this.capabilities.viewport.sm) {
return "محتوى قصير";
} else {
return "المحتوى الطويل جداً جداً"
}
}
ثم في CSS يمكنك المحاذاة مع نفس نقاط التوقف مثل…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}