add new styles to elements that have no current styles

81 views
Skip to first unread message

Jeff

unread,
May 30, 2014, 6:12:17 PM5/30/14
to fir...@googlegroups.com
It seems FireBug is the last of the dev tools to not have this very helpful feature.

The idea is that if i have, say, a DIV tag with no 'class' or 'style', there is no (easy) way to use firebug to start styling it.  The current workaround is to edit the tag itself by adding a new attribute 'style' and going from there.

The way firefox, chrome, and IE do it is to provide an empty element.style {} at the very top of the style pane.  Essentially, if an element has inline styles it shows those, if not it shows an empty area where you can just start adding element styles.

This comes in very handy very often.  At times, I've even added empty style="" attributes to tags i knew i wanted to style on the fly in firebug.

Thanks!!
Jeff

Farshid Beheshti

unread,
May 31, 2014, 1:39:21 AM5/31/14
to fir...@googlegroups.com
Sounds good! I'm not sure if there is already a request/issue for it, so could you open an issue for it?

Farshid


--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebug+u...@googlegroups.com.
To post to this group, send email to fir...@googlegroups.com.
Visit this group at http://groups.google.com/group/firebug.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebug/e4522e98-a3bf-439d-aaed-9eebcd53d9fc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Simon Lindholm

unread,
May 31, 2014, 1:38:18 PM5/31/14
to fir...@googlegroups.com
Well, you can already right-click in the Style panel and pick "Edit Element Style" or "Add Rule", it's just more hidden than in the other devtools.

Simon

Farshid Beheshti

unread,
Jun 1, 2014, 9:17:50 AM6/1/14
to fir...@googlegroups.com
Well, you can already right-click in the Style panel and pick "Edit Element Style" or "Add Rule", it's just more hidden than in the other devtools.
I think he just wants to have a feature like other dev tools -an empty rule for every element if it hasn't already one- to type straight in it, instead of needing to do something else before it.
As It's common to add such rules when dealing with designing a page, It sounds helpful.

Farshid
 

Simon

Den lördagen den 31:e maj 2014 kl. 00:12:17 UTC+2 skrev Jeff:
It seems FireBug is the last of the dev tools to not have this very helpful feature.

The idea is that if i have, say, a DIV tag with no 'class' or 'style', there is no (easy) way to use firebug to start styling it.  The current workaround is to edit the tag itself by adding a new attribute 'style' and going from there.

The way firefox, chrome, and IE do it is to provide an empty element.style {} at the very top of the style pane.  Essentially, if an element has inline styles it shows those, if not it shows an empty area where you can just start adding element styles.

This comes in very handy very often.  At times, I've even added empty style="" attributes to tags i knew i wanted to style on the fly in firebug.

Thanks!!
Jeff

--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebug+u...@googlegroups.com.
To post to this group, send email to fir...@googlegroups.com.
Visit this group at http://groups.google.com/group/firebug.

alfonsoml

unread,
Jun 1, 2014, 10:47:47 AM6/1/14
to fir...@googlegroups.com
I really prefer the Firebug way.
having an empty style at the top just takes space and it's rarely used (how many times do you want to add an inline style instead of tweaking whatever rules exist?). Besides that, instead of inline styles it's more common to create a rule based on the class or the DOM structure and the create new rule it's great for that.

David Gomez

unread,
Jun 3, 2014, 7:34:39 AM6/3/14
to fir...@googlegroups.com
There is already a issue for this, but it is closed: https://code.google.com/p/fbug/issues/detail?id=5767

Sebastian Zartner

unread,
Jun 3, 2014, 11:37:19 AM6/3/14
to fir...@googlegroups.com
Well, you can already right-click in the Style panel and pick "Edit Element Style" or "Add Rule", it's just more hidden than in the other devtools.
Actually Firebug was the first tool to offer this, but as Simon says the feature is a bit hidden.

There is already a issue for this, but it is closed: https://code.google.com/p/fbug/issues/detail?id=5767
For clarification, it was closed as there were votes against displaying element.style when it's not used.
If somebody can come up with a better UI, then we should reconsider this.

Also note that the HTML panel now has auto-completion and the ability to add an attribute by clicking the closing bracket of a tag, which adds another way to add an element style.

Sebastian
Reply all
Reply to author
Forward
0 new messages