This question already has answers here:
Firefox developer tools adding a new rule?
(2 answers)
Closed 8 years ago.
The command I by far use the most in Firebug is right-clicking in the CSS pane and "Add Rule..."
Is there any quick equivalent in Firefox's Web Developer tools?
We've just added this to Firefox 33, see this bug for more info.
To try it out right now, download Firefox Aurora from http://aurora.mozilla.org/
Click on style editor tab. And add your css there.
Where it says:
element {
}
you should be able to just click there and add a rule. If the element has inline styles already applied to it, those braces won't be empty but you can do that same thing.
Related
This question already has answers here:
How to disable CSS in Browser for testing purposes
(19 answers)
Closed 7 months ago.
I am looking for an option based solution.
Of course there is an option to remove all style tags one by one from the elements panel, this will not remove inline injected styles.
For debugging purposes I would like this option to be at reach, I remember this being an option at one time.
For debugging you could try commenting out link tag in html body that has link to CSS stylesheet
You can do that on Firefox, found in the menu under View -> Website Style -> No Style (the wording might be slightly different, I don't have english version of FF installed but you should find it rather easily I guess.
I decided to try out the built in Firefox Developer Tools. Seems to be nice, but...
I can't find out how to add a new rule to the CSS from Inspector/Rules. By that I mean ".my-new-rule" not just the "element" rule that is open by default.
FINAL EDIT: This is now possible with the latest Firefox update.
Update:
As of FF 33.00 it is now possible to add new CSS rules using the inspector!
It is not possible to use the inspector to create new CSS rules with out a browser add-on (see comment below).
Just use the style editor. Type anywhere to make a new rule:
As of Firefox 33 (in nightly right now https://nightly.mozilla.org/), this works.
When you have a node selected in the inspector, you can click on any of the selectors in the "Rules" sidebar to edit them.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Stop CSS styles to be applied in particular sections of the code
HTML code inserted into WordPress with many plugins (each of them probably has it's own style) inherit global styles automatically.
An approach is to find unwanted styles and override them. Sometimes it's difficult to find it as in my case)
How can I define an HTML object to be clean from base and don't inherit any style from the page ?
According to the browser, it's the built in style: the border-spacing is set to 2px.
I think you meant to clear this with cellspacing=0, but the page is an HTML5 page, which doesn't support this attribute.
That said, there's some advice for you. Using tables for mark-up is outdated. You may get away with it, but if you are creating an html 5 page, you should obey the rules that come with it. :) It turns out that it isn't any of the WordPress CSS that is bothering you. It was just the built-in style, which could not be overruled using outdated attributes. :)
For the future, in most browsers you can inspect the elements and their properties. In Chrome this is built in, in FireFox I think you still need to install the FireBug plugin. With that, you can right-click -> inspect element and then check the element or its parent to see what is going on:
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Tool for checking unused CSS selectors?
I am working on a big project that was work on many people before me and now the CSS file is very big more than 4000 line there is many unused css rules i was trying firebug plugin CSS usage but i have to check page by page and compare what use here and not used there while its only one big CSS file is there any web site that can help me find unused CSS rules much better
In the chrome console you have the "Audits" tab. There you click in "Run" and shows you a result with unused rules.
http://code.google.com/intl/es/speed/page-speed/download.html this is a plugin for firefox and chrome
EDIT:
Here you have two tools to minimize css
http://tools.w3clubs.com/cssmin/
http://www.cleancss.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. :)