CSS Lint

[markusfalk]

You think it would be an option to make the styles of the slider pass the CSS Lint test on http://csslint.net/

thanks alot :)

[Mottie]

Hi @markusfalk!

I just ran a quick test on the default css, I noticed there were 0 errors and 30 warnings. Most of the warnings are directed at IE6 and are labeled "Disallow adjoining classes" of which I think are necessary. And really, we don't need to worry about IE6 anymore.

I couldn't find an option to ignore IE6, and when I did a search for another css linter, I found this very interesting article "CSS Lint is harmful" which pretty much made me lean toward totally ignoring all the other warnings that CSSLint was showing like:

"Disallow empty rules"

.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */

"Disallow duplicate background images"

In this case the image is a sprite; I think browsers are "smart" enough to use the cached image here.

.anythingSlider-default .anythingControls a {
    /* top shadow */
    background: #777 url(../images/default.png) center -288px repeat-x;
    color: #000;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
.
.
.
.anythingSlider-default .arrow a {
    display: block;
    width: 45px;
    height: 140px;
    margin: -70px 0 0 0; /* half height of image */
    text-align: center;
    outline: 0;
    background: url(../images/default.png) no-repeat;
}

Others:

• "Disallow IDs in selectors" - the provided css files define #slider by default to set the height & width of the slider, it wasn't meant to be an "absolute" definition.
• "Disallow outline: none" - remove the outline from the larger outer arrows because they actually don't look good and tabbing through the navigation buttons will actually change the current slide.
• "Require standard property with vendor prefix" - this might be the only valid warning which is telling us to move border-radius after -webkit-border-radius. Does this really matter since these vendor prefixes aren't required anymore?
• "Disallow !important" - set on the outer wrapper of AnythingSlider to prevent content from overflowing. Necessary? probably not.
• "Beware of broken box size" - yes, box-sizing wasn't accounted for when AnythingSlider was first written; but then css3 wasn't around either. Honestly, AnythingSlider needs to be rewritten and be brought up-to-date to use all of the modern browser enhancements.

Ultimately, I found a link to http://jigsaw.w3.org/css-validator/validator in the comments of that article. When I added the css from "anythingslider.css" into it, I only got 5 warnings, of which I'll look into when I finish working on some other projects.

[markusfalk]

A very satisfying and comprehensive answer that I can totally go along with :) thanks

[markusfalk]

http://meyerweb.com/eric/comment/chech.html ;)

[Mottie]

LOL touché