CSS geht auf Hosenboden-wild, sage ich dir was

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Als jemand, der CSS einfach nur verfolgt, wie es sich entwickelt, fühlt es sich an, als wären wir in einem der heißesten Innovationsmomente der CSS-Geschichte. Es war wirklich etwas, als wir Flexbox für alle Browser bekamen und nicht lange danach Grid. Sie veränderten das Spiel von CSS, das sich wie eine umständliche Sammlung von Tricks anfühlte, zu etwas Sinnvollerem und Zeitgemäßerem.

Dieses Gefühl wird mit der Zeit immer stärker. Allein in letzter Zeit ist hier eine Liste von Dingen, die passieren.

⚠️🤷 Die Syntax ist möglicherweise nicht genau wie in den unten stehenden Schnipseln, wenn sie tatsächlich veröffentlicht werden. 🤷⚠️

Native Verschachtelung

Native Verschachtelung ist zu einem First Public Working Draft geworden, was bedeutet, dass es näher als je zuvor daran ist, Realität zu werden. Viele Leute verwenden Präprozessoren nur für die Bequemlichkeit des Verschachtelns, und dies sollte für diejenigen hilfreich sein, die ihre Build-Tools vereinfachen möchten, um dies zu vermeiden.

Besonders gefällt mir, wie man bedingte Regeln verschachteln kann.

.card {
  & .title { }
  & .body { }

  @media (min-inline-size > 1000px) {
    & { }
  }

  @nest body.dark & { }
}

Ich habe auch Gerüchte über eine praktikable Idee gehört, die die Verwendung von & bei einfachen Selektoren vermeidet und auch @nest ganz vermeidet.

.card {{
  .title { }
  .body { }

  body.dark & { }
}}

Container-Abfragen

Container-Abfragen sind im Moment nur ein Entwurf des Herausgebers (CSS Containment Module Level 3), aber sie haben bereits eine Implementierung in Chrome (mit einem Flag). Dies ist eine große Sache, da sie es uns ermöglichen, Styling-Entscheidungen basierend auf der Größe des Containers selbst zu treffen, was in der heutigen komponentengesteuerten Welt absolut sinnvoll ist.

Siehe den Code für eine einfache Beispielseite (kann seltsam aussehen, wenn Sie das Flag in Chrome nicht aktiviert haben).

/* Set containment on the parent you're querying */
.card-container {
  /* Both work right now, not sure which is right */
  contain: style layout inline-size;
  container: inline-size;
}
.card {
  display: flex;
}
@container (max-width: 500px) {
  /* Must style a child, not the container */
  .card {
    flex-direction: column;
  }
}

Container-Einheiten

Container-Einheiten haben auch einen Entwurf für eine Spezifikation, die meiner Meinung nach den Nutzen von Container-Abfragen fast verdoppelt. Die Idee ist, dass Sie eine Einheit haben, die auf der Größe des Containers basiert (Breite, Höhe oder „Inline-Größe“ / „Block-Größe“). Ich stelle mir vor, dass die Einheit qi am nützlichsten ist.

Hoffentlich werden wir bald Container-bezogenes CSS schreiben, das sich selbst basierend auf seiner Größe stylt und diese Größe für andere Eigenschaften weitergeben kann, um sie intern zu verwenden. Die Eigenschaft font-size ist ein einfaches Beispiel dafür, wie nützlich dies ist (Schriften, die ihre Größe basierend auf ihrem Container skalieren), aber ich bin sicher, dass Container-Einheiten für alle möglichen Dinge verwendet werden, wie gap, padding und wer weiß, was noch alles.

/* Set containment on the parent you're querying */
.card-container {
  /* Both work right now, not sure which is right */
  contain: style layout inline-size;
  container: inline-size;
}
.card h2 {
  font-size: 1.5rem; /* fallback */
}
@container type(inline-size) {
  .card h2 {
    font-size: clamp(14px, 1rem + 2qi, 56px)
  }
}

Kaskadenschichten

Kaskadenschichten (in Working Draft spec) führen ein völlig neues Paradigma dafür ein, welche CSS-Selektoren in der Kaskade gewinnen. Im Moment ist es hauptsächlich ein Spezifitätswettbewerb. Selektoren mit der höchsten Spezifität gewinnen und verlieren nur gegen Inline-Stile und spezifische Regeln mit !important Klauseln. Aber mit Schichten würde jeder passende Selektor einer höheren Schicht gewinnen.

@layer base;      
@layer theme;   
@layer utilities; 

/* Reset styles with no layer (super low) */
* { box-sizing: border-box; }

@layer theme { 
  .card { background: var(--card-bg); }
}

@layer base { 
  /* Most styles? */
}

@layer utilities {
  .no-margin { margin: 0; }
}

@when

Tab Atkins' Vorschlag für CSS When/Else Rules wurde akzeptiert und ist eine Möglichkeit, @media und @supports Abfragen so auszudrücken, dass Sie viel einfacher else Bedingungen ausdrücken können. Während Medienabfragen bereits einige Möglichkeiten haben, Logik auszuführen, war die Ausführung von sich gegenseitig ausschließenden Abfragen schon immer schwierig auszudrücken, und dies macht es sehr einfach.

@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 */
}

Scoping

Die Idee von Scoped Styles (dieses ist ein Entwurf des Herausgebers) ist, dass es eine Syntax für das Schreiben eines Stilblocks bietet, der nur auf einen bestimmten Selektor und innerhalb davon angewendet wird, aber auch die Möglichkeit hat, den Geltungsbereich zu stoppen, wodurch ein Geltungsbereichs-Donut entsteht.

Mein Lieblingsteil an all dem sind die „Proximity“-Stärkensachen. Miriam erklärt es so:

.light-theme a { color: purple; }
.dark-theme a { color: plum; }
<div class="dark-theme">
  <a href="#">plum</a>

  <div class="light-theme">
    <a href="#">also plum???</a>
  </div>
</div>

Guter Punkt, oder?! Es gibt keine gute Möglichkeit, auszudrücken, dass die Nähe dieses Links zu .light-theme gewinnen soll. Derzeit gewinnt .dark-theme, da die Spezifität beider Themen gleich ist, aber .dark-theme später kommt. Hoffentlich hilft Scoped Styles auch bei diesem Aspekt.

@scope (.card) to (.content) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}
/* Proximity help! */
@scope (.light-theme) {
  a {
    color: purple;
  }
}

@scope (.dark-theme) {
  a {
    color: plum;
  }
}

Sie können derzeit nichts von dieser Liste auf Ihren Produktionswebsites verwenden. Nach all den Jahren, in denen ich versucht habe, diese Dinge zu verfolgen, bleibe ich unwissend darüber, wie alles letztendlich verläuft. Ich denke, die Spezifikationen müssen zuerst fertiggestellt und vereinbart werden. Dann nehmen die Browser sie auf, hoffentlich mehr als einen. Und sobald sie das getan haben, denke ich, können die Spezifikationen finalisiert werden?

Ich weiß es nicht. Vielleicht stirbt einiges davon. Vielleicht passiert einiges super schnell und einiges super langsam. Wahrscheinlich wird einiges davon in einigen Browsern, aber nicht in anderen erscheinen. Hey, zumindest haben wir jetzt Evergreen-Browser, so dass, wenn Dinge auftauchen, es schnell geht. Ich habe das Gefühl, dass wir uns gerade in einer Phase befinden, in der die meisten der größten und besten CSS-Features von allen Browsern unterstützt werden, aber mit all dem, was kommt, werden wir uns in eine Phase begeben, in der die Unterstützung für die neuesten und besten Elemente viel lückenhafter sein wird.

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Lee James
    Permalink zum Kommentar#

    Es sieht alles so sassy aus. Entschuldigen Sie den Wortwitz.

    Antworten
  2. Lee James
    Permalink zum Kommentar#

    @when ist im Grunde ein Schalter und/oder eine Funktion für mehrere Zustände (wie ich es sehe).

    Ich glaube, ich erinnere mich, dass Tab Atkins einen Beitrag über native Toggle-Funktionalität in HTML geschrieben hat (vor Jahren) – das würde ich gerne sehen!

    Antworten
  3. Sacha Greif
    Permalink zum Kommentar#

    Pro-Tipp: Machen Sie Ihre CSS-Tricks um 120 % besser, indem Sie alles, was Chris schreibt, mit der Stimme von Ted Lasso lesen.

    Antworten
  4. Stuart Robson
    Permalink zum Kommentar#

    Ich weiß nicht, wie es dir geht – aber ich warte immer noch auf Subgrid

    Antworten
  5. Blallo
    Permalink zum Kommentar#

    Sie sind so interessant…
    Aber vielleicht ist es schneller, einen Sass-Compiler in die Browser einzubetten :P

    Antworten
  6. Kev Bonett
    Permalink zum Kommentar#

    Native CSS Mixins?

    Werden sie jemals zu einem „Ding“ werden?

    Wenn nicht, dann werde ich Sass noch eine Weile benutzen. ;)

    Antworten
  7. Raphael
    Permalink zum Kommentar#

    So viel Neues. Und hier warte ich immer noch darauf, dass Browser attr so implementieren, wie es vor zehn Jahren spezifiziert wurde. Ich glaube nicht, dass es eine einzelne CSS-Funktion gibt, die ich lieber verwenden wollte, aber nicht konnte.

    Scoping scheint eine gute Idee zu sein, aber der Anwendungsfall „Proximity-Stärke“ scheint umständlich, da CSS-Variablen eine viel bessere Lösung dafür bieten (und bereits heute funktionieren).

    Antworten
  8. Zeno
    Permalink zum Kommentar#

    All diese coolen Dinge würden vor einem übergeordneten Selektor verblassen. Gott, ich wünschte, es gäbe einen übergeordneten Selektor…

    Antworten
    • Kev Bonett
      Permalink zum Kommentar#

      Ein weiterer guter Grund, Sass zu verwenden, mit seiner @at-root Direktive, um aus dem aktuellen Selektor-Kontext „auszubrechen“, um einen übergeordneten Selektor anzugeben.

    • Jace
      Permalink zum Kommentar#

      Kev, ich glaube, Zeno bezog sich auf einen Selektor, der einen Elternteil basierend auf seinen Kindern stylen kann. Also, div:has(p) würde das div ansprechen, ob es ein p als Nachkomme hat (es würde das p nicht ansprechen). Das geht nicht einmal in Sass, da es im Grunde das direkte Gegenteil davon ist, wie CSS derzeit funktioniert.

      Alles, was @at-root tut, ist, die Verschachtelung rückgängig zu machen, in der Sie sich gerade befinden, um einen Elternteil anzugeben, und dann zur Gestaltung des Kindes zurückzukehren. Wie

      .child {
  @at-root .parent & {
    // still affects .child only
  }
}

      Was CSS nativ kann, du verschachtelst einfach nicht

      .child {
}

.parent .child {
}

      Bis natürlich native Verschachtelung doch zu CSS kommt, in diesem Fall wird @at-root zu @nest.

      +1 für das wirkliche Wünschen eines Eltern-Selektors. Das würde zusammen mit Container-Abfragen das komponentengesteuerte Design in CSS weitaus intuitiver machen.

  9. Taufik Nurrohman
    Permalink zum Kommentar#

    Die Sache ist, CSS ist nicht wie HTML und JavaScript.

    Haben Sie jemals von etwas gehört, das in CSS veraltet ist?

    Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .