How to check if two CSS files for same classes existence, automatically.
You can use a css/html/js debugger as Firebug for Firefox.
When inspecting a specific element of a html page, the debugger shows all style properties applied to the element, why they're applied (class, id, tag, inherited) and from which css file the properties are coming.
There is no automatic way to do that as far as I know, but I would suggest that you use some kind of comparing tool, like BeyondCompare. It gives you a great insight of differences between two files.
Related
I understand that if a sytle is overridden then it is crossed out in Google Chrome tools and then you can go to the Computed tab to see, which element has overridden the style.
Say I have some css like this:
.myClass
{
position:static;
top: 20px;
}
This is clearly wrong because the top attribute does not work with positions that are static. When I load the webpage in Google Chrome and press F12; the style appears under the styles tab as if it was applied to the webpage, which I find a little confusing.
Does Google Chrome (or any other browser/tool) tell you what the error is e.g. "cannot apply top to statically applied element" (like you get in Visual Studio when there is an error in your code e.g. NullPointerException).
A CSS class is a set of rules applicable to any element on your page that also can change during the live time of the page. As mentioned in Dais comment, properties are inherited and cascade down.
There is no reliable way to validate a set of CSS rules, because they all interplay each other and are about to change. Especially if you ask for a feature in your IDE like the NullPointerException hint this won't work, because CSS classes are composable and are JIT compiled. An IDE could not know beforehand which class are combined with other classes assigned to which elements in regards to the DOM tree at a specific app time state.
Mozilla Firefox has such a feature. It tells you why a rule isn't applied directly in the Inspector.
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
I built an extension which, whenever user visits some specific sites, I inject my script on the top of there web pages. I used
document.body.insertBefore(wrapperDiv, document.body.firstChild)
to do so.
Now problem: CSS of injected script gets messed up for each and every site(differ from one site to another).
How should I maintain single css structure for all sites?
You should be able to solve this problem by using unique IDs for your html tags with CSS.
That is, if your DIV CSS properties are interfering with their DIV CSS add a #uniqueNameHere ID to your DIV and set the CSS for the #ID.
This page on the use of the !important keyword may be useful too.
http://css-tricks.com/9462-when-using-important-is-the-right-choice/
Use unique selectors for your elements (be it classes with specific prefix or similarly constructed IDs), but you probably try to include CSS along with your script, which may not be a good idea.
In some cases the inline styling is the best idea - it will overwrite all the styles for your elements and will make sure the outlook of these elements is consistent across different pages.
So, I would say, go with inline styling.
For documentation on how the styles are overwritten in CSS 2.1, please see the following page: http://www.w3.org/TR/CSS21/cascade.html#specificity