@scope и потоковая передача HTML

Ноам Розенталь поделился интересной техникой, в которой совмещена потоковая передача HTML с относительно новой директивой @scope. Её суть в том, чтобы скрыть потоковый контент до тех пор, пока он не будет полностью получен.

Суть потоковой передачи в том, что HTML отправляется с сервера фрагментами по мере готовности, а браузер принимает эти фрагменты и рисует интерфейс. То есть можно показывать по одной карточке в каталоге по мере их загрузки.

Директива @scope ограничивает область видимости стилей. При её размещении в HTML внутри элемента <style> без указания селектора, область видимости ограничивается ближайшим родителем элемента <style>.

Про это подход, который Крис Койер назвал «DOM Blasters», на канале есть пост. Совместив @scope с потоковой передачей HTML получится скрывать контент до полной готовности с помощью CSS.

<section>
  <style>
    @scope {
      opacity: 0;
    }
  </style>
  <!-- потоковый контент -->
  <style>
    @scope {
      opacity: 1;
    }
  </style>
</section>

Как это работает: сервер присылает фрагмент с открывающим <section> и <style> с opacity: 0. Благодаря @scope стили применятся к ближайшему предку, то есть к <section>. Прозрачность будет применена и весь раздел не будет виден.

Затем с сервера передаются фрагменты контента в потоковом режиме. Пока это происходит, раздел остаётся прозрачным. После передачи контента досылается ещё один фрагмент со <style> с opacity: 1 и закрывающим </section>.

Так как <style> использует тот же приём со @scope и находится в DOM после первого <style>, то он его переопределяет. В итоге после окончания потоковой передачи всего раздела прозрачность отменяется и раздел становится видимым.

Вместо opacity можно применить другие свойства, а также добавить переходы и анимацию. Тогда раздел может плавно появляться после окончания потоковой передачи контента. Ограничивает только поддержка @scope.

#html #css