Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification?
Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification?
When it comes to CSS, comments made using double slashes // are considered invalid. According to the CSS spec, only the following is mentioned about comments:
4.3.2. Consume comments
This section explains how to consume comments from a string of code points, without returning anything.
If the next two input code points are U+002F SOLIDUS (/) followed by a U+002A ASTERISK (*), consume them along with all subsequent code points until the first U+002A ASTERISK (*) followed by a U+002F SOLIDUS (/), or until reaching an EOF (End of File) code point. Repeat this step if necessary.
If the previous paragraph ended by consuming an EOF code point, it signifies a parse error.
No return value specified.
In essence, only /* */ are recognized as valid comments in CSS. The spec does not acknowledge //.
However, in certain CSS processors like Less and SASS, // is considered valid.
In response to your query:
...can you rely on browsers to understand that's a comment
No, most browsers will interpret the syntax regardless and likely deem it as a syntax error rather than recognizing it as a comment. The outcome might vary across browsers, but utilizing it would result in undefined behavior.
The application of the following rules results in varying outcomes across different browsers. One style includes using double slashes at the start of the property, while the other has // right before the value.
#some {
width: 500px;
/*height: 400px;*/
//color: blue;
background-color: //red;
}
In Firefox ESR 52.9.0, a small yellow warning triangle appears adjacent to color and background-color due to //color being an invalid CSS property, and //red representing an incorrect background-color value.
Intriguingly, in Chrome 68.0.3440.106, the line //color:blue may not even appear in the elements panel, indicating that Chrome possibly considers it a comment. However, since the recognition of // as comments is not standard, relying on it is not recommended. Furthermore, the warning for background-color persists due to //red being an incorrect value.
Safari 11.1.2 exhibits similar behavior to Chrome where the properties starting with // are not listed, and the values led by // generate syntax errors.
Internet Explorer 11.0.9600.19080 interprets //color: blue as a rule property lacking a value, akin to //color: blue: ;. It also identifies background-color: //red as erroneous and doesn't execute it.
It is important to mention that in the case of the following:
#some {
//width: 400px;
/* height: 400px; */
}
Most browsers recognize and allow toggling the /* */ property in Developer Tools. In contrast, Chrome and Safari do not list the // led rule, making it impossible to toggle it as with /* */.
Is it possible to retrieve the absolute URL of a web font specified within an @font-face rule using tools like Firebug? For example: When inspecting the main.css file for a website in Firebug, you may come across this code snippet: @font-face { font ...
According to this resource, Opera 12 does not support pointer-events, causing issues with my website. Interestingly, they do support the property in CSS but don't seem to implement it correctly. Modernizr's feature detection doesn't help in ...
Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...
In ReactJS, I am facing an issue while trying to manipulate the DOM in the componentDidMount() method. The problem lies in the fact that the DOM is not fully rendered at this point, requiring me to use a setTimeout function, which I find undesirable. Upon ...
I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...
$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...
Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...
Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...
I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...
I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...
In my asp.net application, I have 5 list items functioning as tabs on a Masterpage. When a user clicks on a tab, I want to redirect them to the corresponding page and visually indicate which tab is active by changing its class. What is the most effective ...
Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...
After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...
Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...
I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...
I'm encountering an issue while integrating tailwindcss with postcss into my React Application (built using create-react-app). To address this, I modified the scripts section in my package.json. Here is how my updated package.json appears: { "name ...
Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...
Currently, I am facing a styling issue with a few table rows. In this particular screenshot: The cells in the blue and red circles are part of a table row (with a height of 50px). Both are set to "vertical-align:top". The phone number data (in the red cir ...
Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...
I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...