CSS line comments

CSS line rule comments

It’s not widely understood but, yes, you can use line comments in CSS files.

See the fully fleshed out example on rawgit.com ~ http://bit.ly/css-line-comments

How it works

In CSS, a line comment means, starting from the line comment delimiter, //,

  1. If a selector ruleset is commented, ignore all characters for
    processing until the next closing brace, }
  2. If a rule within a ruleset is commented, ignore all characters for
    processing until the next semi-colon, ;

These apply even when the terminating brace or semi-colon appear on the same
line or a subsequent line.

ruleset comments

All text in <p> tags on this page should be colored brown. The two
rulesets below for color: fuchsia should be ignored.

  <style>
  p { color: brown; }
  // p { color: red; color: fuchsia; }
  // p { 
    color: red;
    color: fuchsia;
  }
  </style>

rule comments

Starting with a basic rule and markup…

  [blue] {
    /* should be blue */

    color: red;
    color: blue; 
  }

  <div>this text should be blue</div>

simple comment

Comment text that ends with a semi-colon.

  [simple-comment] {
    /* should be red */

    /* EXCEPT:  does not work in IE 7 and below. */

    color: red;
    // color: blue; 
  }

  <div>this text should be red ~ except in IE 7 (and below) </div>

deciphering IE7

Apparently the simple comment style does not work in IE7 unless the comment
contains text before the affected rule-name.

  [ie7] {
    /* should be bold */

    /* even works in IE 7 */

    font-weight: bold;
    // comment font-weight: normal;
  }

  <div>text should be bold</div>

inline comment

Comment any text up to the first semi-colon. This behaves just like a block
comment, <code>/* … */</code>, where anything that follows is processed, even
if on the same line.

  [inline-comment] {
    /* should be blue */

    color: red;
    // comment terminates at semi-colon; color: blue; 
  }

  <div>this text should be blue again</div>

next-rule comment

Comment a line and any subsequent line(s) until the next semi-colon.

  [next-rule-comment] {
    /* should be red */

    /* even works in IE 7 */

    color: red;
    // comment next rule
    color: blue;
  }

  <div>this text should be red again ~ even in IE 7</div>

combined example: next-rule plus inline

  [combined-comment] {
    /* should be green */
    /* in this ruleset, the blue rule will be ignored, the green rule applied */

    color: red;
    // comment next rule
    color: blue; color: green;
  }

  <div>this text should be green</div>

examples live on rawgit

See the fully fleshed out example on rawgit.com ~ http://bit.ly/css-line-comments

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s