Example:
body {
font-size: 62.5% /* 1em = 10px */
}
The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.
Elaborating..
/*
* === MAJOR SECTION HEADING ===
*/
/*
* — Minor Section Heading —
*/
I prefer comment to appear this way, but everyone is different how they comment. One this thing is for sure. You can never comment too much! (as they stripped anyhow in css compression).
I use the same method where ever comments are necessary.
I have two little (newbie) questions:
1. Are comments still the same in CSS3?
2. What about comments in html5?
Yes, of course. CSS3 is CSS.
You have to include them between <!– and –>. Just like plain old HTML or XML.
In SCSS, you can use:
or:
How is this Comment Preview possible below this? Is this a plugin in WordPress? So cool.
I don’t like the fact that you need 4 characters to comment a single instructions on a line! It would have been better to use something simpler in addition to the /* */. For example, SQL uses two consecutive dashes like — which is very easy to use, another one is a single quote at the beginning of the line like VB. Anyway, this is still better than the most silly comment syntax for HTML.
I have a followup question to determine if this is style or need.
I see basic comments in css as described /* comment */.
Then I see multi line comments having a * before each new line.
Finally I will see what implies hierarchy as in this example from the normalize.css on github. Link
Is this simply style and hierarchy or is there necessary syntax for multi line comments:
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct
blockdisplay not defined in IE 8/9.*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display: block;}
Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.
/////////
RESET /
//////
css
///////////////////
TYPOGRAPHY /
////////////////
css
/**
TYPO animation /
css
/***
TYPO animation tooltip */
css { / each to their own */; }
Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.
Many coders prefer the // comment // style, However there’s one major advantage to using opening and closing sequences for comments: Since another opening sequence within a comment gets ignored, we have a quick line-based disable for experimental code during development:
I hope you never delete this page, I come back here every time I start a new project!
/*! */ the exclamation mark is sometimes to keep an important comment from being deleted when compressing, i.e. licence information.
According to http://cssguidelin.es/#commenting
What kind of comment is this and is it safe to delete it??
/*
@tab Page
@section Heading 1
@tip Set the styling for all first-level headings. These should be the largest of your headings.
@style heading 1
*/
what is Different Between This Media Query
/* Smartphones (portrait and landscape) ———- /
@media screen and (min-width: 320px) and (max-width: 480px){
/ styles */
}
Or
/* Smartphones (portrait) ———- /
@media screen and (max-width: 320px){
/ styles /
}
/ Smartphones (landscape) ———- /
@media screen and (min-width: 321px){
/ styles */
}
It’s late but maybe will help someone else:
The first media only works when the width is 320px or more, and 480px of width or less.
The second works from 0px to a max width of 320px.
And the last one works with a width of 321px or more.
can anyone give me an example of a multi-line style rule