Kunstform CSS

Manch­mal wünscht man sich ja ein Zurück, abseits vom Design­ein­heits­brei der meis­ten Web­sei­ten. Tat­säch­lich ach­te ich beim Sur­fen als Ers­tes auf das Design. Damit mei­ne ich noch nicht ein­mal ein anspruchs­vol­les Design, aber: Je weni­ger der Betrei­ber davon ver­steht, des­to schlich­ter und funk­tio­na­ler soll­te das Design einer Web­sei­te sein. In den frü­hen Jah­ren bas­tel­ten die meis­ten an ihren HTML-Web­sei­ten; vie­le ver­schlimm­bes­ser­ten dabei ihr Design ins Unkennt­li­che. Die dama­li­ge end­gül­ti­ge Müll­sei­te«, legt sei­ner­zeit Zeug­nis vom ver­zwei­fel­ten Ver­such eini­ger selbst­er­nann­ten Web­de­si­gner ab, ihre rudi­men­tä­ren HTML-Kennt­nis­se im Netz zu prä­sen­tie­ren. Auf der ande­ren Sei­te gab es die tat­säch­li­chen Künst­ler. Der Web­de­si­gner David Shea rief vor zwan­zig Jah­ren auf der Sei­te zen­gar­den dazu auf, eine krea­ti­ve Sei­te aus HTML und CSS-Bei­spiel­da­tei­en zu ent­wi­ckeln. Shea ging es vor allem dar­um zu zei­gen, was mit CSS mög­lich ist. Der CSS Zen Gar­den ist inzwi­schen einer der geschichts­träch­tigs­ten Orte des Web­de­signs. Er wur­de 2003 von Shea ins Leben geru­fen, um ein damals revo­lu­tio­nä­res Kon­zept zu demons­trie­ren: Die strik­te Tren­nung von Struk­tur (HTML) und Design (CSS).


Das Fas­zi­nie­ren­de am Zen Gar­den ist die Ein­schrän­kung: Jedes ein­zel­ne Design, das du auf der Sei­te aus­wäh­len kannst, nutzt exakt den­sel­ben HTML-Code. Die Teil­neh­mer dür­fen kei­ne ein­zi­ge Zei­le am HTML ändern, kein »div« hin­zu­fü­gen und kei­ne Klas­se umbe­nen­nen. Die gesam­te visu­el­le Trans­for­ma­ti­on – von mini­ma­lis­tisch über futu­ris­tisch bis hin zu klas­sisch – geschieht aus­schließ­lich über eine ein­zi­ge exter­ne CSS-Datei.

Bevor der Zen Gar­den popu­lär wur­de, war das Web voll von „Tabel­len-Lay­outs“ und unsicht­ba­ren Platz­hal­ter-GIFs. Design und Inhalt waren untrenn­bar im Code ver­mischt. Der Zen Gar­den dien­te als „Weg der Erleuch­tung“ (wie es im Text heißt), um Desi­gnern zu zeigen:

Wie­der­ver­wend­bar­keit: Man kann das Aus­se­hen einer kom­plet­ten Web­site ändern, ohne den Inhalt anzufassen.

Bar­rie­re­frei­heit: Da das HTML sau­ber struk­tu­riert bleibt, kön­nen Screen­rea­der den Text pro­blem­los lesen, egal wie wild das CSS dar­über liegt.

Effi­zi­enz: Ein zen­tra­les Style­sheet steu­ert das gesam­te Branding.

Mitt­ler­wei­le ist die Sei­te fast schon eine Art Muse­um. Wäh­rend moder­ne Tech­ni­ken wie Flex­box und CSS Grid heu­te Stan­dard sind, stam­men vie­le der berühm­ten Designs aus einer Zeit, in der man sich noch mit den Feh­lern des Inter­net Explo­rers her­um­schla­gen musste. 🤢

Das Pro­jekt zeigt ein­drucks­voll, dass tech­ni­scher Fort­schritt nicht nur aus neu­en Funk­tio­nen besteht, son­dern vor allem dar­aus, Schön­heit aus Struk­tur zu schaffen.

Ich ver­lie­re mich manch­mal in den wun­der­vol­len, anspruchs­voll gestal­te­ten Sei­ten der CSS-Künst­ler und Künst­le­rin­nen. Das dort wirk­lich nur die Crè­me de la crè­me antre­ten soll, wird schnell bei den Teil­nah­me­be­din­gun­gen klar. Expli­zit wird zur Teil­nah­me hin­ge­wie­sen: Bit­te nur Grafikkünstler.