Gibt es eine Liste von 'guten' sauberen CSS-Hacks, die sicher zukunftssicher sind?
Zum Beispiel ist zoom:1 sicher, solange es nur dem IE zur Verfügung steht und Sie sich erinnern, dass es da ist. Der sehr häufige Hack der Verwendung von untergeordneten Selektoren ist nicht sicher, weil IE7 sie unterstützt. Die Verwendung von height:1% fühlt sich einfach schmutzig an (aber das könnte ich sein).
Ich kenne ie7-js , IE6-Bugs machen mir also keine Sorgen. Außerdem suche ich keine religiöse Debatte, nur Quellen.
Danke für die Antworten - Ich habe den mit den besten Quellen als Antwort ausgewählt.
Danke auch für die Vorschläge, separate CSS-Dateien zu verwenden oder sich nicht darum zu kümmern. Ich stimme Ihnen vollkommen zu, und für mich sind das die Tatsachen. Aber wenn ich mit einem Layoutproblem konfrontiert werde, möchte ich eine sichere Lösung, die das Risiko minimiert, dass ich das Problem in $ IE oder $ FF + 1 erneut untersuchen muss. Sorry, dass ich das nicht klarer gemacht habe.
Dies ist ein guter Platz für gut dokumentierte und gut getestete Browser-Bugs und die Hacks erlauben es, sie zu umgehen:
Bei den meisten IE-Bugs finde ich es am besten, bedingte Kommentare um einen Link zu einem Browser-spezifischen zu verwenden Stylesheet. Es neigt dazu, die Dinge ziemlich ordentlich zu halten und es ist ziemlich selbstdokumentieren.
Nicole Sullivan (AKA Stubbornella ) arbeitet für das Yahoo Performance Team, vorgeschlagen in Die 7 Gewohnheiten für Exceptional Perf , dass Sie den CSS-Unterstrich-Hack verwenden sollten, um IE6-Fehler zu beheben, weil:
Es sollte jedoch beachtet werden, dass dies kein gültiges CSS ist.
Es gibt keinen guten sauberen / akzeptablen [css] Hack - Code immer zu Standards und dann browser + versionsspezifische Stylesheets für alle Hacks, die benötigt werden, um die Dinge zum Laufen zu bringen.
Zum Beispiel:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
usw.
Wenn dann eine neue Version eines Browsers veröffentlicht wird, kopieren Sie die Hacks der vorherigen Version und entfernen Sie die nicht mehr benötigten Bits (und fügen Sie ggf. neue hinzu).
(Laden Sie einzelne Stylesheets mit bedingten Kommentaren für den IE und User-Agent-Sniffing für andere Browser.)
Underscore-Hack für IE6-Sachen funktioniert ganz gut, zB.
%Vor%Es ist nicht notwendig, Dinge aus dem Kontext in neue CSS-Dateien zu verschieben, nur IE6 bekommt sie und sie sind leicht herauszufiltern, wenn Sie sich entscheiden sollten, IE6 nicht mehr zu unterstützen. Sie sind auch sehr minimal und werden dein CSS nicht so sehr durcheinander bringen.
Das Ändern Ihres CSS für die browserspezifische Unterstützung ist niemals falsch - solange Sie es einfach einbinden können. Wie Sie feststellen werden, werden standardkonforme Browser, * hust * everything außer MSIE, niemals mit zukünftigen Releases brechen. Neue W3C-Standards brechen auch nicht die bisherigen Standards, sie verwerfen oder erweitern in der Regel die bisherigen Standards höchstens.
Leute haben bedingte Kommentare erwähnt, die sich hervorragend für die Handhabung von IE eignen. Aber Sie brauchen ein bisschen mehr für die Handhabung aller Browser (Mobile, Gecko, Webkit, Opera, etc.). Normalerweise parsen Sie die eingehenden Anforderungsheader, um den Browsertyp und die Version aus dem Benutzer-Agent-Parameter abzurufen. Auf dieser Grundlage können Sie mit dem Laden Ihrer CSS-Dateien beginnen.
Ich glaube, wie die meisten von uns es tun:
Bei browserspezifischen CSS-Implementierungen gruppiere ich normalerweise alle in meiner Haupt-CSS-Datei (Sie können leicht nach diesen suchen und sie bei Bedarf in einem Dokument ersetzen). Wenn also etwas transparent sein muss, würde ich sowohl Opazität als auch Filter (MSIE) im selben Block einstellen. Browser ignorieren nur Implementierungen, die sie nicht unterstützen, also Ihre Sicherheit. Bestimmte Implementierungen, die ich vermeiden möchte, sind benutzerdefinierte Implementierungen (hey, ich mag die -moz-Box über der W3C, aber ich will mich einfach nicht darauf verlassen).
Wie bei der CSS-Vererbung und beim Überschreiben müssen Sie nicht alle CSS-Deklarationen und -Definitionen in jeder CSS-Datei neu definieren. Jede fortlaufend geladene CSS-Datei sollte nur die Auswahl und die spezifischen Definitionen enthalten, die für die Korrektur benötigt werden, und nichts anderes.
Am Ende erhalten Sie Ihre (riesige) Haupt-CSS-Datei und andere, die jeweils ein paar Zeilen enthalten, für bestimmte Browser-Fixes - was zu etwas führt, das nicht so schwer zu verwalten und zu verfolgen ist. Es ist eine persönliche Vorliebe, auf welchem Browser Ihre Basis-CSS-Datei basiert, aber normalerweise werden Sie auf einen Browser zielen, der die wenigsten Probleme für andere Browser erzeugt (also wäre die Entwicklung für IE6 eine sehr schlechte Entscheidung Punkt).
Wie immer folgt man guten Praktiken und ist pragmatisch und akribisch mit Selektoren und Besonderheiten zu jeder Klasse und mit Frameworks, die einen auf den Pfad des Guten führen, wobei selten Fixes erforderlich sind. Strukturieren Sie Ihre CSS-Dateien ist ein großes Plus, es sei denn, Sie wollen mit einem ungeordneten sinnlosen Durcheinander enden.
Centricle hat eine gute Liste von CSS-Hacks und deren Kompatibilitäten.
Ich denke nicht, dass Sie eine Liste von Hacks finden werden, die zukunftssicher sein werden, da man weiß, welche dumme Sache als nächstes in IE implementiert wird.
Dieser Artikel ist eine gute Zusammenfassung von CSS-Hacks: Ссылка
Hier ist eine gute Liste von Filtern, die sehr stabil sind:
%Vor%Wenn ich Regeln definiere, finde ich es gut, natürliche Degradation zuzulassen, zum Beispiel, in CSS3 gibt es Unterstützung für RGBA-Farbmodelle, aber in CSS2 gibt es das nicht, also mache ich es:
%Vor%Wenn die ältere Regel bei älteren Browsern fehlschlägt, die sie nicht unterstützen, wird sie auf den zuvor definierten Stil herabgesetzt.
Ich bevorzuge die globale bedingte Kommentar -Technik, die von Hiroki Chalfant beschrieben wurde;
Ich finde es hilfreich, meine IE-ausgerichteten Regeln Seite an Seite mit meinen standardbezogenen Regeln in einem einzigen gültigen Stylesheet zu halten.