Andere schauen sich den bedingten Trick des Randradius -Tricks an

Erinnern Sie sich an Ahmad Shadeeds faszinierendes Facebook CSS Border-Radius "Toggle"? Ich habe diese clevere Technik zuvor behandelt. Nachfolgende Artikel boten eine tiefere Analyse.

Michelle Barkers "Bewertung von cleveren CSS -Lösungen" stellt die Weisheit des übermäßig cleveren Codes in Frage:

Während ich zweifellos genial und faszinierend bin, stimme ich mit Robin Rendles CSS-Tricks-Newsletter-Kommentar zu: "Es fühlt sich ein bisschen zu klug an."

Dieses Gefühl schwingt mit. Solche Techniken haben ihren Platz, vielleicht in den Ressourcen von Facebook. Die Priorisierung der Lesbarkeit (z. B. die Verwendung von Medienabfragen) gegenüber cleveren, aber möglicherweise weniger wartbaren Lösungen ist jedoch im Allgemeinen vorzuziehen.

Stefan Judis untersuchte mit den kommenden Containerfragen den gleichen "bedingten Grenz-Radius" -Effekt:

 /* Wenn die Breite des Behälters gleich oder größer ist als 
   Die Ansichtsfensterbreite entfernen Sie den Grenzradius */
@Container (width> = 100vw) {
  .Konditional-Gradius {
    Grenzradius: 0;
  }
}

Dieser Ansatz ist deutlich klarer. Stefan schlägt auch die potenziellen Vorteile einer hypothetischen @when -Funktion vor:

 @When Container (Breite> = 100VW) {
  .Konditional-Gradius {
    Grenzradius: 0;
  }
}
@anders {
  .Konditional-Gradius {
    Grenzradius: 1EM;
  }
}

Die Machbarkeit dieser @when die Integration ungewiss bleibt. Die Einbeziehung würde jedoch die Lesbarkeit und die logische Konsistenz von CSS verbessern.

In einem früheren Artikel wurde kurz die Rolle der Multiplikation bei der Verhinderung von Zwischenwerten erwähnt: Das Ergebnis ist entweder 8px oder 0px. Um dies zu verdeutlichen, ist unten eine Videodemonstration enthalten. (Hinweis: Ein Video wird hier in der tatsächlichen Veröffentlichung eingefügt.)

Das obige ist der detaillierte Inhalt vonAndere schauen sich den bedingten Trick des Randradius -Tricks an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!