CSS wird verdammter Schwindel wild, ich sage Ihnen was

Wir sind Zeuge der Entwicklung von CSS und scheinen in einer der aufregendsten Innovationsperioden in der CSS -Geschichte zu sein. Es war wirklich aufregend, wenn alle Browser Bald darauf unterstützen und dann wieder ein Grid haben. Sie transformieren CSS vollständig und machen es nicht mehr zu einer ungeschickten Sammlung von Tricks, sondern etwas Vernünftigeres und mehr im Einklang mit dem Trend der Zeit.

Dieses Gefühl wird immer stärker. Erst kürzlich sind die folgenden Dinge passiert.

⚠️? ? ⚠️

Einheimische Nistung

Das native Nisting ist zum ersten öffentlichen Arbeitsentwurf geworden, was bedeutet, dass es näher als je zuvor ist, Realität zu sein. Viele Menschen verwenden Präprozessoren, nur um die Bequemlichkeit des Verschachtelns zu erhalten, was für diejenigen hilfreich sein sollte, die Gebäudewerkzeuge vereinfachen möchten, um dies zu vermeiden.

Ich mag es besonders, wie man bedingte Regeln nistet.

 <code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>

Ich habe Gerüchte über diese praktikable Lösung gehört, die den Bedarf an und auf einfachen Selektoren vermeidet und auch @nest vollständig vermeidet.

 <code>.card {{ .title { } .body { } body.dark & { } }}</code>

Containerabfrage

Die Containerabfrage ist derzeit nur ein Editorentwurf (CSS -Containment -Modul Level 3), ist jedoch bereits in Chrome implementiert (müssen Flags aktiviert werden). Sie machen viel Sinn, weil sie es uns ermöglichen, Stilentscheidungen auf der Grundlage der Größe des Containers selbst zu treffen, was eine sehr gute Idee in der heutigen Komponentenwelt ist.

• Miriam Suzanne: Vorschläge und Erklärungen für Containerabfragen
• Stephanie Eckles: Erste Schritte mit CSS Container Query
• Geoff Graham: Container -Querysammlung
• Una Kravets: CSS der nächsten Generation: @Container

Schauen Sie sich den Code für eine einfache Beispiel -Site an (es sieht möglicherweise seltsam aus, wenn Sie das aktivierte Flag in Chrome nicht haben).

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>

Containereinheit

Die Containereinheit hat auch eine Entwurfsspezifikation, die für mich die Praktikabilität von Containerfragen fast verdoppelt. Die Idee ist, dass Sie eine Einheit basieren, die auf Behältergröße basiert (Breite, Höhe oder "Inline-Größe"/"Blockgröße"). Ich denke, Qi -Einheiten sind die nützlichsten.

Hoffentlich schreiben wir bald containerweite CSS, die auf unserer eigenen Größe basieren und diese Größe für die Verwendung durch andere interne Eigenschaften übergeben können. Die Schrift im Bereich der Schriftgröße ist ein einfaches praktisches Beispiel (eine Schriftart basierend auf der Größe des Containers), aber ich glaube, die Containereinheit wird für verschiedene Zwecke wie Lücken, Polsterung und viele andere Zwecke verwendet.

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>

Kaskadenschicht

Die Kaskadenschicht (im Arbeitsentwurfspezifikation) führt ein völlig neues Paradigma zur Bestimmung des Gewinners des CSS -Selektors in der Kaskade ein. Derzeit ist es hauptsächlich ein bestimmter Wettbewerb. Der Selektor mit der höchsten Spezifität gewinnt, nur der Inline -Stil und spezifische Regeln mit der wichtigen Klausel können sie übertreffen. Bei den Schichten gewinnt jeder passende Selektor auf der höheren Schicht.

• Miriam Suzanne: Einfache Beispiele/Demos und Erläuterungsdokumentation.
• Bramus van Damme: Die Zukunft von CSS: Cascade Layer (CSS@Layer)

 <code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>

@Wann

Das CSS, wenn/sonst von Tab Atkins vorgeschlagene Regel akzeptiert wird, ist eine Möglichkeit, @media- und @Supports -Abfragen auszudrücken, und Sie können die sonstige Bedingung leichter ausdrücken. Während Medienabfragen bereits einige logische Funktionen haben, war es seit langem schwierig, sich gegenseitig ausschließende Abfragen auszudrücken, was es sehr einfach macht.

 <code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>

Umfang

Die Idee von Scope -Stilen (ein Entwurfseditor) ist, dass es eine Syntax zum Schreiben von Stilen bietet, die nur auf Selektorblöcke und -interale angewendet werden, aber auch die Möglichkeit haben, Scopes zu stoppen und somit Scope -Schleifen zu erstellen.

Meine Lieblingsbeschäftigung ist das Zeug in der "Nähe". Miriam erklärt so:

 <code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code>

<code><div>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Pflaume</a>

  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Vielleicht ist es Pflaume? ? ?</a>
  </div>
</div></code>

Rechts? ! Es gibt keinen guten Weg, um auszudrücken, wie nahe Sie möchten, dass der Link gewinnen. Derzeit ist die Spezifität beider Themen gleich, aber .Dark -Theme ist dahinter - also gewinnt es. Hoffentlich können Umfangsstile auch dieses Problem lösen.

 <code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

 <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>

Sie können derzeit nichts von dieser Liste auf Ihrer Produktionswebsite verwenden. Nachdem ich jahrelang versucht hatte, so etwas zu folgen, weiß ich immer noch nicht, wie das läuft. Ich denke, die Spezifikation muss zuerst abgeschlossen und vereinbart werden. Der Browser wählt sie dann aus und hofft auf mehr als eine. Ich denke, wenn sie sie haben, können die Spezifikationen abgeschlossen werden?

Ich habe keine Ahnung. Vielleicht verschwinden einige von ihnen. Vielleicht werden einige von ihnen sehr schnell passieren, während andere sehr langsam sein werden. Wahrscheinlich werden einige von ihnen in einigen Browsern und nicht in anderen auftreten. Hey, zumindest haben wir jetzt immergrüne Browser. Wenn Dinge passieren, passiert es sehr schnell. Ich habe das Gefühl, dass wir uns jetzt in einer Phase befinden, in der die meisten der größten und besten CSS -Funktionen von allen Browsern unterstützt werden, aber mit all dem werden wir in einer fragmentierteren Unterstützung für die neueste Technologie sein.

Das obige ist der detaillierte Inhalt vonCSS wird verdammter Schwindel wild, ich sage Ihnen was. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!