5

I have just found something very weird while developing a website. While trying to get a div element to display across the top of the screen, I noticed that I wasn't achieving a desired result in any browser except for old versions of IE. In order to test some different code, instead of deleting the faulty line, I used '//' to comment it out (I'm not really even sure if that works in css) but what happened was, the compatible browsers used the uncommented code, while IE used the code marked by '//'. here is the code:

#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block;       //    browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}

so basically, it seems as though // can be used to instruct newer browsers to ignore specific lines of code, and instruct older versions of IE to use it? If this is common practice someone please let me know. it sure makes developing for older browsers a hell of a lot easier

kjh
  • 3,407
  • 8
  • 42
  • 79

2 Answers2

9

// is not a valid CSS comment.

Browsers that parse CSS properly will ignore //position because //position is not a valid property name (details are here, property -> IDENT S* -> follow it through).

This only works in IE7 due to its well known bug of accepting properties with junk prepended to them.

It's not just // that works. IE7 will have red text here:

body {
    !/!*//color: red;
}

This is most typically exploited with *, for example *display: inline; as part of the display: inline-block workaround for IE7.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • (I'm assuming that "old versions of IE" means IE7) – thirtydot Jun 27 '12 at 03:15
  • 2
    I find it a hassle to add /* .. \*/ around my css as I'm debugging it, so I offer the following cheesy hack to disable lines of css in a cross browser fashion: .myRule{..} becomes .XXmyRule{..}! Sure it adds an extra unused rule, instead of removing it, but is sure is a lot quicker than /* .. */ – Trass Vasston Jul 28 '13 at 01:54
  • I use the same trick all the time - in places other than CSS also - eg. to check if a variable is used anywhere - change `var FileLineIndex : integer ;` to `var xFileLineIndex : integer ;`. – rossmcm Jan 13 '20 at 09:58
0

Don't fall into the temptation of commenting out single lines or blocks and not using the correct /* */ couple. A customer who has access to the website folder just chose by himself to comment out a single line using this:

//*  comment here   *//

Actually, Chrome and Safari will ignore ANYTHING that follows this line. I would call it a "css killer". :D

Agamemnus
  • 1,395
  • 4
  • 17
  • 41
Dario Corno
  • 1,129
  • 11
  • 19
  • I don't follow how that would be. It would either see the `//` and ignore everything until the EOL, or it would see the `/`, then see the `/* comment here */` as a "zero-length space", then see another `/`. Not valid CSS, granted, but why would the parser then swallow everything till EOF? – rossmcm Jan 13 '20 at 10:13