Как показать блок через 3 сек (без js, без position:absolute)?

Question

[Анатолий]

Нужно реализовать показ на странице уведомления, что не включена поддержка javascript, сейчас это реализовано так:

показать код

<style>
		.block_warning {
			animation:anim 3s ease-in;
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			color: #fff;
			font-size: 2rem;
			background-color: #f00;
			margin: 0 auto;
			position: absolute;
			left: 0; }

		@keyframes anim {
			from {top: -360px}
			to {top: 0}}
	</style>
	<div id="no-js" class="block_warning">Внимание! У Вас в браузере отключена поддержка javascript.</div>

т.е. блок появляется сверху, а нужно чтобы он появлялся между блоками:

<header></header>
<div class="block"></div>
<main></main>

Зачем нужна задержка: при загрузке страницы, пока документ загружается, то кратковременно появляется этот блок, что не приятно.
Пояснение: javascipt скрывающий этот блок находится внизу этого же документа, т.е. это не отдельный файл. Перенести скрипт в начало страницы, тоже не вариант, так как DOM еще не сформирован.
Чем не устраивает текущий вариант, тем что блок скрывает половину шапки сайта.

PS. Сразу исключаем из вариантов javasctipt и position: absolute.

Comments

[Lynn «Кофеман»]

Может проще взять старый добрый тег noscript?

https://developer.mozilla.org/en-US/docs/Web/HTML/...

Answer 1

[Анатолий]

Вопрос закрываю, подсказали, что можно <noscript> пользоваться.
Сделал вывод блока так

<noscript>
	<style>
		.block {
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			color: #fff;
			font-size: 2rem;
			background-color: #f00;
			margin: 0 auto; }
	</style>
	<div class="block">Внимание! У Вас в браузере отключена поддержка javascript.</div>
</noscript>