Il y a des limites à ce que nous avons supprimées avec les nouvelles méthodes — déterminer les capacités à l’initialisation est assez rigide, si quelque chose change nous devrions recharger toute la page.
C’est utile car les appareils sont moins prévisibles maintenant : les téléphones peuvent se déplier en tablettes, les ordinateurs portables peuvent se transformer en tablettes, vous pouvez brancher un clavier et une souris sur tellement de choses…
Cela semble différent si vous êtes habitué à l’ancienne méthode, mais tout ce que vous faisiez dans un initialiseur est probablement toujours possible et plus réactif aux capacités changeantes.
Vous pouvez, maintenant c’est plus granulaire et vous affichez/masquez conditionnellement le contenu au sein du même modèle plutôt que de tout remplacer. Par exemple, nous avons maintenant un objet viewport dans notre service de capacités…
Dans un modèle…
{{#if this.capabilities.viewport.lg}}
Contenu pour les grands écrans
{{/if}}
{{#if this.capabilities.viewport.sm}}
Contenu pour les très petits écrans
{{/if}}
ou en JS…
get myContent() {
if (this.capabilities.viewport.sm) {
return "contenu court";
} else {
return "le très très long contenu"
}
}
et ensuite en CSS vous pouvez vous aligner avec les mêmes points de rupture comme…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}