Einige brauchbare 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 ;)

CSS-Bookmarks

  • Webstandards in Germany
    Redaktionell geführtes Verzeichnis Webstandards-bezogener Blogs, Agenturen und Initiativen von Stefan Asemota.
  • Bookmarks für Webdesigner
    Linksammlung, die nicht durch Umfang, sondern durch Qualität besticht.
  • The Flop
    Douglas Bowman archiviert seinen sensationellen 2005-er Flop
  • smalltransport.com/links/
    "Links to great design and design resources"
  • Full CSS Property Compatibility Chart
    "shows all CSS1, CSS2 and Internet Explorer CSS extensions and grades the level of support each recieves in a given browser."
  • CSSHilfe
    "CSSHilfe ist ein Verzeichnis, das mit Ressourcen, Tutorials und Tipps Hilfestellung bei der Recherche und Applikation von CSS geben möchte."
  • Stylegala
    "Stylegala aims to promote, discuss and inspire the web audience in the areas of design, CSS and web standards - combined."
  • Web Standards Awards
    "The Web Standards Awards aim to highlight the best in standards-compliant web site design"
  • css Zen Garden
    "A demonstration of what can be accomplished visually through CSS-based design."
  • Cascading Style Sheets, Level 2
    Deutsche Übersetzung der CSS-2-Spezifikation
  • Alle Bookmarks ansehen

XML-Feed


Login