Sie haben vielleicht kürzlich von Grid Style Sheets (GSS) in der Welt von HTML und CSS geh?rt. GSS stellt das CSS-Layout des CSS erneut vor und ersetzt die Layout-Engine des Browsers durch einen, der den Casowary Constraint Solver nutzt. Diejenigen von Ihnen, die ein Wort davon nicht verstanden haben ... Hallo und willkommen!

gSS verspricht eine bessere Zukunft. GSS verspricht relative Positionierung und Gr??e. GSS verspricht, jedes Element in einem anderen mit einer Codezeile zu zentrieren. Und GSS liefert. Die Frage ist: Wie?

In diesem Artikel werde ich eine kurze Geschichte von GSS und einen umfassenden überblick über die Funktionen ergeben, die sie zu bieten hat. Ich werde mir auch GSS für einschr?nkende Layouts, den Cassowary Constraint-Algorithmus, ansehen und Sie durch den Prozess der Installation und Verwendung von GSS führen.

Diejenigen unter Ihnen, die lieber nicht warten würden, bis die W3C oder die Browser aufholen, ich fordere Sie auf, sich dort einzuhalten und genau darauf zu achten, w?hrend ich das Geheimnis erkl?re, das GSS ist. Beginnen wir in diesem Sinne mit einer kleinen Geschichte.

Key Takeaways

Eine kurze Geschichte

GSS ist eine Schaffung des Netzes mit Dan Tocchini als Gründer und CEO. Dies antwortet, warum die nicht ganz so netzbasierten Stilbl?tter als Grid-Stilbl?tter bezeichnet werden.

Der Krieg zwischen Webentwicklern und Front-End-Technologie, um Ideen im Web zu pr?sentieren, dauert seit Jahren. CSS hat sich in den letzten zehn Jahren als triumphierend erwiesen. Das Erstellen immer komplexerer Benutzeroberfl?chen mit Tools, die sich nicht mit der Zeit entwickelt haben, wird von Webentwicklern regelm??ig erwartet. Zum Beispiel war vertikal ein Element mit CSS nicht die einfachste Aufgaben, insbesondere bei Elementen der variablen H?he.

Flexbox ist eine der neuesten L?sungen, aber selbst kleine ?nderungen müssen dort in Ihren HTML -Inhalt und CSS -Pr?sentation gehen und ?nderungen vornehmen.

Es ist Zeit für GSS, die Arena zu nehmen. GSS befasst sich mit diesen und vielen weiteren Problemen - Probleme, die Entwickler seit über einem Jahrzehnt haben.

im Wesentlichen ist GSS ein CSS -Pr?prozessor und eine JavaScript -Laufzeit, die Cassowary.js ausnutzt. Diejenigen von Ihnen, die es noch nicht wissen, Cassowary.js ist der JavaScript -Port, den Apple in Cocoa Autolayout verwendet.

Sowohl GSS als auch Cassowary basieren auf der Einschr?nkungsprogrammierung, was es ideal für die St?rkung von deklarativen Sprachen wie CSS macht. Die Einschr?nkungsprogrammierung ist ein Paradigma, mit dem Webentwickler sich mit der Erkl?rung des ?Was“ befassen und das ?Wie“ einem mathematischen L?ser überlassen.

Einschr?nkungsprogrammierung konzentriert sich auf Absichten, nicht auf die Implementierung.

Jetzt, da wir einige Hintergrundinformationen festgelegt haben, gehen wir mit den Funktionen GSS über.

überblick über GSS

Eines der gr??ten Probleme mit CSS ist die Relativit?tstheorie. Sie k?nnen erwarten, dass jedes CSS -Element eine unendliche Liste von Eigenschaften hat - Auffüllung, H?he, Breite, Schwimmer, R?nder, Grenzen, Umrisse -, aber keine dieser Informationen sagt uns, wo sich das Element unter Bezugnahme auf andere Elemente auf der Seite befindet (( oder sogar die Seite als Ganzes). Die endlose Liste antwortet auch nicht, wo das Element mit unterschiedlichen Bildschirmgr??en angezeigt wird.

Dies bringt uns zum ersten Feature von GSS: Sie definieren, was das Layout sein soll. Vorbei sind die Tage, in denen unz?hlige Stunden Versuch und Irrtum verbringen, und strategisch, wie das Layout konstruiert werden sollte.

Da wir bereits diskutiert haben, dass GSS Cassowary.js verwendet, ist hier ein weiteres gro?artiges Merkmal von GSS: Ein Element kann in jedem anderen mit einer Codezeile zentriert werden. Dies macht viele Problemumgehungen unn?tig und Dinge der Vergangenheit.

Wenn Sie beispielsweise eine Taste von Abonnieren in der Linie mit beispielsweise einer überschrift auf der rechten Seite der Seite Ihrer Website hinzufügen m?chten, verwenden Sie den folgenden Code:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Ein weiteres Merkmal: GSS macht Schwimmer, Tabellenzellen, ClearFix und horizontale/vertikale Zentrierung veraltet. Bieten Sie Abschied von der gef?hrlichen Gefahr, die ein Schwimmer ist, weil wir das W3C selbst haben, dass Schwimmer nicht ideal für Anwendungslayouts sind.

?Wenn sich Websites aus einfachen Dokumenten in komplexe, interaktive Anwendungen entwickelt haben, Tools für Dokumentlayout, z. Floats, waren nicht unbedingt für das Anwendungslayout gut geeignet. “
- W3C Grid Layout -Modul (Arbeitsentwurf)

Was ist mit CSS -Funktionen wie! Wichtig? Das vierte Merkmal von GSS macht etwas ?hnliches: GSS verwendet eine Einschr?nkungshierarchie, um Einschr?nkungen mit St?rken zu priorisieren. Wir sprechen hier über vier eingebaute Kraftstufen:

• ! Schwach
• ! Medium
• ! Strong
• ! Erfordern

Beachten Sie, dass! Erfordernis ist eine spezielle St?rke, die sicherstellt, dass die Einschr?nkung gilt und wenn dies nicht der Fall ist, bricht alles. Es ist ratsam, es sorgf?ltig und selten zu verwenden.

Die St?rke steigt die Liste um und st?rkere Einschr?nkungen haben eine h?here Priorit?t w?hrend der Ausführung. Schauen wir uns ein Beispiel an:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Sie haben es so weit geschafft, schauen wir uns jetzt einige einschr?nkende Layouts an.

GSS für einschr?nkende Layouts

Einschr?nkungen sind grunds?tzlich Beziehungen zwischen zwei oder mehr Variablen, die m?glicherweise gelten oder nicht. Alle numerischen Eigenschaften von Elementen qualifizieren sich als eingeschr?nkt. Hier ist ein Beispiel:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

• p wird als Selector
bezeichnet
• Zeilenh?he ist die Eigenschaft, dass GSS einen Wert für
berechnet wird
• [] wird verwendet, um auf die Eigenschaft zuzugreifen
• = Ungleichheitsbeschr?nkungen
definieren
• 10 und 20 sind numerische Werte in Pixel

In dem oben angegebenen Beispiel gelten beide Einschr?nkungen gültig. Hier ist ein Beispiel für Einschr?nkungen, die nicht gelten.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Anfangs sind beide Elemente Elementa und ElementB auf eine H?he von 150px eingeschr?nkt. In der dritten Zeile betr?gt die Summe der beiden Elemente 225px. Daher wird eine der Einschr?nkungen des beiden Elements nicht gelten.

Selektoren in GSS

Selektoren in GSS sind Abfragen über eine Gruppe von HTML -Elementen und werden verwendet, um die Elemente zu bestimmen, die letztendlich von der Einschr?nkung beeinflusst werden. Selektoren sind wichtig, da Sie Elemente aus dem DOM ausw?hlen und beobachten müssen, bevor Sie Einschr?nkungen auf diese anwenden.

Die folgenden grundlegenden Selektoren werden von GSS unterstützt.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Regeln in GSS

Regeln k?nnen Sie mehrere Einschr?nkungen über einen einzelnen Selektor definieren. Sie k?nnen sie nisten und auch CSS -Eigenschaften verwenden.

Dieser verschachtelte Regeln:

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

ist dasselbe wie:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Eigenschaften in GSS

Ich habe in den obigen Beispielen bereits Eigenschaften abgedeckt, aber schauen wir sie uns etwas genauer an. In GSS sind Eigenschaften die Variablen, die zu einem Element geh?ren. Wenn wir Eigenschaften verwenden, die durch CSS bekannt sind, wird ihr entsprechender GSS-kalkulierter Wert als Inline-Stil auf dem Element zugewiesen.

Etwas wie folgt:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

w?re gleich:

<span>(section < article .aclass)[height] == 150;</span>

Eine Einführung in den Kasowary -Einschr?nkungalgorithmus

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

GSS

<span><span>.container</span> {
</span>  &[height] == #elm[height]<span>;
</span><span>}</span>

<span>/* this expression is not linear */
</span>#elementa[height] <span>* #elementb[width] == newElement;</span>

Sobald Sie GSS installiert haben, laden Sie Ihre .GSS -Stylesheets, indem Sie type = text/gSS auf einem -Tag hinzufügen:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

oder ein Element:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Sobald Sie alles in Betrieb haben, k?nnen Sie mit einigen Code -Beispielen beginnen. Unten werde ich ein Anf?nger -Tutorial durchgehen.

Ein GSS -Anf?nger -Tutorial

Die Beispiele, die ich erstellen werde, werden über CodePen angezeigt, aber ich werde das Tutorial wie ein Standard -HTML -Dokument durchlaufen. Zuerst füge ich meinem HTML die folgende Codezeile hinzu, um das GSS -Engine -Skript hinzuzufügen:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Ich werde eine CodePen-veranstaltete Version der Datei verwenden, aber Sie finden hier eine CDN-veranstaltete Version. Als n?chstes füge ich den folgenden Code im GSS -Referenzskript (die Zeile, die ich oben hinzugefügt habe) GSS an das Dokumentobjekt hinzu.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Wenn Sie es vorziehen, kann dies in einer separaten JavaScript -Datei platziert werden, die nach dem Engine -Skript enthalten ist.

Beispiel 1: vertikal ein Element

Ich erstelle einen DIV und füge einige Text in H2 -Tags im GSS -Layout ein und füge diese dem HTML hinzu:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Nach dem Hinzufügen eines grundlegenden Stylings kann ich einige GSS hinzufügen, um das Layout zu erstellen. Hier beginnt der Spa?.

Mein Ziel ist es, das .foo -Element im Ansichtsfenster trotz seiner Gr??e vertikal zu zentrieren und die gleiche Ausrichtung beizubehalten, auch wenn sich die Gr??e des Elements ?ndert.

Hier sind die Einschr?nkungen, die ich bewerben werde, um dieses Ziel zu erreichen:

• Verwenden Sie den :: Fensterw?hlers, um das Element mit dem sichtbaren Teil der Seite im Browser zu zentrieren.
• use :: [Intrinsic-Height] Attribut, um einen relativen Wert der H?he des Elements zu erhalten, mit dem die relative Breite ermittelt wird.

Zun?chst füge ich dem HTML einen

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

a Block ist notwendig, um die GSS zu definieren, die ich hinzufügen werde. Ich werde das Element in der Mitte des Bildschirms positionieren, indem ich den folgenden Code in den

<span>(section < article .aclass)[height] == 150;</span>

Und das ist alles, was erforderlich ist. Das Element wird jetzt mit GSS vertikal zentriert (mit dynamischer H?he) zentriert. Unten finden Sie die Demo:

Siehe die vertikale Stift -Zentrierung mit GSS von SitePoint (@sinepoint) auf CodePen.

Versuchen Sie die Vollbild -Demo und versuchen Sie, den Browser vertikal zu ?ndern, um das Element in jeder Fenstergr??e zentriert zu werden.

Beispiel 2: Elementdrehung basierend auf dynamisch ?ndernder Fensterbreite

Für dieses n?chste Beispiel erstelle ich eine einfache farbige quadratische Form und lasse sie dynamisch drehen. Lassen Sie uns zuerst GSS starten, indem wir die folgenden Codezeilen im Abschnitt des Dokuments hinzufügen:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Beachten Sie, dass Sie den obigen Code bearbeiten müssen, um auf den richtigen Speicherort für die Dateien zu verweisen. Hier k?nnen Sie die Datei Worker.js und die GSS.js -Datei hier erhalten.

Hinweis: Aufgrund einiger Fehler weisen die obigen Dateipfade auf Pre-2.0.0-Versionen von GSS hin, damit dies funktioniert.

Lassen Sie uns nun die quadratische Form erstellen, indem wir diese zum HTML hinzufügen:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

… und fügen Sie es in der CSS ein, um es zu gestylen:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Jetzt gehe ich zurück zum HTML und füge einige GSS -Einschr?nkungen hinzu.

Denken Sie daran, dass Sie mit GSS einfach eine Absicht machen und die mathematische Berechnung dem Algorithmus überlassen. In diesem Beispiel versuche ich, eine Einschr?nkung zwischen dem Element und dem Fenster zu erstellen, durch das eine Rotation im Element erzeugt wird, wenn sich die Breite des Fensters dynamisch ?ndert.

Hier sind die Einschr?nkungen, die ich bewerben werde, um dieses Ziel zu erreichen:

• Verwenden Sie das :: Fenster [Mitte], um das Element zu zentrieren, das sich den sichtbaren Teil der Seite im Browser befindet.
• verwenden :: Fenster [Breite], um eine Einschr?nkung mit Dreh-Z zu erstellen, die den Rotationseffekt auf das Element um seine Z-Achse erzeugt. Hier repr?sentiert der Wert aus :: Fenster [Breite] den Rotationsgrad.

Ich füge dem HTML einen Stilblock mit einem auf Text/GSS festgelegten Typ hinzu, wie ich es im ersten Beispiel getan habe. Denken Sie daran, dass ein Stilblock erforderlich ist, um die GSS zu definieren, die ich hinzufügen werde.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Ich werde das Quadratfeld mit dem Bildschirm mit GSS -Einschr?nkungen verbinden, indem ich den folgenden Code in den Style -Tags hinzufüge:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

und damit ist es getan. Schauen Sie sich die endgültige Codepen -Demo an:

Siehe die dynamische Pen -Rotation mit GSS von SitePoint (@sinepoint) auf CodePen.

Wenn Sie die Vollbild -Demo anzeigen, versuchen Sie, das Fenster zu ?ndern. Sie werden feststellen, dass die Quadratbox die Rotationsposition ?ndert, wenn die Breite des Fensters ge?ndert wird.

Die Zukunft von GSS

Die Zukunft von GSS sieht vielversprechend aus. Es ist an der Zeit, dass wir uns mit Front-End-Technologie vorantreiben. Ich schlage vor, dass Sie auf kleineren Prototypen üben, bevor Sie Ihre gesamte Stylesheet -Bibliothek auseinander rei?en.

Was ich hier behandelt habe, ist nur ein kleines Beispiel von dem, was Sie mit GSS machen k?nnen, aber ich hoffe, dass Sie dieses Tutorial hilfreich und informativ gefunden haben, um Ihnen den Einstieg zu erlangen.

Haben Sie GSS schon verwendet? Wie war deine Erfahrung? Lassen Sie mich im Kommentarbereich wissen.

h?ufig gestellte Fragen zu GSS (Grid Style Sheets)

Was sind GSS (Grid Style Sheets)? Es handelt sich um eine einschr?nkende Layout-Engine, mit der Sie mithilfe einer einfachen und intuitiven Syntax reaktionsschnelle und flexible Layouts erstellen k?nnen. GSS erweitert das traditionelle CSS -Modell durch Einführung des Konzepts von Einschr?nkungen, mit dem Sie Beziehungen zwischen Elementen definieren und ihr Verhalten auf eine pr?zisere und flexiblere Weise kontrollieren k?nnen.

Ist GSS Open Source?

Ja, GSS ist ein Open-Source-Projekt. Dies bedeutet, dass jeder zu seiner Entwicklung beitragen und kostenlos in seinen Projekten nutzen kann. Der Quellcode für GSS ist auf GitHub verfügbar. Die leistungsstarken Merkmale und das wachsende Interesse an einem begrenzten Layout deuten jedoch darauf hin, dass es eine vielversprechende Zukunft hat. Da immer mehr Entwickler GSS übernehmen, k?nnen wir erwarten, dass diese innovative Technologie mehr Ressourcen, Tools und Community -Unterstützung sehen.

GSS stellt Schwimmer, Tabellenzellen, ClearFix und horizontale/vertikale Zentrierung veraltet und verwendet die Einschr?nkung der Hierarchie, um Einschr?nkungen mit St?rken zu priorisieren und vier eingebaute Festigkeitsniveaus anzubieten :! Schwach,! Medium,! Stark und! Erfordernis.
GSS verwendet den L?sungsalgorithmus für lineare lineare arithmetische Einschr?nkungen, um optimale L?sungen für Layouts zu finden, basierend auf Eingabebeschr?nkungen,
Um mit GSS zu beginnen, muss es über Bower installiert oder über GitHub als ZIP -Datei heruntergeladen werden. Anschlie?end k?nnen GSS -Stylesheets geladen werden, indem Sie type = text/gss auf einem
• Tag oder mit einem
addiert werden k?nnen.
Eine kurze Geschichte
• GSS ist eine Schaffung des Netzes mit Dan Tocchini als Gründer und CEO. Dies antwortet, warum die nicht ganz so netzbasierten Stilbl?tter als Grid-Stilbl?tter bezeichnet werden.
Der Krieg zwischen Webentwicklern und Front-End-Technologie, um Ideen im Web zu pr?sentieren, dauert seit Jahren. CSS hat sich in den letzten zehn Jahren als triumphierend erwiesen. Das Erstellen immer komplexerer Benutzeroberfl?chen mit Tools, die sich nicht mit der Zeit entwickelt haben, wird von Webentwicklern regelm??ig erwartet. Zum Beispiel war vertikal ein Element mit CSS nicht die einfachste Aufgaben, insbesondere bei Elementen der variablen H?he.

Flexbox ist eine der neuesten L?sungen, aber selbst kleine ?nderungen müssen dort in Ihren HTML -Inhalt und CSS -Pr?sentation gehen und ?nderungen vornehmen.

im Wesentlichen ist GSS ein CSS -Pr?prozessor und eine JavaScript -Laufzeit, die Cassowary.js ausnutzt. Diejenigen von Ihnen, die es noch nicht wissen, Cassowary.js ist der JavaScript -Port, den Apple in Cocoa Autolayout verwendet.

Sowohl GSS als auch Cassowary basieren auf der Einschr?nkungsprogrammierung, was es ideal für die St?rkung von deklarativen Sprachen wie CSS macht. Die Einschr?nkungsprogrammierung ist ein Paradigma, mit dem Webentwickler sich mit der Erkl?rung des ?Was“ befassen und das ?Wie“ einem mathematischen L?ser überlassen.

Einschr?nkungsprogrammierung konzentriert sich auf Absichten, nicht auf die Implementierung.

Jetzt, da wir einige Hintergrundinformationen festgelegt haben, gehen wir mit den Funktionen GSS über.

überblick über GSS

Eines der gr??ten Probleme mit CSS ist die Relativit?tstheorie. Sie k?nnen erwarten, dass jedes CSS -Element eine unendliche Liste von Eigenschaften hat - Auffüllung, H?he, Breite, Schwimmer, R?nder, Grenzen, Umrisse -, aber keine dieser Informationen sagt uns, wo sich das Element unter Bezugnahme auf andere Elemente auf der Seite befindet (( oder sogar die Seite als Ganzes). Die endlose Liste antwortet auch nicht, wo das Element mit unterschiedlichen Bildschirmgr??en angezeigt wird.

Dies bringt uns zum ersten Feature von GSS: Sie definieren, was das Layout sein soll. Vorbei sind die Tage, in denen unz?hlige Stunden Versuch und Irrtum verbringen, und strategisch, wie das Layout konstruiert werden sollte.

Da wir bereits diskutiert haben, dass GSS Cassowary.js verwendet, ist hier ein weiteres gro?artiges Merkmal von GSS: Ein Element kann in jedem anderen mit einer Codezeile zentriert werden. Dies macht viele Problemumgehungen unn?tig und Dinge der Vergangenheit.

Wenn Sie beispielsweise eine Taste von Abonnieren in der Linie mit beispielsweise einer überschrift auf der rechten Seite der Seite Ihrer Website hinzufügen m?chten, verwenden Sie den folgenden Code:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Ein weiteres Merkmal: GSS macht Schwimmer, Tabellenzellen, ClearFix und horizontale/vertikale Zentrierung veraltet. Bieten Sie Abschied von der gef?hrlichen Gefahr, die ein Schwimmer ist, weil wir das W3C selbst haben, dass Schwimmer nicht ideal für Anwendungslayouts sind.

?Wenn sich Websites aus einfachen Dokumenten in komplexe, interaktive Anwendungen entwickelt haben, Tools für Dokumentlayout, z. Floats, waren nicht unbedingt für das Anwendungslayout gut geeignet. “
- W3C Grid Layout -Modul (Arbeitsentwurf)

Was ist mit CSS -Funktionen wie! Wichtig? Das vierte Merkmal von GSS macht etwas ?hnliches: GSS verwendet eine Einschr?nkungshierarchie, um Einschr?nkungen mit St?rken zu priorisieren. Wir sprechen hier über vier eingebaute Kraftstufen:

• ! Schwach
• ! Medium
• ! Strong
• ! Erfordern

Beachten Sie, dass! Erfordernis ist eine spezielle St?rke, die sicherstellt, dass die Einschr?nkung gilt und wenn dies nicht der Fall ist, bricht alles. Es ist ratsam, es sorgf?ltig und selten zu verwenden.

Die St?rke steigt die Liste um und st?rkere Einschr?nkungen haben eine h?here Priorit?t w?hrend der Ausführung. Schauen wir uns ein Beispiel an:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Sie haben es so weit geschafft, schauen wir uns jetzt einige einschr?nkende Layouts an.

GSS für einschr?nkende Layouts

Einschr?nkungen sind grunds?tzlich Beziehungen zwischen zwei oder mehr Variablen, die m?glicherweise gelten oder nicht. Alle numerischen Eigenschaften von Elementen qualifizieren sich als eingeschr?nkt. Hier ist ein Beispiel:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

• p wird als Selector
bezeichnet
• Zeilenh?he ist die Eigenschaft, dass GSS einen Wert für
berechnet wird
• [] wird verwendet, um auf die Eigenschaft zuzugreifen
• = Ungleichheitsbeschr?nkungen
definieren
• 10 und 20 sind numerische Werte in Pixel

In dem oben angegebenen Beispiel gelten beide Einschr?nkungen gültig. Hier ist ein Beispiel für Einschr?nkungen, die nicht gelten.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Anfangs sind beide Elemente Elementa und ElementB auf eine H?he von 150px eingeschr?nkt. In der dritten Zeile betr?gt die Summe der beiden Elemente 225px. Daher wird eine der Einschr?nkungen des beiden Elements nicht gelten.

Selektoren in GSS

Selektoren in GSS sind Abfragen über eine Gruppe von HTML -Elementen und werden verwendet, um die Elemente zu bestimmen, die letztendlich von der Einschr?nkung beeinflusst werden. Selektoren sind wichtig, da Sie Elemente aus dem DOM ausw?hlen und beobachten müssen, bevor Sie Einschr?nkungen auf diese anwenden.

Die folgenden grundlegenden Selektoren werden von GSS unterstützt.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Regeln in GSS

Regeln k?nnen Sie mehrere Einschr?nkungen über einen einzelnen Selektor definieren. Sie k?nnen sie nisten und auch CSS -Eigenschaften verwenden.

Dieser verschachtelte Regeln:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

ist dasselbe wie:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Eigenschaften in GSS

Ich habe in den obigen Beispielen bereits Eigenschaften abgedeckt, aber schauen wir sie uns etwas genauer an. In GSS sind Eigenschaften die Variablen, die zu einem Element geh?ren. Wenn wir Eigenschaften verwenden, die durch CSS bekannt sind, wird ihr entsprechender GSS-kalkulierter Wert als Inline-Stil auf dem Element zugewiesen.

Etwas wie folgt:

<span>(section < article .aclass)[height] == 150;</span>

w?re gleich:

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Eine Einführung in den Kasowary -Einschr?nkungalgorithmus

Rechenbeschr?nkungen des Kassowary -Algorithmus

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

installieren

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

<span>(section < article .aclass)[height] == 150;</span>

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Das obige ist der detaillierte Inhalt vonEinführung von GSS: Grid Style Sheets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!