web-dev-qa-db-fra.com

Réinitialiser/supprimer les styles CSS pour élément uniquement

Je suis sûr que cela a dû être mentionné/demandé auparavant, mais je cherchais un âge sans chance, ma terminologie devait être fausse!

Je me souviens vaguement d'un Tweet que j'ai vu il y a quelque temps, suggérant l'existence d'une règle CSS permettant de supprimer tous les styles précédemment définis dans la feuille de style pour un élément particulier.

Un bon exemple d'utilisation pourrait être dans un site RWD mobile first, où une grande partie du style utilisé pour un élément particulier dans les vues de petit écran doit être réinitialisée ou supprimée pour le même élément dans la vue du bureau.

Une règle de css qui pourrait atteindre quelque chose comme:

.element {
  all: none;
}

Exemple d'utilisation:

/* 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;
  }
}

Nous pouvons donc rapidement supprimer ou redéfinir le style sans avoir à déclarer chaque propriété.

Logique?

css
387
matt_50

Le mot clé CSS3 initial définit la propriété CSS3 sur la valeur initiale définie dans la spéc . Le mot clé initial a une large prise en charge du navigateur sauf pour les familles IE et Opera Mini.

Comme le manque de support de IE peut causer des problèmes, voici certaines des façons dont vous pouvez réinitialiser certaines propriétés CSS à leurs valeurs initiales:

.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;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-Origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-Origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    Word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

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

Comme mentionné dans un commentaire de @ user566245:

ceci est correct en principe, mais le kilométrage individuel peut varier. Pour Par exemple, certains éléments comme textarea par défaut ont une bordure, appliquer cette réinitialisation rendra moins la bordure de ces textarea.

[POST EDIT FEB 4, '17] Voté pour devenir une norme moderne, utilisateur Joost 

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

EXEMPLE DE W3

Par exemple, si un auteur spécifie tout: initial sur un élément, il le fera bloquer tout l'héritage et réinitialiser toutes les propriétés, comme s'il n'y avait pas de règles apparaissant dans les niveaux auteur, utilisateur ou agent utilisateur de la cascade.

Cela peut être utile pour l'élément racine d'un "widget" inclus dans un page, qui ne souhaite pas hériter des styles de la page externe . Notez cependant que tout style "par défaut" appliqué à cet élément (tel que , Par exemple display: block de la feuille de style UA sur des éléments de bloc tels que As) sera également supprimé.

JAVASCRIPT?

Personne n'a pensé à autre que CSS pour réinitialiser CSS? Oui?

Il y a ce snip parfaitement pertinent: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") renverra tous les éléments du DOM. Alors vous peut définir des styles pour chaque élément de la collection:

répondu le 9 février 13 à 20:15 par VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

Avec tout cela dit; Je ne pense pas qu'une réinitialisation CSS soit une chose réalisable à moins que nous ne nous retrouvions avec un seul navigateur Web .. si le "défaut" est défini par le navigateur à la fin. 

À titre de comparaison, voici la liste des valeurs de Firefox 40.0 pour un <blockquote style="all: unset;font-style: oblique"> où font-style: oblique déclenche une opération DOM.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-Edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
Paint-order: unset;
perspective-Origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
Ruby-align: unset;
Ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-Origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
Word-break: unset;
Word-spacing: unset;
Word-wrap: unset;
writing-mode: unset;
z-index: unset;
494
Milche Patern

Pour les futurs lecteurs. Je pense que c'est ce que l'on voulait dire mais n'est pas actuellement largement supporté (voir ci-dessous):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}
  • Pris en charge dans ( source ): Chrome 37, Firefox 27, IE 11, Opera 24
  • Non pris en charge: Safari
132
joost

Permettez-moi de répondre à cette question de manière approfondie, car cela me fait mal depuis plusieurs années et très peu de gens comprennent vraiment le problème et pourquoi il est important de le résoudre. Si j'étais vraiment responsable des spécifications CSS, je serais gêné, franchement, de ne pas avoir abordé ce problème au cours de la dernière décennie.

Le problème

Vous devez insérer un balisage dans un document HTML, qui doit avoir une apparence spécifique. De plus, vous ne possédez pas ce document, vous ne pouvez donc pas modifier les règles de style existantes. Vous n'avez aucune idée de ce que les feuilles de style pourraient être, ni de ce qu'elles pourraient changer.

Les cas d'utilisation de ce type surviennent lorsque vous fournissez un composant affichable à des sites Web tiers inconnus. Des exemples de ceci seraient:

  1. Un tag publicitaire
  2. Construire une extension de navigateur qui insère du contenu
  3. Tout type de widget

Solution la plus simple

Tout mettre dans un iframe. Cela a son propre ensemble de limitations:

  1. Limitations de plusieurs domaines: votre contenu n'aura pas du tout accès au document original. Vous ne pouvez pas superposer de contenu, modifier le DOM, etc.
  2. Limites d'affichage: votre contenu est verrouillé à l'intérieur d'un rectangle.

Si votre contenu peut tenir dans une boîte, vous pouvez contourner le problème n ° 1 en demandant à votre contenu d'écrire un iframe et de définir explicitement le contenu, contournant ainsi le problème, puisque l'iframe et le document partageront le même domaine.

Solution CSS

J'ai cherché partout la solution à ce problème, mais il n'y en a malheureusement pas. Le mieux que vous puissiez faire est de remplacer explicitement toutes les propriétés pouvant être remplacées et de les remplacer par ce que vous pensez que leur valeur par défaut devrait être.

Même lorsque vous remplacez, il n’existe aucun moyen de s’assurer qu’une règle CSS plus ciblée ne remplacera pas la votre. Le mieux que vous puissiez faire ici est de cibler le plus précisément possible vos règles de substitution et d'espérer que le document parent ne le réussira pas accidentellement: utilisez un ID obscur ou aléatoire sur l'élément parent de votre contenu et utilisez! Important dans toutes les définitions de valeur de propriété .

25
JS_Riddler

Une toute nouvelle solution a été trouvée à ce problème.

Vous avez besoin de "Une règle CSS disponible permettant de supprimer tous les styles précédemment définis dans la feuille de style pour un élément particulier."

Donc, si l’élément a un nom de classe comme remove-all-styles:

Par exemple: 

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

Avec CSS:

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

Réinitialise tous les styles appliqués par other-class, another-class et tous les autres styles hérités et appliqués à cette div.

Ou dans votre cas: 

/* 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: revert;
  }
}

Ça ira.

Ici, nous avons utilisé une propriété CSS intéressante avec une autre valeur CSS intéressante.

  1. revert

En fait, revert, comme son nom l'indique, rétablit cette propriété en son style d'utilisateur ou d'agent d'utilisateur.

  1. all

Et lorsque nous utilisons revert avec la propriété all, toutes les propriétés CSS appliqué à cet élément sera rétabli en styles utilisateur/agent utilisateur.

Cliquez ici pour connaître la différence entre les styles auteur, utilisateur et agent utilisateur.

Par exemple, si nous voulons isoler les composants/widgets incorporés des styles de la page qui les contient, nous pourrions écrire:

.isolated-component {
 all: revert;
}

Ce qui rétablira tous les author styles (c.-à-d. Les CSS du développeur) en user styles (styles définis par un utilisateur de notre site Web - scénario moins probable) ou en user-agent se stylise si aucun style utilisateur n'est défini.

Plus de détails ici: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Et le seul problème est le support : seuls Safari 9.1 et iOS Safari 9.3 prennent en charge la valeur revert au moment de la rédaction.

Je vais donc dire d'utiliser ce style et de recourir à toute autre réponse.

15
Asim K T

une autre façon:

1) inclure le code css (fichier) de Yahoo CSS reset puis tout mettre dans cette DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) ou utilisez http://www.cssreset.com

11
T.Todua

Si vous utilisez sass dans un système de construction, une façon de le faire qui fonctionnera dans tous les principaux navigateurs consiste à envelopper toutes vos importations de style avec un sélecteur: not () comme ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Ensuite, vous pouvez utiliser la classe disable sur un conteneur et le sous-contenu n'aura aucun de vos styles.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

Bien sûr, tous vos styles seront désormais précédés du sélecteur: not (), donc c'est un peu moche, mais ça fonctionne bien.

3
BrandonReid

Je ne recommande pas d'utiliser la réponse qui a été marquée comme correcte ici. C'est un gros morceau de CSS qui essaie de tout couvrir.

Je suggérerais que vous évaluiez comment supprimer le style d'un élément au cas par cas.

Disons qu'à des fins de référencement, vous devez inclure un H1 sur une page qui n'a pas d'en-tête dans la conception. Vous voudrez peut-être faire du lien de navigation de cette page un H1, mais vous ne voudrez bien sûr pas que ce lien de navigation apparaisse en tant que H1 géant sur la page.

Ce que vous devez faire, c'est insérer cet élément dans une balise h1 et l'inspecter. Voir quels styles CSS sont appliqués spécifiquement à l'élément h1.

Disons que je vois les styles suivants appliqués à l'élément.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Maintenant, vous devez identifier le style exact qui est appliqué au H1 et les désactiver dans une classe CSS. Cela ressemblerait à ceci:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Ceci est beaucoup plus propre et ne dépose pas simplement une quantité aléatoire de code dans votre css, ce que vous ne savez pas ce qu'il fait réellement.

Maintenant, vous pouvez ajouter cette classe à votre h1 

<h1 class="no-style-h1">
     Title
</h1>
3
Harry

Dans mon scénario spécifique, je voulais éviter d'appliquer des styles communs à une partie spécifique de la page, mieux illustrée comme ceci:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

Après avoir joué avec la réinitialisation CSS qui n’a pas eu beaucoup de succès (principalement en raison de la priorité des règles et de la hiérarchie complexe des feuilles de style), jQuery est omniprésent à la rescousse, ce qui a fait le travail très rapidement et de façon relativement sale:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(Dites maintenant combien il est mauvais d’utiliser JS pour traiter les CSS :-))

1
esteewhy

Vous avez mentionné les sites mobiles d'abord ... Pour un design réactif, il est certainement possible de remplacer les styles de petit écran par des styles de grand écran. Mais vous n'en aurez peut-être pas besoin.

Essaye ça:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Ces requêtes multimédias ne se chevauchent pas, donc leurs règles ne se superposent pas. Cela facilite la gestion de chaque ensemble de styles séparément.

0
jkdev

si vous définissez votre code CSS dans les classes, vous pouvez facilement les supprimer à l’aide de la méthode jQuery removeClass (). Le code ci-dessous supprime la classe .element:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

Si aucun paramètre n'est spécifié, cette méthode supprimera les noms de classe ALL des éléments sélectionnés.

0
A. K.

MEILLEURE SOLUTION

Téléchargez la feuille de style "copier/coller" pour rétablir les propriétés css par défaut (style UA):
https://github.com/monmomo04/resetCss.git

Merci @ Milche Patern!
Je cherchais vraiment la valeur des propriétés de style réinitialisées/par défaut. Mon premier essai a été de copier la valeur calculée à partir de l'outil de développement du navigateur de l'élément racine (html). Mais comme il a été calculé, il aurait semblé/fonctionné différemment sur chaque système.
Pour ceux qui rencontraient un blocage de navigateur en essayant d’utiliser l’astérisque * pour réinitialiser le style des éléments enfants, et comme je savais que cela ne fonctionnait pas pour vous, j’ai remplacé l’astérisque "*" par le nom des balises HTML à la place. Le navigateur ne s'est pas bloqué. Je suis sur Chrome Version 46.0.2490.71 m.
Enfin, il est bon de mentionner que ces propriétés réinitialiseront le style au style par défaut de l'élément racine le plus élevé, mais pas à la valeur initiale de chaque élément HTML. Donc, pour corriger cela, j'ai pris les styles "user-agent" du navigateur Webkit et les ai mis en œuvre dans la classe "reset-this".


Téléchargez la feuille de style "copier/coller" pour réinitialiser les propriétés CSS à la valeur par défaut (style UA):
https://github.com/monmomo04/resetCss.git

Style de l'agent utilisateur:
CSS par défaut des navigateurs pour les éléments HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Spécifité Css (faites attention à la spécifité):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

0
Monero Jeanniton

Pour ceux d'entre vous qui essaient de comprendre comment supprimer le style de l'élément uniquement, sans supprimer le css des fichiers, cette solution fonctionne avec jquery:

$('.selector').removeAttr('style');
0
Jeff Davenport