Wer viel CSS schreibt, wie ich, der soll sich unbedingt mit SASS oder LESS beschäftigen. Während SASS vor allem in der ruby Welt angewendet (mit dem Mac ist ruby sowieso schon vorinstalliert), ist LESS ‘universaler’. Es gibt php LESS Compiler, auch dotless für .net sowie Javascript Lösungen.
Noch besser ist meiner Meinung nach, mit Codekit LESS lokal zu compilieren und danach nur nach das CSS hochzuladen.
Die lokale Entwicklung ist damit fast doppelt so schnell. Die verschieden Browser-Hersteller Prefixe zum Beispiel, können mit mixins vordefiniert werden.
Ebenfalls super ist die Möglichkeit, Variablen zu definieren!
Links:
LESS
SASS
Codekit
Mit IE8 führte MS den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ein, um den IE8 mit der Rendering Engine des IE7 laufen zu lassen. Im Moment ist es jedoch nicht möglich, eine HTML5 Seite mit diesem Meta Tag zu valideren. In HTML5 Boilerplate wird zum Beispiel <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> verwendet, mit dem Hinweis, dies besser Server seitig auszugeben.
Nun, “edge” begreife ich definitiv nicht. Dann kann der Tag ganz weggelassen werden, edge würde ja bedeuten, dass jeder IE in seiner neuest möglichen Engine rendert. Das Chrome Frame macht schon einen gewissen Sinn. Edge bedeutet für mich aber viel Risiko, wir kennen ja die IE8 “Qualitäten” beim nur schon beim rendern von CSS 2.1.
Dann würde ich eher den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" > bevorzugen.
Weiterführende Links zu diesem Thema:
http://www.alistapart.com/articles/beyonddoctype
http://stackoverflow.com/questions/6665312/w3c-markup-validator-html5-meta-problem
http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/
Useragentman zeigt in seinem Blogeintrag, wie box-shadow auch in den Versionen 6-8 des Internet Explorers erstellt werden kann.
Guter Lösungsvorschlag!
http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
Einzig würde ich die Reihenfolge hier andern:
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
in
/* CSS3 Box-shadow code: */
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
box-shadow: 5px 5px 0px #ff0000;
Dropdownlist funktionierte nicht mehr im Firefox. In anderen Browser jedoch schon.
Lösung: auf dem umfassenden Div (label und select) war ein self clearing drauf :
div.Dropdonlist:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Das geht nicht mit dem Firefox, zumindest nicht mit dem 9er.
Nachdem Entfernen des self clearing funktioniert das select wieder.
Empfehlenswerte Literatur über Responisve Web Design von Ethan Marcotte.
Auf a list apart und als Buch
Ausgangspunkt: Das Print Layout wurde bei identischem Print.css verschieden gross ausgegeben. Also nicht nur der Text bekam unterschiedliche Grössen, sondern auch die Bilder (bzw vor allem das als Bilddatei geladene Logo)
Abklärungen
Quelltext valid, CSS valid, Javascript iO
Lösung:
Es wurde eine URL als Quelle generiert und je nach Pfadlänge konnte diese natürlich nicht umbrechen und hat damit die ganze Ausgabegrösse beeinflusst. Entweder diese Angabe wird ausgeblendet, was wenig Sinn macht, oder das umschliessende Element wird mit einem overflow: hidden; versehen. Ein word-break gibt es (leider?) nicht …
Ausgangslage:
Im IE fällt der Hilfe span unter das nächste Element, welches position relative hat. Es nützt nichts, dem .Help span einen z-index von 1 zu verpassen (in allen andern Browser reicht das).
Da das Formular generiert wird und nicht von ‘Hand’ programmiert wird, soll die Lösung möglichst auch ‘generiert’ sein.
Lösung:
Mit jQuery das Elternelement des .Help spans suchen und bei hover eine Klasse vergeben, die dann mit position: relative; und z-index: 1; im CSS versehen werden kann. Es ist damit auch kein zusätzlicher Quelltext nötig.
Resultat:
Alternativ, ohne jQuery;
onmouseover="document.getElementById('myId1').style.visibility
= 'visible';document.getElementById(myId1').parentNode.style.zIndex ='1';"
onmouseout="document.getElementById('myId1').style.visibility
= 'hidden';document.getElementById('myId1').parentNode.style.zIndex ='auto';"
Wobei IE6 mit zIndex=‘auto’ Probleme hat und es besser mit zIndex=’‘ eingegeben wird (oder: .parentNode.style.removeProperty(‘zIndex’); -> nicht getestet!)
Element (div.Skyscraper) im Header muss an Container entlang fliessen, Element wird dynamisch (JS) mit Inhalt gefüllt (div#google_ads_div_Skyscraper)
#PrimaryHeader div.Skyscraper {
position: absolute;
right: -168px;
top:-118px;
float: left;
width: 168px;
z-index: 6000;
}
#PrimaryHeader div.Skyscraper a {
display: block;
position: fixed;
}
/*diese Definition funktioniert in allen Browser ausser IE*/
/*div#google_ads_div_Skyscraper {
position: fixed;
float:left;
width:165px;
z-index: 300;
}*/