Was ist die Definition eines 'CSS -Hacks'?

Wenn Sie mindestens ein paar Jahre CSS schreiben, haben Sie mit Sicherheit einen CSS -Hack verwendet. Wenn Sie jedoch relativ neu in CSS sind, ist es möglich, dass Sie den Begriff gehört haben, aber nicht genau, was er bedeutet.

In diesem Beitrag werde ich erklären, was genau der Begriff CSS -Hack bedeutet und wie ein CSS -Hack verwendet wird. Aber zuerst war ein Hintergrund, um zu erklären, warum ich diesen Beitrag sogar notwendig war.

Key Takeaways

• Ein CSS -Hack ist eine Technik, die Stile auf bestimmte Browserversionen anwendet und gleichzeitig von anderen ignoriert wird. Es wird häufig verwendet, um Browser -Inkonsistenzen oder -beschränkungen zu überwinden, insbesondere in älteren Versionen von Browsern, die die neuesten CSS -Standards möglicherweise nicht vollständig unterstützen.
• CSS -Hacks sind nicht unbedingt ungültige CSS. Einige Hacks können bei der Durchführung eines CSS -Validators Warnungen oder Fehler hervorrufen, andere können jedoch ohne Probleme bestehen. Es ist entscheidend, Hacks zu trennen und zu dokumentieren, um das Refactoring zu erleichtern, wenn Zeit und Budget es zulässt.
• Während CSS -Hacks in einigen Situationen nützlich sein können, werden sie im Allgemeinen als schlechte Praxis angesehen, da sie den Code komplexer und schwieriger zu pflegen können. Es wird empfohlen, Standard -CSS -Techniken und Design -Websites zu verwenden, um in älteren Browsern anmutig zu degradieren.

Viele Entwickler scheinen den Begriff

falsch zu verstehen

Wie viele von Ihnen wissen, hat SitePoint kürzlich die Ergebnisse einer großen CSS -Umfrage veröffentlicht, die ich zusammengestellt habe. Eine der Fragen, die die Umfrage stellte, war Folgendes:

Welches der folgenden Microsoft -Browser schreiben Sie derzeit CSS -Hacks für?

Als ich die Ergebnisse zum ersten Mal untersucht habe, schien ich eine Kuriosität in den Ergebnissen für diese Frage übersehen zu haben. Glücklicherweise hat David Storey, ein Ingenieur, der am neuesten Browser von Microsoft arbeitet, darauf hin. Von den 1.418 Personen, die diese Frage beantworteten, gingen die Ergebnisse so:

• IE9 - 62%
• IE10 - 61%
• IE11 - 57%
• Kante - 45%
• IE8 - 35%
• IE7 - 9%
• IE6 - 3%
• IE5.5 - 1%

Es ist schlimm genug, dass mehr als 60% der Entwickler behaupten, CSS -Hacks für IE9 und IE10 zu schreiben - aber 45% für Edge? Obwohl es einige veröffentlichte Hacks für Edge gibt, sind sie noch nicht auf der Browserhacks -Website, so dass es unwahrscheinlich ist, dass so viele Menschen Hacks für diesen Browser verwenden. Aber die wichtigere Frage ist: Welche Probleme treffen die Entwickler mit dem Rendern von CSS in Kante, dass sie Hacks benötigen?

Ich dachte, es könnte sein, dass viele der Teilnehmer Hacks mit der Browser -Erkennung über das Sniff von User Agent verwirrt. Aber auch das würde nicht erklären, warum die Zahl für Edge so hoch ist.

Dann wurde mir klar, dass sie die Frage völlig missverstanden haben mussten; Sie denken, "CSS -Hacks für Browser X" ist das gleiche wie "Unterstützung des Browsers X". Es gibt wirklich keine andere logische Erklärung, insbesondere wenn Sie die hohen Prozentsätze für die anderen Browser berücksichtigen, die ebenfalls keine Hacks benötigen sollten.

definieren wir also genau, was ein Hack ist, für diejenigen, die durch den Begriff verwechselt werden.

Was ist ein CSS -Hack?

Damit etwas in Ihrer CSS -Datei als „Hack“ betrachtet werden kann, muss es seine Stile nur auf die gezielten Browser anwenden, während alle anderen Browser es ignorieren.

Betrachten wir ein Beispiel. Dies ist ein CSS -Hack:

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Das CSS im obigen Beispiel (oft als „Stern-HTML-Hack“ bezeichnet) zielt auf nur Internet Explorer-Versionen 6 und unter ab. Die meisten Entwickler, die IE6 unterstützen, kümmert sich vor IE6 nicht wirklich um etwas, daher funktioniert dies normalerweise nur als IE6-Hack.

Der Teil, der der "Hack" ist, ist das Sternchen, gefolgt von "HTML". Dies ist eine Kombination aus dem Universal Selector und dem Elementtyp -Selektor. Irgendwann entdeckte jemand, dass diese beiden Selektoren vor einem anderen Selektor nur in bestimmten Versionen von IE funktionieren, während sie in anderen Browsern keinen Einfluss haben. Dies bedeutet, dass der linke Rand auf dem im obigen Code -Beispiel definierten. SideBar -Element nur für IE6 oder früher gilt. In diesem Fall ist das CSS tatsächlich gültig, sodass Sie keinen Fehler oder keine Warnung darüber erhalten (dazu später mehr).

Hier ist ein weiteres Beispiel auf der Browserhacks -Website, diesmal auf IE11:

<span>_<span>:-ms-fullscreen, :root .selector</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Ich werde nicht in die Einzelheiten eingehen, warum dies ein Hack ist (teilweise, weil ich nicht ganz sicher bin, ob ich es verstehe), aber das obige CSS gilt nur für Internet Explorer Version 11. Technisch gesehen, sagt Browserhacks "IE11 und oben", also gehe ich davon aus, dass dies bedeutet, dass es auch im Edge -Browser von Microsoft funktioniert, aber ich habe das nicht überprüft.

Der wichtige Punkt hier ist nicht, welche Browser gezielt sind, sondern dass wir alle auf derselben Seite sind, um zu verstehen, was ein CSS -Hack ist.

Sind CSS -Hacks ungültige CSS?

Wenn Sie Hacks in Ihrem Stylesheet haben, ist es möglich, dass Ihr CSS Warnungen und/oder Fehler erzeugt, wenn Sie es über den CSS -Validator des W3C führen. Aber das ist keine Garantie, noch ist es eine Möglichkeit zu erkennen, ob etwas ein Hack ist.

Es ist möglich, dass Ihr CSS Hacks enthalten und keine Warnungen oder Fehler erzeugen. Wenn beispielsweise die einzigen CSS-Hacks, die Sie verwenden, auf IE6 mit dem Stern-HTML-Hack abzielen, bestätigen Ihre Stylesheets ohne Fehler oder Warnungen, die mit Hacks verbunden sind.

Einige Hacks (wie der oben diskutierte IE11-Hack) verwenden anhand von Lieferanten-spezifischen Code (z. B.: -ms-fullscreen). In einem solchen Fall könnten die Standardeinstellungen im Validator Ihr CSS mit der grünen Bildschirmnachricht „Pass“ anmelden:

Aber wenn Sie auf den Bildschirm Validator nach unten scrollen, sehen Sie Warnungen wie folgt:

In diesem Fall warnt es mich, weil: -ms-full-Screen als „ein unbekannter Anbieter erweiterter Pseudoklasse“ gilt. Wenn Sie sich wohler fühlen, wenn Sie diese Art von CSS als Fehler anstelle einer Warnung betrachten, können Sie die Einstellungen des Validators mit dem Abschnitt „Weitere Optionen“ unter dem Eingabebereich des Validators anpassen:

Ändern der Option „Anbieter Erweiterungen“ in „Fehler“ verhindern, dass ein Stylesheet die Validierung überholt, wenn es Anbieter-Präfixe oder andere Browser-spezifische CS (nicht unbedingt Hacks) enthält.

.

Andererseits können Sie so etwas verwenden:

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Die obigen CSS -Ziele zielen IE8 und unten. Der „Hack“ ist die Kombination aus dem Backslash und den neun (9). Die meisten Browser ignorieren die gesamte Linie, da der 9 -Teil die Linie ungültig macht. Aus irgendeinem Grund wird es jedoch immer noch als gültig angesehen und die Margeneinstellung angewendet.

In diesem Fall wird jedoch eine Fehlermeldung angezeigt, in welchen Einstellungen Sie für den Validator auswählen, und das Stylesheet überträgt keine Validierung:

Welche Techniken sind keine Hacks?

Die folgenden Methoden und Techniken sollten nicht unbedingt als CSS -Hacks eingestuft werden:

! Wichtige Erklärungen sind keine Hacks

Eine CSS -Zeile mit dem angehängten Keyword ist ein ganz anderes Problem. Dies ist ein gültiges CSS und wird nicht verwendet, um einen bestimmten Browser zu zielen. Dies ist kein Hack, aber es könnte als schlechtes CSS angesehen werden.

Lieferantenpräfixe sind nicht unbedingt Hacks

Die Präfixe von Anbietern zielen auf bestimmte Browser ab, aber dies sind nicht das, was wir üblicherweise als Hacks bezeichnen. Wenn Sie in den meisten Fällen Anbieterpräfixe verwenden, liefern Sie auch einen gültigen Begleitstandscode. Das ist kein Hack. Davon abgesehen gibt es einige Fälle, in denen Sie einen Lieferanten-spezifischen Code schreiben würden, um einen Browser abzuzielen und so als Hack qualifiziert. Der obige Code, der _:-ms-fullscreen verwendet, ist ein Beispiel. Ein weiteres gutes Beispiel ist die Auslösung der Hardwarebeschleunigung In Webkit -Browsern. Herstellerpräfixe sind jedoch größtenteils ein separates Thema. Tatsächlich hat der W3C eine Dokumentation zum Lieferanten-spezifischen Code und unterstützt die Vorstellung, dass diese an sich nicht als Hacks angesehen werden sollten.

Hochspezifische Selektoren sind keine Hacks

Wenn Sie mit Ihren Selektoren wirklich spezifisch sind, um etwas in einem anderen Teil eines Stylesheetes (z. B. Körperbody. Content #sideBar P) zu überschreiben, ist kein CSS -Hack. Es ist ein schlechtes CSS, aber es ist kein Hack.

alte Syntax ist kein Hack

Ein gutes Beispiel hierfür ist der komplexe Code, der für die Unterstützung von Deep Browser in Flexbox erforderlich ist. Abgesehen von der Tatsache, dass dies heute wahrscheinlich unnötig ist, würde ich so etwas nicht als Hack kategorisieren. Es war ein gültiger Code, als diese Browser ihn unterstützten, sodass er den gleichen Effekt wie ein Hack haben könnte, aber ich denke nicht, dass es dasselbe ist.

Was ist mit bedingten Kommentaren?

Bedingte Kommentare, mit denen Sie CSS oder sogar HTML schreiben können, um bestimmte Versionen des Internet -Explorers (oder sogar bestimmte Versionen von Internet Explorer auszuschließen) ein wenig Grauzone auszurichten. Wenn sie auf eine bestimmte Art und Weise geschrieben sind, sind sie gültig HTML, aber sie sind "hacky".

Bereits 2008 hat Paul Irish das populär gemacht, was wir als "bedingte Klassen" bezeichnen, was ich sicher bin, die viele von uns verwendet haben. Diese verwenden bedingte Kommentare, um Klassen zu erstellen, die Sie in Ihrem Stylesheet verwenden können, um spezifische Versionen von IE unter Verwendung gültiger CSS zu zielen.

Ist die Verwendung bedingter Kommentare also ein „CSS -Hack“? Ich würde ja sagen, nur weil sie genau das Gleiche beabsichtigen, wenn sie einen üblicheren CSS -Hack verwenden.

Sollten Sie CSS -Hacks verwenden?

Wie bei vielen Webentwicklungsthemen ist die Antwort hier nicht einfach Ja oder Nein . Die richtige Antwort lautet , es hängt ab. Die meisten Puristen werden sie nicht benutzen. Aber es ist oft nicht so einfach. Wenn es um Hacks geht, lautet mein Rat:

1. Tun Sie alles in Ihrer Macht Stehende, innerhalb der Budget- und Zeitbeschränkungen des Projekts, um gültige, standardbasierte Cross-Browser-CSS zu schreiben, ohne Hacks zu verwenden.
2. Wenn Sie alle Wege erschöpft haben oder nicht über die Zeit oder das Budget verfügen, um das Problem mit gültigem, hackfreiem CSS zu beheben, dann verwenden Sie einen Hack.
3. Machen Sie beim Schreiben Ihrer Hacks so etwas wie das, was Harry Roberts empfiehlt, damit Ihre Hacks getrennt und leichter zu refaktoren, wenn Ihre Zeit und Ihr Budget es zulässt.
4. Fügen Sie immer Kommentare (oder Dokumentation) in den Hack ein und versuchen Sie, den Code so schnell wie möglich zu überarbeiten.

In Zusammenfassung

Wenn Sie sich aus diesem Beitrag an nichts anderes erinnern, denken Sie daran:

Ein CSS -Hack wendet CSS in einem oder mehreren spezifischen Browserversionen an, während dieselbe CSS von anderen Browsern ignoriert wird.

Das ist die einfache Definition eines CSS -Hacks. Nur weil Sie Microsoft Edge in Ihrem CSS unterstützen, heißt das nicht, dass Sie Hacks für Edge schreiben. Unterstützung ist ein ganz anderes Thema.

Es könnte ein paar Dinge in diesem Beitrag geben, mit denen nicht alle zustimmen, aber ich denke, die meisten Entwickler, die verstehen, was Hacks sind

Wenn ich etwas ausgelassen oder Fehler gemacht habe, können Sie mich in den Kommentaren informieren und die erforderlichen Korrekturen vornehmen.

häufig gestellte Fragen (FAQs) zu CSS -Hacks

Was ist der Zweck eines CSS -Hacks? Diese Hacks werden häufig verwendet, um Browser -Inkonsistenzen oder Einschränkungen zu überwinden. Beispielsweise kann ein Entwickler einen CSS -Hack verwenden, um sicherzustellen, dass eine Website in älteren Versionen von Internet Explorer korrekt angezeigt wird, was die neuesten CSS -Standards möglicherweise nicht vollständig unterstützt. Es ist jedoch wichtig, CSS -Hacks sparsam und nur dann bei Bedarf zu verwenden, da Sie Ihren Code komplexer und härter zu pflegen können. Verwenden Sie CSS -Selektoren oder Eigenschaften auf unkonventionelle Weise. Beispielsweise kann ein Entwickler einen CSS -Hack verwenden, um einen bestimmten Browser zu zielen, indem ein Fehler oder eine Funktion ausnutzt, die für diesen Browser einzigartig ist. Dies könnte die Verwendung einer CSS -Eigenschaft beinhalten, die nur von diesem Browser erkannt wird, oder einen CSS -Selektor auf eine Weise, die nur der Browser versteht. Wenn Sie CSS -Code sehen, der ungewöhnlich erscheint oder nicht der Standard -CSS -Syntax folgt, könnte es sich um einen CSS -Hack handeln. Bestimmte Situationen werden im Allgemeinen als schlechte Praxis angesehen. Dies liegt daran, dass sie Ihren Code schwieriger zu verstehen und aufrechtzuerhalten können und in verschiedenen Browsern ein unerwartes Verhalten verursachen können. Anstatt CSS -Hacks zu verwenden, ist es normalerweise besser, Standard -CSS -Techniken zu verwenden und Ihre Website so zu gestalten, dass sie in älteren Browsern anmutig verschlechtert werden.

Was sind einige gängige CSS -Hacks? Der „Stern -Hack“, der verwendet wird, um den Internet Explorer 7 und unten anzusprechen. Ein weiterer gängiger CSS -Hack ist der „Unterstrahlungshack“, mit dem ich im Internet Explorer 6 und unten abzielt.

Wie kann ich vermeiden, CSS -Hacks zu verwenden? Die Verwendung von CSS -Hacks bedeutet, Ihre Website auf eine Weise zu entwerfen, die mit allen wichtigen Browsern kompatibel ist. Dies kann die Verwendung eines CSS -Resets beinhalten, um sicherzustellen, dass Ihre Stile konsistent auf verschiedene Browser angewendet werden, und die Verwendung von CSS -Funktionen zu vermeiden, die nicht weit verbreitet sind. Darüber hinaus können Sie Tools wie Can ich verwenden, um die Browserkompatibilität verschiedener CSS -Funktionen zu überprüfen.

Was sind die Alternativen zu CSS -Hacks? Erkennungsbibliotheken wie Modernizr, um festzustellen, ob eine bestimmte CSS -Funktion vom Browser des Benutzers unterstützt wird. Sie können diese Informationen dann verwenden, um je nach Funktionen des Browsers verschiedene Stile oder Layouts anzuwenden. Eine andere Alternative besteht darin, CSS -Präprozessoren wie Sass oder weniger zu verwenden, mit denen Sie leistungsfähigere und wartbare CSS -Code schreiben können.

Wie kann ich mehr über CSS -Hacks erfahren? Online, wo Sie mehr über CSS -Hacks erfahren können. Websites wie CSS-Tricks und Smashing Magazine veröffentlichen häufig Artikel über CSS-Hacks und andere fortschrittliche CSS-Techniken. Darüber hinaus finden Sie viele Tutorials und Beispiele für CSS -Hacks auf Websites wie Codepen und JSFiddle.

Sind CSS -Hacks heute noch relevant? Heute weniger relevant, da moderne Browser verbessert werden. Es gibt jedoch immer noch Situationen, in denen ein CSS -Hack erforderlich sein könnte, z. Daher ist es immer noch nützlich zu verstehen, was CSS -Hacks sind und wie sie funktionieren.

Können CSS -Hacks die Leistung meiner Website beeinflussen? Wenn sie übermäßig verwendet werden. Dies liegt daran, dass sie Ihren CSS -Code komplexer und für den Browser analysieren können. Darüber hinaus beinhalten einige CSS -Hacks die Verwendung von CSS -Eigenschaften oder -Sektoren, die nicht für die Leistung optimiert sind.

Wie kann ich die Effektivität eines CSS -Hacks testen? Durch die Verwendung von Browser -Entwickler -Tools zur Überprüfung der auf ein Element angewendeten Stile. Sie können auch Online -Tools wie BrowsStack verwenden, um zu testen, wie Ihre Website in verschiedenen Browsern aussieht und sich verhält. Darüber hinaus können Sie automatisierte Testwerkzeuge wie Selen verwenden, um sicherzustellen, dass Ihre Website in einer Reihe von Browsern und Geräten korrekt funktioniert.

Das obige ist der detaillierte Inhalt vonWas ist die Definition eines 'CSS -Hacks'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!