Edgewall Software

Opened 16 years ago

Closed 16 years ago

#4264 closed enhancement (duplicate)

Protect enclosing HTML from Trac CSS rules

Reported by: andy@… Owned by: Jonas Borgström
Priority: normal Milestone:
Component: general Version: 0.10.2
Severity: minor Keywords: css consider
Cc: andy@… Branch:
Release Notes:
API Changes:
Internal Changes:


At the moment it's hard to embed Trac naturally in a parent website, because Trac's CSS rules aren't restricted to only apply to Trac-specific page elements, and they use very generic id attributes such as "header", which easily clash with similar elements in the parent page wrapper.

It would be an improvement if Trac's header.cs and footer.cs were used to enclose all Trac page elements in e.g. <div id="trac">...</div> and then all Trac CSS rules could be prefixed with #trac . (It would save me from having to do this by hand every time a new version comes out!)

Attachments (0)

Change History (5)

comment:1 by Emmanuel Blot, 16 years ago

Keywords: css added

I think you can easily do that (<div id="trac">) if you define your own site_header.cs and site_footer.cs template files - see TracInterfaceCustomization#SiteHeaderFooter

I'm not sure it is worth overloading the default CSS files with an extra cascading level, a simple sed or awk script can do the work.

Leaving the ticket opens though, as some other people might prefer the opposite way.

comment:2 by andy@…, 16 years ago

Cc: andy@… added

Adding the extra div is very easy, yes, either in the main templates or via site headers. I run a system with a lot of auto-generated Trac environments, so I put it in the main header template.

The CSS is much more complex, though. IMO, the simple script isn't actually all that simple: you have to be aware of when the start of a line is in the body of a CSS definition, which eliminates sed from the running. And then there are lots of cases where multiple CSS selectors apply to one style rule via a comma-separated selectors list: just replacing "," with ", #trac", would almost work, but there are collisions like font definitions, which also include commas. Or maybe I'm just being dumb: I just can't see a nice way to do simple search and replace and still get valid CSS on the other side.

I'm not sure that adding another layer of CSS has any detrimental effect (e.g. on browser rendering speed), and it's certainly necessary if you're going to use a custom header and you want to avoid collisions with the Trac styles. (While I'm here, I'll just mention that generic id names like #header can also cause problems for external headers! #trac-header would be a lot more robust.)

If it's felt that this would be a good thing, I'm happy to help: I have to do this anyway, so it would be no problem to feed the changes back upstream.

comment:3 by andy@…, 16 years ago

I've had some user complaints about our system using Trac, because when they go from a static page to a Trac page of their Web area, some div spacings and the like change, which gives a slightly inconsistent UI experience. This is a consequence of the unprotected Trac CSS affecting non-Trac page elements.

This is easily fixed, but I'm reluctant to change the CSS and templates, since that will just need to be re-done next time we update Trac. If I were to supply my "protected" versions of the templates and CSS upstream, would they be accepted? I don't think adding one more layer of nesting is a high price to pay for the increased robustness and embed-ability that results… what's the "official" Trac opinion?

comment:4 by Christian Boos, 16 years ago

Keywords: consider added
Milestone: 1.0

comment:5 by Emmanuel Blot, 16 years ago

Milestone: 1.0
Resolution: duplicate
Status: newclosed

This issue could be addressed with #5997, as the same issue is reported with the new templating system.

Modify Ticket

Change Properties
Set your email in Preferences
as closed The owner will remain Jonas Borgström.
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from Jonas Borgström to the specified user.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.