CSS-Blog.com

Einige brauchbare Hacks

Von Joachim Krammer | CSS-Hacks

Da man diese Hacks immer wieder gut gebrauchen kann (und sie hier gut zu referenzieren sind), will ich einige vorstellen!

1. Wir sperren mal den “Schweinebrowser” Netscape 4.x aus:

   /*/*/a{}
   .container { width : 100%; }
   /* */
   

   Der Netscape 4 schwirrt bei /*/*/a{} ab und kommt erst nach dem abschließenden leeren Kommentar /* */ wieder zum Zug.

2. Folgender Hack wird von allen bisher erschienenen Opera-Versionen nicht interpretiert:

   head:first-child+body .container { width : 100%; }
   

   Das erste “Child” des Heads ist logischerweise der Body, was der Opera ja auch noch erkennt. Allerdings steigt dieser dann beim “Selektor für benachbarte Elemente”, nämlich dem Plus “+”, aus.

3. Durch eine Verknüpfung des Kind-Selektors (den die gesamte IE-Familie nicht interpretiert) und einen “benachbarten Selektor” lassen sich alle IEs und die Opera-Familie bis Version 7 ausschließen:

   html>head:first-child+body .container { width : 100%; }
   

   Eine an sich logische Schlussfolgerung, auf den Kind-Selektor und Tantek’s Hack (“Box-Model-Hack”) bin ich im Blog bereits kurz eingegangen.

4. Ebenfalls nichts für Opera-Browser ist folgender Einsatz des Universal-Selektors (“*7 Hack”):

   html*#test { color: green; }
   

   Wen der Hack alles aussperrt oder auch nicht, könnt ihr hier ersehen. Gepaart mit Einsatz des Kind-Selektors versteckt man den Code natürlich auch noch vor dem IE!

Wie bereits im Betreff geschrieben, sind das nur mal einige Hacks, weitere werden folgen. Denkt aber immer daran, dass Hacks aus Gründen der Zukunftssicherheit grundsätzlich vermieden werden sollten. Leider kommt man manchmal nicht daran vorbei ;)

Kurztipp – nur für den IE5/Mac

Von Joachim Krammer | CSS-Hacks

Folgende CSS-Anweisung versteht nur der IE5/Mac:

*>html .targetelement {styles}

Wichtig ist, dass man kein Leerzeichen zwischen dem universellen Selektor (*) und dem Child-Tag (>) lässt ;)

Und auf dieser Seite findet man eine “nette” Buglist für den betroffenen Browser.

Kurztipp – nur für den IE

Von Joachim Krammer | CSS-Hacks

Neben dem Aufsetzen eines PCs einer Freundin mal ganz schnell ein Hack, der nur den IE zum Zug kommen lässt (ich glaub ab 5.5):

* html #content {
    height: 320px;
}

Den universellen Selektor * können die anderen Browser (noch) nicht interpretieren. Kann ganz nützlich sein, wenn der Child-Selektor mal nicht den gewünschten Erfolgt verschafft ;)

Der universelle Selektor, auch als „*“ angegeben, stimmt mit dem Namen jedes Elementtyps überein. Er stimmt mit jedem einzelnen Element im Dokumentbaum überein.

Referenzkarte

Von Joachim Krammer | CSS-Hacks

Welcher Browser spricht auf welche Hacks an - hier gibt es eine Referenzkarte!

Kann man immer wieder gebrauchen :)

IE Dotted Hack

Von Joachim Krammer | CSS-Hacks

Hab vor ein paar Tagen schon darüber berichtet, jetzt bin ich mal dazu gekommen, es zu testen!

Fazit: Es funktioniert wunderbar, wobei auch folgende Lösung möglich sein müsste:

.dotted {
    height: 20px;
    margin: 0;
    padding: 1px;
    background-image: url(dotted.gif);
    background-repeat: repeat-x;
    background-position: bottom;
}
html>body .dotted {
    border-bottom: 1px dotted black;
    background-image: none;
}