Menu
I'm sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong!
I vaguely remember a tweet I saw a while ago that suggested that there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.
A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view.
A css rule that could achieve something like:
.element { all: none; } Example usage:
/* 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 we could quickly remove or re-set styling without having to declare every property.
Makes sense?
531
Use the removeAttribute() method to remove all styles from an element, e.g. box. removeAttribute('style') . The removeAttribute method will remove the style attribute from the element.
Use the style. removeProperty() method to remove CSS style properties from an element, e.g. box. style. removeProperty('background-color') .
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value. It is of course possible to set a property a value that you expect to be the default value.
Select the "CSS" option in the Web Developer extension and click "Disable All Styles," or click the "Style Sheets" option in Pendule and click "Disable All Styles." After you click the option, the page will re-display without the styles.
The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.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; } } As mentioned in a comment by @user566245 :
this is correct in principle, but individual mileage may vary. For example certain elements like textarea by default have a border, applying this reset will render those textarea's border less.
JAVASCRIPT ?
Nobody thought about other than css to reset css? Yes?
There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310
getElementsByTagName("*") will return all elements from DOM. Then you may set styles for each element in the collection:
answered Feb 9 '13 at 20:15 by VisioN
var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i < len; i++) { var element = allElements[i]; // element.style.border = ... } With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.
For comparison, here is Firefox 40.0 values list for a <blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.
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; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
