Saving CSS changes
Pablo Olmos de Aguilera Corradini
a way to solve it. Firebug is by far the best css tool (I'm just
learning, but it helps a lot!). But the problem is that even when I'm
able to modify the css in "live" I can't manage to find a way to save
my changes.
Can you help me?
sir_brizz
for Firebug to output a CSS file with the currently set CSS values on
the page.
On Jul 31, 11:30 pm, Pablo Olmos de Aguilera Corradini
johnjbarton
changes more portable. I know he would be interested in feedback.
http://www.incaseofstairs.com/firediff/
jjb
sir_brizz
Simon
for CSS and all, and yet, you can't even save your changes. Surely
that would be a heavily requested feature...? And the FireDiff addon
looks like half-a-step towards that, but still doesn't really help the
situation.
Can anyone suggest a possible workaround?
Simon.
On Aug 1, 3:30 pm, Pablo Olmos de Aguilera Corradini
> I know this should be a very simple question, but I really can't find
Nick Fitzsimons
>
> Yeah, I've seen heaps of people touting how Firebug is the best editor
> for CSS and all, and yet, you can't even save your changes. Surely
> that would be a heavily requested feature...? And the FireDiff addon
> looks like half-a-step towards that, but still doesn't really help the
> situation.
>
I've never heard anybody saying that Firebug is a good editor for
anything, for the simple reason that it isn't an editor - it's a
debugger, which is a very different thing.
WHen you consider the variety of ways in which a stylesheet might be
served, and the numerous different ways in which a server might
provide the option to change it, the idea of something running in the
browser being able to provide a general purpose solution becomes
clearly almost impossible, and certainly unwieldy.
For example, it may be that one user has to use FTP to upload a new
version of their stylesheet to the server as a text/css file. Another
user's CSS is generated dynamically by PHP, so the changes will have
to be saved as a PHP program - yet there is no way for Firebug to know
how to incorporate changes into such a program, and it will be
completely different for almost every such case. Or maybe I'm using my
hosting provider's web-based interface rather than FTP, so Firebug has
to construct an HTTP POST request in a very specific form and send it
to a specific URL, including logging me in to my account if necessary.
What if my CSS is generated by XSLT transforming an XML configuration
file which is generated from a database query? How is Firebug to know
that my change to a background-color value has to be written to a
particular column in a particular table in the database via an HTTP
POST, then a server-side process has to be started which queries the
database, converts the results to XML, applies an XSLT transformation,
and saves the output to a CSS file?
All of these are actual techniques in use on the web today. It really
wouldn't be practical for Firebug to handle every one of these, and
many other, possible scenarios. The code related to the primary
purpose of the tool - debugging - would be swamped by a huge quantity
of code related to interacting with servers, leaving less time to
improve the debugging capabilities. The bug tracking system would be
swamped not with reports of actual problems with debugging, but with
requests to support yet another mode of server interaction that could
not have been anticipated by the developers.
A good tool does one job, and does it well. In the case of Firebug,
that job is debugging client-side code and interactions. For editing
files/databases/transformations and updating servers, other tools are
available.
Regards,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
Simon
Sorry, I realised my earlier post sounded a bit rude. I suppose it
was the number of tutorials I found on Google (http://www.google.com/
search?q=edit+css+firebug) that talk about using Firebug for writing/
editing/developing CSS, which as you say is not really the purpose of
Firebug.
*However*, I think it should be possible to save the resulting CSS as
a file, or even copy it to the clipboard at the very least. I just
found the program "Stylizer" today which does exactly what I was
looking for... the kind of live editing Firebug has given us with the
extra ability to save the CSS changes to the local computer, or even
FTP them to a remote server. Of course it cannot handle dynamically
generated CSS, but I wouldn't think that would be occur in any more
than 5-10% of websites. Dynamic content, sure, but CSS is generally
fairly static, even in big CMS systems.
Anyway, is a simple save or copy-to-clipboard really so complicated to
implement?
Simon.
On Sep 25, 7:10 pm, Nick Fitzsimons <n...@nickfitz.co.uk> wrote:
> 2009/9/25 Simon <simone...@gmail.com>:
Nick Fitzsimons
2009/9/25 Simon <simo...@gmail.com>:
>
> Hi Nick. Thanks for your reply.
>
> Sorry, I realised my earlier post sounded a bit rude.
Not at all :-)
> I suppose it
> was the number of tutorials I found on Google (http://www.google.com/
> search?q=edit+css+firebug) that talk about using Firebug for writing/
> editing/developing CSS, which as you say is not really the purpose of
> Firebug.
That search does throw up a lot of results that look, at a a glance,
as if they're creating a misleading impression of Firebug.
>
> *However*, I think it should be possible to save the resulting CSS as
> a file, or even copy it to the clipboard at the very least. I just
> found the program "Stylizer" today which does exactly what I was
> looking for... the kind of live editing Firebug has given us with the
> extra ability to save the CSS changes to the local computer, or even
> FTP them to a remote server.
I'll have a look at that - thanks :-)
> Of course it cannot handle dynamically
> generated CSS, but I wouldn't think that would be occur in any more
> than 5-10% of websites. Dynamic content, sure, but CSS is generally
> fairly static, even in big CMS systems.
>
True - my examples were rather extreme, although they do illustrate
the scale of the problem if a truly generic solution was required.
> Anyway, is a simple save or copy-to-clipboard really so complicated to
> implement?
>
That could indeed be a useful option. (I seem to remember that Chris
Pederick's Web Developer Toolbar extension allows one to edit CSS in
the browser and save it to a local file.)
Nicolas Hatier
But maybe a detailed blog post could be made about this issue, and why it's not possible, so we could point people to it when the question is asked and stop flooding the mailing list with endless discussions about it...
NH
tony
My workflow looks like this:
1. I write my markup code
2. I apply IDs and or class names to tags where I know I need them
3. Enter EMPTY selectors inside the style-tag/external css-file. When
I am not sure if a
certain element/class is needed or not, I just insert it. Rather a
few too much, than one
under.
4. I hack the CSS into Firebug, then copy the CSS-blocks inside the
Styles-tab and
paste each one of em into the according (still empty) selector
block.
When I notice, that I forgot some selectors I just edit the
element.style of ONE element which
represents all other elements where the style will be applied to
too.
5. Save my CSS-/file inside the editor, hit refresh and enther the
next design "iteraton".
Okay, it'd be nice if FB offers a save-to-file function ... but with
my workflow I am still
dozens of times faster than doing it the oldskool way.
just my 2cents...
benz
regular basis - while the primary goal of Firebug may well be
perceived as for debugging javascript, it also happens to be the best
real time CSS designer I've ever seen - probably the best one on the
planet, paid or otherwise.
In my workplace the designers use Dreamweaver but have absolutely no
ability to use it to solve CSS issues or to really do real-time CSS
work, its Wysiwyg CSS capabilities are woeful. So all of them use
Firebug. I used to work a fair bit with Sharepoint using Sharepoint
designer (joy...) on a purely IE corporate environment, we had Firefox/
Firebug installs on our Sharepoint system purely to work through the
massive CSS issues that Sharepoint creates, we didn't care that the
Firefox and IE renders were so different, we just couldn't solve CSS
dramas efficiently without it.
The Safari and Opera developer tools are IMHO too intrusive to
iterative workflow and hard to edit to come close to Firebug. Web
developer toolbar is useful but not at all for this iterative design
activity, the IE developer tools have improved but...well, its IE
ain't it so what do you expect???
For the last 12 months or so I've been using Firebug for jQuery work
and CSS debugging/editing for the rest of my studio - everything we do
is on a CMS, Shopping cart or similar application and my primary
workflow is exactly the same as Tony's - mark up the CMS stylesheet
with empty placeholder rules, add multiple rules in Firebug, copy and
paste them out and into my editor.
In the process I often end up copying excess {'s or rule declarations,
extra -moz rules etc, I generally make multiple changes at once to the
CSS and often forget to copy one rule back in a particular iteration -
but ultimately these are minor annoyances, its still the best tool
I've found by far.
Firebug knows the file's being used and it knows the line numbers that
are being impacted so for the 90% of applications that don't
dynamically generate stylesheets you could envisage a mechanism where
you provide FTP credentials per domain and add a CSS save feature.
I'm sure this implementation would satisfy the vast majority of people
that post this question, and a lot of us that never raised the
question becuase we knew it couldn't do it - but would use it if it
could.
Those people working on systems that do have complex style sheet
generation generally know enough to understand that it won't work (I'd
never expect anything to solve my Sharepoint woes) - or are so
hopelessly lost that nothing will help them!
So in the end I think it's a legitimate question, it may reflect a
misconception about the original intent of the product, but it does
reflect a widespread use case of the current version - and the Google
results help to highlight just how widespread it is.
tony
And sometimes FB folds and/or compacts some declarations automatically
in a really weird mannor. Those "crippled constructs" have to be
corrected
by hand.
johnjbarton
On Sep 27, 3:47 pm, benz <bdgeo...@gmail.com> wrote:
...
> Firebug knows the file's being used and it knows the line numbers that
> are being impacted so for the 90% of applications that don't
> dynamically generate stylesheets you could envisage a mechanism where
> you provide FTP credentials per domain and add a CSS save feature.
parsed. Often the URL is similar to a filename. Some fraction of
applications don't alter styles with Javascript, but we don't know if
the number is 90% or 10%. But in any case, having a feature that is
broken for 10% of a million users is practical for us.
>
> I'm sure this implementation would satisfy the vast majority of people
> that post this question, and a lot of us that never raised the
> question becuase we knew it couldn't do it - but would use it if it
> could.
>
> Those people working on systems that do have complex style sheet
> generation generally know enough to understand that it won't work (I'd
> never expect anything to solve my Sharepoint woes) - or are so
> hopelessly lost that nothing will help them!
>
> So in the end I think it's a legitimate question, it may reflect a
> misconception about the original intent of the product, but it does
> reflect a widespread use case of the current version - and the Google
> results help to highlight just how widespread it is.
difference between having CSS-save work for a few cases and having a
CSS-save feature. We are working incrementally in this direction and
welcome anyone who wants to contribute.
jjb
Noah Sussman
On Sep 25, 5:10 am, Nick Fitzsimons <n...@nickfitz.co.uk> wrote:
>
> I've never heard anybody saying that Firebug is a good editor for
> anything, for the simple reason that it isn't an editor
surprised to hear you say that.
I know many people who use Firebug to prototype all their CSS (using
exactly the copy-and-paste workflow described by tony, elsewhere on
this thread). In fact I know many "CSS designers" who never write a
line of JavaScript, but still rely heavily on FB for CSS development
(and of course CSS debugging as well).
>
> WHen you consider the variety of ways in which a stylesheet might be
> served, and the numerous different ways in which a server might
> provide the option to change it, the idea of something running in the
> browser being able to provide a general purpose solution becomes
> clearly almost impossible, and certainly unwieldy.
why Firebug doesn't have a "save" feature like the one found in Web
Developer Toolbar. It's interesting to realize that the developers
may not think of such a feature as useful. Given the perspective you
have outlined, it is easy to understand that point of view.
However, I'd counter that Firebug is so useful to CSS developers,
exactly _because_ of the convoluted CSS deployment requirements found
on the Web today.
I've been working on-and-off with some of the same devs since '99, and
all of us, without exception, agree that our lives changed greatly for
the better with the introduction of FB (I'm not just saying that
either, I've actually had that exact conversation with many
colleagues). Again this was exactly because FB made it possible to
separate the process of solving CSS bugs, from the process of
deploying stylesheets.
Finally I'll just point out that, in addition to the workflow used by
tony and myself, it is also possible to copy-and-paste an entire
stylesheet out of Firebug's CSS tab, including any edits made in FB.
Simon Norris
To the right of the selector when I'm browsing the rules which apply to the document element in firebug (html tab) is a link containing the file name and the line number in which that rule is detailed.
Click on this link and there's your CSS file with all the temporary changes made (css tab).
Copy paste as much of this as you like over your original CSS.
Simple ... go Firebug!
Sebastian Zartner
Sebastian