12 wenig bekannte CSS-Fakten

CSS ist keine übermäßig komplexe Sprache. Aber selbst wenn Sie seit vielen Jahren CSS geschrieben haben, stoßen Sie wahrscheinlich immer noch auf neue Dinge - Eigenschaften, die Sie noch nie verwendet haben, Werte, die Sie nie in Betracht gezogen haben, oder Spezifikationsdetails, von denen Sie nie wussten.

In meinen Nachforschungen stoße ich die ganze Zeit auf neue kleine Tidbits, also dachte ich, ich würde einige von ihnen in diesem Beitrag teilen. Zugegeben, nicht alles in diesem Beitrag hat eine Menge unmittelbarer praktischer Wert, aber vielleicht können Sie einige davon für spätere Verwendung mental abgeben.

Key Takeaways

• Die Farbeigenschaft in CSS gilt nicht nur für Text. Es beeinflusst auch die Farbe des Alt -Textes auf fehlende Bilder, Grenzen auf Listenelementen, Aufzählungszeichen auf nicht ordnungsgemäß
Die Sichtbarkeitseigenschaft in CSS kann auf "Zusammenbruch" eingestellt werden. Dieser Wert funktioniert wie "versteckt" in allen Elementen, mit Ausnahme von Tabellenzeilen, Tabellenzeilengruppen, Tabellenspalten und Tabellenspaltengruppen, in denen er ähnlich wie "Anzeige: None" funktioniert. Die Browserhandhabung von „Zusammenbruch“ ist jedoch inkonsistent.
Die Hintergrundkurse -Eigenschaft in CSS enthält jetzt drei neue Werte zusätzlich zu den ursprünglichen fünf. Die neuen Werte sind Hintergrundgröße, Hintergrundorientier und Hintergrundclip.
Die Clip -Eigenschaft in CSS funktioniert nur an absolut positionierten Elementen. Das Element, auf das Sie Clip anwenden, muss absolut oder fest positioniert werden.
In CSS sind vertikale Prozentsätze relativ zur Behälterbreite, nicht zur Behälterhöhe. Dies gilt für Eigenschaften wie obere und untere Polsterung sowie obere und untere Ränder.

1. Die Farbeigenschaft ist nicht nur für Text

gedacht

Beginnen wir mit dem einfacheren Zeug. Die Farbeigenschaft wird von jedem CSS -Entwickler ausgiebig verwendet. Einige von Ihnen, die mit CSS nicht so erfahren sind, erkennen jedoch möglicherweise nicht, dass es nicht nur die Farbe des Textes definiert.

Schauen Sie sich die Demo unten an:

Siehe den Stift CTWFG von sitepoint (@sitepoint) auf CodePen.

Beachten Sie im CSS, nur eine Farbeigenschaft wird auf dem Körperelement verwendet und es in Gelb setzt. Wie Sie sehen können, ist alles auf der Seite gelb, einschließlich:

Der Alt -Text, der auf einem fehlenden Bild angezeigt wird

• der Grenze im Listenelement
• Die Kugel (oder Marker) in der ungeordneten Liste
• Der Zahlenmarker in der bestellten Liste
• Das HR -Element
• Interessanterweise erben das HR-Element standardmäßig nicht den Wert der Farbeigenschaft, aber ich musste es dazu zwingen, dies zu tun, indem ich Border-Color: Erben benutze. Dies ist eine Art seltsames Verhalten für mich.

all dies wird durch die Spezifikation verifiziert:

Diese Eigenschaft beschreibt die Vordergrundfarbe des Textes eines Elements
Inhalt. Außerdem wird es verwendet, um einen potenziellen indirekten Wert
bereitzustellen … Für alle anderen Eigenschaften, die Farbwerte akzeptieren.

Ich kann mir nichts anderes vorstellen, das sich als „Vordergrund“ qualifizieren würde, aber wenn Sie dies tun, lassen Sie es uns in den Kommentaren wissen.

2. Die Sichtbarkeitseigenschaft kann auf "Zusammenbruch" eingestellt werden

Sie haben wahrscheinlich hunderte Male die Sichtbarkeitseigentum verwendet. Die am häufigsten verwendeten Werte sind sichtbar (die Standardeinstellung für alle Elemente) und versteckt, was ein Element verschwindet, während er es noch zulässt, als ob es dort wäre (was anders als Anzeige ist: keine).

Ein dritter und selten verwendeter Wert für die Sichtbarkeitseigenschaft ist ein Zusammenbruch. Dies funktioniert genauso wie in allen Elementen, mit Ausnahme von Tabellenzeilen, Tabellenzeilengruppen, Tabellenspalten und Tabellenspaltengruppen versteckt. Bei diesen tabellbasierten Elementen soll ein Kollapswert ähnlich wie Anzeige funktionieren: Keine, so dass der von der zusammengebrochene Zeile/Spalte besetzte Raum durch andere Inhalte besetzt werden kann.

Leider ist die Art und Weise, wie Browser mit dem Zusammenbruch umgehen, nicht konsistent. Versuchen Sie die folgende Demo:

Siehe die Sichtbarkeit der Stift: Kollaps von sitepoint (@sinepoint) auf CodePen.

Die CSS-Tricks Almanac rät aufgrund der Browser-Inkonsistenzen niemals, dies zu verwenden.

aus meinen Beobachtungen:

• In Chrome macht es keinen Unterschied, wenn Sie einen Zusammenbruch oder versteckt anwenden (siehe diesen Fehlerbericht und Kommentare)
• In Firefox, Opera und IE11 scheint der Zusammenbruch genau so zu reagieren, wie sie sollte: Die Zeile wird entfernt und die Reihe unten bewegt sich nach oben.

zugegebenermaßen wird dieser Wert wahrscheinlich selten verwendet, aber er existiert. Wenn Sie also noch nicht davon wussten, denke ich, dass Sie jetzt in einer seltsamen Weise intelligenter sind.

3. Die Hintergrund -Shorthand -Eigenschaft hat neue Werte

In CSS2.1 enthielt die Eigenschaft im Hintergrund 5 Longhandwerte-Hintergrundfarbe, Hintergrund-Image, Hintergrundrepeat, Hintergrund-Einbindung und Hintergrundposition. In CSS3 und darüber hinaus enthält es jetzt drei weitere für insgesamt bis zu 8. So sind die Werte geordnet:

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

Beachten Sie den Vorwärtsschräger, ähnlich wie die Kurzschrift und der Grenzradius geschrieben werden können. Mit dem Schrägstrich können Sie nach der Position in den unterstützenden Browsern einen Wert für Hintergrundgröße einfügen.

Zusätzlich haben Sie bis zu zwei optionale Deklarationen für Hintergrundorientier und Hintergrund-Clip.

Also sieht die Syntax so aus:

<span><span>.example</span> {
</span>  <span>background: aquamarine <span>url(img.png)</span>
</span>              no-repeat
              scroll
              center center <span>/ 50%
</span>              content-box content-box<span>;
</span><span>}</span>

Testen Sie es in Ihrem Browser mit dieser Demo:

Siehe den Stift Neuen Hintergrund -Kurzwerte von SitePoint (@sinepoint) auf CodePen.

Was den Browserunterstützung angeht, scheinen diese neuen Werte in allen modernen Browsern gut zu funktionieren, aber es ist wahrscheinlich, dass Sie gute Fallbacks für nicht unterstützende Browser bereitstellen müssen, damit es sich anmutig verschlechtert.

4. Die Clip -Eigenschaft funktioniert nur auf absolut positionierten Elementen

Wenn Sie von Hintergrund-Clip sprechen, haben Sie wahrscheinlich auch Clip gesehen. Es sieht so aus:

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

Dies wird das Element an den angegebenen Orten (hier erklärt) "klappen". Die einzige Einschränkung ist, dass das Element, auf das Sie Clip auftragen, unbedingt positioniert werden muss. Sie müssen das also tun:

<span><span>.example</span> {
</span>  <span>background: aquamarine <span>url(img.png)</span>
</span>              no-repeat
              scroll
              center center <span>/ 50%
</span>              content-box content-box<span>;
</span><span>}</span>

Sie können sehen, wie Clip in der folgenden Demo deaktiviert ist, wenn Position: Absolute umgeschaltet ist:

Siehe den Stift Sifju von sitepoint (@sitepoint) auf CodePen.

Sie können das Element auch auf Position setzen: Behoben, da nach den Spezifikationselementen auch festgelegte Elemente als „absolut positionierte“ Elemente gilt.

5. Vertikale Prozentsätze sind relativ zur Behälterbreite, nicht zur Höhe

Dieser ist zunächst ein bisschen verwirrend, über das ich zuvor geschrieben habe. Während Sie vielleicht wissen, dass die prozentualen Breite basierend auf der Breite des Behälters berechnet werden, werden die Prozentsätze für Eigenschaften wie die Ober- und Bodenpolsterung sowie die oberen und unteren Ränder auch basierend auf der Breite des Behälters und nicht der Höhe berechnet.

Hier ist ein Beispiel, das Sie mit einem Range Slider einstellen können, sodass Sie den Effekt sehen können:

Siehe den Stift QLNPM von SitePoint (@sitepoint) auf CodePen.

Beachten Sie, dass in der Innenkiste (obere und untere Polsterung und unterer Rand) 3 „vertikale“ Prozentsätze vorliegen. Wenn sich der Schieberegler bewegt, ändert er nur die Containerbreite. Die anderen Werte ändern sich jedoch, wie die Ausgabe auf der Seite zeigt, dass diese Werte, wenn sie als Prozentsätze deklariert werden, auf der Containerbreite basieren.

6. Die Grenzeigenschaft ist ähnlich wie Inception

wir haben das alle irgendwann gemacht:

<span><span>.example</span> {
</span>    <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>

Das Grenzeigentum ist ein Kurzeigeneignis, das Grenzstil, Grenzbreit und Grenzfarbe festlegt-alles in einer einzigen Erklärung.

Aber vergessen Sie nicht, dass jede der Eigenschaften, die die Grenzeigenschaft darstellt, selbst ein Kurzeigeneignis ist. So kann allein grenzüberschreitend deklariert werden:

<span><span>.example</span> {
</span>    <span>position: absolute;
</span>    <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>

Dies setzt für jede der vier Grenzen unterschiedliche Breiten. Das Gleiche gilt für Grenzfarben und Grenzstil, wie in dieser schrecklichen Demo gezeigt:

Siehe den Stift mehrere Grenz -Kurzwälder von sitepoint (@sinepoint) auf CodePen.

Zusätzlich kann jede dieser Eigenschaften mit Grenz-Links-Stil, Grenzbreite, Grenzbodenfarbe usw. noch weiter abgebaut werden.

Aber der Haken ist, dass Sie die reguläre Grenz -Kurzform nicht verwenden können, um verschiedene Werte für verschiedene Seiten festzulegen. Es ist also Kurzform in der Kurzform in der Kurzform, aber nicht genau.

7. Die Textdekoration ist jetzt eine Kurzform

Ich wusste, dass etwas auf dieser Liste dich umhauen würde.

Dies ist jetzt Standard gemäß der Spezifikation:

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

Diese Eigenschaft repräsentiert jetzt 3 Eigenschaften: Textdekorationslinie, Textdekoration und Textdekoration.

Leider ist Firefox der einzige Browser, der diese neuen Eigenschaften unterstützt, und (ich nehme an, für die Rückwärtskompatibilität), unterstützt sie noch nicht in der Kurzform.

Versuchen Sie die Demo unten in Firefox:

Siehe den Stift von SitePoint (@sitepoint) auf CodePen.

Die Demo verwendet dazu die Langhandwerte. Dies wird letztendlich schwierig sein, da derzeit jeder Browser, der einen zusätzlichen Wert in der Textabteilung sieht

8. Die Rand-Breiten-Eigenschaft akzeptiert Keyword-Werte

Nicht genau erdschüttelnd, und dies ist nicht neu, aber zusätzlich zu den Standardlängenwerten (z. B. 5px oder 1EM) akzeptiert die Rand-Breiten-Eigenschaft drei Schlüsselwortwerte: mittel, dünn und dick.

in der Tat ist der Anfangswert der Rand-Breiten-Eigenschaft „mittel“. Die folgende Demo verwendet "dick":

Siehe das Schlüsselwort "Dicke" von SitePoint (@sinepoint) auf CodePen.

Wenn Browser diese Schlüsselwortwerte rendern, erfordert die Spezifikation nicht, dass sie sie auf bestimmte Längenwerte zuordnen, aber nach dem, was ich sehen kann, scheinen alle Browser 1px, 3px und 5px zu verwenden.

9. Niemand verwendet Grenzbild

Ich schrieb vor einiger Zeit über das CSS3-Border-Image-Eigentum auf SitePoint. Die Funktion wird in allen modernen Browsern mit Ausnahme IE10 und unten unterstützt. Aber kümmert sich jemand?

Es scheint eine wirklich ordentliche Funktion zu sein, die es Ihnen ermöglicht, Grenzbilder zu erstellen, die flüssig sind. Verwenden Sie den Größengriff in dieser Demo, um sie zu testen:

Siehe die Demo von SitePoint (@sinepoint) auf CodePen.

Leider scheint das Grenzbild eine Neuheit zu sein, die nicht viele Menschen verwenden. Aber vielleicht irre ich mich. Wenn Sie Beispiele für das in einem echte Projekt verwendete Grenzbild kennen, oder wenn Sie es verwendet haben, teilen Sie uns dies bitte in den Kommentaren mit und ich werde gerne zugeben, dass ich mich geirrt habe.

10. Es gibt eine Eigenschaft mit leeren Zellen

Dieser hat überall Unterstützung, einschließlich IE8, und es sieht so aus:

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

Wie Sie wahrscheinlich herausgefunden haben, wird es für HTML -Tabellen verwendet. Es sagt dem Browser, ob er Tabellenzellen anzeigen oder verbergen soll, die keinen Inhalt enthalten. Versuchen Sie die Schaltfläche "Umschalten" in dieser Demo, um den Effekt des Änderns des Wertes der Eigenschaft mit leeren Zellen zu sehen:

Siehe den Stift leere Zellen von SitePoint (@sinepoint) auf CodePen.

In diesem Fall musste ich sicherstellen, dass die Grenzen sichtbar waren und nicht zusammengebrochen waren und ich einen gewissen Abstand zwischen den Zellgrenzen hinzufügen musste. In einigen Fällen hätte diese Eigenschaft keinen visuellen Effekt, da auf der Tabelle etwas sichtbar ist, um einen Unterschied zu machen.

11. Die Eigenschaft im Schriftarten im Stil akzeptiert einen Wert von „schräg“

Fast jedes Mal, wenn Sie die Eigenschaft im Schriftart sehen, wird sie entweder mit einem Wert von "normal" oder "kursiv" verwendet. Sie können ihm aber auch einen Wert von „schrägen“ geben:

Siehe den Stift Italic vs. Schräg von sitepoint (@sinepoint) auf CodePen.

Aber was genau bedeutet das? Und warum sieht es genauso aus wie kursiv?

Die Spezifikation erklärt, dass der Wert „schräg“…

"… Wählt eine Schriftart aus, die als schräge Gesicht oder kursives Gesicht bezeichnet wird, wenn man es nicht ist."

Die Beschreibung von „kursiv“ in der Spezifikation ist im Grunde dasselbe. Das Wort „schräg“ ist ein typografischer Begriff, der im Grunde genommen einen schrägen Text darstellt, aber kein wahrer Kursiv.

Aufgrund der Art und Weise, wie CSS schrägen Text umgeht, ist er kursiv austauschbar, es sei denn (wie die Spezifikation erklärt) die verwendete Schrift hat ein Gesicht, das als schräg identifiziert wird.

Ich habe noch nie von einer Schrift gehört, die tatsächlich ein schräge Gesicht hat, aber vielleicht irre ich mich. Aus den Forschungen, die ich durchgeführt habe, scheint es für eine Schriftart falsch zu sein, sowohl kursiv als auch schräge Gesichter anzubieten, da Schräge eine fauxe Version von Italic auf Schriftarten sein soll, die keine wahre Italic haben.

Wenn ich mich nicht irre, bedeutet dies, wenn eine Schriftart kein echtes kursives Gesicht hat und das CSS in Schriftstil stellt: Italic wird die Schriftart tatsächlich als Schriftstil angezeigt: schräg.

12. Die Wortschreibe entspricht der Überlaufschreibe

Die Word-Wrap-Eigenschaft wird nicht zu oft verwendet, ist jedoch unter bestimmten Umständen sehr nützlich. Ein oft verwendetes Beispiel ist es, lange, ungebrochene Textzeichen (wie URLs) zu helfen, zu wickeln, anstatt aus ihrem Behälter auszubrechen. Hier ist ein Beispiel:

Siehe die Demo der Stift-Word-Wrap von SitePoint (@sinepoint) auf CodePen.

Da dies ursprünglich eine Microsoft -Erstellung war, wird diese Eigenschaft in allen Browsern, einschließlich des Internet Explorer, bis zu IE5.5 unterstützt.

Trotz des Querbrowsers und nach dem, was ich sehen kann, entschied sich der W3C, die Wortschrift durch Überlaufschreiber zu ersetzen-ich vermute, dass der frühere Name als Fehlbezeichnung angesehen wird. Die Überlaufschaltung hat die gleichen Werte wie Word-Wrap, und Word-Wrap wird jetzt als "alternative Syntax" für Überlaufschreiber betrachtet.

Während ein paar neue Browser über die Überlauf-Wrap unterstützen, scheint es sinnlos zu sein, sich darum zu kümmern, da alte Browser mit Wortschreiber gut umgehen, und alle Browser müssen aus Legacy-Gründen weiterhin auf unbestimmte Zeit unterstützen.

.

.

Wir können über die Überlaufschaltung beginnen, wenn alle in den Gebrauchsgebrauch automatischen Browser aktualisieren.

Wie viele davon waren für Sie neu?

Hast du etwas aus diesem Beitrag gelernt? Ich hoffe es. Wahrscheinlich kannten die meisten erfahrenen CSS -Entwickler viele, wenn nicht alle der oben genannten Punkte. Aber wahrscheinlich würden die neueren zu CSS mehr davon profitieren.

Es wäre interessant zu sehen, wie viele dieser Punkte für unsere Leser neu waren. Veröffentlichen Sie einen Kommentar unten, der uns mitteilt, wie viele für Sie neu waren (z. B. 6/12, 4/12 oder was auch immer).

Nehmen Sie Lasten mehr CSS -Hinweise und Tipps mit einer lernbaren Mitgliedschaft auf. Sie erhalten Zugang zu Dutzenden von Büchern und Kursen, darunter Bestseller wie Sprung Start CSS , Die CSS-Anthologie und mehr.

häufig gestellte Fragen (FAQs) zu CSS

Was sind einige einzigartige Eigenschaften von CSS, die nicht allgemein bekannt sind? Zum Beispiel verfügt CSS über eine Eigenschaft mit dem Namen "Calc", mit der Sie Berechnungen durchführen können, um die CSS -Eigenschaftswerte zu bestimmen. Dies kann unglaublich nützlich für reaktionsschnelles Design sein. Eine andere weniger bekannte Eigenschaft ist „CH“, die für Zeichen steht und zum Festlegen von Breiten und anderen Messungen in Bezug auf die Breite des „0“ -Charnzeichens der verwendeten Schriftart verwendet werden kann.

Können CSS verwendet werden, um Animationen zu erstellen? Mit der Immobilie "Animation" in CSS können Sie fast jede Immobilie animieren. Sie können die Dauer, die Zeitfunktion, die Verzögerung, die Anzahl der Iteration, die Richtung, den Füllmodus und den Spielstatus der Animation steuern. Dies kann ein leistungsstarkes Tool zur Verbesserung der Benutzererfahrung auf einer Website sein. Dies kann in Situationen nützlich sein, in denen Sie eine Konsistenz über Elemente hinweg sicherstellen möchten oder wenn Sie Ihren CSS -Code durch Reduktion der Redundanz vereinfachen möchten.

Was ist der Zweck der Eigenschaft "Z-Index" in CSS? Elemente mit einem höheren Z-Index-Wert werden über Elemente mit einem niedrigeren Z-Index-Wert erscheinen. Dies kann besonders nützlich sein, wenn es um überlappende Elemente geht, z. B. in einem komplexen Layout oder beim Erstellen eines Modal- oder Dropdown -Menüs. Sie können CSS verwenden, um das Erscheinungsbild von Textfeldern, Kontrollkästchen, Quartalschaltflächen und anderen Formulareingängen zu steuern. Dies kann ein leistungsstarkes Werkzeug sein, um die Benutzerfreundlichkeit und Ästhetik von Formularen auf einer Website zu verbessern. Standardmäßig beinhaltet die Breite und Höhe eines Elements keine Polsterung und Grenzen. Indem Sie jedoch die Eigenschaft "Boxgröße" auf "Border-Box" einstellen, können Sie Polsterung und Grenzen in die Breite und Höhenberechnung einbeziehen.

Wie funktioniert die Eigenschaft "Float" in CSS? Dies kann nützlich sein, um Text-Wraps um Bilder oder zum Erstellen von Multi-Säulen-Layouts zu erstellen.

Was ist das "Ansichtsfenster" in CSS? Sie können die Einheiten von "VW" (Ansichtsfenster) und "VH" (Ansichtsfenster) in CSS verwenden, um Elemente im Verhältnis zum Ansichtsfenster zu beschaffen. Dies kann besonders nützlich sein, um reaktionsschnelle Designs zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen.

Können CSS zum Erstellen von Gradienten verwendet werden? Mit den Funktionen „Linear-Gradient“ und „radial-Gradient“ in CSS können Sie glatte Übergänge zwischen zwei oder mehr Farben erstellen. Dies kann ein leistungsstarkes Werkzeug sein, um die Ästhetik einer Website zu verbessern. Zum Beispiel werden die Pseudo-Elemente ":: vor" und ":: After" verwendet, um Inhalte vor oder nach dem Inhalt eines Elements einzufügen. Dies kann nützlich sein, um einer Website dekorative Funktionen hinzuzufügen.

Das obige ist der detaillierte Inhalt von12 wenig bekannte CSS-Fakten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!