CSS трюки — пишем сайт без html

http://css-tricks.com/using-css-without-html/
  • Перевод
В качестве предисловия к переводу. Открываем Firefox/Opera, переходим по ссылке, смотрим исходный код страницы и удивляемся. Потому что его нет. Под катом рассказ, как такое можно сделать.

Трюк первый


Многие может и не знают, что использование тегов <html>, <head> и <body> не является обязательным, поэтому следующий код будет абсолютно рабочим.
<!DOCTYPE html>
<title>Example</title>

Даже не смотря на то, что в примере используется HTML5 DOCTYPE, в HTML 4.01 DOCTYPE все будет работать аналогичным образом. Это происходит потому, что не найдя описанных выше тегов при рендеринге, браузер сгенерирует их сам. А раз они буду сгенерированы, то и css стиль к ним применить можно, поэтому будет работать и следующий код:
<!DOCTYPE html>
<title>Example</title>
<style>
  html {
    background: red;
  }
  body {
    background: blue;
    margin: 0 auto;
    width: 30em;
  }
</style>

Стоит отметить, что в примере нет даже элемента DOCTYPE, но делать так для реальных сайтов нельзя, потому что страница в таком случае будет загружена в режиме совместимости.

Трюк второй


Согласно RFC 5988 существует HTTP заголовок Link, позволяющий пересылать элементы <link> в HTTP заголовках, вместо включения в код страницы.
Выглядит это таким образом:
Link: <some-document.html>;rel=prefetch

что будет являться аналогом для
<link href="some-document.html" rel="prefetch">

Соответственно, файлы стилей можно подключать таким образом
Link: <magic.css>;rel=stylesheet

А на практике это можно использовать следующим образом:
<?php header('Link: <demo.css>;rel=stylesheet'); ?>

Файл стиля выглядит следующим образом:
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: 'O HAI! Have a look at my source code :)'; /* This needs to be on the ::after (and not just on `body`) for it to work in Firefox 3.6.x. */
}

Но по сути это теория. На практике заголовок Link поддерживают только опера и огнелис. Если интересно, то вот информация о баге в вебките и IE.

Ну и собственно что получается:
image
Поделиться публикацией

Похожие публикации

Комментарии 76
    +50
    Перенесите в ненормальное программирование ;)
      +5
      Программирование?
        +16
        Думаю для одного случая будет слишком кашерно создавать блог «Ненормальная верстка».
          +2
          Главное — начать
            0
            А дальше — народ войдет во вкус! :)
              +1
              Вкус Ненормальной верстки многие уже успели попробовать и пробуют до сих пор :)
          0
          ну там есть 1 строчка на PHP
        +6
        Спасибо! В этой связи, Оперу и Огнелис в каждый комп.
          +7
          Глаза бы мои не видели этого говнокода.
          Можно конечно но зачем ???
            +27
            Ради любви к искусству.
              +5
              Главное чтобы никто в основной практике не использовал. А то ведь додумаются еще.
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  handlebars.js?
                0
                вот так привьют эту «любовь к искусству», а потом…
                +3
                Например, у меня появился козырь на соответствующем экзамене в эту сессию. Практически как в том анекдоте про профессора и шанель №5.
                  0
                  Just for lulz
                  +15
                  Когда открывал топик, думал: «Ну хоть бы это не про :before и :after !» Надеялся увидеть целый функционирующий сайт, ну или хотя бы что-то более-менее осмысленное. Печаль
                    +5
                    А скрипты можно так подключать через link?
                      –5
                      Думаю нет, иначе бы это была бы большая дыра в защите, имхо.
                        +6
                        Никакой дыры не вижу. И то, и то (документ и заголовки) — части одного целого, HTTP Response. Формируются одновременно веб-сервером.

                        Раз уж была возможность эмулировать заголовки в документе (в HTML это <meta http-equiv="..." content="..."/>), то вот еще есть эмуляция элементов документа в заголовках. Если браузер не будет трактовать скрипты, указанные в Link: как-то иначе, чем скрипты, указанные в теле документа — дыре возникнуть не с чего. Даже HTTP headers smuggling тут вроде никак не применить.

                        Другое дело, что это вообще богопротивное занятие — пихать сущности в непредназначенное для них место %)
                        По RFC 5988 предполагалось, afaik, что в заголовках будут передаваться ссылки, независимые от миме-типа и сериализации ресурса. А stylesheet, по правде говоря, не назовешь независимым. Это предназначено для rel вида previous или next.

                        • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            Если у вас есть доступ к серверу, с которого загружается iframe, то что мешает этот скрипт прямо в коде указать? :) Так что этот способ ничем не отличается от обычного <link />.
                              +1
                              И что? Если я могу отправить скрипт в заголовке, что помешает отправить такой же в теле ответа?
                                +1
                                и чем будет отличаться от обычного тега link или script в этом случае?
                              0
                              Если бы все браузеры это поддерживали, то можно было бы сделать косвенную защиту своих стилей и скриптов. Так как не всякий может догадаться, что скрипты подключаются таким образом.
                                +4
                                Забудьте, не бывает никаких «косвенных защит» и «security through obscurity».
                                  0
                                  по большому счету да.
                                  но, справедливости ради стоит заметить, что в скайпе принцип «security through obscurity» довольно долго работал.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    –1
                                    Если я правильно понял о чем речь, то речь не о сниффинге самим разработчиком, а возможности, например, загружать какую-то страницу ФБ/ВК со скриптом, который будет вытягивать личные данные пользователя.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        –2
                                        Да, прошу прощения, таки не правильно понял о чем речь.
                                    +2

                                    Privacy надо заменить на security
                                  0
                                  в лисе стилем можно подгружать XBL используя -moz-binding
                                  +6
                                  Контент в CSS еще хуже чем разметка таблицами…
                                  А так в качестве разминки можно сделать
                                    0
                                    Иногда контент в CSS — отличное решение. Правда контент «оформительский», а не основной. Всплывающий бабл с пояснением опции на чистом CSS в ряде случаев вполне ОК. Например «вы можете редактировать этот текст →» для блока с contenteditable.
                                      +2
                                      текст в css — нормально, если семантически из себя он ничего не представляет
                                      –20
                                      И нахуя?
                                      +14
                                      Кто-то пытается это серьезно воспринимать?! Это же, в большей степени, just for fun!!!
                                        0
                                        А тоже самое проделать, но оставить код валидным слабо? ;)
                                          +8
                                          Отсутствие кода валидно само по себе. В этом есть истинное Дао.
                                            0
                                            Минимальный валидный код документа на html5:

                                            <!DOCTYPE html>
                                            <title></title>


                                            Можете проверить.
                                              0
                                              Просмотрел, там вообще пустой документ по ссылке… Dragonfly с толку сбил, в нём код показало:
                                              <html>
                                              <head/>
                                              <body/>
                                              </html>

                                              Прошу прощения.
                                            +2
                                            В Мозилле еще круче — Ctrl+U — и исходный код вообще пустой! Я сначала не поверил ))
                                              +3
                                              В опере вообще исходный код не открывается.
                                                +1
                                                поисковики одобрят?)
                                              –1
                                              Забавно. Надо запомнить заголовок.
                                                0
                                                Там 4 буквы. Как его можно забыть?
                                                0
                                                Интересный хак. За заголовок link особое спасибо — пригодится, думаю.
                                                  0
                                                  Для чего?!!! Ведь его поддерживают не все браузеры…
                                                    +4
                                                    Ну вот, уже польза :)
                                                      0
                                                      Да дайте время. Он из драфта вышел только месяц назад.
                                                    +1
                                                    В комплекте с JS обфускаторами может пригодиться…
                                                    Вспоминается анекдот про строку в исходниках:
                                                    set true=false;//Счастливой отладки, с_ки!
                                                      +16
                                                      ой, у вас опечатка в слове «суки».
                                                        +5
                                                        #define true false

                                                        Понаплодилось школоты…
                                                        +1
                                                        В любом RFC, если почитать вдумчиво, есть свои интересные особенности, которые, будь они популяризированы ранее, могли бы перевернуть девелопмент в сфере этого RFC. Это обычное дело.
                                                        В принципе, способ передачи ресурсов через хёдер является более красивым и удобным, жаль что о нём вспоминают только перечитывая RFC в моменты безделия.
                                                          –1
                                                          Что-то Вебкитные браузеры не проглотили хак… вижу только favicon и всё.
                                                            0
                                                            Потому что вебкит не поддерживает пока что Link header. Если интересно, вот бага с этим связанная.
                                                              0
                                                              Опера и Огнелис постигли. На этом пока — все.
                                                              +3
                                                              Добавил ссылки на описание багов, что Link header не работает в вебкит и ие.
                                                                0
                                                                Вот скажите мне пожалуйста, где это можно применить, и какой от этого реальный толк.
                                                                + не все браузеры данный финт поддерживают
                                                                  +3
                                                                  Офигеть!
                                                                  Большое спасибо за статью, очень интересная статья.
                                                                  Не первый год занимаюсь веб-дизайном и версткой и меня очень трудно удивить всякими трюками на HTML/CSS, но вот это статья действительно удивила и заинтересовала.
                                                                    –11
                                                                    В качестве предисловия к переводу. Открываем Firefox/Opera, переходим по ссылке, смотрим исходный код страницы и удивляемся. Потому что его нет. Под катом рассказ, как такое можно сделать.

                                                                    Перехожу по ссылке, смотрю исходный код страницы и удивляюсь! Исходного кода нет! Также нет и какого-либо содержания на данной странице! Далее читаю: «Под катом рассказ, как такое можно сделать.» — эээ, как сделать пустую страницу без исходного кода что-ли? Ржу под столом! xD

                                                                    PS: Да-да-да, я зашел через Google Chrome, а на «Открываем Firefox/Opera» не обратил внимания =)
                                                                      +1
                                                                      Вы гордитесь тем, что невнимательно читаете?
                                                                        0
                                                                        Я описал забавную ситуацию, которая случилась из-за того, что я не обратил внимание на «Открываем Firefox/Opera» — вот и все, причем же тут «гордитесь»? =)
                                                                      +2
                                                                      «Многие может и не знают, что использование тегов, и не является обязательным»

                                                                      «Это происходит потому, что не найдя описанных выше тегов при рендеринге, браузер сгенерирует их сам.»

                                                                      Мне кажется, что такое поведение браузера неправильно…
                                                                      То есть эти теги необязательные, если их нет — не надо ничего генерировать.
                                                                        –1
                                                                        Тег в HTML5 обязателен по стандарту. Просто браузеры содержат в себе вот такую вот защиту от дурака-верстальщика.
                                                                          0
                                                                          HTML валидатор так не считает, если указать <!DOCTYPE html>
                                                                            0
                                                                            Если не указать title, то он будет ругаться на отсутствие head. Если указать, то про head он «забывает». Валидатор такой валидатор)
                                                                        0
                                                                        Firebug усё показывает :)
                                                                          0
                                                                          Firebug показывает код того, что отображено, а не исходный страницы. Под Firebug видно даже динамически сгенеренный хтмл на стороне клиента. Допустим теги при просмотре через Firebug всегда закрыты, а код валидный, хотя при нажатии view source может быть совсем другая картина.
                                                                            0
                                                                            Естественно. Но при просмотре кода в нём, многое становится понятно.
                                                                          0
                                                                          После &lt точку с запятой поставить забыли.
                                                                            0
                                                                            Какая от этого практическая польза?
                                                                              0
                                                                              Такой трюк могут использовать для дефейса. Отследить сложнее из-за нестандартности фичи, вдобавок половинчатая поддержка браузерами сбивает с толку ещё сильнее, и времени на поиски заразы уйдёт ещё больше.

                                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                            Самое читаемое