HTML — Элементы

💻 dialog — нативная модалка

<dialog id="modal">
	<h2>Заголовок</h2>
	<p>Содержимое</p>
	<button autofocus>Закрыть</button>
</dialog>

<button onclick="modal.showModal()">Открыть</button>

const modal = document.querySelector("#modal");

// Открыть как модалку (с backdrop, блокирует фон)
modal.showModal();

// Открыть как обычный диалог (без блокировки)
modal.show();

// Закрыть
modal.close();
modal.close("result"); // с возвращаемым значением

// Закрытие по Escape — встроено автоматически
// Закрытие по кнопке
document.querySelector("button").addEventListener("click", () => modal.close());

// Получить результат
modal.addEventListener("close", () => {
	console.log(modal.returnValue); // значение из close('result')
});

/* Стилизация */
dialog {
	border: none;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
	max-width: min(560px, 90vw);
}

/* Фон */
dialog::backdrop {
	background: oklch(0 0 0 / 0.5);
	backdrop-filter: blur(4px);
}

/* Анимация появления */
dialog[open] {
	animation: dialog-in 0.2s ease;
}

@keyframes dialog-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

Встроенная функциональность:

• Закрытие по Escape
• Фокус-ловушка (Tab не уходит за пределы)
• ::backdrop — фон
• ARIA роль dialog автоматически
• autofocus — первый фокус на нужном элементе

---

💻 meter — gauge-индикатор

Индикатор значения в известном диапазоне (заряд, оценка, использование):

<!-- min, max, value — обязательные -->
<meter min="0" max="100" value="75">75%</meter>

<!-- low, high, optimum — задают "хорошую" зону -->
<meter min="0" max="100" low="30" high="70" optimum="100" value="85">85%</meter>

<!-- Примеры -->
<p>Заряд: <meter min="0" max="1" value="0.8">80%</meter></p>
<p>Рейтинг: <meter min="0" max="5" value="4.2" title="4.2 из 5"></meter></p>
<p>Хранилище: <meter min="0" max="50" value="47" high="40">47 GB</meter></p>

Браузер автоматически меняет цвет:

• Зелёный — значение в зоне optimum
• Жёлтый — значение в субоптимальной зоне (low..high)
• Красный — значение в опасной зоне

/* Стилизация через ::-webkit-meter-* (ограниченная) */
meter {
	width: 200px;
	height: 12px;
}

/* Сброс и кастомный стиль */
meter {
	-webkit-appearance: none;
	appearance: none;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
}

meter::-webkit-meter-bar {
	background: transparent;
}
meter::-webkit-meter-optimum-value {
	background: #22c55e;
}
meter::-webkit-meter-suboptimum-value {
	background: #f59e0b;
}
meter::-webkit-meter-even-less-good-value {
	background: #ef4444;
}

---

💻 output — результат вычислений

Семантический элемент для вывода результата формы:

<form oninput="result.value = Number(a.value) + Number(b.value)">
	<input type="number" id="a" value="0" /> + <input type="number" id="b" value="0" /> =
	<output name="result" for="a b">0</output>
</form>

<!-- Калькулятор -->
<form id="calc">
	<label>Цена: <input type="number" id="price" value="1000" /></label>
	<label>Кол-во: <input type="number" id="qty" value="1" /></label>
	<output id="total" for="price qty">1000 $</output>
</form>

<script>
	const form = document.querySelector("#calc");
	form.addEventListener("input", () => {
		const price = +form.querySelector("#price").value;
		const qty = +form.querySelector("#qty").value;
		form.querySelector("#total").value = `${(price * qty).toLocaleString()} $`;
	});
</script>

Зачем вместо <span>:

• Семантически означает "вычисленный результат"
• Атрибут for связывает с источниками данных
• Screen reader объявляет при изменении (live region)

---

⚠️ Подводные камни

• dialog.showModal() — фокус-ловушка работает только при открытии через JS, не через open атрибут
• dialog закрывается по Escape — добавь form method="dialog" внутри чтобы кнопки тоже закрывали
• <meter> — не использовать для прогресса процессов, для этого <progress>
• <meter> стилизация — сильно ограничена, разная в Chrome и Firefox
• <output> — не сохраняется при сабмите формы (не является form control)