Попробуй прямо в этом окне: удали строку с открывающим /* и строку с закрывающим */ перед вторым правилом (для dodgerblue) и посмотри, как поменяется цвет текста. Именно так комментарии часто используют на практике - чтобы временно отключить кусок кода, не удаляя его совсем.
Как написать комментарий в CSS
В CSS всего один способ написать комментарий: обернуть текст между /* и */. Так можно закомментировать и одну строку, и сразу несколько - главное, чтобы у каждого /* был свой */. А вот вкладывать один такой комментарий в другой нельзя: первый же */, который попадётся браузеру, закроет комментарий - даже если по смыслу ты хотел закрыть его позже.
/* Основные цвета сайта */
h1 { color: tomato; } - обычный комментарий, никак не влияет на h1.
/* Временно отключаем оба правила
h1 { color: tomato; }
/* ещё заметка */
p { color: dodgerblue; }
*/ - комментарий закроется сразу после «ещё заметка», а p { color: dodgerblue; } окажется уже СНАРУЖИ комментария и включится по-настоящему, хотя должен был остаться отключённым.
Почему не работают комментарии в стиле //
В JavaScript двойной слэш // отключает остаток строки, и новичкам иногда хочется написать так же в CSS. Но у CSS нет такого синтаксиса вообще - // для него не комментарий, а бессмысленное начало объявления. Браузер пытается прочитать всё, что идёт после //, как обычное CSS-объявление, не находит там нормального свойства и просто отбрасывает всё это - вплоть до ближайшей точки с запятой (это то самое поведение браузера при ошибках, которое мы разбирали в уроке про CSS-правило). Со стороны это иногда выглядит так, будто // сработал как комментарий, но на самом деле это просто ещё одна отброшенная ошибка.
p {
color: tomato;
/* margin: 20px; */
} - настоящий комментарий, отключает margin осознанно.
p {
color: tomato;
// color: dodgerblue;
font-size: 24px;
} - строка с // целиком отбрасывается как ошибка, поэтому итоговый цвет остаётся tomato, а font-size применяется как ни в чём не бывало - просто повезло, что результат похож на то, что ожидалось.
<style>, в самой первой спецификации CSS1 1996 года советовали прятать его содержимое ещё и в HTML-комментарий <!-- --> - чтобы старые браузеры, которые вообще не знали про <style>, не показывали CSS-код прямо на странице как обычный текст. В спецификации это описано буквально так: «на переходный период содержимое элемента STYLE может быть скрыто с помощью SGML-комментариев». Это другой комментарий, не CSS-шный - современным браузерам такая обёртка уже не нужна. Источник: w3.org - спецификация CSS1, 1996.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Пытаться закомментировать код через // как в JavaScript | CSS не понимает //; строка становится одним неверным объявлением, которое браузер молча отбрасывает до ближайшей точки с запятой | Всегда использовать /* ... */ |
| Вкладывать один комментарий /* */ в другой | Первый же */ закрывает комментарий раньше, чем задумано, и часть кода, которая должна была остаться отключённой, включается по-настоящему | Не вкладывать комментарии друг в друга - отключать блоки по отдельности |
| Забыть поставить закрывающий */ | Всё, что идёт после /*, включая настоящие рабочие правила, тоже становится частью комментария и перестаёт применяться | Проверять, что у каждого /* есть свой */ |
| Оставлять старую обёртку <!-- --> вокруг содержимого style "на всякий случай" | Это приём для браузеров конца 1990-х; современным браузерам он не нужен и только добавляет лишний код | Убирать HTML-комментарии из style, оставляя только настоящие /* */ |
Шпаргалка
| Термин | Значение |
|---|---|
| Комментарий CSS | /* текст */ - всё внутри браузер полностью игнорирует |
| Одна и несколько строк | Синтаксис один и тот же - /* ... */ может занимать и одну, и много строк |
| Вложенность | Комментарии CSS нельзя вкладывать друг в друга |
| // в CSS | Не комментарий - превращается в ошибочное объявление, которое браузер молча отбрасывает |
| <!-- --> | Это HTML-комментарий, а не CSS - внутри style он ничего не комментирует по правилам самого CSS |
Коротко: отвечаем на вопросы
Влияют ли комментарии на скорость загрузки страницы?
Сами по себе - незначительно, это просто лишние байты в файле. На реальных больших сайтах для этого используют минификацию: специальный инструмент перед публикацией автоматически убирает из CSS-файла все комментарии, пробелы и переносы строк, оставляя только рабочий код.
Можно ли писать комментарии на русском языке?
Да, браузер всё равно полностью игнорирует содержимое комментария - там может быть любой текст на любом языке.
Как закомментировать сразу несколько правил CSS?
Так же, одним блоком: поставить /* перед первым правилом и */ после последнего - комментарий в CSS спокойно занимает сколько угодно строк.
Нужно ли удалять все комментарии перед публикацией сайта?
Вручную - необязательно, они не ломают код. На практике эту работу обычно доверяют минификатору, который автоматически убирает комментарии из финального файла, а в исходном коде, с которым работает сам разработчик, их обычно оставляют.
