{"id":162,"date":"2012-07-17T12:27:17","date_gmt":"2012-07-17T11:27:17","guid":{"rendered":"https:\/\/kineo.de\/blog\/?p=162"},"modified":"2012-07-18T10:36:20","modified_gmt":"2012-07-18T09:36:20","slug":"conditional-stylesheets-oder-css-hacks","status":"publish","type":"post","link":"https:\/\/kineo.de\/blog\/html\/conditional-stylesheets-oder-css-hacks\/","title":{"rendered":"Conditional stylesheets oder CSS hacks ?"},"content":{"rendered":"

Bei der Besch\u00e4ftigung mit HTML5 und Browser \u00fcbergreifender Gestaltung, sind wir auf das Projekt HTML5 Boilerplate gestossen. Das Entwicklerteam hat interessante Ans\u00e4tze f\u00fcr ein fertiges Template ver\u00f6ffentlicht.
\n(https:\/\/html5boilerplate.com\/<\/a> oder deutsch:\u00a0https:\/\/de.html5boilerplate.com\/<\/a>)
\nDie wichtigsten Punkte sind zus\u00e4tzlich in ausf\u00fchrlichen Screencasts erkl\u00e4rt (englisch).<\/p>\n

Einige Dinge lassen sich daraus auch direkt, ohne weitere Einarbeitung, verwenden:<\/p>\n

Conditional Stylesheets \/ Comments oder CSS hacks?<\/h2>\n

Das ewige Problem mit korrektem CSS f\u00fcr alle Browser.
\nCSS Hacks f\u00fcr spezielle Browser innerhalb des Stylesheets sind in der Regel nicht valide.<\/p>\n

Separate Stylesheets mittels Conditional Comments bedeuten zus\u00e4tzliche HTTP Requests zum download und das Rendern der Seite wartet bis sie vollst\u00e4ndig geladen sind.<\/strong>
\nIn Zeiten, in denen Google die Ladezeiten einer Webseite als Qualit\u00e4tsfaktor wertet, nicht unwichtig.
\nAbgesehen davon bedeuten zus\u00e4tzliche Stylesheets nat\u00fcrlich mehr Aufwand.<\/p>\n

L\u00f6sung:<\/h2>\n

Conditional Comments f\u00fcr eine extra Klasse des html Tags.
\n<!--[if lt IE 7 ]> <html class=\"ie6\"> <![endif]-->
\n<!--[if IE 7 ]> <html class=\"ie7\"> <![endif]-->
\n<!--[if IE 8 ]> <html class=\"ie8\"> <![endif]-->
\n<!--[if IE 9 ]> <html class=\"ie9\"> <![endif]-->
\n<!--[if (gt IE 9)|!(IE)]><!--> <html class=\"\"> <!--<![endif]--><\/code>
\nDamit kann man Browser spezifisches CSS direkt in das Haupt-Stylesheet schreiben:
\n.div { color: black; }
\n.ie8 .div { color: green; } \/* IE8 *\/
\n.ie7 .div { color: blue; } \/* IE7 *\/
\n.ie6 .div { color: red; } \/* IE6 and IE5 *\/<\/code>
\nQuelle Paul Irish: https:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/<\/a><\/p>\n

WICHTIG f\u00fcr den Internet Explorer:<\/strong><\/p>\n

Die\u00a0Zeichenkodierung Deklaration (zB\u00a0<meta\u00a0charset\u00a0=\u00a0„UTF-8″\u00a0>\u00a0) sollte innerhalb der ersten 1024 Bytes des HTML-Dokuments platziert werden.\u00a0Mit dieser Technik k\u00f6nnte diese Grenze \u00fcberschritten werden. Also muss die nach oben.<\/p>\n

Verschiedene Quellen berichten, dass beim IE Conditional Comments diesen in den Kompatibilit\u00e4tsmodus versetzen.<\/p>\n

Ist das nicht gew\u00fcnscht, muss man serverseitig den header auf X-UA-Compatible setzen, denn die Verwendung von Conditional Comments vor <meta\u00a0http-equiv=“X-UA-Compatible“> bringt den IE dazu, nachfolgendes <meta> zu ignorieren.<\/p>\n

Quelle: https:\/\/mathiasbynens.be\/notes\/safe-css-hacks<\/a><\/p>\n

Print Stylesheet integrieren<\/h2>\n

Anstatt in einem separaten direkt im gleichen Stylesheet integriert, um einen zus\u00e4tzlichen HTTP-Aufruf zu vermeiden:
\n@media print {
\ndeine Anweisungen zum Druck
\n...
\n}
\n<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Bei der Besch\u00e4ftigung mit HTML5 und Browser \u00fcbergreifender Gestaltung, sind wir auf das Projekt HTML5 Boilerplate gestossen. Das Entwicklerteam hat interessante Ans\u00e4tze f\u00fcr ein fertiges Template ver\u00f6ffentlicht. (https:\/\/html5boilerplate.com\/ oder deutsch:\u00a0https:\/\/de.html5boilerplate.com\/) Die wichtigsten Punkte sind zus\u00e4tzlich in ausf\u00fchrlichen Screencasts erkl\u00e4rt (englisch). Einige Dinge lassen sich daraus auch direkt, ohne weitere Einarbeitung, verwenden: Conditional Stylesheets \/ Comments […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8],"tags":[],"class_list":["post-162","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"_links":{"self":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":50,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/162\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}