@media print {
  body {
    font-size: 12pt;
    color: black;
    background: none;
    max-width: 210mm; /* формат A4 */
    margin: auto;
  }

  nav, .sidebar, .ads, .button {
    display: none;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: gray;
  }

  h1, h2, h3, p {
    break-inside: avoid;
  }
}

await navigator.clipboard.writeText('text');
const text = await navigator.clipboard.readText();

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // пауза видео, анимаций, таймеров
  }
});

const lock = await navigator.wakeLock.request('screen');
// …
await lock.release();

await navigator.share({
  title: 'Title',
  text: 'Text',
  url: 'https://example.com'
});

navigator.vibrate(200);
navigator.vibrate([100, 50, 100]);
navigator.vibrate(0);

window.addEventListener('deviceorientation', e => {
  e.alpha; // Z
  e.beta;  // X
  e.gamma; // Y
});

// Синтез речи
const u = new SpeechSynthesisUtterance('текст');
u.pitch = 1.2;
u.rate = 0.9;
speechSynthesis.speak(u);

// Распознавание (Chrome-only)
const r = new webkitSpeechRecognition();
r.onresult = e => console.log(e.results[0][0].transcript);
r.start();

const [device] = await navigator.hid.requestDevice({ filters: [] });
await device.open();

device.addEventListener('inputreport', e => {
  const value = e.data.getInt8(0);
});

navigator.requestMIDIAccess().then(access => {
  for (const input of access.inputs.values()) {
    input.onmidimessage = e => {
      console.log(e.data);
    };
  }
});

🔴 Почему @starting-style работает не так, как keyframes

🔴 Реальный баг из продакшена (particle effect, который отказался работать)

🔴 3 решения проблемы — от «ядерного» до элегантного

🔴 Неожиданный вывод: а нужен ли вообще @starting-style?