Die Raven -Technik: Ein Schritt näher an Containerfragen

Krähe -Tipps für CSS Container Abfrage: näher an Containerabfrage

Wir betonen noch einmal: In CSS ist eine Containerabfrage erforderlich! Es sieht so aus, als würden wir in diese Richtung gehen.

Beim Erstellen einer Website -Komponente wissen Sie nicht immer, wie die Komponenten verwendet werden. Es kann so breit sein wie das Browserfenster. Vielleicht werden zwei Komponenten nebeneinander platziert. Vielleicht ist es in einer schmalen Säule. Die Breite einer Komponente hängt nicht immer mit der Breite des Browserfensters zusammen.

In der Regel finden Sie es sehr bequem, mit Container-basierten CSS-Komponenten abzufragen. Wenn Sie online nach Lösungen suchen, finden Sie möglicherweise mehrere auf JavaScript-basierte Lösungen. Diese Lösungen sind jedoch kosten: zusätzliche Abhängigkeiten, JavaScript-geforderte Stile und kontaminierte Anwendungslogik und Designlogik.

Ich glaube fest an die Trennung von Bedenken, und das Layout steht im Mittelpunkt von CSS. Während die IntersectionObserver-API beispielsweise gut ist, möchte ich so etwas wie :in-viewport in CSS! Also suchte ich weiter nach einer CSS-Lösung und fand Heydon Pickerings "Flexbox Holy Albatross". Dies ist eine gute Lösung für Spalten, aber ich möchte mehr. Der ursprüngliche Albatross hat einige Verbesserungen (wie den "nichtsakrierten Albatross"), aber sie sind immer noch ein wenig ungeschickt, und alles, was passiert, ist nur ein ROW-to-Säulen-Schalter.

Ich will immer noch mehr! Ich möchte näher an der tatsächlichen Containerfrage sein! Was bietet CSS, das ich verwenden kann? Ich habe einen mathematischen Hintergrund, also sind Funktionen wie calc() , min() , max() und clamp() Dinge, die ich mag und verstehe.

Weiter: Erstellen Sie sie, um eine mit Container queryähnliche Lösung zu erstellen.

Inhaltsverzeichnis:

1. Warum die "Krähe"?
2. Mathematische Funktionen in CSS
3. Schritt 1: Erstellen Sie eine Konfigurationsvariable
4. Schritt 2: Anzeigevariable erstellen
5. Schritt 3: Verwenden Sie Anzeigenvariablen, um Intervallwerte auszuwählen
6. Schritt 4: Verwenden Sie min() und eine riesige Ganzzahl, um einen Wert jeder Länge auszuwählen
7. Schritt 5: Stellen Sie alles zusammen
8. andere?
9. Wo ist die Höhe?
10. Was ist mit Inhalten zu zeigen und zu verbergen?
11. Schlüsselpunkte
12. Zusätzlicher Inhalt
13. Der letzte Gedanke

Möchten Sie sehen, was erreicht werden könnte, bevor Sie weiter lesen? Dies ist eine CodePen -Sammlung, die zeigt, was die in diesem Artikel diskutierten Ideen erreichen können.

Warum die "Krähe"?

Diese Arbeit wurde von Heydons Albatross inspiriert, aber die Technik könnte mehr Tricks machen, also habe ich eine Krähe gewählt, weil die Krähe ein sehr kluger Vogel ist.

Bewertung: Mathematische Funktionen in CSS

Die Funktion calc() ermöglicht mathematische Operationen in CSS. Zusätzlich können Einheiten kombiniert werden, sodass Operationen wie calc(100vw - 300px) möglich sind.

min() und max() nehmen zwei oder mehr Parameter und geben die minimalen bzw. maximalen Parameter (jeweils) zurück.

clamp() -Funktion ist sehr nützlich, sie ähnelt der Kombination von min() und max() . Die Funktionsklemme clamp(a, x, b) kehrt zurück:

• Wenn x weniger als a ist, geben Sie a zurück
• Wenn x größer als B ist, kehren Sie B zurück
• Wenn x zwischen A und B ist, wird X zurückgegeben

Es ist also eine Art clamp(最小值, 相对值, 最大值) . Es kann als Abkürzung von min(max(a,x),b) angesehen werden. Wenn Sie mehr erfahren möchten, finden Sie hier weitere Informationen dazu.

Wir werden in diesem Artikel auch ein anderes CSS -Tool ausgiebig verwenden: CSS -benutzerdefinierte Eigenschaften. Diese sind wie --color: red; oder --distance: 20px; Es ist im Wesentlichen eine Variable. Wir werden sie verwenden, um CSS prägnanter zu gestalten, z. B. die Vermeidung einer übermäßigen Duplikation von uns selbst.

Beginnen wir mit diesem Krähentrick.

Schritt 1: Erstellen Sie eine Konfigurationsvariable

Lassen Sie uns einige CSS -benutzerdefinierte Eigenschaften erstellen, die festgelegt werden sollen.

Auf welche grundlegende Größe soll die Abfrage basieren? Da wir nach einem Container -Abfrageverhalten suchen, wird dies zu 100% sein. Mit 100 VW verhalten sich es wie eine Medienfrage, da dies die Breite des Browserfensters ist, nicht der Container!

 <code>--base_size: 100%;</code>

Betrachten wir nun Breakpoints. Im wahrsten Sinne des Wortes bedeutet Containerbreite, wir möchten hier brechen, um neue Stile anzuwenden.

 <code>--breakpoint_wide: 1500px; /* 大于1500px 将被视为宽*/ --breakpoint_medium: 800px; /* 从801px 到1500px 将被视为中等*/ /* 小于或等于800px 将被视为小*/</code>

Im laufenden Beispiel werden wir drei Intervalle verwenden, aber diese Technik hat keine Einschränkungen.

Lassen Sie uns nun einige (CSS -Länge )werte definieren, die wir für die Intervalle, die wir für den Haltepunkt definieren, zurückkehren möchten. Dies sind die wörtlichen Werte:

 <code>--length_4_small: calc((100% / 1) - 10px); /* 根据你的需求更改*/ --length_4_medium: calc((100% / 2) - 10px); /* 根据你的需求更改*/ --length_4_wide: calc((100% / 3) - 10px); /* 根据你的需求更改*/</code>

Dies ist die Konfiguration. Lass es uns benutzen!

Schritt 2: Anzeigevariable erstellen

Wir erstellen einige Indikatorvariablen für das Intervall. Sie sind ein bisschen wie Boolesche, aber mit Längeneinheiten (0px und 1px). Wenn wir diese Längen als minimale und maximale Werte einschränken, wirken sie als eine Art "wahrer" und "falscher" Indikator.

Wenn und nur wenn -Base_Size größer als -Breakpoint_wide ist, möchten wir eine Variable mit einem Wert von 1px. Ansonsten wollen wir 0px. Dies kann mit clamp() erfolgen:

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code>

Wenn var(--base_size) - var(--breakpoint_wide) negativ ist, dann ist-Base_Size weniger als-Breakpoint_wide, also kehrt clamp() in diesem Fall 0PX zurück.

Wenn -Base_Size größer als -Breakpoint_wide ist, ergibt die Berechnung eine positive Länge, die größer oder gleich 1px ist. Dies bedeutet, dass clamp() 1px zurückgibt.

Bingo! Wir erhalten eine "Breite" -Inziervariable.

Lassen Sie uns dies für das "mittlere" Intervall tun:

 <code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* 不要使用，见下文！ */</code>

Dies ergibt 0px für das Zellintervall, jedoch 1px für die mittleren und breiten Intervalle. Was wir jedoch wollen, ist ein breites Intervall von 0px und ein mittleres Intervall von nur 1px.

Wir können dieses Problem lösen, indem wir den Wert -is_wide subtrahieren. In einem weiten Intervall ist 1px - 1px 0px; In einem mittleren Intervall ist 1px - 0px 1px; Für ein kleines Intervall gibt 0px - 0px 0px. Perfekt.

Also bekommen wir:

 <code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Verstehst du? Verwenden Sie clamp() mit 0PX und 1PX als Grenzen und den Differenz zwischen - -Base_Width und -Breakpoint_Wh was auch immer als begrenzende Werte mit 0px und 1px berechnet werden. Subtrahieren Sie dann die Summe aller größeren Intervallindikatoren. Für den minimalen Intervallindikator erzeugt diese Logik die folgenden Ergebnisse:

 <code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) var(--is_wide)) );</code>

Wir können clamp() hier überspringen, da der Breakpoint zwischen Zellen 0px ist und - -Base_Size ist positiv, also -Base_Size -0px ist immer größer als 1px, clamp() wird immer 1px zurückkehren. Daher kann die Berechnung von -IS_Small vereinfacht werden zu:

 <code>--is_small: calc(1px - (var(--is_medium) var(--is_wide)));</code>

Schritt 3: Verwenden Sie Anzeigenvariablen, um Intervallwerte auszuwählen

Jetzt müssen wir uns von diesen "Indikatorvariablen" zu etwas Nützlichem bewegen. Nehmen wir an, wir verwenden ein pixelbasiertes Layout. Mach dir keine Sorgen, wir werden uns später mit anderen Einheiten auseinandersetzen.

Dies ist ein Problem. Was kehrt das zurück?

 <code>calc(var(--is_small) * 100);</code>

Wenn -IS_Small ist 1PX, wird 100px zurückgegeben. Wenn -IS_Small 0PX ist, wird 0PX zurückgegeben.

Was nützt das? Schauen Sie sich das an:

 <code>calc( (var(--is_small) * 100) (var(--is_medium) * 200) );</code>

Dadurch wird 100px 0px = 100px im Zellintervall zurückgegeben (wobei -IS_Small 1px ist und -Is_Medium 0px). Im mittleren Intervall (wobei -IS_Medium 1px ist und -IS_Small 0PX) wird 0px 200px = 200px zurückgegeben.

Verstehst du? In den Artikel von Roman Komarov finden Sie einen tieferen Blick auf das, was hier vor sich geht, da es schwer zu verstehen ist.

Sie multiplizieren einen Pixelwert (Einheiten) mit der entsprechenden Indikatorvariablen und fügen alle diese Elemente zusammen hinzu. Für pixelbasierte Layouts reicht so etwas aus:

 <code>width: calc( (var(--is_small) * 100) (var(--is_medium) * 200) (var(--is_wide) * 500) );</code>

Aber die meiste Zeit wollen wir keine pixelbasierten Werte. Wir wollen Konzepte wie "vollständige Breite" oder "dritte Breite" oder sogar andere Einheiten wie 2REM, 65Ch usw. Denn diese müssen wir fortfahren.

Schritt 4: Verwenden Sie min() und eine riesige Ganzzahl, um einen Wert jeder Länge auszuwählen

Im ersten Schritt definieren wir so etwas anstelle statischer Pixelwerte:

 <code>--length_4_medium: calc((100% / 2) - 10px);</code>

Wie benutzen wir sie? min() -Funktion ist zu retten!

Definieren wir eine Helfervariable:

 <code>--very_big_int: 9999; /* 纯粹的无单位数字。必须大于其他地方出现的任何长度。 */</code>

Wenn Sie diesen Wert mit der Anzeigevariablen multiplizieren, ergibt 0px oder 9999px. Wie groß dieser Wert sein sollte, hängt von Ihrem Browser ab. Chrome wird 999999 akzeptieren, aber Firefox akzeptiert eine so große Anzahl nicht, daher ist 9999 ein Wert, der in beiden funktioniert. Es gibt fast keine Ansichtsfenster, die größer als 9999px sind, also sollten es uns gut gehen.

Was passiert also, wenn wir es mit einem Wert von kleiner als 9999px verwenden, aber größer als 0px min() ?

 <code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code>

Es gibt 0PX zurück, wenn und nur wenn -IS_Small 0PX ist. Wenn -IS_Small 1PX ist, wird die Multiplikation 9999px (größer als -Length_4_Small) zurückgegeben, und min wird zurückgegeben: - -Length_4_Small.

So können wir basierend auf der Indikatorvariablen jede Länge (d. H. Weniger als 9999px, aber größer als 0px) auswählen.

Wenn Sie es mit einem Ansichtsfenster über 9999px zu tun haben, müssen Sie die Variable --very_Big_int anpassen. Dies ist etwas hässlich, aber wir können dies beheben, sobald reines CSS die Einheiten im Wert entfernen kann, um die Einheiten in der Anzeigevariablen zu entfernen (und sie direkt mit jeder Länge zu multiplizieren). Derzeit funktioniert dies.

Wir werden jetzt alle Teile kombinieren und die Krähen fliegen lassen!

Schritt 5: Stellen Sie alles zusammen

Wir können nun unsere blockpointbasierten Werte basierend auf einer solchen dynamischen Containerbreite wie folgt berechnen:

 <code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) min(var(--is_small) * var(--very_big_int), var(--length_4_small)) );</code>

Jede Zeile ist min() in Schritt 4. Alle Zeilen addieren sich wie in Schritt 3, die Indikatorvariablen stammen aus Schritt 2, alle basierend auf der Konfiguration, die wir in Schritt 1 gemacht haben - sie arbeiten in einer großen Formel zusammen!

Willst du es versuchen? Dies ist ein Stift, der verwendet werden kann (siehe Kommentare in CSS).

Dieser Stift verwendet keine Flexbox, Gitter oder Schwimmer. Nur ein paar Divs. Dies soll zeigen, dass Hilfsprogramme in diesem Layout unnötig sind. Verwenden Sie jedoch Crow mit diesen Layouts, da Sie Ihnen helfen, komplexere Layouts zu erstellen.

andere?

Bisher haben wir feste Pixelwerte als Haltepunkte verwendet, aber möchten wir das Layout ändern, wenn der Container größer oder kleiner als die Hälfte des Ansichtsfensters minus 10px ist? Kein Problem:

 <code>--breakpoint_wide: calc(50vw - 10px);</code>

Das funktioniert! Andere Formeln gelten ebenfalls. Um seltsames Verhalten zu vermeiden, wollen wir so etwas wie:

 <code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code>

... Stellen Sie den zweiten Haltepunkt auf eine Breite von 500 PX ein. Die Berechnung in Schritt 2 hängt davon ab, dass -Breakpoint_wide nicht weniger als -Breakpoint_Medium ist. Halten Sie einfach die Haltepunkte in der richtigen Reihenfolge: min() und/oder max() sind hier sehr nützlich!

Wo ist die Höhe?

Alle Berechnungsbewertungen werden verzögert. Das heißt, wenn -Dyn_length jedem Attribut zugeordnet ist, basiert die Berechnung auf dem Berechnungsergebnis von - -Base_Size in dieser Position. Wenn -Base_size 100%ist, basiert die Einstellhöhe auf 100%.

Ich habe keine Möglichkeit gefunden, die Höhe auf der Basis der Containerbreite festzulegen. Sie können also padding-top verwenden, da 100% der Breite für die Polsterung entspricht.

Was ist mit Inhalten zu zeigen und zu verbergen?

Der einfachste Weg, Inhalte mit dem Krähenstrick zu zeigen und zu verbergen, besteht darin, die Breite auf 100px (oder eine andere geeignete Breite) an der entsprechenden Indikatorvariablen zu setzen:

 <code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code>

Sie müssen festlegen:

 <code>overflow: hidden; display: inline-block; /* 避免难看的空行*/</code>

... oder eine andere Möglichkeit, den Inhalt in einer Box mit einer Breite von 0px zu verbergen. Um das Box vollständig auszublenden, müssen andere Boxmodelleigenschaften (einschließlich Ränder, Füllungen und Randbreiten) auf 0PX festgelegt werden. Krähe kann dies auf bestimmten Eigenschaften tun, aber es ist gleichermaßen effektiv, es auf 0PX zu fixieren.

Eine andere Möglichkeit ist die Verwendung position: absolute; und zeichne das Element außerhalb des Bildschirms über left: calc(var(--is_???) * 9999);

Schlüsselpunkte

Wir brauchen wahrscheinlich überhaupt kein JavaScript, selbst für Container -Abfragenverhalten! Natürlich hoffen wir, dass es einfacher ist, diese Dinge in CSS im CSS implementieren zu können, wenn wir tatsächlich Container -Abfragen in der CSS -Syntax erhalten, es einfacher zu verwenden und zu verstehen.

Während des Umgangs damit habe ich einige Gedanken zu anderen Dingen, die CSS verwenden können:

• Containerbasierte Einheiten wie CONW und CONH werden verwendet, um die Höhe basierend auf der Breite einzustellen. Diese Einheiten können auf dem Stammelement des aktuellen Stapelkontexts basieren.
• Eine Art von "Bewertung als Wert" -Funktion, um das Problem der verzögerten Bewertung zu überwinden. Dies funktioniert sehr gut mit der Funktion "Einheit entfernen", die beim Rendern funktioniert.

Hinweis: In früheren Versionen habe ich CW und CH als Einheiten verwendet, aber einige Leute wiesen darauf hin, dass diese leicht mit den gleichnamigen CSS -Einheiten verwechselt werden. Vielen Dank an Mikko Tapionlinna und Gilson Nunes Filho für die Tipps in den Kommentaren! )

Wenn wir eine zweite haben, können wir die Farbe (auf saubere Weise), Ränder, Boxschatten, Flex-Wachstum, Hintergrundposition, Z-Index, Scale () und andere Dinge mit der Krähe einstellen.

In Kombination mit Komponenten-basierten Einheiten ist es sogar möglich, die untergeordnete Größe auf das gleiche Seitenverhältnis wie das Elternteil einzustellen. Kann nicht durch den Wert mit Einheiten geteilt werden; Andernfalls funktioniert -Indicator / 1PX als "Entfernungseinheit" der Krähe.

Zusätzlicher Inhalt: Boolesche Logik

Die Indikatorvariable sieht aus wie ein Boolescher, oder? Der einzige Unterschied ist, dass sie eine "PX" -Einheit haben. Was ist also mit diesen logischen Kombinationen? Stellen Sie sich vor, so etwas wie "Der Container ist größer als die halbe Breite des Bildschirms" und "Das Layout befindet sich in zwei Spaltenmodus". Die CSS -Funktion kommt wieder, um wieder zu retten!

Für den ODER Operator können wir max() für alle Indikatoren verwenden:

 <code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) );</code>

Für den Nichtbetreiber können wir den Indikator von 1PX abziehen:

 <code>--NOT_a: calc(1px - var(--indicator_a));</code>

Logische Puristen könnten hier aufhören, weil NOW (a, b) = nicht (oder (a, b)) eine vollständige boolesche Algebra ist. Aber hey, nur zum Spaß, hier sind noch einige:

UND:

 <code>--a_AND_b: min(var(--indicator_a), var(--indicator_b));</code>

Dies wird nur dann auf 1PX bewertet, wenn beide Indikatoren 1PX sind.

Beachten Sie, dass min() und max() mehr als zwei Parameter akzeptieren. Sie arbeiten immer noch als und oder von (mehr als zwei) Indikatorvariablen.

Xor:

 <code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) );</code>

Wenn (und nur wenn) beide Indikatoren den gleichen Wert haben, gibt es bei beiden Unterschieden 0px, max() gibt diesen Wert zurück. Wenn der Indikator einen anderen Wert hat, ergibt ein Begriff -1px und der andere 1PX. In diesem Fall gibt max() 1px zurück.

Wenn jemand an Situationen interessiert ist, in denen zwei Indikatoren gleich sind, verwenden Sie die folgende Methode:

 <code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) );</code>

Ja, das ist nicht (a xor b) . Ich kann keine "bessere" Lösung dafür finden.

Gleichheit kann für allgemeine CSS -Längenvariablen interessanter sein als nur für Indikatorvariablen. Dies könnte helfen, indem es clamp() erneut verwendet:

 <code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) );</code>

Entfernen Sie PX -Einheiten, um die allgemeine Gleichheit von unitlosen Variablen (Integralen) zu erhalten.

Ich denke, das ist genug Boolesche Logik für die meisten Layouts!

Zusätzlicher Inhalt 2: Stellen Sie die Anzahl der Spalten im Netzlayout ein

Da die Krähe nur auf die Rückgabe von CSS -Längenwerten beschränkt ist, kann sie nicht direkt die Anzahl der Spalten für das Netz auswählen (da dies ein Wert ohne Einheiten ist). Es gibt jedoch eine Möglichkeit, es zum Laufen zu bringen (vorausgesetzt, wir deklarieren die Indikatorvariable wie oben):

 <code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* 使用乌鸦组合值*/ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code>

Und richten Sie Ihr Netz mit den folgenden Methoden ein:

 <code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code>

Wie funktioniert das?

1. Definieren Sie die Anzahl der gewünschten Spalten für jedes Intervall (Zeilen 1, 2, 3)
2. Berechnen Sie die perfekte Säulenbreite für jedes Intervall (Zeilen 5, 6, 7). Was ist hier los?

Zunächst berechnen wir den verfügbaren Speicherplatz für die Spalte. Dies ist 100%, abzüglich des Raums, den die Lücke in Anspruch nehmen wird. Für Spalte N gibt es (n-1) Lücken. Dann teilen Sie diesen Raum durch die Anzahl der gewünschten Spalten. 3. Berechnen Sie die Krähe, um die richtige Spaltenbreite für die tatsächliche - -Base_Size zu berechnen.

Im Rasterbehälter diese Zeile:

 <code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code>

... und wählen Sie dann die Anzahl der Spalten aus, um den von der Krähe bereitgestellten Wert anzupassen (dies führt zu unserer Variablen -number_of_cols 4 ??? oben).

Die Krähe kann die Spaltennummer möglicherweise nicht direkt angeben, kann jedoch die Länge angeben und repeat und autofit die gewünschte Nummer für uns berechnen.

Aber auto-fit ist dasselbe wie minmax() , oder? NEIN! Die obige Lösung enthält niemals drei Spalten (oder fünf Spalten), und die Anzahl der Spalten muss nicht mit der Breite des Behälters erhöht werden. Versuchen Sie, die folgenden Werte in diesem Stift festzulegen, um zu sehen, wie die Krähen mit voller Geschwindigkeit fliegen:

 <code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code>

Zusätzlicher Inhalt 3: Verwenden Sie linear-gradient() um die Hintergrundfarbe zu ändern

Dies ist ein bisschen hirnintensiver. Bei der Krähe dreht sich alles um Längenwerte. Wie erhalten wir also die Farbe von diesen Werten? Nun, lineare Gradienten befassen sich gleichzeitig mit beiden. Sie definieren Farben in bestimmten Bereichen, die durch Längenwerte definiert sind. Lassen Sie uns dieses Konzept detaillierter diskutieren, bevor wir den Code eingeben.

Um den tatsächlichen Gradiententeil zu lösen, besteht eine bekannte Technik darin, den Farbstopppunkt zu verdoppeln, was den Gradiententeil effektiv innerhalb von 0PX auftritt. Schauen Sie sich diesen Code an, um zu erfahren, wie das geht:

 <code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code>

Dadurch wird Ihr Hintergrund links und blau auf der rechten Seite halb rot. Beachten Sie den ersten Parameter "nach rechts". Dies bedeutet, dass die Prozentwerte von links nach rechts bewertet werden.

Durch die Kontrolle eines Wertes von 50% durch die Krähenvariable können Sie den Farbstop -Punkt nach Belieben verschieben. Wir können weitere Farbstopppunkte hinzufügen. Im laufenden Beispiel benötigen wir drei Farben, was zu zwei (doppelten) internen Farbstopppunkten führt.

Fügen Sie einige Variablen für Farb- und Farbstopppunkte hinzu, und das erhalten wir:

 <code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

Aber wie berechnen wir die Werte von -first_lgbreak_value und - -second_lgbreak_value? Schauen wir uns an.

Der erste Wert steuert die sichtbare Position von Color_Small. Im Zellintervall sollte es 100%sein und in anderen Intervallen sollte es 0px sein. Wir haben gelernt, wie man das mit einer Krähe macht. Die zweite Variable steuert die Sichtbarkeit von Color_Medium. In einem kleinen Intervall sollte es 100%sein; Für ein mittleres Intervall sollte es 100%sein; Aber für ein breites Intervall sollte es 0px sein. Wenn sich die Behälterbreite in einem kleinen oder mittleren Intervall befindet, muss der entsprechende Indikator 1PX sein.

Da wir auf dem Indikator Boolesche logische Operationen ausführen können, ist dies:

 <code>max(--is_small, --is_medium)</code>

… Um den richtigen Indikator zu erhalten. Das gibt:

 <code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%);</code>

Wenn Sie alles zusammenstellen, erzeugt der folgende CSS -Code, der die Hintergrundfarbe basierend auf der Breite ändert (der Intervallindikator wird wie oben gezeigt berechnet):

 <code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* 根据你的需求更改*/ --color_medium: green;/* 根据你的需求更改*/ --color_small: lightblue;/* 根据你的需求更改*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

Dies ist ein Stift, der sehen kann, wie er funktioniert.

Zusätzlicher Inhalt 4: Verschachtelte Variablen loswerden

Ich habe ein seltsames Problem bei der Verwendung von Krähen: Es gibt eine begrenzte Anzahl verschachtelter Variablen, die in calc() verwendet werden können . Dies kann einige Probleme verursachen, wenn zu viele Haltepunkte verwendet werden. Soweit ich weiß, soll diese Einschränkung verhindern, die Seite bei der Berechnung des Stils zu verhindern und eine schnellere kreisförmige Referenzprüfung zu ermöglichen.

Meiner Meinung nach wäre so etwas wie "Bewertung als Wert" ein guter Weg, um dieses Problem zu überwinden. Diese Grenze kann Ihnen jedoch Kopfschmerzen verursachen, wenn Sie die Grenzen von CSS durchbrechen. Hoffentlich kann dieses Problem in Zukunft gelöst werden.

Es gibt eine Möglichkeit, die Indikatorvariable für die Krähe zu berechnen, ohne (Tiefe) verschachtelte Variablen zu verwenden. Sehen wir uns die ursprüngliche Berechnung des -is_medium -Werts an:

 <code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Das Problem tritt dort auf, wo minus -is_wide. Dies führt dazu, dass der CSS -Parser die Definition der vollständigen Formel von -IS_WIDE einfügt. Die Berechnung -iS_Small hat sogar mehr Referenzen dieser Art. (Die Definition von -IS_WIDE wird sogar zweimal eingefügt, da sie in der Definition von -is_medium versteckt ist und direkt verwendet wird.)

Glücklicherweise gibt es eine Möglichkeit, Indikatoren zu berechnen, ohne Indikatoren mit größeren Haltepunkten zu verweisen.

Der Indikator ist wahr, wenn -Base_size größer als der Untergrenze des Untergrenzwerts des Intervalls ist und geringer oder gleich dem oberen Grenze des Intervalls ist. Diese Definition liefert uns den folgenden Code:

 <code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) );</code>

• min() wird als logisch und operator verwendet
• Die erste clamp() ist "-Base_Size größer als-Breakpoint_Medium".
• Die zweite clamp() bedeutet "-Base_Size ist kleiner oder gleich-Breakpoint_wide".
• Das Hinzufügen von 1PX wechselt von "weniger als" auf "weniger als oder gleich ". Dies funktioniert, weil wir Integer (Pixel) Nummern (a

Die vollständige Berechnung von Indikatorvariablen kann auf diese Weise durchgeführt werden:

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px var(--breakpoint_medium) - var(--base_size), 1px);</code>

-IS_WIDE und-IS_Small sind einfacher zu berechnen, da jeder nur einen bestimmten Breakpoint überprüft muss.

Dies gilt für alles, was wir bisher gesehen haben. Hier ist ein Stift, der Beispiele kombiniert.

Der letzte Gedanke

Crow kann nicht alles tun, was Medienfragen tun können. Aber wir brauchen es nicht, weil wir Medienfragen in CSS haben. Für "große" Designänderungen wie die Position der Seitenleiste oder die Neukonfiguration des Menüs sind sie in Ordnung. Diese Dinge passieren im Kontext des gesamten Ansichtsfensters (die Größe des Browserfensters).

Für Komponenten sind Medienabfragen jedoch etwas falsch , da wir die Größe der Komponente nie kennen.

Heydon Pickering demonstriert dieses Problem mit diesem Bild:

Ich hoffe, Raven hilft Ihnen dabei, das Problem zu überwinden, ansprechende Layouts für Komponenten zu erstellen und die Grenze von "Was kann CSS tun" noch höher voranzutreiben.

Indem Sie zeigen, was heute möglich sein könnte, kann es möglich sein, eine "echte" Containerabfrage durch Hinzufügen von Syntaxzucker und einige sehr kleine neue Funktionen wie CONW, CONH, "Entfernungseinheiten" oder "Bewertung als Pixel" durchzuführen. Wenn es in CSS eine Funktion gibt, mit der "1PX" als Speicherplatz und "0PX" "initial" umgestellt werden kann, kann Crow in Verbindung mit benutzerdefinierten Attribut -Switching -Tricks verwendet werden und jedes CSS -Attribut ändern, nicht nur mit dem Längenwert.

Indem Sie JavaScript vermeiden, um dies zu erreichen, wird Ihr Layout schneller, da es nicht vom Download oder Ausführen von JavaScript abhängt. Auch wenn JavaScript deaktiviert ist, spielt es keine Rolle. Diese Berechnungen blockieren Ihren Haupt -Thread nicht und Ihre Anwendungslogik wird mit der Designlogik nicht durcheinander gebracht.

Vielen Dank an Chris, Andrés Galante, Cathy Dutton, Marko Ilic und David Atanda für ihre wunderbaren CSS-Tricks-Artikel. Sie haben mir wirklich geholfen, zu erforschen, was Krähen erreichen können.

Das obige ist der detaillierte Inhalt vonDie Raven -Technik: Ein Schritt näher an Containerfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!