Doch es ist gar nicht so leicht, im heutigen Tarif-Dschungel den für sich passenden Anbieter mit dem richtigen Tarif zu finden. Nicht immer ist ein anfangs günstiger monatlicher Preis auch der beste Preis über die gesamte Laufzeit. Auf internetanbieter-tarife.de findet man aber eine nette Übersicht, bei der nicht nur der monatliche Preis für jeden Internetanbieter angezeigt wird, sondern über eine Laufzeit von 24 Monaten der durchschnittliche effektive Preis berechnet wird. Dabei sind aktuelle Sonderkonditionen und einmalige Einrichtungspreise berücksichtigt, z. B. die 7 Monate kostenlos von Vodafone.

Interessant für die meisten dürfte die Übersicht auf der Startseite sein, da man dort in Sekundenschnelle auswählen kann, welche Bandbreite man haben möchte, ob eine Telefonflatrate enthalten sein soll und ob man einen eventuell bereits bestehenden Telekomanschluss weiterhin nutzen möchte (für die Sortierung wird übrigens jQuery genutzt).

Wenn man sich die Übersicht anschaut, könnte man es schon fast schade finden, nicht in Baden Württemberg zu wohnen. Der Internetanbieter Kabel BW bietet nämlich Bandbreiten bis 100 MBit/s an. Der Upload könnte mit 2.500 kBit/s schneller ausfallen, ist aber letztlich doch mehr als der Downstream vieler DSL Kunden, wenn sie zu weit vom Verteiler entfernt wohnen.

Insgesamt eine empfehlenswerte und übersichtliche Seite, wenn man sich über aktuelle DSL-Tarife oder Sonderangebote der Internetanbieter informieren will. Aktuell scheint der Trend in Richtung VDSL zu gehen, wobei die Kabelanschlüsse immer leistungsfähiger werden und eine ernsthafte Konkurrenz zu den herkömmlichen DSL-Anbietern darstellen (zumindest in den Gebieten, in denen der Kabelanschluss auch geschaltet werden darf bzw. kann).

CSS-Hacks nennt Selektoren, die nur von bestimmten Browsern interpretiert und angewandt werden. So kann man Unterschiede in der Darstellung wie beispielweise beim Box-Modell des Internet Explorers durch spezifische Angaben korrigieren.

Selector-Hacks:

IE 6 (und darunter) [Star-HTML-Hack]

* html #uno  { … }

IE 7 (und darunter) [Star-Plus-HTML-Hack]

*:first-child+html #dos { … }

IE 7 und moderne Browsers [Kind-Selektor]

html>body #tres { … }

Moderne Browsers (ohne IE 7)

html>/**/body #cuatro { … }

Opera 9.27 (und darunter)

html:first-child #cinco { … }

Safari

html[xmlns*=""] body:last-child #seis { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:nth-of-type(1) #siete { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:first-of-type #ocho {  … }

Safari 3, Chrome 1+

@media screen and (-webkit-min-device-pixel-ratio:0) {

#diez  { …  }

}

Attribute-Hacks:

IE 6 (und darunter)

once { _color:blue }

IE 7 (und darunter)

doce { *color: blue }

Das man in seinem Blog über den Erhalt der Weltkarte berichtet und ein Foto von sich un der Karte veröffentlicht ist übrigens Teil 2 der Aktion. Das Bild wir auf der Seite von United Domain veröffentlicht und man erhält einen Link auf seinen Blog.

Der dritte und letzte Teil der Aktion ist, dass die 10 besten Fotos zusammen mit der URL des zugehörigen Blog in Zeitschriften wie wie c’t oder Internet World Business veröffentlicht werden. Wir lassen uns überraschen.

Momentan läuft bei United Domains eine Aktion für alle Kunden, die einen eigenen Blog betreiben. Wer einen Blogeintrag zur Domain-Weltkarten-Aktion schreibt, bekommt diese Karte gratis! Der Beitrag muss einen Link zu United Domains oder domain-karte.de enthalten. Den Link und seinem Blogeintrag und die Vollständige Anschrift, an die die Karte geschickt werden soll, sendet man dann per Email an aktion@united-domains.de. Und schon klappt’s mit der Karte.

Die Aktion läuft noch bis 31.03.2009, solange der Vorrat reicht.

Inline-Block ist – wie der Name bereits suggestiert – eine Mischung der Elementtypen block und inline.

Während Block-Elemente (h1-h6, div, usw.) im Textfluß stets neue Zeilen und größere Abstände zum nächstfolgenden Element erzeugen, erzeugen inline-Elemente (a, u, i, img, usw.) keine neue Zeile ordnen sich nebeneinander statt untereinander an.

Inline-Elemente belegen nur den Platz, den sie auch wirklich benötigen, und lassen sich in Höhe und Breite nicht beeinflußen. Einzige Ausnahme ist das img-Elemente, das zu den inline-Elementen gezählt wird. Dieses ist aber in Wirklichkeit ein Mittelding zwischen block und inline, also inline-block.

Elementen dieser Art verhalten sich wie inline-Elemente, lassen sich also in den Ausmaßen verändern, verursachen jede keine neue Zeile und ordnen sich somit nebeneinander an. Besondern attraktiv ist diese Darstellungsform für Fotogalerien, die bisher meist umständlich über Tabellenlayout umgesetzt wurden.

Und hier ist nun der Code für die perfekte Galerie, die vollständig auf CSS basiert:

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Konsequent ignoriert der Microsoft-Browser über 5 Jahre hinweg nahezu alle Web-Standards vo W3C. Die Redmonder kümmerten sich lange Zeit nicht um ihr Kind, das vor etlichen jahren quasi das Web-Monopol besaß.

Während Microsoft schlief, entstand eine harte Konkurrenz. Angeführt von Mozillas Firefox rungen die Alternativ-Browser wie Opera, Safari/WebKit und seit Kurzem Googles Chrome dem IE Prozent um Prozent beim Marktanteil ab.

Nun haben Norwegens Adminstratoren die Schnauze gestrichen voll vom Internet Explorer 6. Die Betreiber von sämtlichen großen und pobulären Webseiten stellen die Unterstützung des Steinzeit-Renders umgehend ein.

Sollte ein Besucher mit IE6 auf einer dieser Seiten unterwegs sein, wird ihm ein Infofenster angezeigt, indem er aufgefordert wird, den Browser upzudaten oder einen der genannten Alternativ-Browser zu verwenden, um Zugriff auf den gesamten Inhalt der Homepage zu bekommen.

Bei der Suche noch dem besten und ultimativen Ansatz habe ich etliche interessante Projekte ausprobiert.

Vier Lösungsansätze möchte ich hier genauer vorstellen und auf den Einbau und deren Funktionsweise eingehen. Zusätzliche werde ich noch ein paar Alternativen nennen.

jQuery Round Corner

Avinoam Henig stellte auf seiner Homepage mit jQuery Round Corners ein insgesamt ziemlich ausgereiftes jQuery-Plugin zur Verfügung.

Um es nutzen zu können, benötigt man eine jQuery-Version ( die aktuelle Version 1.3(.1)  funktioniert auch! ) und Explorer-Canvas. Beide Skripte müssen zusammen mit dem roundCorner-Skript in den Dateikopf eingebunden werden.

Anschließend bettet man beispielsweise solchen Code wie $(‘#roundCorners’).roundCorners(“25px”); ein. RoundCorners erzeugt daraus um (beziehungsweise “hinter”) das Element eine Canvas-Grafik mit runden Ecken.

Der Rahmenradius lässt sich für jede Ecke individuell angeben, zum Beispiel .roundCorners(“25px”, 0, “25px”, 0); . Die erste Angabe steht für die linke obere Ecke, weiter folgen rechts oben, rechts unten und links unten.

Angaben zu Rahmenfarbe und – dicke werden entsprechend der CSS-Formatierung des betreffenden Elements angewendet.

Das Ergebnis kann sich insgesamt in allen gängigen Browsern sehen lassen.

Was ich an dieser Umsetzung merkwürdig finde, ist die Veränderung der Element- / Rahmengröße beim Überfahren mit der Maus.

LiquidCanvas

LiquidCanvas von Steffen Rusitschka ist von der Funktionsweise her dem oben genannten RoundCorners sehr ähnlich. Auch hier wird eine Canvas-Grafik verwendet, die das betreffende Element umfasst.

Ebenfalls benötigt LC jQuery und ExCanvas als eingebundene Header-Files. Zusätzlich müssen beide LC-Dateien (liquid-canvas.js und liquid-canvas-plugins.js) eingebunden sein.

Im Gegensatz zu anderen Implementieren lässt sich der Radius der runden Ecken hier nur für alle Ecken allgemein angeben. Dafür bietet LiquidCanvas die Möglichkeit, linieare Farbverläufe als Hintergrund-Füllfarbe zu nutzen.

Ein typischer Aufruf sieht so aus: $(“#liquidCanvas”).liquidCanvas( “[fill{color:#000000} border{color:#dd0000; width:5}] => roundedRect{radius:25}” );.

Die Farbe und Dicke der Rahmen wird hierbei in dem Aufruf selbst definiert. Das bedeutet aber wiederum, dass man etwaige vorherige Rahmenformatierungen aufheben muss. Dies geht zum Beispiel mit dem Code $(“#liquidCanvas”).css(“border-style”,”none”).

Bei LiquidCanvas fiel mir auf, dass das Skript die padding-Abstände nicht korrekt übernimmt. Hier muss im nachhinein noch Hand an die Elemente gelegt werden, um die Abstände zu korrigieren.

scale9grid

Einen gänzlich anderen Weg geht “Gordon” mit scale9grid. Dieses orientiert sich an der traditionellen Methode zum Erstellen individueller Rahmen mittels div-Verschachtelungen.

Um scale9grid zu nutzen, benötigt man zum einen jQuery, das Plugin scale9grid und eine (größere) Rahmengrafik, die das Aussehen des zukünftigen Elementrahmens beinhaltet.

Um das betreffende Element werden acht div’s angehangen – für jede Richtung eins – und mit einem Ausschnitt der Rahmengrafikdatei beklebt.

Besonders interessant finde ich die Möglichkeit mit jQuery die Hintergrundgrafik erst kurz vor dem scale9grid-Aufruf hinzu zufügen.

Dies sieht dann beispielsweise so aus: $(‘#scale9grid’).css(“background-image”,”url(schwarzrot.png)”).scale9Grid({top:30,bottom:30,left:30,right:30});

Die vier Parameter der Methode bestimmen die Schnittpunkte der Grafik. Der Reihe nach: Abstand von oben, von unten, von links und von rechts.

Was mich an dieser Lösung frustriert, sind die Abweichungen von Breite und padding-Angabe. Diese kann man in der Demo gut nachvollziehen.

dd_roundies

Drew Millers Projekt dd_roundies richtet sich speziell an den Internet Explorer (Version 6). Hierbei nutzt die IE-Vektoren-Auszeichnungssprache VML genutzt, um Vektorgrafiken für den IE zu erzeugen, die runde Ecken darstellen (Anmerkung: Explorer Canvas tut das selbe).

dd_roundies benötigt keine anderen (fremden) Skript-Dateien außer die eigene DD_roundies.js.

Mit der Anweisung DD_roundies.addRule(‘#dd_roundies’, ’25px’, true); kann beispielsweise ein 25 Pixel breiter Rahmenradius erzeugt werden. Auch hierbei können 4 verschiedene Werte (wie "10px 5px 3px 0" als zweiten Parameter) angegeben werden, um jeder Ecke einen indiviuellen Rahmenradius zuzuweisen.

Millers Skript kann jedoch nicht mit table-Elementen und textarea’s umgehen. Desweiteren gibt es aktuell noch etliche Probleme mit der Beta der 8. IE-Generation.

Für Browser, die von Haus aus Rahmenradius-Eigenschaften css-seitig ( -moz-border-radius, -webkit-border-radius oder das W3C-konforme border-radius ) unterstützen, gibt es den optionalen dritten Parameter, der diese nativen Eigenschaft nutzt.

Opera bleibt bei dieser Lösung jedoch außen vor. Zudem sehen die nativen runden Ecken im Firefox 2 sehr dürftig aus, so dass man hier andere Techniken wählen sollte.

Ansonsten erzeugt dd_roundies eine pixelgenaue Übereinstimmung zwischen Firefox 3, Webkit/Safari 3 und IE6 /7.

Auf meiner eingerichteten Demo-Seite kann jeder sich selbst ein Bild über die erzielten Ergebnisse der einzelnen Lösungen machen.

Alternative (jQuery-) Projekte, die sich auch mit runden Ecken beschäftigen:

• jQuery Curvy Corners
• jQuery BackgroundCanvas
• jQuery Corners
• CSS Multiple Backgrounds

Fazit

Die perfekte Lösung gibt es noch nicht.

Grundsätzliche bevorzuge ich, soweit es möglich ist, die nativen CSS-Eigenschaften runde Rahmen um Elemente zu erzeugen.

Für IE und Opera bietet es sich, die Projekte, die mit Canvas arbeiten, genauer anzuschauen und eines davon zu nutzen.

Wir berichteten bereits, dass Webkit und Opera den neusten Testparcour bestanden. Zum vollständigen Bestehen fehlte jedoch noch die sanfte Animation während des Durchlaufs.

Dank der umfangreichen und bedeutenden Weiterentwicklungen der vergangenen Monate – Stichwort Squirrelfish – in allen Bereichen wurde damit auch die dritte und letzte Bedingung erfüllt.

Nebenbei habe ich gleich mal Googles Schützling Chrome durch den Acid3-Test gescheucht.

Chrome besteht den Test nicht und kommt nur auf 78 von 100 möglichen Punkten.

Pi wurde zum einen entwickelt um eine nützliche Entwicklungsumgebung zu bieten, zum anderen um speziell die Unterschiede der verschiedenen Browser zu minimieren.

Die umfangreiche pi.element-Klasse ermöglicht es, komplexe Benutzerschnittstellen leicht und systematisch zu erstellen.

Die extend-Methode erlaubt das objektorientiertes Erzeugen und Erweitern von Klassen. Dazu steht ein Tutorial zur Verfügung.

Ajax-Anwendungen werden mittels pi.xhr-Klasse entwicklerfreundlich entwerfen.

Mit pi.get() lässt sich einfacher auf Elemente zugreifen. Zudem stellt pi.util.Element eine Menge Methoden zum intuitiven Manipulieren der DOM-Syntax zur Verfügung.

Mittels pi.env kann der Browser des Webpage-Besuchers abgefragt werden.

Als Beispielanwendungen, die auf Pi setzen, wären der Javascript-Debugger Firebug Lite und ein Realtime-Chat zu nennen. Wobei letzterer noch den Pi-Plugin Comet nutzt.

Seine Javascript basierte Lösung unterstützt img-Tags sowohl mit als auch ohne blank-Grafik. Hintergrund-PNGs können genau so positioniert werden wie sich wiederholende, selbst wenn diese kleiner als der Inhalt des Elementes sind. Zudem wurde eine echte Wiederholungsfunktion implementiert anstatt dem bloßen Strecken des Bildes.

Das mtjs_iepnghandler.js-Script durchwandert die DOM-Baumstruktur und fügt einige Zusätze für das richtige Verhalten für IE5 und IE6 – und auch nur für diese Browser! – ein.

Tischlers Lösung ist sogar so klug, dass die Ausmaße des Bildes beachtet werden, um das Wiederholungsverhalten entsprechend anzupassen.

Der Einbau des (einfacheren Solo-) Skriptes geschieht wie folgt:

Zuerst bindet man das Skript in den Kopf seiner Webseite ein (Pfad beachten!):

<script src="mtjs_iepnghandler_solo.js" type="text/javascript"></script>

Anschließend wird die Funktion mtjs_iepnghandler_solo.go() nach dem Laden der Seite aufgerufen. Dies kann im body-Tag mittel onload oder in einer externen Javascript-Funktion geschehen.

<body onload="mtjs_iepnghandler_solo.go();">