Bei der Beschäftigung mit HTML5 und Browser übergreifender Gestaltung, sind wir auf das Projekt HTML5 Boilerplate gestossen. Das Entwicklerteam hat interessante Ansätze für ein fertiges Template veröffentlicht.
(https://html5boilerplate.com/ oder deutsch: https://de.html5boilerplate.com/)
Die wichtigsten Punkte sind zusätzlich in ausführlichen Screencasts erklärt (englisch).
Einige Dinge lassen sich daraus auch direkt, ohne weitere Einarbeitung, verwenden:
Conditional Stylesheets / Comments oder CSS hacks?
Das ewige Problem mit korrektem CSS für alle Browser.
CSS Hacks für spezielle Browser innerhalb des Stylesheets sind in der Regel nicht valide.
Separate Stylesheets mittels Conditional Comments bedeuten zusätzliche HTTP Requests zum download und das Rendern der Seite wartet bis sie vollständig geladen sind.
In Zeiten, in denen Google die Ladezeiten einer Webseite als Qualitätsfaktor wertet, nicht unwichtig.
Abgesehen davon bedeuten zusätzliche Stylesheets natürlich mehr Aufwand.
Lösung:
Conditional Comments für eine extra Klasse des html Tags.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Damit kann man Browser spezifisches CSS direkt in das Haupt-Stylesheet schreiben:
.div { color: black; }
.ie8 .div { color: green; } /* IE8 */
.ie7 .div { color: blue; } /* IE7 */
.ie6 .div { color: red; } /* IE6 and IE5 */
Quelle Paul Irish: https://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
WICHTIG für den Internet Explorer:
Die Zeichenkodierung Deklaration (zB <meta charset = „UTF-8″ > ) sollte innerhalb der ersten 1024 Bytes des HTML-Dokuments platziert werden. Mit dieser Technik könnte diese Grenze überschritten werden. Also muss die nach oben.
Verschiedene Quellen berichten, dass beim IE Conditional Comments diesen in den Kompatibilitätsmodus versetzen.
Ist das nicht gewünscht, muss man serverseitig den header auf X-UA-Compatible setzen, denn die Verwendung von Conditional Comments vor <meta http-equiv=“X-UA-Compatible“> bringt den IE dazu, nachfolgendes <meta> zu ignorieren.
Quelle: https://mathiasbynens.be/notes/safe-css-hacks
Print Stylesheet integrieren
Anstatt in einem separaten direkt im gleichen Stylesheet integriert, um einen zusätzlichen HTTP-Aufruf zu vermeiden:
@media print {
deine Anweisungen zum Druck
...
}
0 Kommentare bis jetzt