Über die expression-Eigenschaft für den IE
Im Folgenden möchte ich über die wenig bekannte jedoch nützliche Eigenschaft expression berichten und was man damit anfangen kann.
Nach obenExpression: Der Mix aus CSS und Javascript für den IE
p {
height:expression(Hier kommt ein Javascript rein);
}
Wie man anhand des Codebeispiels sehen kann, hat die Eigenschaft expression ein Javascript als Wert. Alleine die Tatsache mag bei den meisten ein flaues Gefühl in der Magengegend verursachen, doch angesichts der Möglichkeiten, die sich dem Webmaster bieten, verbessert sich meist umgehend die Laune. Denn man kann expression verwenden, um wichtige CSS 2 Eigenschaften wie min-height oder max-width, die im IE 6 noch nicht implementiert sind, nachzuahmen.
Nicht valide
Da die Eigenschaft expression nicht valide ist, sollte man diese Codefragmente in einem Conditional Comment notieren, damit wirklich nur der IE damit arbeiten muss und das CSS valide bleibt. Alternativ bietet sich an, gleich ein Extra-Stylesheet für den IE zu machen, da das Fehlen einiger wichtiger CSS 2 Eigenschaften nicht die einzigen Überraschungen bei diesem Browser sind.
position:fixed; für den IE
Bekanntermaßen unterstützt der IE den Wert fixed für die Eigenschaft position nicht - sehr schade, da man damit feststehende Navigationen u.ä. erstellen könnte.
Der Trick: Es wird eine ID für den IE geschrieben, für das das betreffende Element absolut positioniert wird, jedoch sorgt das Javascript für einen festen vertikalen Abstand beim Scrollen.
Voraussetzungen: Der IE muss in den Quirksmode geschickt werden. Dies erreicht man entweder, indem man der Doctypeangabe ein Kommentar voransetzt oder durch den XML-Prolog am Anfang des Dokuments. Ferner muss der Benutzer Javascript aktiviert haben, damit dieser Workaround funktioniert.
#fixed_ie
{
position:absolute;
left:100px;
top: expression(parseInt(document.body.scrollTop + 100));
background:white;
border:1px solid red;
}
Für moderne Browser sieht das dann so aus:
#fixed_andere
{
position:fixed;
left:100px;
background:#eaeaea;
border:1px solid red;
padding:20px;
}
Hier kann man sich ein Beispiel dazu ansehen.
Nach obenmax-height für den IE
Die maximale Höhe kann man auf eine ähnliche Art mit expression festlegen.
#test
{
border:1px solid red;
max-height:300px; /* Für moderne Browser */
height:expression(this.scrollHeight > 300? "300px" : "auto" );
overflow:hidden; /* wichtig */
border:1px solid red;
margin:2em;
background: white;
}
Wichtig ist hierbei overflow:hidden;, da sich sonst der Conatiner typischerweise im IE mit den Inhalt strecken würde.
Hier kann man sich ein Beispiel dazu ansehen.
Nach obenmin-height für den IE
Für eine minimale Höhe muss man nur im Javascript das Vergleichszeichen in ein "kleiner als" umdrehen.
#test
{
border:1px solid red;
min-height:300px; /* Für moderne Browser */
height:expression(this.scrollHeight < 300? "300px" : "auto" );
overflow:hidden; /* wichtig */
border:1px solid red;
margin:2em;
background:white;
}
Hier kann man sich ein Beispiel dazu ansehen.
Nach obenWie funktioniert das Javascript?
Das Javascript, das als Wert notiert ist funktioniert bei min/max-width/height immer nach den gleichen Schema:
In dem letzten Beispiel wird z.B. abgefragt "Ist der the Höhe der Box kleiner 800 Pixel? Wenn ja, setzte die Höhe auf 300 Pixel. Andernfalls lasse den Browser die Größe der Box automatisch festlegen."
So kann man zum Beispiel auch für min-width einen Ausdruck für den IE finden.
Weitere Informationen zu expression findet man auf der Entwicklerseite von Microsoft
Mister J\'s
ich saß jetzt bestimmt 2h-3h an einem Problem das sich beim IE6 auftat. Dann hab ich den Artikel gefunden. Ein Beispiel für mich umgeschrieben und alles läuft perfekt. Riesen Dank an Euch und Eure super Seite. mit freundlichsten Grüßen Mister J's