CSS 3 – Homepage Anleitung

Chrome 18 ist meistbenutzte Browser-Version

Wer Internetseiten erstellt, sollte eigentlich immer wissen, wie viele Surfer welchen Browser benutzen, um die Seiten entsprechend zu prüfen und zu optimieren. Nicht jeder Browser stellt eine Internetseite genauso dar wie ein anderer, und auch die Unterstützung neuer Funktionalitäten wie HTML 5 und CSS 3 ist noch sehr unterschiedlich. Der Website-Monitoring-Dienst Pingdom hat gerade neue Zahlen auf der Basis von StatCounter-Daten ermittelt, wonach aktuell die meisten Surfen den Google-Browser Chrome 18 benutzen, um im Internet zu surfen. Er hat jetzt einen Marktanteil von 25,6 %, gefolgt von Firefox 11 (15,8 %), Internet Explorer 9 (15,7 %) und Internet Explorer 8 (14,6 %). Ohne Berücksichtigung der Browser-Versionen ist Microsoft' s Internet Explorer mit 34 % immer noch der führende Browser.

GSL-Team2012-04-25T11:41:29+02:00April 25th, 2012|Allgemein|Kommentare deaktiviert

Firefox 4 vor Internet Explorer 9

Der seit vorgestern erhältliche neue Firefox 4-Browser scheint den Surfern besser zu gefallen als Microsofts neuer Internet Explorer 9. Während der Microsoft-Browser in den ersten 24 Stunden nach Freigabe 2,3 Millionen Mal heruntergeladen wurde, holten sich den Firefox 4 in diesem Zeitraum mehr als doppelt so viele Interessenten. Mozillas Firefox 4 ist besonders in Europa gefragt, und in Europa wurde er aus Deutschland am häufigsten abgerufen. Bleibt zu hoffen, dass bei der Erstellung von Webseiten durch die Browser der neuen Generationen weitgehend auf Browserweichen und Ähnliches verzichtet werden kann, denn alle bemühen sich, Standards wie CSS 3 oder HTML 5 korrekt zu unterstützen.

GSL-Team2011-03-24T08:55:49+02:00März 24th, 2011|Allgemein|Kommentare deaktiviert

Was gibt es nicht mehr mit HTML 5?

HTML 5 hält zusammen mit CSS 3 viele Neuerungen für uns bereit. Allerdings musste auch einiges Altes dafür weichen. Das Beginnt mit dem Ende von <applet> und einigen Textauszeichnungen, nämlich <big>, <strike>,<tt>, <u> und <s>. Das Tag <acronym> ließ sich kaum von <abbr> (Abkürzung) unterscheiden. Auch <dir> und <isindex> stammen aus einer anderen Zeit und sind jetzt nicht mehr dabei. Die Tags <center>, <font> und <basefont> gibt es nicht mehr. Auch die Attribute wurden ausgedünnt. Das Attribut name gibt es jetzt nur noch bei Formular-Elementen, und die Attribute width, height, align und border wurden wie auch andere stark eingeschränkt. Und endlich sind auch die leidigen Frames Geschichte. Bei aktuellen Seiten kommen sie sowieso kaum noch vor. Und wenn man unbedingt Frames braucht, kann man sie mit dem <iframe>-Tag nachbauen, denn das soll es weiterhin geben.

GSL-Team2010-08-27T07:57:20+02:00August 27th, 2010|Allgemein|Kommentare deaktiviert

Farbverlauf mit CSS 3

Zu den neuen Möglichkeiten, die CSS 3 bietet, gehören auch Farbverläufe. Man setzt sie ja gerne als Hintergrund ein, um mehr Tiefe zu gewinnen oder besonders seit dem Web 2.0-Hype auch als feines Design bei Schaltflächen und Formularelementen. Bisher wurden Farbverläufe meist mit einer entsprechenden Grafik realisiert, die den Elementen als Hintergrund zugewiesen wurde. Das ist nun mit CSS 3 wesentlich leichter zu machen – und man braucht kein Grafikprogramm mehr, um den Verlauf zu erzeugen und als Bild zu speichern. Der gewünschte Verlauf wird mit CSS 3 einfach definiert. Um einen linearen Farbverlauf von oben nach unten und zum Beispiel von rot nach weiß zu erzeugen, brauchen Sie folgende Definitionen in Ihrem Stylesheet: background: #f00; background: -moz-linear-gradient(top, #f00, #fff); background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff)); Im Beispiel ist die erste Zeile ein einfaches Fallback auf rot, das jeder Browser beherrscht. Die zweite Zeile definiert den Verlauf für den aktuellen Firefox und die dritte für Safari und Chrome. Dem Internet Explorer muss man dabei noch mit einem Gradienten-Filter unter die Arme greifen, damit auch er den Verlauf ohne Grafikbildchen erzeugen kann: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffff0000, endColorstr= #ffffffff)"; filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffff0000, endColorstr= #ffffffff)";

GSL-Team2012-10-08T18:12:37+02:00August 16th, 2010|Allgemein, HTML|9 Kommentare

CSS 3: Transparenz ohne Tricks

Zu den besonders beliebten und deshalb schon heute sehr viel benutzten CSS 3-Eigenschaften gehört die Transparenz (opacity). Sie legt den Grad der Transparenz eines Elements fest. Der Wertebereich geht von 0 bis 1, und je niedriger der Wert ist, umso durchsichtiger wird das Element. Die Zuweisung geschieht einfach mit: < div class="halbdurchsichtig"></div>. Der CSS-Code dazu lautet: .halbdurchsichtig { opacity: 0.5; } Und schon klappt es in allen modernen Browsern – bis auf den Internet-Explorer von Microsoft. In der neuen Version 9 funktioniert das auch mit dem Microsoft-Browser, aber für die älteren Versionen brauchen Sie spezielle Microsoft-Filter, eins für den Internetexplorer 8 und ein weiteres für Versionen unter 8. Erweitern Sie den Style für die Klasse "halbdurchsichtig" wie folgt .halbdurchsichtig { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: progid:DXImageTransform. Microsoft.Alpha(Opacity=50); zoom: 1; opacity: 0.5; } und die Microsoft-Browser zeigen das DIV-Element jetzt auch halbdurchlässig an.

GSL-Team2010-07-25T00:02:13+02:00Juli 29th, 2010|Allgemein|1 Kommentar

CSS 3: Google bietet 18 kostenlose Web-Fonts an

CSS 3 buhlt mit seinen neuen Eigenschaften um die Gunst der Web-Entwickler. Da gibt es nicht nur Boxen mit runden Ecken sondern auch Schatten und Transparenzen. Auch herunterladbare Schriften, Webfonts genannt, gehören zu den neuen Features, die uns CSS 3 bringt. Diese Schriften liegen auf dem Server, so dass sie auch bei Besuchern angezeigt werden, auf deren Computer sie nicht installiert sind. Damit wird man endlich unabhängig von den wenigen Schriften wie Arial und Verdana, die die Browser von Haus aus mitbringen, ohne auf grafiklastige Lösungen mit ihren bekannten Nachteilen ausweichen zu müssen. Noch gibt es verschiedene Schriftformate für unterschiedliche Browser und zusätzlich diverse rechtliche Einschränkungen, die den Einsatz von Standardschriften als Webfonts erschweren. Da kommt das Angebot von Google gerade recht. Der Internet-Gigant bietet 18 verschiedene Schriften zum Einsatz als Webfonts auf seiner Website (google.com/webfonts) an. Einbinden können Sie diese Schriften recht einfach. Man wählt eine der Schriften und klickt sie an. Jetzt wird angezeigt, wie die gewählte Schrift in unterschiedlichen Größen aussieht. Die Option "Character Set" zeigt, welche Zeichen in dieser Schrift zur Verfügung stehen, so dass man vorher nachsehen kann, ob auch Umlaute und andere benötigte Sonderzeichen unterstützt werden. Die Option "Get the code" zeigt die Codezeilen zum Einbinden der Web-Schrift. [...]

GSL-Team2010-07-24T20:49:36+02:00Juli 26th, 2010|Allgemein|Kommentare deaktiviert

HTML 5 zum Zweiten

In allen moderneren Webbrowsern außer dem Internet Explorer 8 laufen HTML 5 – Seiten mit CSS 3 problemlos. Da aber viele Surfer noch steinzeitliche Browser benutzen, gibt es Möglichkeiten, diese zur Zusammenarbeit mit der Kombination HTML 5 / CSS 3 zu bringen. Da der Internet Explorer 8 CSS-Deklarationen für HTML-Elemente, die er nicht kennt, einfach ignoriert, hilft ein Workaround, der die Elemente zur Laufzeit mittels Javascript erzeugt: <script> document.create.element('header‘); document.create.element('nav‘); document.create.element('section‘); document.create.element('article‘); document.create.element('aside‘); document.create.element('footer‘); </script> Zum Testen der per Javascript erzeugten DOM-Elemente können Sie eine einfache HTML 5-Seite benutzen: <!doctype html> <html> <head> <title> HTML 5 wird getestet…</title> <style type=“text/css“>css3.css</style> </head> <body> <header>Der Test beginnt mit einer Überschrift</header> <nav> <ul> <li>Home</li> <li>Impressum</li> <li>Kontakt</li> </nav> <section> <h1> Erster Bereich</h1> <article> Dies ist der erste Artikel…</article> </section> <footer> <p>Hier steht der Inhalt der Fußzeile</p> </footer> </body> </html> Ein weiteres Hilfsmittel, mit dem man die alten Microsoft-Browser Internet Explorer 6, 7 und 8 auf HTML 5-Kompatibilität bringen kann, ist das Plugin Google Chrome Frame. Das Plugin ist kostenlos, aber es ist aus der Erfahrung nicht einfach, seine Besucher davon zu überzeugen, dies Plugin zu installieren. Mit diesem Plugin brauchen Sie die oben beschriebene Erzeugung der fehlenden DOM-Elemente per Javascript nicht mehr durchführen.

GSL-Team2010-07-12T08:18:16+02:00Juli 12th, 2010|Allgemein|1 Kommentar

HTML 5 zum Ersten

Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln. HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen. Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen! Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> [...]

GSL-Team2010-07-08T14:04:17+02:00Juli 8th, 2010|Allgemein|Kommentare deaktiviert