Профилактика сайта: максимально простое оповещение

Подготовил: Александр Головко Дата публикации: 15.12.2010

Иногда, переходя на любимый сайт, вместо привычной и нужной информации можно встретить табличку наподобие такой:

профилактика

Понятно. Идут какие-то профилактические работы или готовится внедрение новшеств. Интересно, а как цепляется эта табличка?

Задача

Максимально просто, быстро, удобно и универсально, средствами CSS организовать вывод таблички «профилактика» (и, соответственно, возврат к нормальному состоянию сайта по окончанию профилактических работ).

Решение

Идеальным было бы решение, которое не требует изменений в HTML — что бы не копаться в шаблонах, а просто поколдовать со стилями. И такое решение существует!

Предположим, у нас есть картинка с предупреждением. Soh Tanaka предлагает сделать ее фоном html, а body скрыть:

html {
	height: 100%;
	background: url(images/error.png) center center no-repeat;
	margin: 0;
}
body {
	display: none;
}

С окончанием профилактики, соответственно этот участок кода убираем.

Демо-пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

Осел ставит палки в колеса

К сожалению прием Танаки не сработает в IE в режиме обратной совместимости (в стандартном все будет нормально) — фон для html не отобразится, из-за того, что body скрыто.

Лично я повсеместно использую XML декларацию, что автоматически переключает IE6 в режим обратной совместимости, и поэтому предыдущее решение немного модифицировал.

Для IE6, в отдельном CSS, подключаемом условными комментариями скрываем все элементы, содержащиеся в body (сам body остается видимым — это надо учитывать, например, если у него задан свой фон).

/* Этот дополнительный CSS должен видеть только IE6 */
body {
	display: block;
}

body * {
	display: none;
}

Демо-пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

На практике править шаблон, скорее всего, придется, так как потребуется поменять версию CSS (имя подключаемого CSS файла), для того чтобы исключить кеширование. Тем не менее, приведенный вариант решения задачи является, наверное, самым простым и быстрым из всех возможных решений средствами CSS.

Материал

Теги:
Показать комментарии