Задача:

Есть тяжелый сайт. Надо для хорошего UX показать какой-нибудь сплэш-скрин (глобальный прелоадер) в самом начале и отключить его после загрузки всех (по возможности) ресурсов и готовности сайта

Как это сделать без JS?

Задача имеет минимум два решения - через CSS и через HTML

#challenge #css #html

По задаче выше

Сплэш-скрин (стартовая заставка) значительно улучшает UX. Во Vue он ставится в index.html и отключается в onMounted() App.vue

В рамках задачи понятно, что показать сплэш-скрин в самом начале не проблема, нужно его убрать по условию. То есть, в конце загрузки сайта должно что-то прилететь, что его закроет.

CSS

Например, прилетит стиль (или в конце html файла, или css файла)

.splash-screen {
  display: none;
}

Ещё вариант подсказали в комментариях - через :has(). Возможны и другие способы.

HTML

Интересней с HTML. Для этого можно использовать Declarative Shadow DOM (часть Web Components), который позволяет строить Shadow DOM без JS. У Shadow Root есть слоты. Слот будет показывать дефолтное значение ( в нашем случае блок на весь экран с лоадером), пока не прогрузится <div slot="splash-screen">, который его затрет.

<template shadowrootmode="open">
  <slot name="splash-screen">
    <div class="splash-screen">Loading...</div>
  </slot>
</template>

<!-- additional content -->

<div slot="splash-screen">
  <div />
</div>

#challenge #css #html

Марио передвигается клавишами влево-вправо-вниз-вверх

Написано на чистом CSS

Предположения, как это может быть реализовано?

#css #challenge

const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

y = y + 1;
console.log(y);

Немного JavaScript

В каких случаях результат вывода будет различным?

#js #challenge