Здравствуйте. В данном уроке описан трюк. который позволяет организовать вывод страницы (простенькой, но все же ...) без использования HTML кода, а только с помощью CSS. К сожалению, на момент написания статьи трюк будет работать только в браузерах Opera и Firefox.
Итак, открываем демонстрационную страницу и пробуем посмотреть ее исходный код (комбинация клавиш Ctrl+U). А потом читаем, как это организовано.
Некоторые элементы HTML неявно подразумеваются
Открытие и закрытие тегов <html>, <head> и <body> перестало быть необходимостью в HTML. Следующий документ соответствует всем требованиям и пройдет проверку:
<!DOCTYPE html>
<title>Пример</title>
В данном примере используется DOCTYPE HTML5, но если переключить его на DOCTYPE HTML 4.01, документ все еще будет проходить проверку без ошибок. Конечно, XHTML гораздо более требовательный к синтаксису и не допускает пропуска открытия и/или закрытия тегов. Но уже почти 2011 год и кто ещё использует XHTML?
Когда браузер выводит наш демонстрационный документ, он обнаруживает, что элементы <html>, <head> и <body> отсутствуют в коде и автоматически генерирует их. Вы может проверить данный факт самостоятельно, открыв демонстрационную страницу, с помощью Firebug, Web Inspector, или Opera Dragonfly.
Так как данные элементы подразумеваются неявно, им можно задавать стили CSS, независимо от того, имеются они в исходном коде страницы или нет. Рассмотрим следующий пример:
<!DOCTYPE html>
<title>Example</title>
<style>
html {
background: red;
}
body {
background: blue;
margin: 0 auto;
width: 30em;
}
</style>
Хотя нигде в коде HTML не упоминается тегов <html> и <body>? мы можем задать стили для них, потому что браузер автоматически их генерирует.
Это первый трюк, который используется при подготовке нашей демонстрации. В нашей демонстрации также не задается DOCTYPE, а просто остается один <title>. В реальных проектах так делать нельзя. Потому что отсутствие DOCTYPE приводит к тому, что документ выводится произвольно.
Даже с полностью пустым документом HTML браузер генерирует подразумеваемые элементы.
Директива LINK:
RFC 5988 определяет директиву LINK для заголовка HTTP, которая позволяет отправлять элемент <link> с помощью заголовка HTTP без включения его в код HTML. В качестве примера мы можем сделать документ со следующим заголовком HTTP :
Link: <some-document.html>;rel=prefetch
что будет иметь такой же эффект, как и включение в код HTML следующей строки:
<link href="some-document.html" rel="prefetch">
Подобным образом в соответствии с RFC 5988 можно включать таблицу стилей в документ HTML, используя только заголовок HTTP:
Link: <magic.css>;rel=stylesheet
Что будет эквивалентно использованию:
<link href="magic.css" rel="stylesheet">
Соединяем все в одно целое
Теперь осталось только подготовить демонстрационную страницу PHP, которая будет содержать одну строку:
<?php header('Link: <demo.css>;rel=stylesheet'); ?>
Ну а файл demo.css будет содержать следующий код:
html {
background: #666;
padding: 1em;
}
body {
border: 5px dashed #eee;
color: #fff; font: 3em/1.5 Helvetica, Arial, sans-serif;
padding: 1em;
width: 30em;
margin: 0 auto;
}
body::after {
content: 'Hi! Try to look at source code! ;)'; /* Нужно использовать ::after (а не только `body`), чтобы работало в Firefox 3.6.x. */
}
К сожалению, директиву Link пока поддерживают только Opera и Firefox.
Заключение
Описанная в данном уроке техника на сегодняшний момент является всего лишь трюком для настоящих фанатов. Однако теперь все, кто прочитал данную статью, знают о подобной возможности использования CSS и HTML.
Говорить о серьезном использовании таких ухищрений нельзя. Но директива Link представляет определенный интерес. К сожалению она на сегодняшний момент очень слабо поддерживается. Но когда-нибудь ...