Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome devtools reporting the same CSS on the same line twice

Chrome DevTools is reporting the same CSS on the same line twice. Is anyone else seeing this? How can I fix it?

The problem occurs in both stable (40) and Canary (42)

enter image description here

style.css is being loaded exactly once. It is not minified.

enter image description here

like image 822
mikemaccana Avatar asked Feb 06 '15 11:02

mikemaccana


1 Answers

There's a few options here:

You may have included the stylesheet twice

If that is not the case (you're not using preprocessors or minification) I suspect have you included two references to the same file. Use view source for this - in the network tab they would appear as the same file.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="test.css" />
    <link rel="stylesheet" href="test.css" />
</head>
<body>
    <h2 class="title">Title</h2>
</body>
</html>

CSS

h2.title {font-size: 30pt; color: #24a222; }

Result

enter image description here

You may have declared h2.title twice on the same line.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        h2.title {font-size: 30pt; color: #24a222; }h2.title {font-size: 30pt; color: #24a222; }
    </style>
</head>
<body>
    <h2 class="title">Title</h2>
</body>
</html>

enter image description here

like image 80
arnolds Avatar answered Nov 07 '22 11:11

arnolds