How do you find number of style classes defined in a CSS file? I need to clean my stylesheet. Please tell me of any good clean-up solutions.
I just tried to get count of '{', worked
Try Dust-me, a Firefox add-one. It shows you all unused CSS selectors. https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/
Related
Here is example it's only forking in html and not in css
How to fix this problem?
It's dificult to find information on internet because i am the only one who have this problem
In your case, the image shows you are outside of a css ruleset so there are many fewer emmet abbreviations that will work there. Your image shows what happens with a prefix of pos - it suggests things like :placeholder-shown, etc. that do appear as part of a css selector. If you are expecting the rest of the emmet abbreviations, like bg for background-color, use it IN a ruleset.
There seems to be some confusion from commenters (some since deleted) that emmet does not work in a css file - it does and has for some time.
What's a good way to create a no-conflict version of a CSS stylesheet? Let's say you have a bunch of code with classes that overlap with Bootstrap's classes.
Is this valid: adding a class="bootstrap" to the ancestor element under which bootstrap styles should be applied, and then changing bootstrap.css to prefix every rule {} with .bootstrap rule {}?
I've also needed to do this recently with the bootstrap form styles to avoid clashes, and I've found that you can surround all the #imports in the bootstrap.less (or your own custom version) with: .bootstrap { ... } and rebuild bootstrap. Now every CSS selector will be prefixed with .bootstrap.
I don't see any reason that would not work, but there are probably some performance implications to doing that - I'm not sure if they would even be significant enough to consider. It would probably be a better idea to rename the conflicting classes.
Here are a couple of resources to check out:
http://www.vanseodesign.com/css/css-selector-performance/
https://developer.mozilla.org/en/Writing_Efficient_CSS
And this is from Mozilla's CSS efficiency guidelines (2nd link): "This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be."
Yes. That is an ugly approach and you will get into DOM Bashing (slower performance). Is there any reason why you couldn't just refactor your code and seperate the bootstrap styles entirely?
I`m trying to manipulate the css of the zimbra, I do not mean a thing, in some style files i found this:
body { #ChromeBg# }
who can explain the usage of #, after and before ChromeBg?
This is specific to Zimbra, apparently. I hope this explains more:
http://wiki.zimbra.com/wiki/Creating_Themes_Long_Version#Editing_Theme_Substitution_Files
The use of # differs based on the place it is present...
When # is present only at front, it is called At-rule.... eg: #import - means it allows u to import one style sheet into another...
When # is used in both sides of a word, it is a substitution file... eg: #somedata# - indicates an entry in the substitution file(s) with that name should be placed at that spot in the CSS files..
Hope its useful for u...
Looks like this is their way to specify variables in CSS. I can see
ChromeBg = background-color:#_BaseColor_#;
at http://wiki.zimbra.com/wiki/Creating_Themes_Long_Version
see these two links i am also learning about use of # in css.
I hope this will help you also :-
http://lesscss.org/
http://sass-lang.com/
I am sorry i dont know what is this but i got reference link , i am sharing this
http://files.zimbra.com/docs/skins/Themes.html#skinvariables
but we use this like css
it is importing another css file in here
eg - #import url("reset.css");
it is calling font face method
eg- #font-face {}
In firefox4 css class are applying for elements but in firefox5 no class is applied for elements.
In firebug of firefox5 i am getting "This element has no style rules. You can create a rule for it."
Point to note is that css style sheet is loading in header properly in firefox5.
Please let me know to solve this problem....
Thanks in advance.
I'm going to take a wild guess and say that you should remove the charset declaration from the top of your CSS file.
This happened to me while I was learning D3js. I solve the issues with
<!DOCTYPE HTML5>
At first I had it without the 5. After that all were solved.
I am using conditional comments to link to a css file (let's call it "IEonly.css") if the IE version is less than 8. I am trying to override some properties in the regular css file. Strangely enough, IEonly.css will set new css properties correctly, but it won't override the properties in the regular CSS file!
(I am trying to make this work for IE7).
Help!
EDIT: I added an !important after the css style to see if it would help. It didn't.
Given multiple stylesheets (even if some are hidden from other browsers with conditional comments) then the normal rules of the cascade will apply.
Make sure your selectors are suitably specific, and that you apply the stylesheets in the right order.
If you are using the same selectors in both stylesheets then you should be fine as long as you place the conditional IE stylesheet after the regular stylesheet. If you do that and your IE sheet isn't taking then you might need to write more specific selectors.
#sidebar #nav li a { }
instead of...
#nav li a { }
or
li a { }
Don't forget that you can also use the !important rule to override CSS definitions. Here is the W3C documentation on that rule.
Perhaps you can reorganize the stylesheets to default to IE styles and use an if !IE conditional for "good browser" overrides.
Based on my own experience of similar problems I would guess that there are some bad or missing character lurking somewhere in your IEonly.css file. They can be a real pain to track down, so do the following:
Temporarily remove all CSS from IEonly.css, except for the part that you will use to override the normal CSS. Test to see if this works. If it does, continue to paste the code back into the file, in sections as you see fit. Hopefully you'll find the problem.
If your override did not work when only that part of the code existed in the file, make sure that you have the correct selectors and that the specificity is OK.
You can also try reading http://www.w3.org/TR/CSS2/cascade.html#important-rules for more information.
Can you publish some code for us to look at? That would help.
I added a class to the element and referenced it on the IEonly stylesheet with the class selector and the regular style sheet without. This caused the IEonly style declaration to override the regular one.