Чистое прогрессивное улучшение
-
26-10-2019 - |
Вопрос
Я использую прогрессивное улучшение для создания веб -сайта. Это включает в себя меню, слайд -шоу и т. Д. Элементы включены в страницу в качестве неупорядоченных списков, а затем JavaScript применяет форматирование.
Меня беспокоит: как я могу избежать вспышки неформатированного контента, где неупорядоченные списки видны до применения форматирования? Есть ли лучшие практики для этого?
Важно: сайт должен оставаться дружелюбным и доступным для SEO (поэтому я в первую очередь использую прогрессивное улучшение). Так, например, не режиссер установить начальный стиль неупорядоченных списков для отображения: Нет.
Решение
Так, например, не режиссер установить начальный стиль неупорядоченных списков для отображения: Нет.
Вы можете косвенно привести к установлению стиля display: none
Когда вы обнаружите JavaScript доступен с использованием CSS и некоторого запуска сценария до того, как любой из контента будет включен:
<head>
<style type="text/css">
body.withjs #menu { display: none; }
</style>
</head>
<body>
<script type="text/javascript">
document.body.className= 'withjs';
window.onload= function() {
...do stuff with menu...
document.getElementById('menu').style.display= 'block';
};
</script>
...
<ul id="menu">
...
</ul>
</body>
Другие советы
Используйте CSS для форматирования вместо JavaScript.