CSS Validators

[GeorgeBell]

We have Flare 2017 r3
We are attempting to clean up a project which has evolved over a number of years, and are at the point where we now use one main CSS overall, plus one for tables.
As we additionally require HTML5 output (for Apple Mac), it seems logical that one of our priorities should be to ensure both CSS files are as error free as possible.
However, running the Nu Validator from the W3C site results in over 140 errors for the main and 85 error for the table.
Without going into details at this stage, does anyone have any comments or advice on this front?

[ChoccieMuffin]

If you edit it using the stylesheet editor and add new styles, the new styles are just chucked in at the end of the file, so after a while the stylesheet ends up so that you can't find things when looking at it just in a text editor, so I tidied up the stylesheets we use so that I can look at them in a text editor without going blind!

Make a copy of your stylesheet.
In the copy, move the styles around so that there are clear sections for the different mediums you use.
Using cut and paste, sort the styles into some kind of logical order in each of the mediums, for example put all of your heading styles together, all of your p styles together, put your generics at the beginning of the medium.

That approach might reduce some of your errors, as you may find that you have the same style defined more than once in your stylesheet for the same medium (it can happen if people have been editing as text as well as editing in Flare).

Even if that doesn't remove all your errors (I suspect it won't!) it will at least mean you can read the naked file more easily, and will be a useful starting point for additional removal of errors.

[GeorgeBell]

Many thanks, this is excellent advice. I have to confess I had been thinking along similar lines, but frankly a little scared messing with such an important file.

[GeorgeBell]

OK. I have to admit I'm becoming defeated in re-arranging the CSS.
Has anyone any recommendations for simple software which will assist with this process?

[ChoccieMuffin]

Use two different windows, so you can see what you're starting with and what you end up with at the same time. I use Notepad++ for this kind of thing.

1. Open the copy of your stylesheet in one Notepad++ window.
2. Create a blank Notepad++ file.
3. Copy the line /*<meta />*/ to the top of your new file.
4. Create opening and closing marks for each of the mediums you want, for example:

Code: Select all

/*<meta />*/ 
@media non-print
{

}

@media print
{

}

You will be copying your individual styles into the spaces between the curly brackets.

NOTE: I prefer to have all my classes duplicated in two specific mediums as above, while others like to use the "default" medium for online stuff and just specify classes for print where they are different from the default. That's just my preference, not a rule, so adapt this suggested approach to suit your own way of working.

5. Start at the top of your stylesheet and cut bits out that apply to the first medium and paste them into the correct place so, for example, your @media print section now looks like this:

Code: Select all

@media print
{
 	.KeepWithNext
	{
		page-break-after: avoid;
		page-break-before: auto;
		page-break-inside: auto;
		column-break-after: auto;
	}

	body
	{
		font-family: Arial;
		font-size: 9pt;
		line-height: 12pt;
		color: #000000;
		mc-hyphenate: never;
	}

	h1
	{
		background-image: none;
		font-family: Arial;
		border: none;
		font-weight: normal;
		font-style: normal;
		margin-bottom: 60pt;
		mc-hyphenate: never;
		font-size: 22pt;
		margin-right: 0;
		margin-left: 0;
		padding: none;
		color: #007d8a;
		mc-heading-level: 2;
		page-break-inside: avoid;
		page-break-before: avoid;
		line-height: normal;
		mc-next-tag: p;
		mc-auto-number-format: '{chapnum} - ';
		mc-auto-number-class: hidden;
	}

	p
	{
		font-family: Arial;
		margin-top: 3pt;
		margin-bottom: 9pt;
		background-image: none;
		font-size: 9pt;
		color: #000000;
		orphans: 2;
		widows: 2;
		margin-left: 1cm;
		mc-hyphenate: never;
		line-height: 12pt;
	}
}

6. When cutting and pasting, pay massive attention to the placement of those opening and closing brackets - it's easy to break (which is why you're cutting bits out of a copy, not out of your original stylesheet).
7. When pasting, try to keep bits together in a sensible order that you find logical. For example I have all my generic styles first, then headings, then paragraphs, then lists, then tables, then images. Within each type I sort them, so my p.Tip, p.Note, p.Warning and p.Important are all next to each other.
8. Regarding the order of things, if you have complex selectors (for example "td p", which is "apply this styling to any <p> that is inside a table cell") put them AFTER the style that they are modifying, as later style attributes "trump" attributes that appear earlier in the list.
9. When doing the same thing for a second (or third) medium, try to put the items in the same order as you did for the first.
10. When you've done one medium, check it. Put the new stylesheet (assume you've saved it as NEW.css) into an actual project then try to open it in the Stylesheet editor. If it opens, at least you haven't messed up your brackets! It can be a total PITA to find where things have broken once you've got a massive file, so do this intermittently while working. In Notepad++ you can also see the font changes subtly after an "illegal" entry. To see what I mean, at the end of a class (e.g. p.Note) add a comma. You should see the colours of the font in the lines that follow change. That can be a handy hint for finding any errors.

This isn't something that you can do in just five minutes, so set aside a suitable amount of time. I think it took me a couple of days to do (an hour or so here and there while doing "regular" work) but I'm very glad I did, as I am now very familiar with my stylesheet.

Good luck, and let us know how you get on!

[Glenn Lea]

Nice summary of how to modify the stylesheet for a Print output. I did a more chaotic approach to adding styles to a Word medium. It works, but your process would have saved time and trouble.