У этого метода были ограничения, которые мы устранили с помощью новых методов — определение возможностей на этапе инициализации довольно негибко: если что-то изменится, нам пришлось бы перезагружать всю страницу.
Это полезно, потому что устройства стали менее предсказуемыми: телефоны могут разворачиваться в планшеты, ноутбуки могут превращаться в планшеты, клавиатуру и мышь можно подключить к стольким устройствам…
Если вы привыкли к старому подходу, то новый может показаться другим, но всё, что вы делали в инициализаторе, скорее всего, всё ещё возможно — и при этом более отзывчиво к изменяющимся возможностям.
Теперь это возможно: подход стал более детальным, и вы условно показываете или скрываете контент внутри одного шаблона, а не заменяете его целиком. Например, теперь в нашем сервисе возможностей есть объект viewport…
В шаблоне…
{{#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;
}
}