Mittwoch,
08. Juli 2009

109-BYTES: The smallest CSS framework on Earth

CSS & XHTML Frameworks

Note: This experiment began with a big portion of irony in mind, regarding CSS frameworks. But then it developed into an interesting exercise on how to code with minimal markup.

Have you ever wanted to work with a streamlined CSS framework? Here it is ...

The source code

revision 1: 109 Bytes

<!DOCTYPE html><head><title></title><style type="text/css">*{color:#000;background:#fff}</style></head><body>

No need for a download link. It even fits in a tweet on Twitter.

Revision 2: 74 Bytes

<!DOCTYPE html><title></title><style>*{color:#000;background:#fff}</style>

This is still a valid HTML 5, crossbrowser compatible document and the framework is still ready to start adding content. With revision 2 we achieve amazing 32 percent saving of markup. The source code fits on a single typewriter line.

10 exciting killer-features

  1. It’s standard compliant and only uses valid code (valid HTML 5)
  2. Completely made without any CSS hacks
  3. It’s prepared for the future by using the latest web technologies (HTML 5)
  4. It has a streamlined source code, no DIV soups or bloated CSS, no optional end-tags.
  5. It has accessibility features (maximum contrast for all elements)
  6. Premium class browser compatibility (IE 3+)
  7. Performance optimized code - only a single HTTP request
  8. No limits for webpage design (allows fixed, elastic or fluid designs and even grids)
  9. Prepared for web 2.0: Just add rounded corners, drop shadows and reflections
  10. It’s free: licensed under Gnu Public License

Many thanks to co-author Tomas Caspers for his help, hard work and contribution to make this web developers dream come true.

UPDATE:  Revision 2 is out with huge markup savings. Thanks to all commenters who helped to fall below the 100 Byte limit.

Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.
28 Kommentare

  1. Gravatar von David Maciejewski David Maciejewski   (#)
    Mittwoch, 08.07.09 (13:01 Uhr)

    Ist heute der erste April?

  2. Gravatar von Andreas Hecht Andreas Hecht   (#)
    Mittwoch, 08.07.09 (13:18 Uhr)

    Dirk, alles klar bei Dir? Gehts Dir gut?

  3. Gravatar von Dirk Jesse Dirk Jesse   (#)
    Mittwoch, 08.07.09 (13:21 Uhr)

    Ja, alles bestens. Gelegentlich braucht das Netz mal etwas Ironie. Und man kann sogar noch was dabei lernen. Übrigens: Wie gerade gelesen - es sind noch 16 Byte Optimierungspotential drin. :-)

  4. Gravatar von Eric Eggert Eric Eggert   (#)
    Mittwoch, 08.07.09 (13:26 Uhr)

    It has a streamlined source code, no DIV soups or bloated CSS, no optional end-tags.

    Wrong. Even the start end end tags of the head and body elements are optional as well as the type=“text/css” section.

    <!DOCTYPE html><title></title><style>*{color:#000;background:#fff}</style> is all you need. (Yes, it validates.)

    I’d really add the charset meta-tag to this: <!DOCTYPE html><meta charset=“utf-8”><title></title><style>*{color:#000;background:#fff}</style>

    This is pure genius.

  5. Gravatar von Der Caspers Der Caspers   (#)
    Mittwoch, 08.07.09 (13:34 Uhr)

    @yatil: Charset bitte weglassen, wir versuchen doch gerade die Leute zu erziehen, dass sie nicht immer das Internet speichern und ausdrucken sollen.

  6. Gravatar von Fabian Tempel Fabian Tempel   (#)
    Mittwoch, 08.07.09 (13:40 Uhr)

    Sensationell!
    Wie konnten wir nur ohne dem leben?

    Ich liebe die Killerfeatures-Liste. Gibts da demnächst ne 2. Liste - “20 things you didn’t know about 109-Bytes” oder so?

    Danke. ;)

  7. Gravatar von nasumi nasumi   (#)
    Mittwoch, 08.07.09 (13:45 Uhr)

    Damn! Jetzt muss ich alle YAML-Projekte umbauen!

  8. Gravatar von Ansgar Ansgar   (#)
    Mittwoch, 08.07.09 (14:33 Uhr)

    It is even optimized for printing. And hell: It comes without layout-tables and full CSS3-support!

  9. Gravatar von Marc Marc   (#)
    Mittwoch, 08.07.09 (14:41 Uhr)

    ^^

  10. Gravatar von Markus Markus   (#)
    Mittwoch, 08.07.09 (14:46 Uhr)

    Wo ist der Paypal Button zum spenden? ;-) muss ja ewig gedauert haben das runterzuschreiben ^^

  11. Gravatar von Marc Görtz Marc Görtz   (#)
    Mittwoch, 08.07.09 (14:56 Uhr)

    Es geht noch kleiner: <head>, </head> und <body> sind optional, ebenso das type-Attribut beim style-Element.

  12. Gravatar von Dirk Jesse Dirk Jesse   (#)
    Mittwoch, 08.07.09 (18:37 Uhr)

    @Marc ... dann ist es aber nicht mehr anwendungsbereit. Um eigene Inhalte zu einzufügen, müsste man dann erstmal <body> wieder ergänzen. Und bei <head> bin ich mir auch nicht sicher, denn <title> darf glaub ich nicht im luftleeren Raum hängen.

  13. Gravatar von Eric Eggert Eric Eggert   (#)
    Mittwoch, 08.07.09 (18:45 Uhr)

    Doch, Dirk. Wie in meinem Kommentar schon gezeigt reicht das aus. Du kannst sofort anfangen Sachen reinzuschreiben wie <h1>Meine Überschrift</h1>. Optional ist Optional.

  14. Gravatar von Dirk Jesse Dirk Jesse   (#)
    Mittwoch, 08.07.09 (18:49 Uhr)

    Herje, gar keine Ordnung mehr? Da fühlt man mich aber aber schon etwas schmutzig, so zu arbeiten. Dann müssen wir wohl doch bald ne 2. Revision rausbingen, die dann deutlich unter 100 Byte sein wird.

  15. Gravatar von Thomas Scholz Thomas Scholz   (#)
    Mittwoch, 08.07.09 (19:07 Uhr)

    Der nackte Universalselektor ist auch optional. Du kannst sofort mit der {Klammer} loslegen.

  16. Gravatar von Siegfried Siegfried   (#)
    Mittwoch, 08.07.09 (19:22 Uhr)

    Genial!

    Hat eigentlich schon mal Jemand versucht, eine leere Datei zu validieren? Immerhin steht da ja definitiv nichts Falsches drin :)

  17. Gravatar von Dirk Jesse Dirk Jesse   (#)
    Mittwoch, 08.07.09 (20:06 Uhr)

    @Thomas

    Nein, wenn Du den Universalselektor weglässt, wird die Farbdefinition nicht mehr korrekt übernommen. Kannst Du im Firefox testen.

  18. Gravatar von Thomas Scholz Thomas Scholz   (#)
    Mittwoch, 08.07.09 (20:13 Uhr)

    Wenn du darauf Rücksicht nimmst, dann ist das Framework nicht mehr hackfrei. :)

  19. Gravatar von Andreas Hecht Andreas Hecht   (#)
    Mittwoch, 08.07.09 (21:15 Uhr)

    Also, die zweite Revision hat mich echt überzeugt, Dirk!

    Habe da gleich mal ne Webseite von gebaut, valide und minimalistisch.

    Nicht, dass Du meinst, neben YAML würde Deine neueste Kreation vernachlässigt worden:-)

    Die sinnloseste Webseite der Welt.

  20. Gravatar von Johannes Fürwentsches Johannes Fürwentsches   (#)
    Mittwoch, 08.07.09 (22:17 Uhr)

    Endlich kann man sich in seiner Arbeit mal wieder auf das Wesentliche beschränken und auch Leute ohne Breitbandanschluss kommen in den Genuss qualitativ hochwertiger Webseiten wie der von Andreas exemplarisch gezeigten! Danke dafür.

  21. Gravatar von Andreas Hecht Andreas Hecht   (#)
    Mittwoch, 08.07.09 (23:15 Uhr)

    @Siegfried:

    Ja, ein leeres Dokument validiert nicht. Ist dem Validator dann doch zu leer…

  22. Gravatar von Marc Marc   (#)
    Donnerstag, 09.07.09 (09:22 Uhr)

    Ich denke, dass es langsam Zeit ist, den entsprechenden “Don’t use the smallest CSS-framework on earth” bzw. “why the smallest CSS-framework on earth is evil” bzw. “why you shouldn’t use the smallest CSS-framework on earth” zu verfassen ^^

  23. Gravatar von simonnickel simonnickel   (#)
    Donnerstag, 09.07.09 (10:04 Uhr)

    Ich find übrigens die Anordnung der Kommentare auf der rechten Seite sehr verwirrend, wollt grad als Kommentar schreiben, dass es mich stark wundert warum bisher noch niemand geschrieben hat was das denn für einen Sinn haben soll ....

    Obwohl das mit den Kommentaren, wenn man erstmal daran gewohnt ist, ne sehr sinnige Sache ist ...

  24. Gravatar von makcie makcie   (#)
    Freitag, 10.07.09 (08:58 Uhr)

    @Dirk Jesse
    Anfangs war mir der Beitrag auch etwas suspekt (Aprilscherz oder was?). Aber jetzt finde ich das Experiment recht interessant. Für mich war das der Anstoß, mich endlich näher mit HTML 5 zu beschäftigen - kein CSS-Framework macht Sinn ohne HTML.
    Verzichtet man auch noch auf die Stilregeln, dann hat man ein kleines einsatzbereites HTML 5 - Dokument, dessen Inhalt mit dem Default-Stylesheet der Browser gestaltet wird. Aber dann wäre es kein CSS-Framework.
    @ Marc {22]
    Wieso “Don’t use ...???
    Gut, man muss die Minimalisierung nicht übertreiben - nicht das wir am Ende bei 0 Bytes landen.  ^^
    @ Andreas Hecht (19)
    Deine “sinnloseste Webseite der Welt” war für mich der praktische Einstieg in HTML 5!
    Erstaunlich, wie viele HTML 5-Websites schon existieren
    html5gallery
    Aber Deine Seite ist die “weltweit erste Seite, die das 74-Bytes CSS/HTML5 Framework” nutzt. Gratulation!

  25. Gravatar von Papa Latty Papa Latty   (#)
    Sonntag, 12.07.09 (23:30 Uhr)

    Does having the less code equal faster load times for browsers for the web page?

  26. Gravatar von Dirk Jesse Dirk Jesse   (#)
    Montag, 13.07.09 (13:16 Uhr)

    @Papa Latty

    Yes, of course.

Trackbacks