Is there some way to style an external webpage, so that when it opens in our browser, it is styled using a local css file (perhaps even a javascript). (for Firefox/Chromium)
It is possible to edit userContent.css for firefox (and equivalent file for chromium), but this in turn effects every website that would open on the browser.
Firefox has the -moz-document domain(...) rule, while Chrome has the Stylish extension
Greasemonkey!!
Thats what userscripts are for.
Related
I created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
In current versions of Chrome (I'm running 16) you don't need any external add-ons.
Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
Try StyleBot. It can also save edited CSS.
You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.
I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/
I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
there's a semi-working firebug extension but it's not exactly perfect yet.
User Firebug Lite. It's also available as an extension to Chrome.
You are looking for this - Live Stylesheets
I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.
I still use it today and have yet to find a better solution. It may work for you as well. :)
I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)