Reset/remove CSS styles for element only
|
9:32 PM |
No comments |
Reset/remove CSS styles for element only
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 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; } Eaxmple 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.
Make sense?
Answer by WIWIWWIISpitFire for Reset/remove CSS styles for element only
No, this is just a matter of managing your css structure better.
In your case i would order my css something like this:
.element, .element1, .element2 p{z-index: 50; display: block} .element, .element1{margin: 0 10} .element2 p{transform: translate3d(0, 0, 0)} @media only screen and (min-width: 980px) { .element, .element1, .element2 p{display: none} } Just experiment.
Answer by Erik Nijland for Reset/remove CSS styles for element only
Any chance you're looking for the !important rule? It doesn't undo all declarations but it provides a way to override them.
"When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity."
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception
Answer by Milche Patern for Reset/remove CSS styles for element only
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; } 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.
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser ..
Answer by tazo todua for Reset/remove CSS styles for element only
another ways:
1) incude the css code/file of Yahoo CSS reset ( http://yuilibrary.com/yui/docs/cssreset/ ) then put everything inside this DIV:
2) use http://www.cssreset.com
Answer by JS_Riddler for Reset/remove CSS styles for element only
Let me answer this question thoroughly, because it's been a source of pain for me for several years and very few people really understand the problem and why it's important for it to be solved. If I were at all responsible for the CSS spec I'd be embarrassed, frankly, for having not addressed this in the last decade.
The Problem
You need to insert markup into an HTML document, and it needs to look a specific way. Furthermore, you do not own this document, so you cannot change existing style rules. You have no idea what the style sheets could be, or what they may change to.
Use cases for this are when you are providing a displayable component for unknown 3rd party websites to use. Examples of this would be:
- An ad tag
- Building a browser extension that inserts content
- Any type of widget
Simplest Fix
Put everything in an iframe. This has it's own set of limitations:
- Cross Domain limitations: Your content will not have access to the original document at all. You cannot overlay content, modify the DOM, etc.
- Display Limitations: Your content is locked inside of a rectangle.
If your content can fit into a box, you can get around problem #1 by having your content write an iframe and explicitly set the content, thus skirting around the issue, since the iframe and document will share the same domain.
CSS Solution
I've search far and wide for the solution to this, but there are unfortunately none. The best you can do is explicitly override all possible properties that can be overridden, and override them to what you think their default value should be.
Even when you override, there is no way to ensure a more targeted CSS rule won't override yours. The best you can do here is to have your override rules target as specifically as possible and hope the parent document doesn't accidentally best it: use an obscure or random ID on your content's parent element, and use !important on all property value definitions.
Answer by joost for Reset/remove CSS styles for element only
For future readers. I think this is what was meant but currently isn't really wide supported (see below):
#someselector { all: initial; * { all: unset; } } - Supported in (source): Chrome 37, Firefox 27, IE 11, Opera 24
- Not supported: Safari
Answer by monmomo04 for Reset/remove CSS styles for element only
Thanks@Milche Patern!
I was really looking for reset/default style properties value. My first try was to copy the computed value from the browser Dev tool of the root(html) element. But as it computed, it would have looked/worked different on every system.
For those who encounter a browser crash when trying to use the asterisk * to reset the style of the children elements, and as I knew it didn't work for you, I have replaced the asterisk "*" with all the HTML tags name instead. The browser didn't crash; I am on Chrome Version 46.0.2490.71 m.
At last, it's good to mention that those properties will reset the style to the default style of topest root element but not to the initial value for each HTML element. ?So to correct this, I have taken the "user-agent" styles of webkit based browser and implemented it under the "reset-this" class.
User-agent style:
Browsers' default CSS for HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Css specifity (pay attention to specifity) :
https://css-tricks.com/specifics-on-css-specificity/
Download "copy/paste" stylesheet? to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git
Answer by jkdev for Reset/remove CSS styles for element only
You mentioned mobile-first sites... For a responsive design, it's certainly possible to override small-screen styles with large-screen styles. But you might not need to.
Try this:
.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. */ } } Those media queries don't overlap, so their rules don't override each other. This makes it easier to maintain each set of styles separately.
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment