Existem limites para fazer isso que removemos com novos métodos — determinar as capacidades na inicialização é bem inflexível, se algo mudar teríamos que recarregar a página inteira.
Isso é útil porque os dispositivos estão menos previsíveis agora: telefones podem se desdobrar em tablets, laptops podem se converter em tablets, você pode conectar um teclado e um mouse em tantas coisas…
Parece diferente se você está acostumado com o jeito antigo, mas qualquer coisa que você estivesse fazendo em um inicializador provavelmente ainda é possível e mais responsiva a capacidades em mudança.
Você pode, agora é mais granular e você condicionalmente mostra/oculta conteúdo dentro do mesmo template em vez de substituir tudo. Por exemplo, nós temos um objeto de viewport no nosso serviço de capacidades agora…
Em um template…
{{#if this.capabilities.viewport.lg}}
Conteúdo para telas grandes
{{/if}}
{{#if this.capabilities.viewport.sm}}
Conteúdo para telas muito pequenas
{{/if}}
ou em JS…
get myContent() {
if (this.capabilities.viewport.sm) {
return "conteúdo curto";
} else {
return "o conteúdo muito muito longo"
}
}
e então em CSS você pode alinhar com os mesmos pontos de interrupção como…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}