Einige dieser kleinen Extras dürften den meisten Webentwicklern bereits bekannt sein. Für runde Ecken zum Beispiel hat das W3C in CSS3 die Option „border-radius“ vorgesehen [1]. Mit so genannten „vendor prefixes“ lassen sich via „-moz-border-radius“ und „-webkit-border-radius“ bereits jetzt schon runde Ecken in Firefox und Safari beziehungsweise Chrome realisieren. Ähnliches gilt für „box-shadow“, eine Option, die einen Schatten erzeugt. Der Schatten kann positioniert werden und einen Blur enthalten – und auch runde Ecken der eigentlichen Box werden übernommen. Auch hier haben Firefox und Safari wieder die Nase vorn. Allein mit diesen beiden Möglichkeiten können Webentwickler bereits zwei Versionen basteln. Eine „normale“ Fassung hauptsächlich für die üblichen Verdächtigen der IE-Reihe und eine Fassung für fähigere Browser. Alle User sehen die Inhalte, darauf kommt es an. In einigen Fällen ist lediglich das Design etwas hübscher anzuschauen. Der Webentwickler Andy Clarke hat das Prinzip sehr anschaulich in einem Artikel für 24ways.org [2] beschrieben.

Webdesigner und -entwickler kennen die unterschiedlichen Fähigkeiten der Browser. Sie haben kein Problem damit, wenn Webseiten leicht unterschiedlich aussehen. Schwierig wird es, wenn Kunden oder Agenturen der Meinung sind, Webseiten müssten unbedingt überall gleich aussehen. Da ist immer wieder aufs Neue Überzeugungsarbeit zu leisten. Am besten geht so etwas mit anschaulichen Beispielen, um zu demonstrieren, dass auch andere Firmen zwei Versionen nutzen. Zum Beispiel die folgenden zwei Websites, die je nach Browser unterschiedliche Effekte darstellen:

Auf forabeautifulweb.com [3] sind drei Bücher mit DVD zu sehen. Fährt der Nutzer mit der Maus über eines der Bücher, gibt es je nach Browser unterschiedliche Varianten. Im Internet Explorer passiert nicht viel: Das Buch ist ein Link, also verwandelt sich der Mauszeiger wie üblich in eine Hand. Im Firefox gibt es einen Hover-Effekt. Das Buch kippt abrupt etwas nach links und die DVD kommt hinter dem Buch hervor. Besucht jemand die Seite hingegen mit Safari oder Chrome, bekommt er optisch mehr geboten: Hier neigt sich das Buch nämlich langsam zur Seite und die DVD rollt schön heraus. Wichtig dabei ist: Das Buch dient als Link, und der funktioniert in allen Browsern. Die Spielerei ist nur ein kleines Extra.

Der Effekt lässt sich über CSS-Transformationen, -Transitionen und -Animationen bewerkstelligen. Wie das funktioniert, kann man zum Beispiel in Eric Eggerts Artikel für den Adventskalender der Webkrauts nachlesen [4].

Ähnlich verspielt gibt sich das Team von Analog [5]. Die Profilfotos auf der Startseite sind in allen Browsern zu sehen und als Link nutzbar. Mit Safari und Firefox gibt es für die Nutzer aber zusätzliche kleine Animationen. CSS3-Eigenschaften wie Transformationen lassen sich übrigens auch auf Print-Stylesheets anwenden [6].