CSS3 – Tipps und Tricks (Teil 1)

Was ist CSS?

Heutzutage werden Websites schon lange nicht mehr in reinem HTML programmiert, sondern immer zusätzlich mit der Sytlesheet-Sprache CSS (Cascading Style Sheets) kombiniert.

Grob erklärt kann man sagen, dass HTML für die Erstellung des Codes und ihrer darin enthalten Objekte der Website zuständig ist. CSS wiederum definiert eben genau diese Objekte. Wie groß, wie breit, welche Farbe und welchen Abstand soll das Objekt zu den anderen Objekten haben? Alle diese Eigenschaften sollten bei einer guten Website in einer, oder auch mehreren, ausgelagerten CSS Datei(en) zu finden sein.

CSS wurde erstmals im Dezember 1996 als Standard vom W3C-Gremium gegründet. Mittlerweile hat sich CSS stark weiterentwickelt und liegt nun in der Version 3 vor. Daher spricht man heutzutage von CSS3. Aber fangen wir nun an mit den..

Tipps und Tricks (Teil 1)

1. Nie zu viele CSS – Dateien verwenden

Ein häufig gemachter Fehler ist das verwenden von vielen kleinen CSS Dateien. Für eine Website sollten nicht mehr als 3 CSS-Dateien verwendet werden. Sollte die Anzahl der CSS Dateien durch ein CMS in die Höhe gehen, so kann man z.B. versuchen diese durch geeignete Plugins zu reduzieren. Für WordPress wäre z.B. Better WordPress Minify eine gute Wahl.

2. Umsetzung von Responsive Design

Heutzutage werden Websites nicht nur auf dem PC oder Laptop betrachtet. Immer mehr kommen auch Tablets oder Smartphones zum Einsatz – Tendenz steigend. Hier gibt es ein Problem. Eine Website so wie Sie auf dem 21 Zoll – Bildschirm eines PC’s dargestellt wird ist nicht dazu geeignet genauso auch auf einem Smartphone wiedergegeben zu werden. Links wären kaum anklickbar, bzw. nur durchs Zoomen anvisierbar. Die gewählten Schriften wären zu klein – kurz und knapp: die Usability leidet.

Responsive Design umgeht das Problem, indem das Design so angepasst wird, dass der Inhalt und die Navigation auf jedem Endgerät optimal dargestellt wird.

Ein gutes Beispiel für die Umsetzung von Responsive Design per CSS ist die Verwendung von Media Queries. Diese ermöglichen für verschiedene Bildschirmauflösungen verschiedene Gestaltungen der Objekte.

Hier ein kleines Beispiel:

/* Desktoplösungen */
@media (min-width:1281px) and (max-width:1600px) {
 #HeaderContent
 {
  margin:0 auto;
  height: 300px;
  width: 1160px;
  text-align:center;
 }
}

/* Grosse Tablets und Laptops / Desktoplösungen */
@media (min-width:1025px) and (max-width:1280px) {
 #HeaderContent
 {
  margin:0 auto;
  height: 300px;
  width: 960px;
  text-align:center;
 }
}

/* Tablets im Landscape Modus, kleinere laptops und Desktoplösungen mit geringer Auflösung */
@media (min-width:961px) and (max-width:1024px) {
 #HeaderContent
 {
  width: 100%;
  height: 300px;
  background-size: 100% 100%;
 }
}

Je nach Auflösung wird das CSS Objekt mit der ID HeaderContent in einer anderen Breite (width) dargestellt. In diesem kurzem Codeschnipsel wurde die Auflösungsbreite von 961px – 1600px abgefangen und je nach Breite des verwendeten Endgeräts dem HeaderContent passend dazu eine andere Breite übergeben.

3. Richtige Nutzung von Kommentaren

In einer CSS Datei können auch Kommentare verwendet werden um die Lesbarkeit des Codes zu verbessern.

Kommentare gehören prinzipiell immer dazu. Der alte Spruch – naja ich hab ja jetzt gerade mal 30 Zeilen, da weiß ich ja immer wo ich grad bin – zählt spätestens nach ein paar Wochen nicht mehr. Denn irgendwann ist der Code länger und man hat es vergessen. Und dann hat man spätestens bei der nächsten Wartung oder Erweiterung das Problem, dass man höchstwahrscheinlich nicht mehr weiß warum man an der einen Ecke eben genau diesen einen Wert zusätzlich gesetzt hat, um den Content richtig darzustellen.

Ein mühsames und zeitaufwendiges neu reinfuchsen ist die Folge. Das kann verhindert werden, in dem man sich gleich zu Beginn an die Nutzung von Kommentaren gewöhnt.

Kommentare sollten immer aussagekräftig und auf den Punkt gebracht formuliert werden. Außerdem sollte auf die richtige Dosis bei der Vergabe von Kommentaren geachtet werden. Eine zu sparsame Nutzung von Kommentaren sollte vermieden werden. Jedoch sollte man auch nicht jede einzelne Zeile detailliert kommentieren.

Übrigens für alle die aus der C++ Welt kommen:

Kommentare in CSS beginnen mit /* und werden mit */ abgeschlossen. Kommentare sind mehrzeilig möglich.

Die C++ Variante für einzeilige Kommentare mit // ist nicht im CSS Standard vorgesehen und sollte unbedingt vermieden werden!

Dadurch können hässliche Fehler beim späteren Auslesen und Anzeigen der Browser entstehen. Es kann z.B. dann passieren, das die CSS Befehle für einen gewissen Bereich dann nicht erkannt werden und dementsprechend auch nicht greifen.

4. Browser zum Testen von CSS Code nutzen

Die neuesten Desktop – Browser Versionen besitzen mittlerweile alle eine Option welche sich Untersuchen oder Element untersuchen nennt. Eine der nützlichsten Features dieser Funktion ist die manuelle Anpassung des CSS Codes – und deren sofortigen Darstellung ohne neues Laden der Website.

Dieses Feature eignet sich hervorragend zur Fehlersuche und Testen von kleineren Layoutveränderungen. Darüber hinaus besitzen fast alle Browser ein weiteres Feature, welches die Möglichkeit bietet eine Website mit veränderbaren Auflösungen zu testen. Die Darstellung der eigenen Website auf verschiedenen Endgeräten kann so simuliert werden.

 

5. Nutze caniuse.com bei Unsicherheiten

Eine exotische CSS Funktion zu nutzen, ohne Prüfung ob diese von allen Browsern unterstützt wird ist meist eine schlechte Idee. Sie wollen Ihren Besuchern sicher genauso wenig wie Ich ein versehentlich zerschossenes Design zumuten, nur weil die Prüfung auf die kompatible Nutzung einer bestimmten CSS Funktion versäumt wurde – oder?

Daher sollte bei Unsicherheiten immer geprüft werden ob die kompatible Nutzung einer bestimmten Funktion auch wirklich gewährleistet ist.

Für solche Fälle, wo die CSS Funktionalität und deren Unterstützung von den gängigsten Browsern unklar ist bietet sich die Seite caniuse.com als hervorragendes Nachschlagewerk an.

Die Seite gibt einen sehr übersichtlichen Überblick über die einzelnen Funktionen, deren Besonderheiten und der kompatiblen Nutzung mit den herkömmlichen Browsern wieder. Es ist auf einen Blick erkennbar, wie risikobehaftet die Nutzung diverser Funktionalitäten tatsächlich ist.

Zu guter letzt..

..hoffe ich, dass ich einen Hilfestellung geben und vielleicht auch den ein oder anderen Aha-Effekt erzeugen konnte. Meiner Meinung nach ist gerade der Bereich Responsive Design ein sehr wichtiges Thema welches bei der CSS Gestaltung nie aus den Augen verloren werden sollte. Gott sei Dank haben wir heute durch die modernen Browser mittlerweile die Möglichkeit die Darstellung von Websites mit verschiedenen Auflösungen zu testen. Dies erleichtert deutlich die Websiteoptimierung in Richtung Responsive Design.

-Fernando Carlsson

Die W3C-Standards und die Browserkompatibilität

Browserkompatibilität in der Vergangenheit

Die Entstehung der W3C-Standards

Gott sei Dank befinden wir uns heute nicht mehr dort, wo das Webdesign sich noch vor einigen Jahren befunden hatte. Aber was war da eigentlich anders?

Nun – dazu holen wir am besten mal etwas weiter aus und gehen zurück ins Jahr 1994. Am 1. Oktober  1994 wurde das W3C Gremium zur Standardisierung von technischen Abläufen im World Wide Web gegründet. Die Gründung dieser Organisation war notwendig geworden, da zu dieser Zeit immer mehr Browser entstanden, welche begannen die notwendigen Techniken des Internets URI / HTTP und HTML auf Ihre eigene Art und Weise zu interpretieren. Es bestand die Gefahr, dass das Internet sich in mehrere eigenständige Netzwerke auftrennt, welche nicht mehr über den globalen Charakter des Internets verfügen würden.

Das daraus zwangsläufig sowohl freie als auch kommerzielle Bereiche entstehen könnten wollte man um jeden Preis verhindern. Ein Standard musste her – Eine Richtlinie, nach der die damals sehr neuen Techniken genutzt und interpretiert werden sollen.

Ein Jahr später – Es wurde eine neuere Version von HTML entwickelt. HTML 2.0 erwachte im November 1995 zum Leben. Zu dieser Zeit teilten sich der Netscape Navigator von Netscape Communications und der heutzutage sehr unbekannte Browser Mosaic – der Vorgänger vom Netscape Navigator, welcher bis 1997 entwickelt wurde – die Vorherrschaft über die Darstellung von Internetinhalten. Doch dies änderte sich im Laufe der folgenden Jahre gravierend! Der Internet Explorer trat im August 1995 erstmals mit auf dem Plan und wurde bereits drei Monate später über Microsofts Windows 95 kostenlos vertrieben. Es begann der Browserkrieg zwischen Netscape Communications und Microsoft!

Der erste Browserkrieg – Netscape VS Microsoft

Netscape Navigator VS Internet Explorer
Netscape Navigator VS Internet Explorer – Kampf ums Monopol

 

Zu diesem Zeitpunkt muss man sich bewusst machen, dass der Netscape Navigator über 80% des Marktanteils hielt und weiterhin anstieg. Microsofts Internet Explorer hingegen war neu und bezogen auf die Marktanteile völlig bedeutungslos. Da damals die Gefahr bestand, dass sich Netscape Communications zu einem ernsten Konkurrenten im Softwarebereich entwickeln hätte können, beschloss Microsoft die Marktanteile von Netscape so gering wie möglich zu halten.

Microsoft investierte pro Jahr mehr als 100 Millionen US-Dollar in die Entwicklung und Vermarktung des Internet Explorers. Das Internet-Explorer-Team welches am Anfang aus 5 Personen bestand wuchs über die Jahre auf bis zu 1000 Mitarbeiter! Dazu kommt noch, dass – wie oben bereits erwähnt – der Internet Explorer ziemlich schnell kostenlos über das Betriebssystem Windows 95 vertrieben wurde.

An diesem Punkt begann letztendlich der Anfang vom Ende – der den Webdesignern der Vergangenheit das Erstellen von gleichaussehenden und gleichfunktionierenden Websites für alle gängigen Browser zur Hölle machte.

Das lag daran, dass sich beide Unternehmen einen erbitterten Kampf um das Monopol lieferten. Um Ihre Positionen am Markt behaupten zu können wurden von beiden Seiten immer wieder neue Features zur Erweiterung des HTML – Standards erfunden, welche sich allerdings immer mehr nur noch auf den eigenen Browser bezogen. Zwar wurden die offiziellen Standards vom W3C zu Beginn noch von beiden Seiten gelebt, doch spielten diese im Laufe der Zeit immer mehr eine untergeordnete Rolle.

Die Verwahrlosung der W3C-Standards

Der Höhepunkt der Chaos begann, als der W3C die neue Technologie CSS, eine Auszeichnungssprache für HTML, einführte. Beide Unternehmen entschieden sich bewusste für die Abwendung von den empfohlenen Standards für CSS. Sowohl Netscape wie auch Microsoft begannen CSS auf Ihre eigene Art, inkompatibel zum jeweils anderen zu interpretieren.

Aufstieg und Fall des Browser-Monopol

Nach einem langen – und durch Microsofts sehr aggressiver Marktstrategie – brutalen Krieg stand die Entscheidung über den Sieger im Jahre 2003 fest! Microsoft hatte gewonnen – Netscape wurde vernichtend geschlagen. Der Marktanteil vom Netscape Navigator sackte in den 8-jährig andauernden Browserkrieg von 80% auf 4% ab. Der Internet Explorer hingegen wuchs in dieser  mit ca. 95% Marktanteil immer mehr zu einem
Browser-Monopol. Netscape Navigator erreichte nie wieder seine alte Stärke zurück und starb im Februar 2008 endgültig den Browsertod.

Da Microsoft ab diesem Zeitpunkt im Prinzip Monopolstellung genoss und die Konkurrenz ausblieb, ruhte sich Microsoft die nächsten Jahre auf seinem Produkt aus. Das damalige Entwicklungsteam wurde fast komplett aufgelöst. Die wenigen Mitarbeiter, welche noch für die Betreuung des Internet Explorers zuständig waren sollten sich um die Behebung von Sicherheitslücken kümmern. Die damalige Internet Explorer Version 6.0 weichte stark vom W3C-Standard ab und machte den Standard durch seine nur sehr schleppende Weiterentwicklung lange Zeit bedeutungslos.

Aufgrund des hohen Marktanteils wurden immer mehr Websites primär für den Internet Explorer hin optimiert. Andere Browser, welche sich an den W3C-Standard richteten, wurden bei der korrekten Darstellung der Webinhalte kaum noch berücksichtigt und hatten demzufolge oft das Nachsehen. Dies führte im Extremfall sogar dazu, dass Nutzer von anderen Browsern manche Seiten nur stark fehlerbehaftet und verzerrt darstellen konnten. Dies machte die Bedienung von diesen betroffenen Seiten so gut wie unmöglich. Auch Bereiche wie Online-Banking oder Online-Shopping waren davon betroffen.

Machtverlust durch neue Konkurrenz

Die schnelle Verbreitung des Internet Explorers 6.0 – bei eher langsamer Aktualisierung  rächte sich aber schnell. Immer mehr Computerviren und -würmer nutzen Sicherheitslücken im Internet Explorer aus und verbreiteten sich durch den hohen Marktanteil sehr schnell.

Langsam begann bei den Nutzern ein Umdenken. Die vielen gravierenden Sicherheitslücken schreckten viele ab und verleiteten diese zu der Nutzung von alternativen Webbrowsern, welche weniger anfällig waren. Der 2002 neu entwickelte Browser Firefox, welcher aus der Mozilla Foundation hervorging, gewann immer mehr Zuspruch – da dieser ebenfalls kostenlos erhältlich war, sich an den W3C-Standard hielt und zusätzlich über viele neue Features verfügte. Kurze Zeit später trat 2003 auch der Safari von der Firma Apple in die Browserwelt und wurde aus den gleichen Gründen insbesondere bei Mac-Nutzern sehr beliebt.

Firefox frisst IE CC-BY LordLocus
Firefox frisst den IE – Immer mehr Marktanteile gehen an Firefox CC-BYLordLocus

Insbesondere der Firefox machte es dem Internet Explorer schwer seine Marktposition halten zu können. 2004 knickte der Marktanteil des Internet Explorers schließlich erstmals spürbar ein und verlor einen Prozentpunkt an Firefox. Nach weiteren 5 Jahren sind es bereits 23% gewesen. Weitere 8% gingen zu dieser Zeit an den Safari. Weniger bedeutende Marktanteile holte u.a. der Opera, welcher im Jahr 2005 auch recht spät kostenlos angeboten wurde – und demzufolge kaum Marktanteile bis zum heutigen Tage halten konnte. Der zweite Browserkrieg führte im Laufe der Jahre dazu, dass immer mehr Anteile des Internet Explorers verlorengingen. Daran konnte dann auch das 2004 erneut zusammengetrommelte Entwicklungsteam zur Weiterentwicklung des Internet Explorers nichts mehr ändern.

Die Verbreitung von alternativen Browsern führte – zum Glück! – langsam dazu dass die W3C-Standards wieder gelebt wurden. Die bis 2005/2006 stark an den Internet Explorer angelehnte Programmierung der Websites galt nun als veraltet und verpönt – da viele Nutzer die umgestiegen sind diese veralteten Seiten nicht mehr nutzen konnten.

Browserkompatibilität heutzutage

Verteilung der heutigen Marktanteile

Machen wir nun wieder einen erneuten Zeitsprung in die Gegenwart. Heutzutage teilen sich die Browserriesen Chrome (ca. 30%), Firefox (ca. 23%) und Safari (ca. 17%) den Löwenanteil der Nutzer. Microsoft selbst hält mit dem Internet Explorer und Edge nur noch ca. 10% der Anteile. Der Rest geht zum größten Teil an die alternativen mobilen Webbrowser wie z.B. der Samsung Browser oder auch der Android Browser.

Top3 Browser Chrome Firefox Safari
Die Top 3 der Browser – An allen vorbeigezogen: Chrome von Google

HTML 5.1 – der neue Standard

Wie man sieht hat sich viel im Laufe der letzten Jahre getan. Und auch heute tut sich noch sehr viel – Die W3C-Standards entwickeln sich laufend weiter. Mittlerweile ist der HTML-Standard in der Version 5.1  verfügbar und mit dem Erscheinungsdatum des 1.11.2016 noch recht neu.

Heutzutage ist es eine der Kernaufgaben der Browserhersteller geworden ihre Browser „up to date“ zu halten. Es ist nicht mehr wie früher – den einen haushohen Marktführer gibt es nicht mehr. Keiner der Hersteller kann sich heutzutage große Fehler bei der Implementierung der HTML-Standards erlauben und ist demnach immer sehr bemüht mit der Unterstützung der aktuellsten Standards schnellstmöglich gleichzuziehen.

Wenn es heutzutage um Browserkompatibilität geht sind daher folgende Punkte zu nennen, die das Thema umfassend beschreiben:

  1. Die gängigsten Standards beherrschen alle aktuellen Browser.
  2. Die neue Technologie WebGL und all Ihre Features wird z.Zt. noch nicht von allen Browsern unterstützt.
  3. Responsive Design – die korrekte und sinnvolle Darstellung von Webinhalten auch auf mobilen Endgeräten sollte beachtet werden.
  4. Vor Nutzung neuester Features sollte geprüft werden, ob alle Browser diese auch unterstützen.

Wie man sieht ist auch heute Browserkompatibilität immer noch ein Thema! Die Unterschiede sind nur nicht mehr so gravierend wie früher, da die gängigsten Standards heutzutage – Gott sei Dank! – gelebt werden. Sobald es aber um neueste Features geht muss aufgepasst werden – denn alles braucht seine Zeit. Gerade die Umsetzung und Einbindung von neuen Inhalten in den aktuellen Browserversionen geschieht nicht von heut auf morgen. Daher ist auch heute noch nicht alles perfekt und wird es durch die immer weiter fortschreitende Entwicklung auch nie sein.

Daher ist es die Aufgabe eines guten Webdesigners in diesen Bereichen ein Fingerspitzengefühl bei der Auswahl der richtigen Funktionalitäten – je nach Anforderungen – zu haben. Bei Functioncloud können Sie sich darauf verlassen, dass dies gewährleistet wird. Neue Funktionalitäten können z.B. unter Websites wie http://www.caniuse.com bezüglich der Kompatibilität mit allen gängigen Browsern abgeglichen werden. Auch gehört es heute zum Dogma eines guten Webdesigners sich an das Responsive Design zu halten. Eine aktuelle Website sollte in der Lage sein ihre Webinhalte sowohl auf mobilen Endgeräten wie auch auf Desktoplösungen optimal darstellen zu können.

Die Zukunft des Internets – Neue Standards

Schön und gut.. wir wissen nun woher wir kommen und wo wir und jetzt befinden. Aber wohin wird die Reise in Zukunft gehen? Führende Experten sehen die Zukunft des HTML Standards in einer noch stabileren / umfangreicheren Implementierung von 3D-Inhalten. Womöglich verschmelzt die Art und Weise der interaktiven Bedienung irgendwann mit einer virtuellen 3D Umgebung die man – ähnlich wie in einem Spiel betreten und erforschen kann. Auch wenn dieses Szenario in Zukunft wohl eher die Ausnahme als die Regel sein wird – seinen Weg ins Internet wird es mit Sicherheit finden. Und wer weiß schon was wir in 10 Jahren unter interaktiven Websites verstehen. Ich denke wir dürfen gespannt sein.

Zu guter letzt..

..hoffe ich, dass ich einen guten Einblick in das Thema die Entstehung der
W3C-Standards geben konnte. Meiner Meinung nach war es eine der notwendigsten und wichtigsten Entscheidungen, welche zugunsten des Internets getroffen wurde. Womöglich hätten wir ohne dieses Gremium heute noch gravierende Probleme bei der kompatiblen Darstellung von Webinhalten auf verschiedenen Browsern.

Das Thema Browserkompatibilität wäre dann womöglich noch um einiges komplexer.. Komplexer als es zum ersten Browserkrieg ohnehin schon war..

-Fernando Carlsson