Menu
▾
▴
#84 Comments handling in CSSParser Vs Browser behavior differs
Comments handling in CSSParser Vs Browser behavior
CSS uses the"block comment" syntax (ie., start a comment with /, and end it with /) and don't support "line comment" //
Whenever we use // in CSS, the next CSS construct - either declaration or block - will be "commented out" in browser .
CASE 1 :
<!DOCTYPE html>
<html>
<head>
<style>
//comment here
.foo {
width: auto;
height: 500px;
background: yellow;
color:red;
}
</style>
</head>
<body>
Hello World!
</body>
</html>
Browser behavior - Style with class "foo" will be commented out
CSS parser behavior - Style with class "foo" will be striped out
CASE 2 :
<!DOCTYPE html>
<html>
<head>
<style>
.foo {
width: auto;
//comments here
height: 500px;
background: yellow;
color:red;
}
</style>
</head>
<body>
Hello World!
</body>
</html>
Browser behavior - In the above Style declarations "height: 500px; background: yellow;color:red;" will be commented out
CSS parser behavior - In the above Style declarations "height: 500px; background: yellow;color:red;" will be striped out
CASE 3 :
<!DOCTYPE html>
<html>
<head>
<style>
.foo {
width: auto;
//height: 500px;
background: yellow;
color:red;
}
</style>
</head>
<body>
Hello World!
</body>
</html>
Browser behavior - In this case, //height: will be consider as invalid css property, hence "background: yellow; color:red;" will be applied in browser
CSS parser behavior - In the above Style declarations "height: 500px; background: yellow;color:red;" will be striped out
In CASE3, The browser and parser behavior differs. Is there any way to handle it ?
Discussion
Anonymous
Will have a look and try to fix it.