Die anderen CSS-Tricks, die Sie kennen sollten

Hey!

Ich möchte nur meine CSS-Techniken teilen. Ich habe viele Kollegen, die das nicht wissen. Vielleicht auch du. Ich hoffe, es wird für Sie interessant sein.

So schreiben Sie CSS abhängig von der Anzahl der Kinder

Die erste Lösung

.uia-control {
  display: inline-flex;
  gap: 1rem;
  /* remaining CSS */
}

Meine Lösung

.uia-control {
  display: inline-flex;
  /* remaining CSS */
}

.uia-control:has(> :nth-child(2)) {
  gap: 1rem;
}

Ich musste immer eine Lücke definieren. Auch wenn das Element nur ein untergeordnetes Element hat. Wir können es mit :has() vermeiden! Ich habe die Lücke angewendet, wenn uia-control mindestens 2 Kinder hat?

Nehmen Sie mit benutzerdefinierten Eigenschaften Änderungen an einem Ort vor

Die erste Lösung

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

Meine Lösung

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

Müssen Sie ein Element mit Abhängigkeit vom CSS eines anderen Elements erstellen? Sie sollten benutzerdefinierte Eigenschaften verwenden! Es erspart Ihnen endloses Suchen. Änderungen an einem Ort vornehmen?

CSS ohne Auftragsabhängigkeiten

Die erste Lösung

.heading_size-l {
  font-size: 2rem;
}

.heading {
  font-size: 1rem;
}

Meine Lösung

.heading_size-l {
  --heading-font-size: 2rem;
}

.heading {
  font-size: var(--heading-font-size, 1rem);
}

Ein Problem mit der Regelreihenfolge mit derselben Spezifität macht sich bemerkbar, wenn wir eine Komponente mit einigen Änderungen haben. Leute, es kann vermieden werden. Benutzerdefinierte CSS-Eigenschaften helfen?

Setzen Sie Medienanfragen auf Diät

Die erste Lösung

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

@media (width >= 641px) {
  .intro__heading {
    font-size: 3rem;
  }

  .intro__description {
    font-size: 2rem;
  }  
}

Meine Lösung

.intro__heading {
  font-size: var(--intro-heading-font-size, 2rem);
}

.intro__description {
  font-size: var(--intro-description-font-size, 1rem);
}

@media (width >= 641px) {
  .intro {
    --intro-heading-font-size: 3rem;
    --intro-description-font-size: 2rem;
  }  
}

Wir müssen viele Regeln schreiben, indem wir Medienabfragen verwenden. Aus diesem Grund bläht sich der Code auf. Nun, benutzerdefinierte Eigenschaften behalten die Codegröße bei ?

Benutzerdefinierte Kontrollkästchen gelten für Steroide mit :has()

Die erste Lösung

.cb__input:checked + .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Meine Lösung

.cb:has(:checked) .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Der Nächste-Geschwister-Kombinator hat einen Nachteil. Es geht kaputt, wenn die Reihenfolge der Elemente geändert wird. :hat dieses Problem gelöst ?

P.S. Wenn es Ihnen gefällt, erhalten Sie mehr, indem Sie meinen Newsletter abonnieren.

Das obige ist der detaillierte Inhalt vonDie anderen CSS-Tricks, die Sie kennen sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!