Mehr reale Verwendungen für: Has ()

CSSs :has() Pseudo-Klasse ist zweifellos eine meiner beliebtesten neuen Funktionen von CSS, und ich glaube, viele Teilnehmer in der Umfrage des Bundesstaates CSS sind damit überein. Diese Fähigkeit, Selektoren zu "invertieren", gibt uns unerwartet leistungsstarke Fähigkeiten.

Der Grund, warum es als "mächtiger" bezeichnet wird, ist, dass viele intelligente Entwickler viele erstaunliche kluge Ideen veröffentlicht haben, wie:

Jen Simmons '"Verwendung: Has () als CSS -Elternauswahl und mehr"
Bramus '"Implementieren einer Reihe von Abfragen für" Elementinseln "mit derselben Klasse" unter Verwendung von CSS: Has ()
Bramus '"Setzen Sie übergeordnete Elementstile basierend auf der Anzahl der Kinder"
Manuel Matuzovićs "Verwenden des Kombinators in: Has ()"
Austin Gils "vier Möglichkeiten, Ihre HTML -Formen hervorragend zu machen"
Zoran Jambors "Video: Has () praktische Fälle"
Jhey Tompkins '": Has (): Family Selector"

Dieser Artikel ist weder eine maßgebliche Anleitung für

noch eine Duplizierung vorhandener Inhalte. Ich möchte nur einige der Möglichkeiten teilen, wie ich :has() in meiner täglichen Arbeit höchstwahrscheinlich benutze. Natürlich ist die Prämisse, dass der Browserunterstützung gut genug ist. (Firefox ist der letzte Browser, der durchhält, aber es wird bald unterstützt.) :has()

Sobald der Browserunterstützung perfekt ist, werde ich ihn auf jeden Fall überall verwenden

. Hier sind einige echte Fälle, die ich kürzlich gebaut habe, und ich dachte mir: „Wie einfach wird dies einmal vollständig unterstützt!“ :has() Vermeiden Sie außerhalb von JavaScript -Komponenten :has()

Haben Sie jemals eine interaktive Komponente erstellt, die manchmal den Stil der Seite an anderer Stelle beeinflussen muss? Im folgenden Beispiel ist

ein Mega -Menü, das das Öffnen der Farbe des obigen Inhalts verändert.

<nav></nav> Ich habe das Gefühl, dass ich immer so etwas tun muss.

Dieses spezifische Beispiel ist die React -Komponente, die ich für eine Website gemacht habe. Ich musste

außerhalb des React -Abschnitts der Seite "Touch" verwenden und eine Klasse auf

,

oder anderen Komponenten umschalten. Dies ist nicht das Ende der Welt, aber es fühlt sich etwas unangenehm an. Selbst auf einer vollständigen React -Website (z. B. Next.js -Website) musste ich zwischen der Verwaltung des document.querySelector(...) -States auf einem Baum mit höherer Komponenten oder derselben DOM -Elementauswahl wählen - was nicht ganz React -Stil ist. Mit <header></header> ist das Problem gelöst: <main></main> menuIsOpen :has() Meine JavaScript -Komponente muss sich nicht mehr mit anderen Teilen des DOM befassen!

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

Bessere Tabellenstreifen Benutzererfahrung

Hinzufügen von "Stripes" alternierende Zeile zu einer Tabelle kann die Benutzererfahrung verbessern. Sie helfen Ihren Augen, die Zeilen zu verfolgen, in denen Sie sich gerade beim Scannen der Tabelle befinden.

Aber meiner Erfahrung nach funktioniert das auf Tischen nicht gut mit nur zwei oder drei Zeilen. Wenn Ihre Tabelle beispielsweise drei Zeilen in <tbody> und Sie "streifen" jeweils "sogar" Zeile enthält, können Sie nur einen Streifen haben. Dies ist dieses Muster nicht wert und kann den Benutzer fragen, was an dieser hervorgehobenen Linie besonders ist. Verwenden von Bramus unter Verwendung <code>:has() der Technik, um Stile anhand der Anzahl der untergeordneten Elemente zu verwenden, können wir Tabellenstreifen anwenden, wenn mehr als drei Zeilen vorhanden sind:

Möchten Sie fortgeschrittenere Funktionen? Sie können dies auch nur dann entscheiden, wenn die Tabelle mindestens eine bestimmte Anzahl von Spalten enthält:

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

Entfernen Sie die bedingte Klassenlogik aus Vorlage

Ich muss das Seitenlayout oft basierend auf dem, was sich auf der Seite befindet, ändern. Wenn Sie als Beispiel das folgende Netzlayout nutzen, ändert der Ort des Hauptinhalts den Gitterbereich entsprechend, ob die Seitenleiste existiert.

Dies kann davon abhängen, ob die Geschwisterseite im CMS festgelegt ist. Normalerweise verwende ich die Vorlagenlogik, um den Layout -Wrapper bedingt BEM -Modifikatorklassen hinzuzufügen, um beide Layouts anzupassen. Das CSS mag so aussehen (Reaktionsregeln und andere Inhalte werden für die Kürze weggelassen):

table:has(:is(td, th):nth-child(3)) {
  /* 只有在有三列或更多列时才执行操作 */
}

Natürlich ist dies absolut in Ordnung. Dies macht den Vorlagencode jedoch etwas unordentlich. Abhängig von Ihrer Vorlagensprache kann das Hinzufügen einer Reihe von Klassen bedingt sehr hässlich werden, insbesondere wenn Sie dasselbe mit vielen Kinderelementen tun müssen.

Vergleichen Sie dies mit einer Methode, die auf :has():

basiert

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page--with-sidebar {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
  grid-template-areas: '. m m m m m m m m m . .';
}

Ehrlich gesagt, aus Sicht der CSS ist dies nicht viel besser. Meiner Meinung nach ist es ein guter Gewinn, meiner Meinung nach die Klasse für bedingte Modifikator aus der HTML -Vorlage zu entfernen.

Es ist leicht, an die Mikrodesignentscheidungen von :has() zu denken, wenn beispielsweise Bilder in der Karte enthalten sind - aber ich denke, es ist auch sehr nützlich für diese Makro -Layout -Änderungen.

besseres spezifisches Management

Wenn Sie meine vorherigen Artikel lesen, werden Sie wissen, dass ich in der Spezifität beharrlich bin. Wenn Sie wie ich sind und nicht möchten, dass bestimmte Bewertungen beim Hinzufügen von :has() und :not() zum gesamten Stil steigen, verwenden Sie :where().

Dies liegt daran, dass die Spezifität von :has() in seiner Parameterliste auf dem spezifischsten Element von basiert. Wenn Sie also so etwas wie ID einbeziehen (ich weiß nicht warum!), Wird Ihr Selektor in der Kaskade schwer zu überschreiben.

Andererseits ist die Spezifität von

immer Null und erhöht niemals den Spezifitätswert. :where()

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page:has(.sidebar) {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) {
  grid-template-areas: '. m m m m m m m m m . .';
}

glänzende Zukunft

Dies sind nur einige der Funktionen, die ich in einer Produktionsumgebung nicht erwarten kann. CSS-Tricks Almanac liefert auch einige Beispiele. Worauf freuen Sie sich,

zu verwenden? Auf welchen wirklichen Fällen sind Sie begegnet, dass dies die perfekte Lösung wäre? :has()

Das obige ist der detaillierte Inhalt vonMehr reale Verwendungen für: Has (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!