Yes/No/Maybe: Using a CSS Reset file with Flare?

Phlawm53 · Post by **Phlawm53** » Sat Sep 15, 2012 4:43 pm

-
Has anyone tried using a CSS reset file in conjunction with Flare?

A while ago I became curious why Flare's CSS Editor displayed non-zero values in a an new, unedited CSS file:

http://forums.madcapsoftware.com/viewto ... =6&t=14860

The key thing some of us learned from that thread was:

The margin values along with all other non-MadCap CSS values are inherited from the recommended CSS2.1 stylesheet for HTML4, which XHTML is built upon and Flare utilizes in its output.

Shortly after learning from that Forum thread why "virgin" CSS contained some non-zero values, I seem to have discovered for myself the need to explicitly specify zero-values for some Flare CSS styles. I say "seem to" because I solved some display problems by, among other things, explicitly specifying zero values for some selectors' properties such as margin. Having so done, I didn't go back and perform exhaustive experiments, but did make a mental note in passing that it seemed to have helped.

With those experiences fresh in my mind, I then stumbled across the idea of CSS Reset files:

https://duckduckgo.com/?q=CSS+reset

That search produces the following information, inter alia:

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

This reinforced my emerging sense that using something to create a truly "clean" CSS baseline might be a useful initial step when configuring a Flare project's CSS.

So has anyone had any experiences good, bad, or indifferent with CSS Reset files, particularly in conjunction with Flare?

Cheers & thanks,
Riley
SFO

cbdebris · Post by **cbdebris** » Tue Nov 13, 2012 4:23 pm

Why would you need a "reset" file? I don't know of any application that uses a CSS "reset."

Post by **NorthEast** » Wed Nov 14, 2012 3:30 am

A CSS reset will work for the majority of styles, although beware that Flare also generates its own stylesheets which contain some default styles; e.g. MadCap.css (WebHelp),and Topic.css (HTML5).

For example, if you use a completely blank stylesheet, cross-references are set to be blue and underlined, and mini-TOCs and breadcrumbs have black borders.

So for a Flare-specific reset file, you may also want to include a number of the MadCap|... styles and their derivatives.

sfoley · Post by **sfoley** » Wed Nov 14, 2012 9:23 am

Phlawm53 wrote:So has anyone had any experiences good, bad, or indifferent with CSS Reset files, particularly in conjunction with Flare?

Indifferent.

I've previously used CSS reset styles, and after awhile, decided that they were too much work to keep maintained. MadCap rarely highlights any changes they make to the default template files, so you'll need to do extensive testing every time you upgrade Flare. The reset rules mean that your stylesheet gets larger and more complex, so fixing that "last" instance of a broken style gets progressively more complicated. And as Dave Lee mentioned, you'll have to add all the MadCap elements, classes, and identifiers to the reset rules manually.

I've found it much easier to just accept that there will be slight variations between different browser versions, and instead direct my efforts into simplifying my content. My most complex CSS rules now merely define bullet styles for 2nd-level lists.

kwag_myers · Post by **kwag_myers** » Wed Nov 14, 2012 12:35 pm

I vote: "No" simply because there is no way I'd start over from scratch. I make weekly backups of all my files, so rolling back to a previous version of my CSS is far more favorable.

As for browser differences, there are a number of work-arounds, from Java Scripts to coding tricks in either the HTML or CSS file. I used a Java Script in the <head> once to detect the user's screen resolution. I'm sure you can do the same for browsers.

Sorry, but it just seems like a longer way around a problem than is really necessary. As a former Project Manager used to say, "You don't need a bowling ball to kill an ant."

Phlawm53 · Post by **Phlawm53** » Wed Nov 14, 2012 4:33 pm

Thanks to all who have responded so far â€” and to those who will add additional thoughts to this thread.

I had no real idea whether CSS Reset files were of value, either in conjunction with Flare or elsewhere. On one hand, the number of CSS Reset variants that have been created seem to indicate that somebody felt the need for them. On the other hand, so far the responses in this thread have been mostly negative, or at best indifferent.

Based on what I've learned, I think my own opinion, albeit one based on others' experience rather than my own (possibly unhappy) hands-on experimentation, is that a CSS Reset probably isn't necessary, and may even be more trouble than its worthâ€¦(?)

Cheers & thanks 'gain to all,
Riley
SFO

hkwint · Post by **hkwint** » Tue Feb 12, 2013 4:03 am

Recently, I've been researching this topic for "general web sites" (not Flair-related) for a HTML5-menu I coded.
I know this forum-topic is old, but just to share some thoughts for future reference:

Know which browsers your audience use. If your audience is only people inside your company and your company decided on one 'default'-browser, I think it would be better to optimize your output for that particular browser. If your website is publicly available on the internet, then the your audience can use any of the dozens of webbrowsers available.
Know which standard css rules are set by the browser you're targetting.
A great source is this Stackoverflow answer. For example, it points you to the default Firefox CSS rules, in which you can find Firefox by default sets the body margin to 8px, while on Jonathan Neal's website iecss.com you can read this is set to 10 or 15px.
Realize that resetting everything might reset things you didn't think of, and actually don't want to be reset. For example, if you reset "everything", you're also resetting default appearance of the "Submit" button. Something you usually don't want, because if you reset it, submit buttons are harder to recognize.
Realize that resetting might affect performance of your web-output. As I understand, the browser first loads the default css-rules, then you overrule it with reset.css, that one is overruled with the css of your webpage and that might be overruled with local formatting. If people use slow tablets, this might take time (I didn't test this though, just a gut-feeling). So maybe a better approach is to "reset" specific, and not in a reset file but in the Style.css / Modern.css of your project.

For example, like explained, body margins by default are different on different browsers. Hypothetically, you might want to set it to "8px" in your Style.css; this is probably better than the browser setting it to 8, your reset.css resetting it to 0, and then your Style.css setting it back to 8. I say hypothetically, because it seems like Madcap already resets it to 0px in output; taken from output / Styles.css of my first project:

Code: Select all

body
{
	font-family: Arial;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background: #e6ebf1 none;
}

So it seems Madcap is already resetting some items for you by default.

Phlawm53 · Post by **Phlawm53** » Wed Apr 24, 2013 6:33 pm

The external conversations about CSS resets continues, ala:

http://www.sitepoint.com/css-architectu ... practices/

The more I read about CSS resets, the less I know about them. Some say they're completely unnecessary, some say they're essential, and most of the rest of us remain confusedâ€¦

Cheers & hope this helps,
Riley
SFO

MadCap Software Forums

Yes/No/Maybe: Using a CSS Reset file with Flare?

Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?

Re: Yes/No/Maybe: Using a CSS Reset file with Flare?