Information 04
Kleines Fazit
Wir haben uns einige Gedanken gemacht
Diese
Responsive-Vorlage arbeitet mit der Mobile-First-Technik. Wir verwenden
hier überhaupt kein Javascript. Weder für die Navigation noch für das
Ansprechen der CSS3-Media Queries bei älteren Browsern. Außerdem
arbeiten wir mit einigen der der modernen CSS3-Eigenschaften, wie z.B.
das neue Box-Model (box-sizing) oder die neue Maßeinheit für
Prozentschrift namens REM.
Denn ältere Browser verstehen kein CSS3
Wir nennen nachstehend
die Versionen des Browsers Internet Explorer. Moderne, andere Browser
verstehen die CSS3-Technik wesentlich früher.
- Media Queries (Bildschirmabfragen): Ab IE Version 9
- Rem-Prozentschrift-Einheit: Ab IE Version 9
- Box-Sizing: Border-Box: Ab IE Version 8
- Display-Table: Ab IE Version 8
Unsere Lösung für ältere Browser
Per Browserweiche werden die
älteren IE-Browser mittels IE CONDITIONAL COMMENTS angesprochen, welche
die vorstehend genannten CSS3-Befehle nicht beherrschen. Dies ist ein
klarer Vorteil gegenüber den oft angebotenen Javasscript-Lösungen,
welche im Netz und in der Literatur oft als Javascript-Lösungen namens
"respond.js" und/oder "modernizr.js" genannt werden.
Nochmals:
Javascript funktioniert nicht, wenn es vom Anwender im Browser deaktiviert wird. Dies geschieht oftmals aus Sicherheitsgründen.
Was sind Conditional Comments ?
Conditional Comments sind
Kommentare in HTML-Dokumenten, die nur vom Browser Internet Explorer
interpretiert werden. Man kann sogar gezielt einzelne Versionen des
Internet Explorer (IE) ansprechen, z.B. nur Version 8.
So funktionieren Conditional Comments
Im Kopfbereich der
Webseite wird im Quelltext eine CSS-Datei aufgerufen, die eben einen
speziellen Code für ältere IE-Versionen enthält.
So sieht es aus:
<!--[if lt IE 9]>
<link href="ie_no_media_queries.css" rel="stylesheet" type="text/css"/>
<![endif]-->
In diesem Fall wird eine CSS-Datei aufgerufen, die Quellcode für
alle IE-Browser unterhalb (lt=lower than, zu deutsch: kleiner als) der
Version 9 enthält.
Warum soll man ältere Browser ansprechen ?
Insbesondere Firmen
arbeiten vielfach mit Browsern älterer Generation. Gerade dort hält man
es nicht für möglich, aber es ist so. Und die Browser werden dort in
der Regel jahrzehntelang nicht gewechselt. Das hat folgenden Grund:
Eine Firma muß sehr teuere Lizenzen für das Microsoft Betriebs-System
Windows bezahlen. Mit jeder Windows-Betriebsversion wird jeweils eine
bestimmte Browser-Version des Internet-Explorers geliefert. Für
Windows-XP ist das z.B. der Internet-Explorer Version 8. Aus
Kostengründen behält man somit viele Jahre das alte System bei und darf
den Internet-Explorer nicht aktualisieren, um nicht gegen bestehende
Vertragsbedingungen zu verstoßen.
Was heißt eigentlich Mobile-First ?
Die in Bezug auf das
Responsive Webdesign angesagte Mobile-First-Technik (von klein auf
groß) bietet eine bessere Performance-Leistung gegenüber der
Desktop-First-Technik (von groß auf klein).
Das Coding für die kleinste mobile Bildschirmauflösung, nämlich das
Smartphone, steht direkt am Anfang der CSS-Datei und wird somit sofort
geladen, erst später im Code werden dann per Media Queries - Abfragen
der Bildschirmgröße bezüglich der Mindestbreite (min-width) - andere,
abweichende, größere Bildschirmauflösungen, wie Tablet, Notebook,
Laptop und schließlich Desktop-PC angesprochen.
Schrifteinheit REM
Wir verwenden als Schrifteinheit nicht PX,
PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible
Schriftgrößen, die sich prozentmässig anpassen. Beim TAG HTML setzen
wir in der CSS-Datei die font-Angabe auf 62.5%, welches ca.10 Pixel
(px) entspricht.
Hier noch ein Hinweis: Ein Wert von 100% entspricht 16 Pixel (px),
wobei 16 Pixel die Standardgröße bei Schriften im Browser ist.
Warum schreiben wir 62.5% statt 100%?Damit wir nicht
ständig die Formel (Pixelwert geteilt durch 16 = rem Wert) anwenden
müssen, bei der es krumme, unübersichtliche rem-Werte gibt. Mehr zu der
Formel mit Beispiel weiter unten.
Es ist so, der umgerechnete Wert läßt sich viel leichter in Bezug
zum gewohnten Pixelwert setzen, es erleichtert einfach das Arbeiten.
Denn so ergibt sich zum Beispiel:
0.1 rem = 1 px
1 rem = 10 px
1.4 rem = 14 px
1.9 rem = 19 px
2.6 rem = 26 px
So sieht es dann der
Code in der CSS-Datei aus:
html {
font: 62.5%/1.5;
}
Dann folgt beim Body-TAG die Angabe der Schriftgröße von 1.9rem.
body {
font-size:1.9rem;
}
Und weiter für die Überschriften etwas höhere Werte, z.B.
h1 {
font-size:2.6rem;
}
h2 {
font-size:2.3rem;
}
h3 {
font-size:2rem;
}
* * * * * *
Diese Werte werden dann
prozentmässig weiter vererbt. Nachfolgend zwei Beispiele:
Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert.
@media
(min-width: 1024px) {
html {
font: 68%/1.5;
}
}
Auch hier bei der höheren Auflösung und Abfrage der Bildschirmbreite ab 1280 Pixel reicht der geänderte Prozentwert.
@media
(min-width: 1280px) {
html {
font: 72%/1.5;
}
}
* * * * * *
Vorteil von REM: Die Schrift-Werte von z.B. body, h1,
h2,h3 müssen nur ein einziges Mal ganz oben im Quellcode und dann nicht
mehr wieder angegeben werden und vererben sich im genannten
prozentualem Verhältnis einfach weiter. Das vermindert nicht nur den
Quelltext sondern ist insbesondere auch relevant im Sinne von
responsiven Templates.
* * * * * *
Die allgemeine Formel (Root ist auf 100%): Umrechnung von Pixel zu REM.
Umgerechnet
werden können Pixel-Werte, indem man den Pixelwert durch 16 teilt
(18/16 = 1.125) Voraussetzung: Die Schriftgröße des Root-Elements ist
auf 100% gesetzt und man geht von der 16px Standard-Schriftgröße aus.
Beispiel: Die Schriftgröße von 18px entspricht 1.125rem.
Zurück
Noch mal ansehen.
Hier geht es zurück zu den Links
Startseite,
Information 01,
Information 02 und
Information 03.