function isVisible(el) {
  const r = el.getBoundingClientRect();
  return r.top < window.innerHeight && r.bottom > 0;
}

const box = document.querySelector(".box");
console.log("Виден:", isVisible(box));

window.addEventListener("scroll", () => {
  if (isVisible(box)) {
    console.log("Элемент в зоне просмотра");
  }
});

document.querySelectorAll(".item").forEach(el => {
  if (isVisible(el)) {
    el.classList.add("active");
  }
});

• border: 2px solid currentColor; — рамка того же цвета, что и текст;

• box-shadow: 0 0 10px currentColor; — тень с цветом текста;

• fill: currentColor; — окрашивает SVG в цвет шрифта;

• outline-color: currentColor; — обводка совпадает с текстом.

.hero {
min-height: 100vh;
}

.hero {
min-height: 100dvh;
}

const text = window.getSelection().toString();
console.log("Выделено:", text);

document.addEventListener("selectionchange", () => {
  const t = window.getSelection().toString();
  if (t) console.log("Новое выделение:", t);
});

const sel = window.getSelection();

console.log("anchorNode:", sel.anchorNode);
console.log("focusNode:", sel.focusNode);
console.log("rangeCount:", sel.rangeCount);

function onSelect(callback) {
  const handler = () => {
    const text = window.getSelection().toString().trim();
    if (text) callback(text);
  };

  document.addEventListener("selectionchange", handler);
  return () => document.removeEventListener("selectionchange", handler);
}

const unsubscribe = onSelect(selected => {
  console.log("Пользователь выделил:", selected);
});

• src — путь к файлу .vtt, содержащему субтитры или метаданные;
• kind — тип дорожки;
• srclang — язык содержимого (например, "ru", "en");
• label — видимое имя дорожки в интерфейсе выбора;
• default — делает дорожку выбранной по умолчанию.

.block::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  content: "";
}

.block {
  position: relative;
}
.block::before {
  position: absolute;
  inset: 0;
  content: "";
}