Akzeptable CSS-Hacks / Fixes
https://stackoverflow.com/questions/504261
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Gibt es eine Liste von ‚guten‘ sauberen CSS-Hacks, die zukunftssicher zu sein, sicher sind?
Zum Beispiel zoom:1 ist sicher, solange es nur IE serviert wird, und Sie erinnern, es ist da. Die sehr häufig Hack von Kindern Selektoren ist nicht sicher, weil IE7 sie unterstützt. Mit height:1% nur schmutzig fühlt (aber das könnte ich gerade sein).
Ich kenne IE7-js , so IE6 Fehler keine Sorge mir sehr. Auch ich bin nicht für eine religiöse Debatte suchen, nur Quellen.
Danke für die Antworten. - Ich die mit besten Quellen als Antwort ausgewählt habe
Danke auch für die Vorschläge separate CSS-Dateien zu verwenden oder nicht zu kümmern. Ich stimme völlig mit Ihnen, und für mich, das ist givens. Aber wenn sie mit einem Layout-Problem konfrontiert ist, möchte ich eine sichere Update, das das Risiko minimiert, dass ich werde das Problem in $ IE zu überdenken oder $ FF + 1. Leider habe mich nicht klarer.
Lösung
Dies ist ein guter Ort für gut dokumentiert und gut getesteten Browser-Bugs und die Hacks ermöglichen es Ihnen, um sie zu umgehen:
Andere Tipps
Für die Mehrheit der IE Bugs Ich glaube, sie ist am besten dran bedingten Kommentare um eine Verbindung zu einem Browser-spezifischen Sheet. Es neigt dazu, Dinge zu halten, recht ordentlich und es ist ganz selbstdokumentiere.
Ich habe verwendet Peter-Paul Koch " Quirksmode " Website viel für Fragen im Zusammenhang mit CSS und Quer -Browser-Kompatibilität. Er neigt dazu, auf browserspezifische Methoden Stirnrunzeln, aber er hat eine Seite auf CSS Hacks .
Nicole Sullivan (AKA Stubbornella ), der für die Yahoo arbeitet Performance-Team schlug in die 7 Wege für außergewöhnliche Perf , dass Sie die CSS verwenden sollten unterstreichen Hack zu flicken IE6 Fehler, weil:
- Hacks sollte dünn gesät sein.
- Wenn Sie nur 5-6 Hacks haben (was schon viel ist), dann wäre es nicht sinn platzieren die in einer externen Datei machen und damit sie aus ihrem Kontext zu trennen.
- Eine zusätzliche Datei zu Leistungseinbußen führen würde ( Yahoo Best Practices, Regel 1 ).
Es sollte jedoch beachtet werden, dass diese nicht gültig CSS ist.
Es gibt nicht so etwas wie ein gutes, sauberes / akzeptabel [CSS] Hack -. Immer Code Standards, und dann Browser + Version spezifische Stylesheets für alle Hacks verwenden erforderlich, um die Dinge funktionieren
Zum Beispiel:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc
Dann, wenn ein neue Version eines Browsers freigegeben werden, die vorherige Version Hacks kopieren und die Bits entfernen, die nicht mehr gelten (und neue Bits hinzufügen, falls erforderlich).
(Load einzelne Sheets mit Conditional Comments für IE und User-Agenten für anderen Browser Sniffing.)
Unders-Hack für IE6-Zeug funktioniert ganz gut, zum Beispiel.
min-height:50px;
_height:50px;
Es erfordert keine Dinge aus dem Zusammenhang in neue CSS-Dateien zu verschieben, nur IE6 bekommt sie, und sie sind einfach, wenn Sie IE6 Unterstützung zu stoppen entscheiden sollte auszufiltern. Sie sind auch sehr gering und wird nicht Krempel Ihrem CSS so viel.
Ändern Sie Ihre CSS für browserspezifische Unterstützung ist niemals falsch - so lange, wie Sie es leicht enthalten. Wie Sie feststellen, standardkonformen Browser, * hust * alles außer MSIE, werden nie mit zukünftigen Versionen brechen. Neue W3C-Standards bisherige Standards nicht auch brechen, sie in der Regel bisherige Standards am meisten deprecate oder erweitern.
Die Menschen haben bedingte Kommentare erwähnt, die für den Umgang mit IE groß sind. Aber Sie werden ein bisschen mehr benötigen für den Umgang mit allen Browsern (mobile, gecko, Webkit, Oper, etc.). Normalerweise werden analysieren Sie die eingehenden Request-Header den Browsertyp und Version aus dem User-Agent param zu holen. Auf dieser Basis können Sie beginnen, Ihre CSS-Dateien geladen werden.
Ich glaube wie die meisten von uns es tun, ist durch:
- Erste für einen Standard-Browser zu entwickeln (wir FF zum Beispiel nehmen)
- Sobald die CSS abgeschlossen Sie providig Unterstützung für IE-Ansatz (dies leicht mit den bedingten Kommentaren getan werden kann, wie perviously erwähnt)
- Erste eine CSS-Datei erstellen, die unter tune alles für IE6 und andere Version Fein werden
- Dann eine CSS-Datei erstellen, die alles für IE7 behandelt
- Schließlich erstellen Sie eine CSS-Datei, die alles für IE-Versionen von IE8 behandelt und größer
- Sobald IE9 herauskommt, stellen Sie sicher, setzen Sie IE8 + Handhabung zu IE8 spezifisch, und erstellen Sie eine IE9 + CSS-Datei mit den erforderlichen Korrekturen
- Erstellen Sie schließlich eine zusätzliche CSS-Datei für Webkit-Fixes
- Bei Bedarf können Sie auch weitere Dateien erstellen, um speziell Chrome oder Safari Ziel bei Bedarf
In Bezug auf Browser-spezifischen CSS-Implementierungen, I-Gruppe in der Regel alle von denen in meiner Haupt-CSS-Datei (Sie einfach eine Suche für diejenigen tun kann und sie in einem Dokument ersetzen, wenn erforderlich). Also, wenn etwas transparent sein muss, würde ich setzen beide Opazität und Filter (MSIE) im selben Block. Browser ignorieren nur Implementierungen sie nicht unterstützen, so dass Ihr sicher. Spezifische Implementierungen Ich neige dazu, würde zu vermeiden sind benutzerdefinierte Implementierungen (hey, Ich mag die -moz-Box über dem W3C, aber ich will nur nicht darauf verlassen).
Wie es mit CSS Vererbung und überwiegendem geht, Sie müssen nicht alle in jeder CSS-Datei, die CSS-Deklarationen und Definitionen neu zu definieren. Jede nacheinander geladenen CSS-Datei sollte nur enthalten die Wähler und die spezifischen Definitionen für das Update erforderlich ist, und sonst nichts.
Was Sie am Ende mit in dem Ende ist Ihre (sehr groß) Haupt-CSS-Datei und andere, ein paar Zeilen jeweils für bestimmten Browser-Fixes enthält -, die bis zu etwas fassen, die nicht ist, dass es sehr schwer zu pflegen und zu verfolgen. Es ist eine persönliche Präferenz, welcher Browser Ihrer Basis CSS-Datei basiert weg sein, aber in der Regel werden Sie einen Browser werden Targeting, die die geringste Menge an Ausgaben für anderen Browser schaffen (also ja, eine sehr schlechte Entscheidung für IE6 Entwicklung an, das wäre Punkt).
Wie immer gute Praxis und pragmatisch und akribisch mit Selektoren und Einzelheiten über jede Klasse und mit Frameworks werden Sie auf dem Weg der Güte führt mit selten benötigten Korrekturen. Ihre CSS-Dateien zu strukturieren ist ein großes Plus, wenn Sie mit einem ungeordneten sinnlosen Chaos enden sollen.
Centricle hat eine gute Liste der CSS-Hacks und ihre Kompatibilitäten.
Ich glaube nicht, dass Sie eine Liste von Hacks zu finden, die zukunftssicher sein, so wissen kann man sagen, was dumme Sache wird als nächstes im IE umgesetzt werden.
Dieser Artikel ist eine gute Zusammenfassung von CSS-Hacks: http://www.webdevout.net/css -hacks
Hier ist ein von Filtern rel="nofollow">, die sehr stabil sind:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
@media,
{
.dude { color: silver;}
}
/* IE8 \0 */
@media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
@media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
@-moz-document url-prefix()
{
.dude { color: green; }
}
Wenn Regeln definieren, finde ich es gut, natürlicher Abbau stattfinden, zum Beispiel zu ermöglichen, in CSS3 gibt es Unterstützung für RGBA Farbmodelle, aber es ist nicht in CSS2, so finde ich mich zu tun:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
So dass, wenn die spätere Regel älteren Browser nicht auf denen sie nicht unterstützen, um es in den zuvor definierten Stil abgebaut wird.
ziehe ich die global bedingte Kommentar Technik von Hiroki Chalfant beschrieben;
Ich finde es hilfreich, meine zu halten IE-bezogenen Regeln Seite an Seite mit meinem standard gezielten Regeln in einem einzigen gültigen Sheet.
