CSS-Kunst wird von alten Browsern auf brillante Weise ruiniert

CSS art
(Bildnachweis: Diana Smith / Andy Baio)

Eines der lustigsten Dinge beim Webdesign ist, dass Sie unabhängig von der Anzahl der genau definierten Standards nie sicher sein können, dass alles, was Sie erstellen, in allen Browsern gleich aussieht. Sogar die neuesten Versionen des beste Webbrowser Sie haben verschiedene Möglichkeiten, mit verschiedenen Webtechnologien umzugehen, die sich auf die Darstellung Ihrer Website auswirken können. Aus diesem Grund sind plattformübergreifende Tests so wichtig, insbesondere wenn Sie sich auf den neuesten Stand der Technik verlassen CSS-Animation .

Während Inkonsistenzen zwischen Browsern ärgerlich sein können, können sie hin und wieder etwas absolut Entzückendes hervorbringen, und hier ist ein fantastisches Beispiel: das Reine CSS art von Diana Smith . Sie erstellt wunderschöne browserbasierte Kunst, die von klassischen Gemälden inspiriert ist, und verwendet nur handgeschriebenes HTML und CSS. Ihre neueste Kreation, Lace (im Stil flämischer und barocker Werke), ist ein atemberaubendes Stück.

CSS art



Dies ist eine unglaubliche Arbeit, wenn man sich eine aktuelle Version von Chrome ansieht(Bildnachweis: Diana Smith / Andy Baio)

Zumindest ist es so lange, wie Sie es in einer aktuellen Version von Chrome betrachten. CSS ist eines der Dinge, die in verschiedenen Browsern nie ganz gleich funktionieren. Mit einem Bild wie Lace, das von bestimmten CSS-Eigenschaften abhängt, die sich wie in Smiths Browser verhalten, können Sie die Unterschiede schnell erkennen.

Firefox Quantum macht eine anständige Faust daraus, aber mit etwas grobem Anti-Aliasing und mangelnder Textur für die Iris, während Safari die Handlung vollständig verliert, die Dinge in der falschen Reihenfolge überlagert und am Ende eine surrealistische Albtraumvision ergibt, wie oben gezeigt .

Es wurde nur für Chrome entwickelt, aber lassen Sie sich nicht davon abhalten, es in anderen Browsern zu versuchen: Je älter, desto besser! Hier ist es in Chrome 17, Firefox 3.6, Chrome 9 und (mein Favorit) Internet Explorer 5.1.7 für Mac. pic.twitter.com/dFNYKi8Myf 1. Mai 2018

Es ist genau die Art von Dingen, die uns dazu bringen, Lace absichtlich in ältere Browser einzuspeisen, um zu sehen, wie sie es vermasseln. Gott sei Dank Andy Baio hat uns die Mühe erspart. Nachdem ich bereits Smiths frühere Arbeit ausprobiert hatte, Francine In älteren Browsern - wir lieben besonders die fast Mondrian-ähnlichen abstrakten Bemühungen von Internet Explorer 5.1.7 für Mac - hat er Lace die Behandlung älterer Browser gegeben, mit ähnlich fabelhaften Ergebnissen.

CSS-Kunst: Safari 10.01

Leg dich nicht mit Safari 10.01 an(Bildnachweis: Diana Smith / Andy Baio)

Es ist schwer, die spektakuläre Zerstörung zu überwinden, die Safari Lace verliehen hat. Das Seltsame ist, dass die Ergebnisse viel weniger zufällig sind, wenn Sie einige Versionen von Safari 10.1 wiederherstellen. Es ist jedoch etwas Seltsames mit der Schattierung los, wodurch das Motiv stark verletzt und geschlagen aussieht. 'Meine Theorie ist, dass Safari 10.01 einige Stufen hinuntergestolpert ist, und zwei Versionen später ist Safari 13 darüber verlegen', sagt Baio.

CSS-Grafik: Chrome 45

Wir lieben die naive Flachheit dieser Bemühungen(Bildnachweis: Diana Smith / Andy Baio)

Die Rückkehr zu einer alten Version von Chrome - in diesem Fall Chrome 45 aus dem Jahr 2015 - bietet eine hervorragende Unterhaltung. Das Motiv sieht aus wie ein Gesicht, das auf einen Ballon gemalt ist. Die wahre Freude ist jedoch der Internet Explorer 8, der Lace zu einem herrlichen Stück 8-Bit-Neokubismus macht und jedes Detail verliert, aber dennoch ein gewisses Maß an Charakter und Ausdruck behält.

CSS-Grafik: Internet Explorer 8

Der Versuch von Internet Explorer 8 ist einfach großartig in seiner Hoffnungslosigkeit(Bildnachweis: Diana Smith / Andy Baio)

Wenn Sie Lust haben, Lace in Ihrer eigenen Sammlung alter Browser auszuprobieren, Sie finden es hier . Und um mehr von Andy Baios Misshandlung zu sehen, gehe zu seinem Blog-Beitrag .

Zum Thema passende Artikel: