Einführung von GSS: Grid Style Sheets

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

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.

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

Mit

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

gs

Der Benutzer ist nicht verpflichtet, sicherzustellen, dass die Eingabebeschränkungen nicht gegenseitig widersprechen. Tatsächlich ist dies die Essenz des Kassowary -Algorithmus; Es bewertet inkrementell die Einschränkungen und entdeckt eine optimale Lösung automatisch.

Rechenbeschränkungen des Kassowary -Algorithmus

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

Der Einschränkungen des Lösers hinter GSS wird als Cassowary -Algorithmus bezeichnet. Dieser Algorithmus kann nur lineare Einschränkungen berechnen (d. H. der Form y = mx c). Die grundlegenden Operatoren (, -, *, /) werden vom Algorithmus unterstützt. Die Multiplikation und Aufteilung von zwei (oder mehr) eingeschränkten Variablen ist nicht linear und wirft daher einen Fehler auf.

GSS

installieren

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

für die clientseitige Installation installieren Sie über Bower:

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

Fügen Sie diesen Code dann zu dem Abschnitt Ihres Markups Ihres Markups hinzu:

Sie können auch Version 2.0.0 über GitHub als ZIP -Datei herunterladen.

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

vertikal zentrieren

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.

herkömmliches CSS verwendet ein Boxmodell für das Layout, das beim Erstellen komplexer Layouts einschränkend und komplex sein kann. GSS dagegen verwendet ein einschränkendes Modell, das mehr Flexibilität und Präzision ermöglicht. Mit GSS können Sie die Beziehungen zwischen Elementen definieren und ihr Verhalten auf intuitivere Weise steuern.

Wie kann ich mit GSS beginnen? in Ihrem Projekt. Dies kann durch Herunterladen der GSS -Bibliothek von der offiziellen Website oder mithilfe eines Paketmanagers wie NPM erfolgen. Sobald die GSS -Engine in Ihrem Projekt enthalten ist, können Sie mit dem Schreiben von GSS -Code in Ihren CSS -Dateien beginnen.

Kann ich GSS mit meinem vorhandenen CSS -Code verwenden? neben traditioneller CSS. Dies bedeutet, dass Sie GSS nach und nach in Ihre Projekte einführen können, ohne Ihren vorhandenen CSS -Code umschreiben zu müssen. GSS -Code kann in separate Dateien geschrieben oder mit dem regulären CSS -Code gemischt werden.

Was sind die Vorteile der Verwendung von GSS? Es ermöglicht eine genauere Steuerung über das Layout und erleichtert es, komplexe und reaktionsschnelle Designs zu erstellen. GSS vereinfacht auch den Code und erleichtert das Lesen und Verwalten. Darüber hinaus unterstützt GSS die Live-Bearbeitung, was bedeutet, dass Sie Änderungen in Echtzeit beim Code sehen können.

Wird GSS von allen Browsern unterstützt? Engine, was bedeutet, dass sie in jedem modernen Browser funktionieren sollte, der JavaScript unterstützt. Wie bei jeder neuen Technologie ist es jedoch immer eine gute Idee, Ihre Designs in mehreren Browsern zu testen, um die Kompatibilität zu gewährleisten. Ressourcen zum Erlernen von GSS verfügbar. Die offizielle GSS -Website bietet einen umfassenden Leitfaden und eine umfassende Dokumentation. Es gibt auch mehrere Online -Tutorials und -kurse, die GSS in der Tiefe abdecken. Die einschränkende Layout-Engine ermöglicht reaktionsschnelle Designs, die sich an verschiedene Bildschirmgrößen und -orientierungen anpassen. Dies erleichtert das Erstellen einer konsistenten Benutzererfahrung auf verschiedenen Geräten.

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.

Grid Style Sheets (GSS) ist eine CSS -Vorprozessorin und JavaScript -Laufzeit, die die Layout -Engine des Browsers durch den Löser von Cassowary Constraint ersetzt und die relative Positionierung und Größe verspricht und die Fähigkeit, jedes Element in einer anderen mit einer Codezeile zu zentrieren.

gs

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.

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:

.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

Mit

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

gs

Der Benutzer ist nicht verpflichtet, sicherzustellen, dass die Eingabebeschränkungen nicht gegenseitig widersprechen. Tatsächlich ist dies die Essenz des Kassowary -Algorithmus; Es bewertet inkrementell die Einschränkungen und entdeckt eine optimale Lösung automatisch.

Rechenbeschränkungen des Kassowary -Algorithmus

Der Einschränkungen des Lösers hinter GSS wird als Cassowary -Algorithmus bezeichnet. Dieser Algorithmus kann nur lineare Einschränkungen berechnen (d. H. der Form y = mx c). Die grundlegenden Operatoren (, -, *, /) werden vom Algorithmus unterstützt. Die Multiplikation und Aufteilung von zwei (oder mehr) eingeschränkten Variablen ist nicht linear und wirft daher einen Fehler auf.

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

GSS

installieren

für die clientseitige Installation installieren Sie über Bower:

#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>

Fügen Sie diesen Code dann zu dem Abschnitt Ihres Markups Ihres Markups hinzu:

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

Sie können auch Version 2.0.0 über GitHub als ZIP -Datei herunterladen.

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

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

oder ein Element:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</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:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</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.

<span>(section < article .aclass)[height] == 150;</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

vertikal zentrieren

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

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</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

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!