Ci sono limiti a ciò che si può fare in questo modo che abbiamo rimosso con i nuovi metodi: determinare le capacità all’avvio è piuttosto inflessibile, se qualcosa cambia dovremmo ricaricare l’intera pagina.
Questo è utile perché i dispositivi sono meno prevedibili ora: i telefoni possono aprirsi in tablet, i laptop possono convertirsi in tablet, è possibile collegare una tastiera e un mouse a così tante cose…
Sembra diverso se si è abituati al vecchio modo, ma qualsiasi cosa si stesse facendo in un inizializzatore è probabilmente ancora possibile e più reattiva alle capacità mutevoli.
È possibile, ora è più granulare e si mostra/nasconde condizionalmente il contenuto all’interno dello stesso template invece di sostituire l’intero. Ad esempio, ora abbiamo un oggetto viewport nel nostro servizio di capacità…
In un template…
{{#if this.capabilities.viewport.lg}}
Contenuto per schermi grandi
{{/if}}
{{#if this.capabilities.viewport.sm}}
Contenuto per schermi molto piccoli
{{/if}}
o in JS…
get myContent() {
if (this.capabilities.viewport.sm) {
return "contenuto breve";
} else {
return "il contenuto molto molto lungo"
}
}
e poi in CSS è possibile allinearsi con gli stessi punti di interruzione come…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}