Is there any way to access the stylesheets that make up firebug to edit things like the indent distance for nested DOM nodes? Looking for a location of some .css files or something that I can override.
I frequently find myself working with deeply-nested nodes that are pressed up against the right side of firebug, while the whole left side is unusable whitespace.
In Stylish Firefox extension, you can use this code to remove the indentation in the dom panel.
I have to look further to see how to decrease the indentation on child nodes (it's a good userstyle project, btw) :
.memberLabelCell{
padding-left:0 !important;
}
Edit:
Here is a little userstyle which reduces the indentation of nodes in html and dom panels : http://userstyles.org/styles/42885
(you need stylish to use it)
Related
I'm working on a intro-level project where I have begun to use aspect-ratio as a way to apply a few rules to some images. What I can't figure out is why VS Code suggests, auto-completes, and links to MDN Reference just like every other valid CSS selector, but for whatever reason it colors the text white. I've seen this before and it just goes away by itself sometimes or I move onto to a different project and forget about it.
Screenshot of the 'aspect-ratio' selector being white as opposed to the light blue of all of the other selectors.
I've re-written it a couple of times, moved the comments around and re-written the CSS selection entirely and it won't go away.
Whenever I am trying to include an .html page (which contain a navigation bar in bootstrap code) in my jsp page, then it doesn't show all the details on navigation bar. But whenever I tried to include it in a separate single page, it shows everything. It is clear that there might be a conflicting .css file, because I have some code in my jsp file.
How can I fix this?
Without being able to examine the css in question myself (which might help matters) all I can really do is advise how to examine CSS.
Using Google Chrome, the best way to figure out CSS conflicts is to right click on an element - e.g. the problematic nav bar - and click Inspect Element.
This should bring up a bar similar to the one shown here:
Note the styling details on the left - it allows you to easily trace where the CSS that affects the element you've inspected comes from. More importantly, it also has a line through 'padding:.6em .8em;' - this is an overridden style, and the padding a bit further below which has no underlines is the style that overrides it.
If you're having CSS problems like this, you should be able to trace which styles are being overridden using the chrome inspect window. If you post your CSS, I might be able to be a bit more specific.
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
Maybe I'm just a Firebug newbie, or maybe there is some other better tool? But I'm trying to easily find which of several linked css files, defines a specific element's style.
For instance in a production environment I can pinpoint that a style named left-tab is being applied to a specific element, and it renders properly. In the development environment the same style is applied within the HTML, but is not being rendered the same way as in production.
The production and development environments each include 9 css files. I want to easily find which one defines the style left-tab. Using the CSS tab I can open and even (temporarily) edit each of these, but how do I search through these? Ctrl-F searches the HTML document itself, as opposed to the CSS contained within the Firebug pane.
Activate the style tab in the right panel "Style | Computed | Layout | DOM ". For every CSS rule, there will be a blue link "mystyles.css (line 22). You can quickly jump to a rule by activating Element Inspector (The box w/ mouse on the far left hand, hotkey is Ctrl + Shift + C. Highlighting over your element with Element Inspector (you can also click on it) will show you all the CSS rules that apply (or were overwritten).
When you right click an element and click 'inspect element' the box in the bottom right will display CSS styles for that element, just above each one it tells you which CSS file it came from and what line.