How to block outer CSS to modify div - javascript

Scenario
Visit this link for Codehttps://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info
I do not want my innerDiv to get modified by CSS in outerDiv.
Is there some way to achieve this?
(contents(HTML) of InnerDiv are loaded via ajax call , and the resulting page already has its own CSS and both CSS files are messing up all the layouts and formats)

From a previous answer: all: initial isn't supported by Edge (Safari is finally OK)
So you can reset manually a hundred of properties if you really really really want to be sure (forget the most obscure ones you know you don't use. If you're a third party, well no luck).
You can (should) add the !important modifier (that's one of those cases where it isn't possible to do in some other way... Fine for me at least)
You can also add a whole lot of specificity to your selectors by adding an id to your component's parent and prefix each of your selectors with that id: #myComponent.my-component .my-component-descendant { color: #333 !important; }. If your existing CSS already uses id (meh), you can go even further (lower, quality wise) and use the same id multiple times in a single selector. #myComponent#myComponent#myComponent.my-component .my-component-descendant { color: #333 !important; }. What is one the crappiest thing you can imagine in a sane project is also a powerful tool when you need to add "enough" specificity.
Food for thought: the modern way of setting box-sizing by setting it on :root and then letting inheritance do its job can be helpful (or not) https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
Advantage: if you set another value on a descendant, descendants of the latter will inherit from it. You now have a whole part of your DOM inheriting from another value.

You can override the properties in you innerdiv; here I have overwritten the background-color property of the outerdiv
#outerMostDiv {background-color:red;}
#innerDiv {background-color:yellow;}
<div id="outerMostDiv">
<!-- SOME CSS HERE (say Outer CSS)-->
outer div
<div id="innerDiv">
<!-- some CSS HERE -->
innerdiv
</div>
</div>

Related

How do I escape a style for specific elements in html? [duplicate]

Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?
Example:
CSS:
.navigation input {
padding: 0;
margin: 0 30em;
}
HTML
<div class="navigation">
Some text: <input type="text" name="one" />
More text: <input type="text" name="two" />
<!-- The next input, I want it to be as browser-default -->
<div class="child">
<input type="text" name="three">
</div>
</div>
Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.
Here I'm using an input element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to reset it to its defaults.
Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?
Thanks in advance for any comments!
in your case you can use that :
.navigation input {
all: initial;
}
it will revert all attibutes of your input to initial value.
source :
http://www.w3schools.com/cssref/css3_pr_all.asp
CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:
.navigation input {
all: revert;
}
Still its browser support is not very impressive for the time of writing...
If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.
Few Examples
Meyer Web
HTML5 Doctor (CSS Reset With HTML5 Elements Included)
If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example
div {
color: red;
font-family: Arial;
}
div p {
/* Here it will inherit the parents child unless and
until you re specify properties with different values */
}
You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)
On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to
.navigation > input
But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.
The QUICK answer is to use the following CSS to revert your select HTML element back to the browsers default UA style sheet, or whatever is set in the body element:
.navigation input {
all:revert;
}
What Are your Trying to Default to?
Every browser by default comes with a default UA style sheet that applies styles to all HTML elements. HTML is unstyled by default. But as you add more styles to your web pages, through selectivity and cascade you write over many of these native default styles. Often that is ok, as you improve upon the browser's styles or alter them to fit your page design.
But know that the browser's default UA style sheet is usually the default. For example, the element "blockquote" is usually interpreted by most browser style sheets with a standard set of CSS formatting values close to the following:
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
However, this formatting is not always consistent between browsers. Each browser designs the HTML elements differently. That means each browser's default is not YOUR default or what you would like or expect. You want consistency, right?
To solve that problem, some people have started creating "reset css sheets" with custom values to layer over the browser's default styles and align all the browsers to the same formats. These sheets do this before applying custom CSS on top of that for specific web projects.This creates a "universal custom style" that overrides the browsers default styles, so all your projects, all your web pages, and all versions of browser start out with a base-level look-and-feel.
But there are problems with this.
Bootstrap, the popular 3rd party CSS vendor solution, creates its own "reboot" sheet to reset HTML elements and override the browser's sheets. But these "reset" styles are incomplete, so add more complexity as to what is the default. In doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of Bootstrap's reboot "blockquote" style shift, which changes default critical margins like so:
From the Bootstrap 4.0 reboot sheet:
blockquote {
margin: 0 0 1rem;/* top, right-left, bottom */
}
This Bootstrap fix that comes in all Bootstrap downloads fails as it strips the critical left-margin formatting that defines blocked quotes in scientific journals and adds one at the bottom. Bad design! In addition, older browsers don't know what "rem" is, so this solution would fail in a wide range of legacy browsers. It isn't just the custom styles in Bootstrap that's the issue. It is the overall CSS design that fails. Too many legacy browsers will fail to accept these Bootstrap proprietary styles, too many elements are missing from their sheets, its extremely difficult to erase them, and its often too difficult to go back to the browser's try default style sheet.
So, now that you understand all the variable involved, how do you manage all this? To try and return to a "default" you really need to understand how best to manage all these CSS systems in a way that is easy, comprehensive, and complete.
A Better Solution
In general, it is always better to consider the browser's default UA style sheet as the default, uncorrupted by any custom CSS you add later to the page. Then, because each browser is different, its best to use a comprehensive "reset" sheet that truly affects all HTML elements and works in a wider range of old and new browsers so it alters everyone's HTML. When done correctly, such sheets layer over the browser's default sheet correctly, but also apply custom CSS to the body element such that when you later use all:revert, the default goes back to the browser's default CSS style sheet, but includes some critical layout and font styles applied in the body element that affect the overall style and which do not get erased in your "reset" sheet.
Why? Because reverting back to defaults also includes whatever text or other inheriting CSS properties you added to the parent body tag. This allows you to not just honor the browser's default styles, but shift all the browser's to use the same body element text inheritance styles.
So, what I recommend when building CSS systems in web page design is the following:
Avoid Bootstrap, or at least turn off its "reboot" system as it is not complete and fails in too many legacy browsers.
Write or install your own HTML reset CSS system that changes all HTML design to a clean universal design all known browsers can share. This way they all start out looking the same, and the body element carries some critical text inheriting features you can revert back to.
When needing to revert back to a CSS default style on any element, simply use all:revert, which will reset styles on any element back to either your "reset" style sheet properties inherited from the body tag or go up the tree and back to the browser's default UA style sheet. Again, this will return your element's style properties back to either the browser's default UA style for the element or to the body tag's styles. If your "reset" sheet has carefully applied inheriting text styles to all browsers on the body element, they will be part of your element's default values you can revert to.
Note: Many web browser's do not support all:revert (Like Internet Explorer). So I recommend you combine all:revert with initial and inherit to force resets on some properties in older browsers.
The solution above will force all CSS in most modern browsers built today back to the original browser's defaults on an element-by-element basis. By using your own reset sheet, all the browsers will have the same default style on the body element which all child elements inherit. It means when you revert back an element, its default will include your browser's default styles but also any text-inheriting styles added to the body tag all child elements inherited.
Unfortunately, there's few good "reset" sheets online that do this well, combining your browser's default UA style sheet with your reset sheet. Very few have been carefully designed to reset CSS on elements for every browser known and all known versions, as well. You could write your own. Here is a very good CSS system you can use that does this for you I recommend: Universal CSS Framework
I think some of these should work:
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Valeurs globales */
clear: inherit;
clear: initial;
clear: unset;
sources :
toast rm -rf/*
lmgtfy : "css3+clear" on any search engine
https://developer.mozilla.org/fr/docs/Web/CSS/clear
You can use unset,
say you want to set border color to browser default
.navigation input {
padding: 0;
margin: 0 30em;
border-color: unset;
}
this will unset the style inherited from other classes.

Disable/Remove default !important declarations in elements

I have a CSS conflict going on with a major plugin in my wordpress site. The plugin maker found it handy to add !important declarations throughout all their styling sheets. From a developer's perspective; this is a disaster. In their defense they want to cover all themes that are using !important declarations, so it looks consistent. I do not agree, so I need a solution.
What happens is that my premium theme, who's not using those declarations, cannot override the styling. I have some solutions to remove certain classes by jQuery.
But there is a problem which cannot be resolved by removing classes. For example, the anchor:hover is default as border: none !important by the plugin. But I would like to see is that the anchor:hover border option is actually applied via the theme settings. The applied CSS is this (be aware that the .plugin class is not applied in the anchor, just from a CSS file):
.plugin a { border: none !important; }
Is there any way I can disable certain class combinations from the DOM? I'm happy to have this done with php or jQuery. Something like: .plugin is not applied to anchor I have no idea how to resolve this.
Surely this is just a case of overwriting the css with a better specified css line.
For example if the code is:
.plugin a::hover { border: none !important; }
You can overwrite this by doing:
body .plugin a::hover { border: 1px solid grey !important; }
Because you have added the element body to your css line it adds extra specificity meaning it overwrites the plugins css. You unfortunately have to use !important, as !important throws regular specificity ruling out the window (bad plugin creator).
More on css specificity here
Do you need any of the styles provided by the plugin? If not then it might be worth looking at dequeueing the plugin styles altogether and just adding your own styles where the theme doesn't cover it.
If you find out the registered name of the stylesheet (should be in the style tag) you can dequeue it with something like:
function remove_push_plugin_styles() {
wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );
You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:
var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.
The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.

Getting rid of background properties

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.
jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

Proper way to isolate all elements under an element from external styles of project

I just included a new js calendar in my project. The calendar displays like this -
<div style="position: absolute;" id="container">
<table cellspacing="0" cellpadding="0" align="center" class="DynarchCalendar-topCont">
<tbody>
<tr><td>
// lots of elements inside
<td><tr>
</tbody>
</table></div>
The problem is that the view of the calendar is appearing distorted due to some styles in my project like this -
div#sel_filters div.fields div {
margin-left: 10px;
}
div.filters div.fields div {
float: left;
padding: 7px 0 0;
}
... and many more which apply to the elements inside
There are many css files of the project. Since my calendar appears inside div.fields, the above styles apply to it as well. I am not considering altering the above project styles , as they may affect others.
What is the proper clean way of not allowing any styles other than those in the jscalendar.css file to affect it. DO I only have this option of applying !important to the styles in the jscalendar.css, and searching all the extra attributes, which are only set by project css, and setting them 0 or null manually.
In case it matters, I am free to include the jscalendar.css before/after project css files.
If you load your jscalendar.css after the other CSS files it should overwrite the other CSS directives.
If you still have problems, you could add a class to the divs that should behave differently and then add a CSS directive after the others to overwrite the previous ones:
div.filters div.fields div.yourClass {
float: none;
padding: 0;
margin: 0;
}
The proper way to do this unfortunately is to fix your site's CSS. What you're doing by applying styles to elements directly such as div's is going to lead to a world of pain for future maintenance or changes.
Avoid styling elements directly at all costs, use classes as much as possible, then IDs. Use elements with classes or IDs like div.foo or div#foo but not elements directly.
You could get away with !important in your calendar CSS for now but I'd spend that time fixing your site's CSS, as if ever you upgrade the calendar plugin you're looking at painful times again.
So take the hit now, look at the positive of having learnt how to do things properly and never repeat the same mistake again :)
apply a unique id to the container and change your CSS to reflect the heritage that derives from that... direct styling will get you to where you wanna go, but its gonna cost you in the long run if you have to maintain this later down the road...
but i must agree with Moin Zaman, if you hit this obstacle, its bound to happen again if you dont take care of it right now

Naming conventions for html/css + MVC?

Are there any good articles on naming comprehensive naming conventions?
I'm looking to clean up some code... everything from assets to models (Codeigniter) to HTML and CSS.
I'm also curious how to structure the CSS... is it better to give everything a unique class ie search-bar-icon or is it better to repeat classes like .search span.icon {?
Thanks,
Walker
In HTML/CSS, the id and class selectors are not equivalent. The id carries more weight, so it should be used sparingly. Use it for sections of a page where you have descendant selectors whose class names are the same as other sections but you wish them to be styled differently. Think of the id like a poor man's namespacing for page regions.
Giving each thing a unique id makes your selectors fastest, but bloats your markup and can become a bog to work with. Using unique classes kind of doesn't make sense (classes are used for groups of objects).
Your second option is the cleaner code wise but the selectors are usually significantly slower.
Giving literally everything a unique class in your CSS defeats the purpose of "Cascading" style sheets. Effective CSS leverages the cascade so that you're repeating as little styling effort as possible.
Bear in mind that most HTML elements can be styled directly. I don't need to use <span class="something"><label>... because I can style the label itself without using a span. Most people use far more divs and spans than they really need to.
You can also style by inference. For example, I might have an <H3 class="searchResults"> followed by a UL of search results that I want to style uniquely from other ULs on the page. Instead of giving the UL a specific class (of, say, "searchResultsList") I could just use the following rule:
H3.searchResults + ul {some styling...;}
or
H3.searchResults + div > * {some styling...;}
As for CSS organization, I find it helpful to organize my files by categories of elements, starting with the simplest and most ubiquitous cases, like a, p, etc. and then handle more complex elements like tables later. I group everything by specificity, because that's part of the cascade rules. An element is handled first in its order of appearance in the file, and then by how specific a rule affecting it is. I place all my one-instance and utility classes last (.iconWhichAppearsOnceEver, .noBordersTable, etc.)
body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...
It fully depends on what you think is best. Conventions aren't rules, they're guidelines that can make your life easier. Codeigniter has relatively strict naming conventions due to the way it loads all the required classes.
For example, the filename of a controller is lowercase but the classname is capitalized and should match the filename. E.g. test.php would results in a class named Test.
Naming HTML classes/IDs is something that isn't standardised and fully depends on what you think is best. I usually try to give my IDs and classes a name that makes sense. For example, a DIV containing a logo will be named "site_logo". A DIV containing a blog article will be named "article", and so on.
Also, don't let the whole "IDs/classes are slower" thing fool you as the speed increase is very small. If you want to optimize your website you'd be better off optimizing your PHP or CSS code than removing HTML IDs or classes.
Remember that you can stack and inherit CSS classes, as follows:
.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }
A nice technique I've used before is setting multiple CSS classes (in this case, for displaying an audit log):
/* the icon is displayed by each entry; if it has no other class,
it will show a "generic" icon */
.log .entry {
padding-left: 20px; /* leave space for icon */
background: url(../images/icons/log-generic.png) top left no-repeat;
}
/* slot a generic delete icon in */
.log .icon.delete {
color: red;
background-image: url(../images/icons/log-delete.png);
}
.log .icon.delete.person {
background-image: url(../images/icons/log-delete-person.png);
}
This is a great way to define a series of generic styles (for links with icons, toolbar buttons, avatars, etc), which you can then override in specific instances (think of it as class inheritance).
I'm a bit weird about naming in CSS, but I stick to the convention that UpperCase is for IDs, and lowerCamel for classes. It just helps me to differentiate.
The zen of CSS naming that I follow is:
The fewer IDs, the better
IDs should be reserved for main layout sections
...and to identify elements for DOM/AJAX operations
Use generic class names (log, icon, person, button, etc)
...then combine them with IDs or parent classes to form specifics, e.g. #Header a.icon.person for a profile link in the header
Most importantly, keep it lean. The less CSS, the better - use generic, re-usable styles, and you will benefit from a) consistency in your UI, and b) less page bloat.
HTH
The entire point of working with classes is so you can use them several times. For CSS specificly for a certain element you should use id's. As said, the less CSS code the better.

Categories