Freelance Software Developer

It's good practice to test websites using W3C's validator (https://validator.w3.org) to see whether there are any silly mistakes or code standard compliance issues. It's unusual for a website to pass without a single error or warning.

Optimisation Issues and Inline CSS

Whilst running validation and performance tests on a new free HTML template I've just released, I noticed warnings on the optimised version, but not on the non-optimised version, so I thought I'd investigate.

The reason the non-optimised version passed is because the W3C's validation tool doesn't validate CSS linked to using external style sheets, but it does validate inline CSS which had been injected for improved performance in the optimised version.

Investigating Validation Errors

The CSS it didn't approve of were:

• Error: CSS: text-decoration-skip-ink: Property text-decoration-skip-ink doesn't exist.
• Error: CSS: overflow-anchor: Property overflow-anchor doesn't exist.
• Error: CSS: order: Too many values or values are not recognised.

Now, these aren’t easily fixable errors. They're valid CSS properties, they’re just not fully standardised and implemented in all browsers yet, and therefore not considered by W3C's CSS validator (https://github.com/w3c/css-validator)to be fully cross-compiler compliant.

Since it’s good practice to get rid of all errors and warnings in your code - as it leads to cleaner, more efficient, code with fewer bugs in the long run - I took a deep dive in to the errors reported. Here's what  I found:

Error: CSS: text-decoration-skip-ink: Property text-decoration-skip-ink doesn't exist.

Text-decoration-skip-ink is in working draft format. Meaning it’s released for feedback and is not a standard (W3C Recommendation) yet. It specifies how underlines and over-lines are drawn in relation to font descenders. The CSS was imported from Bootstrap's compiled Sass.

Error: CSS: overflow-anchor: Property overflow-anchor doesn't exist.

Overflow-anchor is in Editor’s Draft. Meaning the ink is only just drying on the document and it hasn’t made it to working draft status yet (explained above). It specifies how the display behaves when something off screen, above the viewed content, changes size. Again, the CSS was coming in from Bootstrap's compiled Sass.

Error: CSS: order: Too many values or values are not recognised.

This was bug in my CSS, plain and simple. There were to many parameters being supplied to a CSS attribute. I think this shows why W3C Validation is worthwhile.

How Did I Resolve the Issues?

Well, I had a decision to make, whether to remove the non-standard CSS properties from Bootstrap or to leave them in there.

I can see why the Bootstrap to team decided to added them; they provide an improved user experience if the browser supports them, but have no negative impact if they don’t.

On balance, I decided to take the W3C validation hit and keep them. These CSS properties improved the end user experience and will no do no harm.

If for some reason you want to fix these errors, you'll need to remove the properties from Bootstrap's Sass or compiled CSS before using it, by hunting down the styles and editing them out, and recompiling your Sass if necessary.

For example: the overflow-anchor property is set on the .accordian class in Bootstrap's _card.scss Sass file. To remove it you’ll need to edit _card.scss, comment it out and rebuild your Sass. Bootstrap's documentation explains how SASS customisation works if you need more help.

Want to Say Thanks for This Article?

Why not buy me a coffee at https://www.paypal.me/justaguycoding ?