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

Fernando Carlsson

Autor: Fernando Carlsson

Willkommen auf meinem Blog. Mein Name ist Fernando Carlsson. Ich bin leidenschaftlicher Programmierer und Webdesigner und der Inhaber von Funktioncloud e.K. Als Dienstleistungen biete ich Webdesign & App-Entwicklung an. Auf meinem Blog berichte ich über alles Mögliche was die Programmierung von Websites und Apps angeht. Von den aktuellsten Änderungen und Standards bis über spezielle Workarounds von kniffligen Problemen ist so ziemlich alles dabei. Schauen Sie doch einfach mal rein, vielleicht wecke ich ja auch Ihr Interesse.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.