Steps to reproduce the problem

Open Google Chrome and open a New Tab Page. Right-click anywhere on the page and select Inspect to open Developer Tools. Navigate to the Sources tab. Locate the file: chrome-untrusted://new-tab-page/one-google-bar?paramsencoded= Scroll to Line 24, where the error occurs. Observe that the @import statement is concatenated directly with the .gb_1d class without proper separation. This causes a CSS parsing issue, potentially preventing correct style application. Expected Behavior: The @import rule should be properly separated from the .gb_1d class to ensure correct parsing. Actual Behavior: The incorrect concatenation may lead to parsing errors or unexpected behavior in CSS processing. Suggested Fix: Replace the incorrect line with properly formatted CSS:

css Copy Edit @import url('https://fonts.googleapis.com/css?lang=en&family=Product+Sans|Roboto:400,700'); .gb_1d { font: 13px/27px Roboto, Arial, sans-serif; z-index: 986; }

Problem Description

Problem Description: I found a CSS syntax error in the Chrome New Tab Page (one-google-bar), specifically in the file:

📌 File URL: chrome-untrusted://new-tab-page/one-google-bar?paramsencoded= 📌 Error Location: Line 24

The issue occurs because an @import rule is incorrectly concatenated with a CSS class (.gb_1d) without proper separation. This violates CSS syntax rules and may cause parsing issues or unexpected style rendering in Chrome.

Problematic Code: css Copy Edit @import url('https://fonts.googleapis.com/css?lang=en&family=Product+Sans|Roboto:400,700');.gb_1d{font:13px/27px Roboto,Arial,sans-serif;z-index:986} 🔴 Issue:

The @import statement is not properly separated from the next CSS rule (.gb_1d). This makes the CSS difficult to parse and may lead to unexpected rendering issues. According to CSS standards, @import must be on its own line, followed by a semicolon. Expected Behavior: The @import statement should be placed on a separate line to ensure proper parsing:

css Copy Edit @import url('https://fonts.googleapis.com/css?lang=en&family=Product+Sans|Roboto:400,700'); .gb_1d { font: 13px/27px Roboto, Arial, sans-serif; z-index: 986; } Impact of the Issue: Possible Rendering Issues: Styles may not apply correctly, affecting UI elements. CSS Parsing Errors: Browsers may ignore or misinterpret styles. Best Practices Violation: This does not adhere to standard CSS formatting guidelines. References: 🔗 MDN Web Docs - CSS @import 🔗 MDN Web Docs - CSS Syntax

Please let me know if more details are needed. Thank you! 🚀

Summary

CSS syntax error in Chrome New Tab Page.

Additional Data

Category: UI
Chrome Channel: Not sure
Regression: N/A