@scope и потоковая передача HTML
Ноам Розенталь поделился интересной техникой, в которой совмещена потоковая передача HTML с относительно новой директивой @scope. Её суть в том, чтобы скрыть потоковый контент до тех пор, пока он не будет полностью получен.
Суть потоковой передачи в том, что HTML отправляется с сервера фрагментами по мере готовности, а браузер принимает эти фрагменты и рисует интерфейс. То есть можно показывать по одной карточке в каталоге по мере их загрузки.
Директива @scope ограничивает область видимости стилей. При её размещении в HTML внутри элемента без указания селектора, область видимости ограничивается ближайшим родителем элемента .
Про это подход, который Крис Койер назвал «DOM Blasters», на канале есть пост. Совместив @scope с потоковой передачей HTML получится скрывать контент до полной готовности с помощью CSS.
@scope {
opacity: 0;
}
@scope {
opacity: 1;
}
Как это работает: сервер присылает фрагмент с открывающим и с opacity: 0. Благодаря @scope стили применятся к ближайшему предку, то есть к . Прозрачность будет применена и весь раздел не будет виден.
Затем с сервера передаются фрагменты контента в потоковом режиме. Пока это происходит, раздел остаётся прозрачным. После передачи контента досылается ещё один фрагмент со с opacity: 1 и закрывающим .
Так как использует тот же приём со @scope и находится в DOM после первого , то он его переопределяет. В итоге после окончания потоковой передачи всего раздела прозрачность отменяется и раздел становится видимым.
Вместо opacity можно применить другие свойства, а также добавить переходы и анимацию. Тогда раздел может плавно появляться после окончания потоковой передачи контента. Ограничивает только поддержка @scope.
#html #css
Ноам Розенталь поделился интересной техникой, в которой совмещена потоковая передача HTML с относительно новой директивой @scope. Её суть в том, чтобы скрыть потоковый контент до тех пор, пока он не будет полностью получен.
Суть потоковой передачи в том, что HTML отправляется с сервера фрагментами по мере готовности, а браузер принимает эти фрагменты и рисует интерфейс. То есть можно показывать по одной карточке в каталоге по мере их загрузки.
Директива @scope ограничивает область видимости стилей. При её размещении в HTML внутри элемента без указания селектора, область видимости ограничивается ближайшим родителем элемента .
Про это подход, который Крис Койер назвал «DOM Blasters», на канале есть пост. Совместив @scope с потоковой передачей HTML получится скрывать контент до полной готовности с помощью CSS.
@scope {
opacity: 0;
}
@scope {
opacity: 1;
}
Как это работает: сервер присылает фрагмент с открывающим и с opacity: 0. Благодаря @scope стили применятся к ближайшему предку, то есть к . Прозрачность будет применена и весь раздел не будет виден.
Затем с сервера передаются фрагменты контента в потоковом режиме. Пока это происходит, раздел остаётся прозрачным. После передачи контента досылается ещё один фрагмент со с opacity: 1 и закрывающим .
Так как использует тот же приём со @scope и находится в DOM после первого , то он его переопределяет. В итоге после окончания потоковой передачи всего раздела прозрачность отменяется и раздел становится видимым.
Вместо opacity можно применить другие свойства, а также добавить переходы и анимацию. Тогда раздел может плавно появляться после окончания потоковой передачи контента. Ограничивает только поддержка @scope.
#html #css