Native-Element-Styling mit CSS `all: unset` entfernen

Sie kennen das: Sie möchten einen individuell gestalteten Button und beginnen, die Browser-Standardwerte Eigenschaft für Eigenschaft zu überschreiben. border: none. background: none. padding: 0. cursor: pointer. Es funktioniert, fühlt sich aber falsch an — als würden Sie Whack-a-Mole mit dem User-Agent-Stylesheet spielen.

Es gibt einen saubereren Ansatz: die CSS-Eigenschaft all. Genauer gesagt: all: unset. Dieser Artikel erklärt genau, was sie bewirkt, wann Sie sie einsetzen sollten und was sie stillschweigend zerstört — einschließlich Fokus-Stilen, auf die Tastaturnutzer angewiesen sind.

Was all: unset in der CSS-Kaskade tatsächlich bewirkt

Die all-Eigenschaft ist eine Kurzschreibweise, die jede CSS-Eigenschaft auf einmal setzt, mit Ausnahme von unicode-bidi, direction und CSS Custom Properties. Laut MDN wendet all: unset die folgende Regel auf jede Eigenschaft an:

• Ist die Eigenschaft vererbt (wie color, font-size, line-height), erbt sie vom Elternelement.
• Ist die Eigenschaft nicht vererbt (wie display, border, background, padding), wird sie auf den Initialwert der CSS-Spezifikation zurückgesetzt.

Das ist eine entscheidende Unterscheidung. all: unset stellt keine Browser-Standardwerte wieder her. Es setzt nicht vererbte Eigenschaften auf ihre Spezifikations-Standardwerte zurück — was nicht dasselbe ist. Ein <button> mit all: unset wird nicht wie ein einfacher Browser-Button aussehen. Er verliert sein display, appearance, den Rahmen, das Padding und den Fokus-Ring vollständig.

Die vier Werte der all-Eigenschaft

Für individuelle UI-Komponenten ist all: unset in der Regel die richtige Wahl. Wenn Sie Ihre eigenen Stylesheet-Überschreibungen rückgängig machen möchten, ohne die Browser-Standards anzutasten, ist all: revert die bessere Option.

Einen Button auf die richtige Weise zurücksetzen

Hier ist ein praktisches Button-Reset-Muster, das Native-Element-Styling entfernt, ohne die Zugänglichkeit zu beeinträchtigen:

.button-reset {
  all: unset;

  /* Restore safe defaults */
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;

  /* Your custom styles */
  padding: 0.5rem 1rem;
  background: #0070f3;
  color: white;
  border-radius: 4px;
}

/* Always restore focus visibility for keyboard users */
.button-reset:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
}

Die :focus-visible-Regel ist nicht verhandelbar. all: unset entfernt den Standard-Fokus-Ring des Browsers, wodurch Tastaturnutzer ihren einzigen visuellen Indikator dafür verlieren, wo sich der Fokus befindet. Die Wiederherstellung mit :focus-visible folgt den Browser-Heuristiken dafür, wann ein sichtbarer Fokus-Indikator angezeigt werden sollte — typischerweise bei der Tastaturnavigation, ohne die Umrandung bei Mausklicks immer einzublenden.

all: unset vs. appearance: none — das ist nicht dasselbe

Dies ist eine häufige Quelle von Verwirrung. appearance: none entfernt lediglich das native OS-Level-Rendering von Formular-Steuerelementen — die plattformspezifische Darstellung, die ein <select> wie ein macOS-Dropdown oder eine Windows-Combobox aussehen lässt. Es berührt weder Layout noch Abstände, Farben oder andere CSS-Eigenschaften.

all: unset ist ein umfassender Reset der CSS-Kaskade. Es beeinflusst alles (mit den oben genannten kleinen Ausnahmen).

Für native Formular-Steuerelemente wie <select>, <input> und <textarea> benötigen Sie oft beides:

select {
  all: unset;
  appearance: none; /* Removes OS-level control rendering */
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

Beachten Sie, dass einige Browser zusätzlich den Präfix -webkit-appearance: none für vollständige Cross-Browser-Unterstützung in älteren Versionen von Safari und iOS benötigen. Die Browser-Unterstützung sowohl für all als auch für appearance ist in modernen Browsern hervorragend.

Wann Sie all: unset nicht verwenden sollten

Vermeiden Sie all: unset bei Elementen, bei denen Sie nur wenige Eigenschaften ändern möchten. Es ist ein grobes Werkzeug. Wenn Sie lediglich Hintergrund und Rahmen eines Buttons entfernen möchten, sprechen Sie diese Eigenschaften direkt an — das führt seltener zu unerwarteten Nebenwirkungen.

Vermeiden Sie es auch bei Container-Elementen. Das Zurücksetzen von display auf einem Flex- oder Grid-Elternelement lässt Ihr Layout stillschweigend kollabieren.

Fazit

all: unset ist eine mächtige Abkürzung, um Native-Element-Styling von Buttons, Links und Formular-Steuerelementen zu entfernen — aber es setzt alles zurück, einschließlich Eigenschaften, die Sie wahrscheinlich behalten möchten. Stellen Sie nach der Verwendung immer display, box-sizing, cursor und insbesondere :focus-visible wieder her. Kombinieren Sie es mit appearance: none, wenn Sie mit nativen Formular-Steuerelementen arbeiten, die OS-Level-Rendering aufweisen. Mit Bedacht eingesetzt, ist es eines der saubersten Werkzeuge in modernem CSS, um individuelle UI-Komponenten von Grund auf zu bauen.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..