Hay límites para hacer esto que hemos eliminado con nuevos métodos: determinar las capacidades al inicializar es bastante inflexible, si algo cambia tendríamos que recargar toda la página.
Esto es útil porque los dispositivos son menos predecibles ahora: los teléfonos pueden desplegarse en tabletas, las computadoras portátiles pueden convertirse en tabletas, puedes conectar un teclado y un ratón a muchísimas cosas…
Se siente diferente si estás acostumbrado a la forma antigua, pero cualquier cosa que estuvieras haciendo en un inicializador probablemente todavía sea posible y más receptiva a las capacidades cambiantes.
Sí puedes, ahora es más granular y muestras/ocultas contenido condicionalmente dentro de la misma plantilla en lugar de reemplazarla por completo. Por ejemplo, ahora tenemos un objeto de viewport (ventana gráfica) en nuestro servicio de capacidades…
En una plantilla…
{{#if this.capabilities.viewport.lg}}
Contenido para pantallas grandes
{{/if}}
{{#if this.capabilities.viewport.sm}}
Contenido para pantallas muy pequeñas
{{/if}}
o en JS…
get myContent() {
if (this.capabilities.viewport.sm) {
return "contenido corto";
} else {
return "el contenido muy muy largo"
}
}
y luego en CSS puedes alinear con los mismos puntos de interrupción como…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}