I'm new to VS code and have been searching for a way to auto format CSS when saving data. Surprisingly, I can't seem to find any good extension or well-explained site of how to auto format CSS in VS code.
HTML is formatted the moment I saved a file, and want to do the same thing on CSS.
Ideally I want the one like "Beautify" that can be used in Atom.
Any advice?
Quite sure you can do this with prettier code formatter plugin. And you can set format on save true for all languages by adding the following to your user settings json file(dont forget to reload vscode after updating) :
"editor.formatOnSave": true,
you can enable format on save for a specific language by adding the following too :
"[css]": {
"editor.formatOnSave": true
}
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.
I've developed extensions in Chrome and Safari, and I've noticed curious differences in behavior in regards to iFrames. The extension I've developed injects content scripts into all sites matching the url pattern:
http://*.nationstates.net/*
On Safari, this extension inject the content scripts into each iFrame whose src also matches this pattern. On Chrome, it only injects the content scripts into each web page that matches, never an iFrame.
The extension code is on Github.
Install Extension for Yourself: http://forum.nationstates.net/viewtopic.php?f=15&t=243404
The easiest place to see this behavior is on here: http://nationstatespostmaster.com/
Clicking an element opens an iFrame to the nation page. On Chrome, the extension is not loaded. On Safari it is.
In Chrome extensions, you can specify "all_frames": true to match all frames in the main page whose URL matches the pattern. However, patterns specified in "matches" only apply to top-level frame URLs. You cannot inject a content script into a sub frame without injecting it into the main frame.
The reason I want to do this is that I'm writing a script for meebo.com that involves changing the background and replacing some pictures with css. I'd like to add links to it from other sites (namely Gmail, Google Calendar, etc.) Is it possible to accomplish this with one Greasemonkey script? (I think this is a general enough question to exclude my actual code but if it would help, just leave a comment saying so.)
Well, I think the conventional method would be to write two scripts, one that only #include's meebo.com (and changes the background image) and another that #include's http://* or whatever set of other URLs (and adds a link to meebo).
But if you're set on writing only a single script, you could use a series of if statements to accomplish the same effect. That would look something like this:
// #include http://*
// ==/UserScript==
if (window.location.hostname.match(/meebo\.com/) {
//change background images and do other meebo.com specific actions
} else if (window.location.hostname.match(/google\.com/) {
//add a link to the DOM (or some other Google specific action)
}
if this code is inside iframe
var topWindow = window.top;
then object topWindow.document is not accessible
topWindow.document.getElementById("iframe_id")); // doesn't work
Are both the top window document and the page with the script on the same domain? You can't access content in a frame unless they are on the same domain.
This has actually been discussed in quite a bit of detail here. Frame Buster Buster ... buster code needed
Hi I think the problem you have is that frames (and that includes iFrames) are at the same level as "document" in the domain object model (DOM). It is inside the window and not the document. Instead of document you need to access the frames list called "frames" from the window itself.
Try this instead:
topWindow.frames["nameOfIFrame"];
The frames list behaves like an array - using [] notation and having a length.
See MDN documentation here