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.
Related
Reproduction
https://codepen.io/wqh/pen/KKqjaWL
Steps to reproduce
First, Sorry for my bad English, I hope you can understand what I mean.
Open the codepen link and you can see the phenomenon in the developer tools :
the generated style tag has no content, but actually effective.
The example is of a low version, but the 5.3.3 version of my project has the same problem
Expected Behavior
The content of the generated style tag can also be obtained in production mode.
I saw a Q&A that said that the insertRule will cause the content of the style tag to be unavailable.But I use the css-vars-ponyfill to fix vars in IE11, this needs to get the content of the style tag .
Actual Behavior
In production mode, the generated style tag has no content, this is inconsistent with the development model
Styles get injected in the DOM differently in development and in production environments.
As mentioned here (How styles land in the DOM),
This step differs from development mode to production mode.
In development mode, styled-components will inject a style tag inside the head of the page's DOM. This tag will include some data meta properties like the library's version used. And inside the tag, styled-components will append all the styles from your StyledComponents bound to their classNames.
In production mode however, things are a bit different. Since we need to optimize and compress stuff the most we can, the style tag injected by styled-components will still be there, but will be injected as empty.
Edit:
styled-components is handling it differently for 5.0.0 onwards.
As mentioned here:
Modifying the way CSS is injected
The property disableCSSOMInjections allows us to switch from the CSS
Object Model (CSSOM) API to a text node-based CSS injection system.
When a browser parses the HTML code of a page, in addition to creating
a tree of nodes called the DOM (Document Object Model), it creates a
CSS object model in the form of a tree where each node contains CSS
style information for a particular DOM element.
This way, to insert or modify the style of a particular node, we can
use either the DOM API:
document.getElementById('myDiv').style.background = 'blue' Or the
CSSOM API:
// Assuming there's a stylesheet in the HTML page const style =
document.styleSheets[0]; style.sheet.insertRule('#myDiv{background-color: blue}');
This way, when the property
disableCSSOMInjections is present or you assign it the value true:
ReactDOM.render(
<StyleSheetManager disableCSSOMInjections={true}>
<App />
</StyleSheetManager>,
root
);
I'm having trouble locating where the CSS class is defined that is styling an element on my page. When I inspect the element in Chrome, normally it shows the file name from which the CSS is originating, which I can then click on and go see the CSS file where it's defined. But this particular rule doesn't show any location. And when I look through all the code of my app, I can't seem to find the class anywhere. Any suggestions?
In the screenshot below, you can see that I'm trying to locate the .hom-whoc CSS class.
And in case it's helpful, the place this website is being hosted (and all the code is located) is in ClickFunnels. Unfortunately, the code is not in a repo anywhere, which would have made it much easier to search. This was all done in the ClickFunnels GUI in sections called things like "custom CSS" and "custom element." It's scattered through the interface, making it difficult to find where it's defined. But it should still be in SOME file that the page is using to style itself, which I imagine would be reference in the Chrome inspector.
I've made an Add-on which is a custom field.
The style of the text in the field changes depending on the properties of an issue.
I check which style should the text have in the .java file and I pass the html class in a variable called $indicator to the velocity template:
#if( ${value} )
<span class="$indicator">${value}</span>
#end
It works perfect everywhere but in gadgets. When I add this field to a table showing issues in a dashboard, the html code is correct, but it doesn't find the css resource. This is because gadgets are inside an iframe.
How can I make the iframe have a reference to the stylesheet?
You did not say exactly which gadget you were using, but try adding the following context within your <web-resource> module:
<context>jira.webresources:issue-table</context>
The above should work for at least Assigned to Me, Filter Results, In Progress, Voted, and Watched in JIRA 6.1+.
If that does not work, you might also try:
<context>com.atlassian.jira.gadgets:common-lite</context>
If that general context doesn't work, you can look for which exact contexts are #requireContext'ed by the specific gadget you are trying to use, and then make sure that your web-resource is listed in that context. You can figure this out by looking at the gadget's XML and then searching for the #requireContext. (You can find the gadget XMLs inside $JIRA_DATA/plugins/.osgi-plugins/transformed-plugins/jira-gadgets-plugin-*.jar)
Starting with JIRA 7 the Answer of Scott Dudley is no longer working. #requireContext was replaced with a #requireResource within the Atlassian sources of this gadget.
As it affects our plugin, I created a Improvement Request to make that possible again
I was surfing and saw this css property which I have never seen or used before. I think it is related to Internet Explorer, and the structure is something like this:
#element{
behavior: url(something.htc);
}
What does the behavior property do? How would I use this property?
I did find this w3 Documentation, but it's not particularly clear what it does.
It is Microsoft Extensions to CSS
.htc files are commonly used in .css files using an IE specific property called behavior, using this along with the .htc file allows the browser to run JavaScript code which is whats contained within the file.
what it does?
Sets or retrieves the location of the Dynamic HTML (DHTML) behaviorDHTML Behaviors.
.htc Extention
The script resides in an HTC (HTML Component) file. HTC files have the extension .htc, and are HTML files that contain a script plus a set of HTC-specific elements that define the components.
- History of behavior
Syntax
behavior: url(sLocation) | url(#objID) | url(#default#behaviorName)
Property values
url(sLocation)
Script implementation of a DHTML behavior, where sLocation is an absolute or relative URL.
url(#objID)
Binary implementation of a DHTML behavior, where objID is the ID attribute specified in an object tag.
url(#default#behaviorName)
The application's default behavior, identified by its behaviorName.
Useful Links
Microsoft
Site Point
CSS3.COM
Dottoro
CSS Standards Support
htmlcss.wikia.com
Microsoft says it is no longer supported in IE 10!
It lets you use CSS to attach a script to a specific element in order to implement DHTML (Dynamic HTML) components.
Internet Explorer versions 5 and later support the behavior property.
Internet Explorer 8 supports Vendor specific format of -ms-behavior
For more info. refer this link.
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.