CSS Debuging

[kirkilj]

I've done due diligence searching in the forums and documentation, but it looks like Oxygen does not have the CSS debugging capability for Author mode that browsers like Firefox and Chrome do for detecting the source of each element's active CSS attributes, whether computed or literal. It appears that I need to use the following workflow:

1. guess where I should change a CSS rule in the frameworks/dita/css_classed directory and make the change
2. save the CSS file
3. activate the tab for the dita content file
4. choose Save (if changes were made to it) and then Revert (since there's no easy refresh or reload option that I've been able to locate).
5. if I can see the changes from the CSS file, I can preview the result for content authors. It also means that I've located the correct CSS file.

The other option is to insert an xml-stylesheet processing instruction into the content that points to the suspect CSS and open the content file in Firefox or Chrome in developer mode so I can see the cascade tree that is controlling the style of the selected content element and try a few alternatives without needed to save and reload files. The only caveat with this is that any oxy-* extensions will be useless in a standard browser.

Is there something obvious that I've missed in CSS development for Author mode?

John

[kirkilj]

Step 4 is a bit easier now that I've found the "Reload" action bound to a toolbar and to the F5 key shortcut.

[Radu]

Hi John,

I agree with you, we need to provide a means of inspecting what CSS selectors and properties were used to render an XML element in the Author mode.
We already have an issue logged in for such a feature and based on your feedback I tried to increase its priority. Right now the issue is scheduled for Oxygen 16, in the spring of next year.

Regards,
Radu

[kirkilj]

Thanks for the quick reply!

[Frank Ralf]

We are also very interested in better support for debugging and customising DITA CSS. Is there any way we could help and speed up things?

Kind regards,
Frank

[Radu]

Hi Frank,

We have not yet established a precise version in which to work on this feature, I added your comments to the already opened issue on our issues list.

If you stumble upon a particular problem with the CSS customization you can also drop us an email with more details and we'll try to help further (support@oxygenxml.com).

Regards,
Radu

[Frank Ralf]

Thanks for your quick reply, Radu.

Actually, it's only that we are missing the power of Firebug & Co. to fiddle with the CSS as the OP has already stated

Kind regards,
Frank

[Frank Ralf]

JFTR

Internal browser not fully CSS compliant? provides some valuable information on oXygen's CSS support, see also http://www.oxygenxml.com/doc/ug-oxygen/ ... ctors.html

[Frank Ralf]

Is it possible to use Firebug Lite (https://getfirebug.com/firebuglite) with oXygen? This is just a JavaScript file so shouldn't be too difficult to make this available in Author mode. This would help editing and debugging CSS tremendously.

Kind regards,
Frank

[Radu]

Hi Frank,

Although the Oxygen standalone editor uses CSS to style XML in the Author visual editing mode, it does not use a web browser internally, it has its own engine which parses the CSS and renders the content. Our internal rendering engine has no support at all for Javascript. So you will have to wait until we provide our own "Inspect Element" functionality.

Regards,
Radu

[Frank Ralf]

Thanks for the quick reply, Radu.

Frank