Document Responsive Version

This is Sextus.

Infos zur Technik

Übersicht

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 modernen CSS-Eigenschaften, wie z.B. das neue Box-Model (box-sizing: border-box) sowie der Maßeinheit für Prozentschrift namens REM. Ältere Browser unterhalb IE Vers.9 bekommen per Browserweiche einen eigenen Quelltext zugewiesen.

Ältere Browser verstehen kein CSS3

Wir nennen nachstehend die Versionen des Browsers Internet Explorer (IE). Moderne, andere Browser verstehen die CSS3-Technik wesentlich früher. Folgend einige der unter diesem Gesichtspunkt wesentlichen CSS-Eigenschaften:

- Media Queries: Ab IE 9
- Rem-Prozent-Einheit: Ab IE 9
- Box-Sizing: Ab IE 8
- Display-Table: Ab IE 8
- Text-Shadow: Ab IE 10
- Box-Shadow: Ab IE 9
- Linear-Gradient: Ab IE 10
- Radial-Gradient: Ab IE 10
- Border-Radius: Ab IE 9


Was heisst 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.


One Picture. Pro id homero scaevola. Sed id lucilius voluptaria, duo ut meis euismod feugiat. Vix convenire dissentiet an, ad lorem quando.

Clita quaestio usu ad. Ex tractatos explicari pri. Posidonium reprimique ne ius, eam probo quodsi alienum eu, patrioque conceptam incorrupte. Clita quaestio usu ad. Ex tractatos explicari pri. Posidonium reprimique ne ius, eam probo quodsi alienum eu, patrioque conceptam incorrupte. Eirmod explicari nam an, duo an reformidans adversarium. Eam impedit civibus vituperata ei, persius virtute torquatos duo no, cu cum.


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.


  REM-Schrifteinheit.
Gemacht für responsive Seiten. 

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 georgia, helvetica, serif;
}
Dann folgt beim Body-TAG die Angabe der Schriftgröße, z.B. 1.6rem.
body {
font-size:1.6rem;
}
Und weiter für die Überschriften etwas höhere Werte, z.B.
h1 {
font-size:3.4rem;
}

h2 {
font-size:2.5rem;
}

h3 {
font-size:1.8rem;
}

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 georgia,helvetica, serif;
}
}
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 georgia,helvetica, serif;
}
}

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.


Unsere Lösung für ältere Browser

Per Browserweiche werden die älteren IE-Browser mittels IE CONDITIONAL COMMENTS angesprochen, welche die CSS3-Media-Queries nicht beherrschen. Dies ist ein klarer Vorteil gegenüber den oft angebotenen Javascript-Lösungen.

Nochmals:
Javascript funktioniert nicht, wenn es vom Anwender im Browser deaktiviert wird. Dies geschieht oftmals aus Sicherheitsgründen.


Conditional Comments Browserweiche

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 7. 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. Hinweis: Die "Conditional Comments" funktionieren bis einschließlich IE-Version 9, ab IE-Version 10 werden diese nicht mehr von Microsoft unterstützt

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.
© 2020 Document RWD