Hi Chris,
Thanks for asking. I'll go ahead and respond to each of your questions:
1) Why are there errors, found when using w3c's CSS validation simulator (http://jigsaw.w3.org/css-validator/validator), with Liferay's CSS files "out of the box"?
We don't recommend using the CSS Validator. It assumes that the browsers your deploying to do not have vendor prefixes for the CSS features you're requesting, which often times, that is only way to ensure that most people see your changes.
For instance, opacity. In order to do opacity in a cross browser way that works in IE and other browsers you need to do:
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
However, while that's not valid CSS according to the spec, it is valid CSS for actual browsers, and all browsers ignore rules they don't understand.
Also, since the CSS3 spec has yet to be finalized, checking if something is "valid" is a constantly moving target.
There is a certain academic benefit to the validator, but not really a practical one.
2) How come Liferay's custom.css commented out styling, ( /* styling ... */ ), doesn't override another styling found in, for example, base.css, even though the styling on base.css isnt commented out? I am wanting to do turn off the SASS styling features by commenting them out and rewriting them in non-SASS styling syntax.
I'm not sure I fully understand this question. The custom.css file is imported after the other files, so you can override the styling defined by the other files, but commenting out code in custom.css will not comment out code any other file.
They're just plain CSS imports (or if in production mode, we combine it all into one file).
While we don't recommend editing the other files directly, if this is required, you have the ability to modify the base file as needed.
3) Is @compass, now featured in Liferay 6.1.20. IE8-9 browser compatible with little to no edits being made to make the SASS styling work?
Compass is a set of utilities and Sass mixins that help solve common problems in CSS. For instance, instead of having to write:
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
opacity: 0.9;
Every time you want to have opacity, you can just write:
@include opacity(0.9);
However, some features of Compass don't have any equivalent in IE. For instance, box-shadow.
What we've discovered is that most of those things are safe to use as an enhanced experience, while allowing inferior browsers to get a limited experience (similar to black & white televisions not being able to display in color).
Some design teams demand pixel perfect accuracy across browsers, but this is often going against the grain of the medium, and more often than not, introduces performance issues or complexity costs that cost much more in development time.
Since you mentioned Twitter Bootstrap, you can see this effect by viewing Bootstrap's site in Chrome or Firefox, and then viewing it in IE8.
I hope that answers your questions for you.
Thanks Chris,
