When writing a Firefox web extension it's possible to use a default css for browser or page actions so that they are styled like other browser UI components. It's done by inserting:
"browser_style": true
in the extension manifest. Styles like panel-section-footer-button become available.
My question: How can you know how to use the default styles, there doesn't seem to be an official source or description of them?
Related:
The css in built-in resource chrome://browser/content/extension.css.
This popup example on Mozilla site, which uses some default styles..
Using "browser_style": true results in the chrome://browser/content/extension.css file being applied to your HTML (on OSX chrome://browser/content/extension-mac.css is applied instead).
Mozilla has a Style Guide which you can peruse to see how various elements and classes are used. The link to this Style Guide is in the browser_style entry within the "Syntax" section of the browser_action documentation page. A similar link is in the same location on the page_action MDN documentation page. Personally, I would find it more appropriate for the information contained in the Style Guide to be hosted directly on MDN rather than on firefoxux.github.io.
If you are just interested in the elements and classes, you can find examples under the Components section.
Note: Under some conditions, Firefox also attempts to apply chrome://browser/content/extension-win-panel.css or chrome://browser/content/extension-mac-panel.css neither of which exist.
So, I'm working on a clients page that's hosted with BigCommerce and it appears that all of the custom styles I wrote are not being recognized by internet explorer. It works fine in all other browsers.
It's strange because IE sees the .css file, but when you click into the stylesheet in developer tools, none of code populates.
I don't have more than 31 stylesheets so that's not the issue. I'm at my wits end and any help would be greatly appreciated.
The website is www.bangsshoes.com.
The stylesheet is .../bangs.css
Just a thought, but you could:
a) try combining the styles into another style sheet which is being successfully incorporated or,
b) since this is just a reset, try another reset? or a modenizr? http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js
Another test would be to comment out the other style sheets and see if that makes a difference-- it's possible another style sheet is interfering (though unlikely!)
I have a site whose stylesheets are becoming overwhelming, and a full 50% to 90% or so is not used on certain pages. Rather than have 23 separate blocking CSS sheets, I'd like to find out which are being used on the page I'd like to target, and have those exported into one sheet.
I have seen several questions that recommend "Dust me selectors" or similar add on which will tell what selectors are and are not being used; but that's not what I want. I need to be able to export all used styles from all sheets for that particular page into one new sheet that can be used to replace the 23 others. The solution should be able to support a responsive website (media calls). The website page I'm targeting is: http://tripinary.com.
I've found: https://unused-css.com but this is a paid service and I need free;
The next closest thing I've come across is http://www.csstrashman.com/ but this does not look at stylesheets. In fact, it completely ignores them and ultimately I'm having trouble with the responsiveness of the site. Many times as well, this site just crashes.
I don't mind a programmatic solution if someone has had to do this before and can recommend a direction.
(deleted my comment to RwwL answer to make it a thorough answer)
UnCSS, whether node.js or as a grunt or gulp task, is able to list used CSS rules by an array of pages in an array of Media Queries.
uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp-uncss: https://github.com/ben-eb/gulp-uncss
Multipage:
You can pass files as an argument to any of the 3 plugins, like:
var files = ['my', 'array', 'of', 'HTML', 'files'],
options = { /* (…) */ };
uncss(files, options, function (error, output) {
console.log(output);
});
Avoid:
urls (Array):
array of URLs to load with Phantom (on top of the files already passed if any).
NOTE: this feature is deprecated, you can pass URLs directly as arguments.
Media Queries and responsive are taken into account:
media (Array):
By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.
You can add stylesheets, ignore some of them, add inline CSS and many other options like htmlroot
Remaining problems:
1/ Conditional classes if you use them for IE9-. They obviously won't be matched in a WebKit PhantomJS environment!
HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->
CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */
Should they be added by hand or script to the html element in testing environment? (how it renders is of no importance)
Is there an option in uncss?
As long as you don't style with :not(.ie9) (weird), it should be fine.
EDIT: you can use the ignore option with a pattern to force uncss to "provide a list of selectors that should not be removed by UnCSS". Won't be tested though.
2/ Scripts that will detect resolution (viewport width) and adapt content to it by removing/adding it or adding a class on a container. They will execute in PhantomJS in desktop resolution I guess and thus won't do their job so you'll need to modify calls to PhantomJS or something like that... Or dig into options or GitHub issues of the 3 projects (I didn't)
Other tools I heard of, not tested or barely or couldn't test, no idea about the MQ part:
in grunt-uncss readme, the Coverage part
ucss from Opera (there's already an ansswer here, couldn't make it work)
Helium
CSSESS
mincss
Addy Osmani has countless presentations of 100+ slides presenting awesome tools like this one: https://speakerdeck.com/addyosmani/automating-front-end-workflow (you'll regret even more that days are made only of 24 hours and not 48 err wait 72 ^^)
How about the CSS Usage plugin for Firebug?
Steps:
Visit your page in Firefox
Click "CSS Usage" tab in Firebug
Click the Scan button
Click the bold file name
Save page of CSS selectors to disk
Here are some screen shots and walk through. Not sure about media queries or if it'll work on your site, and it'll probably not keep -webkit etc, but maybe it'll get you part of the way there.
Opera Software released a CSS crawler on Github that claims it can find unused and duplicate selectors. It might do the trick if you're comfortable with a command-line tool. https://github.com/operasoftware/ucss
You Can Check in Google Chrome by doing inspect element (F12) . The unused CSS has Line over the tags.
If you wanted, you could try to build a script that runs on a (non-production) server that goes through every css rule, removes it from the stylesheet, loads the page using something like phantomjs, and checks to see if anything changed from the last time it loaded the page. If so, then put the css rule back, if not, then leave it out and move on to the next rule. It would take a while to run, but it would work. You would also have to setup an instance of your server that does not use caching for it to run on.
Try using this tool,which is just a simple js script
https://github.com/shashwatsahai/CSSExtractor/
This tool helps in getting the CSS from a specific page listing all sources for active styles and save it to a JSON with source as key and rules as value.
It loads all the CSS from the href links and tells all the styles applied from them
You can modify the code to save all css into a .css file. Thereby combining all your css.
Using developer tools, I can amend a css file for a site I'm currently viewing in a browser.
I want to, effectively, do the same - but instead of amending the css file, loading a local css file, just for that particular domain.
Another way of phrasing it: "When any page of stackoverflow.com is loaded, load C:\test.css to the browser".
Yes, it's possible. Have a look at http://userstyles.org.
Userstyles.org offers CSS files for usage with the extension "Stylish", and Stylish recently announced that they are becoming evil (https://forum.userstyles.org/discussion/comment/109966/#Comment_109966) and can therefore not be used anymore.
One can use the styles with greasemonkey, but then the activation for various websites doesn't work anymore (the CSS is converted into a JS file and the list of sites where it should be applied onto is hardcoded inside an if-statement in that script). I.e. in order to use e.g. "dokuwiki highlight and full width" on a site using dokuwiki but not being http://dokuwiki.org, you have to edit that if-statement and reload.
I am making a sub site, I would like a new CSS sheet thats cut down to just what that page needs.
What I would ideally like is a firefox extension that shows the CSS used on a currently viewed page, but not the CSS unused on that page.
Is this possible?
What I would ideally like is a firefox
extension that shows the CSS used on a
currently viewed page, but not the
CSS unused on that page.
To see unused CSS, you can use the Dust Me Selectors addon of firefox.
It extracts all the selectors from all
the stylesheets on the page you're
viewing, then analyzes that page to
see which of those selectors are not
used. The data is then stored so that
when testing subsequent pages,
selectors can be crossed off the list
as they're encountered.
You can test pages individually, or
spider an entire site, and you'll end
up with a profile of which selectors
are not used anywhere.