Wie man CSS-Stile für ein bestimmtes Element oder nur einen Selektor zurücksetzt/entfernt

Question

Gibt es eine verfügbare CSS-Regel, die alle zuvor im Stylesheet für ein bestimmtes Element festgelegten Styles entfernt?

Ein gutes Beispiel für die Verwendung könnte auf einer mobile-first RWD-Website liegen, wo ein Großteil des Stylings, das für ein bestimmtes Element in den Ansichten mit kleinem Bildschirm verwendet wird, für dasselbe Element in der Desktop-Ansicht 'zurückgesetzt' oder entfernt werden muss.

Eine CSS-Regel, die so etwas erreichen könnte:

.element {
  all: none;
}

Beispiel für die Verwendung:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

So könnten wir schnell das Styling entfernen oder zurücksetzen, ohne jede Eigenschaft einzeln deklarieren zu müssen.

Answer 1

Die CSS-Eigenschaft all hat ein Schlüsselwort initial, das die CSS-Eigenschaft auf den im Spezifikation definierten Initialwert setzt. Das Schlüsselwort all hat breite Browserunterstützung mit Ausnahme der IE- und Opera Mini-Familien.

/* grundlegende moderne Anpassung */

#reset-this-root {
    all: unset;
}

oder

#reset-this-root {
    all: initial;
}

Da der Mangel an Unterstützung durch IE möglicherweise Probleme verursacht, hier einige Möglichkeiten, wie Sie einige CSS-Eigenschaften auf ihre Initialwerte zurücksetzen können:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    ...

• Relevanter GitHub-Repo mit einer ausführlicheren Liste von Dezember 2017
• Verwandt
• Verwandt von MDN
• Verwandte W3C-Spezifikationen

Trotz allem glaube ich nicht, dass ein CSS-Reset realisierbar ist, es sei denn, wir landen letztendlich nur bei einem Webbrowser, wenn das 'Standard' am Ende vom Browser festgelegt wird.

Answer 2

Die all-Eigenschaft funktioniert so und arbeitet wie folgt:

CSS:

#someselector {
  all: initial;
}

#someselector * {
  all: unset
}

SCSS:

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• Funktioniert in allen gängigen Browsern, die noch unterstützt werden. Funktioniert nicht in Internet Explorer, falls Sie diesen noch pflegen müssen.

Answer 3

Verwenden Sie all: revert oder all: unset.

Von MDN:

Das Schlüsselwort revert funktioniert in vielen Fällen genau wie unset. Der einzige Unterschied besteht bei Eigenschaften, die vom Browser oder von benutzerdefinierten Stylesheets (auf der Browserseite) festgelegt sind.

Sie benötigen "Eine verfügbare CSS-Regel, die alle zuvor im Stylesheet für ein bestimmtes Element festgelegten Styles entfernen würde."

Wenn das Element also einen Klassennamen wie remove-all-styles hat:

HTML:

    Mein Text 

Mit CSS:

  .remove-all-styles {
    all: revert;
  }

Dies setzt alle von other-class, another-class und allen anderen geerbten und angewendeten Styles auf dieses div angewendeten Styles zurück.

Oder in Ihrem Fall:

/* Mobile First */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   usw..
   usw..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

Wird funktionieren.

Wenn wir eingebettete Widgets/Komponenten von den Styles der Seite isolieren wollen, die sie enthält, könnten wir folgendes schreiben:

.isolated-component {
 all: revert;
}

Was alle Autorenstyles (d.h. Entwickler-CSS) zu Benutzerstyles (Styles, die der Benutzer unserer Website festlegt - das weniger wahrscheinliche Szenario) oder zu Benutzer-Agent-Styles selbst zurücksetzt, wenn keine Benutzerstyles festgelegt sind.

Answer 4

Das Problem

Sie müssen Markup in ein HTML-Dokument einfügen, und es muss auf eine bestimmte Weise aussehen. Darüber hinaus besitzen Sie dieses Dokument nicht, sodass Sie vorhandene Style-Regeln nicht ändern können. Sie haben keine Ahnung, wie die Stylesheets sein könnten oder wie sie sich ändern könnten.

Anwendungsfälle hierfür sind, wenn Sie eine anzeigbare Komponente für unbekannte Websites von Dritten bereitstellen möchten. Beispiele hierfür wären:

1. Ein Anzeigetag
2. Erstellung einer Browsererweiterung, die Inhalte einfügt
3. Jede Art von Widget

Einfachste Lösung

Alles in ein iframe setzen. Dies hat seine eigenen Einschränkungen:

1. Cross-Domain-Einschränkungen: Ihr Inhalt hat überhaupt keinen Zugriff auf das ursprüngliche Dokument. Sie können keine Inhalte überlagern, das DOM nicht ändern usw.
2. Anzeige-Einschränkungen: Ihr Inhalt ist in einem Rechteck eingeschlossen.

Wenn Ihr Inhalt in ein Feld passt, können Sie Problem Nr. 1 umgehen, indem Ihr Inhalt ein iframe schreibt und den Inhalt explizit festlegt, um das Problem zu umgehen, da das iframe und das Dokument dieselbe Domäne teilen werden.

CSS-Lösung

Das Beste, was Sie tun können, ist, alle möglichen Eigenschaften explizit zu überschreiben und sie auf das zu ändern, was Sie für ihren Standardwert halten.

Auch wenn Sie überschreiben, gibt es keine Möglichkeit, sicherzustellen, dass eine gezielte CSS-Regel nicht Ihre überschreibt. Das Beste, was Sie hier tun können, ist, Ihre Überschreibungsregeln so spezifisch wie möglich auszurichten und zu hoffen, dass das übergeordnete Dokument sie nicht versehentlich übertrifft: Verwenden Sie eine obskure oder zufällige ID auf dem übergeordneten Element Ihres Inhalts und verwenden Sie !important für alle Werte der Eigenschaften.

Answer 5

Andere Möglichkeiten:

1) inkludiere den CSS-Code (Datei) von Yahoo CSS-Reset und platziere dann alles innerhalb dieses DIVs:

2) oder verwende

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/