Псевдо комментарии в CSS (или как браузер парсит стили)

Псевдо комментарии в CSS

От автора: в спецификации об этом ничего не сказано, но в файлах CSS можно имитировать C-подобные и/или Unix комментарии (с небольшими оговорками). Множество статей было написано на эту тему. В данной же статье мы более подробно их рассмотрим.

CSS комментарии

В парсерах CSS, согласно спецификации, приемлем только один стиль комментирования: многострочное комментирование, как в C-подобных языках. Открывающий символ /*, закрывающий символ */. Т.е. вот так можно проигнорировать стили:

Можно закомментировать целый блок:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Также проигнорировать целый блок можно случайно, допустив ошибку:

В этом примере оба селектора не сработают из-за пропущенной точки с запятой в первой строке. Парсер отделяет селекторы точкой с запятой, обнаруживает селектор, записанный в две строки. Из-за неправильной записи игнорируется весь контекст, то есть блок. То же самое будет, если пропустить значение свойства:

А это значит, что мы можем использовать неправильное объявление свойств, как…

Псевдо-комментарии

Мы называем такую форму записи «псевдо-комментарием», так как, по сути, это и не комментарий вовсе. Из-за своей неправильно записи они портят идущее следом свойство. Все из-за ошибки во время обработки правил, объявлений блоков и селекторов:

«Если хоть в одном селекторе допущена ошибка, будет проигнорировано все выражение, даже если остальные свойства записаны по правилам CSS 2.1.»

В следующем примере из спецификации второй блок будет пропущен из-за лишнего символа «&» в селекторе:

И снова, второе и третье свойство не сработают, так как в их именах присутствуют лишние символы:

Быстрый ликбез по английским символам, которые можно использовать для однострочных комментариев:

Помимо них можно использовать и привычные C-подобные и Unix комментарии, # или //:

Точка с запятой

Точка с запятой является окончанием правила. Т.е. их нельзя использовать для комментирования стоящего впереди текста. В спецификации говорится, что парсер обрабатывает отсутствие точки с запятой, как неправильное объявление (пропущено название свойства, двоеточие или значение).

Как упоминалось уже выше, при неправильном объявлении многострочного комментария, также игнорируется и внутреннее объявление. В примере ниже оба свойства background будут работать, как комментарии, из-за того, что парсер будет искать символ конца объявления (точка с запятой):

Исправить это можно, добавив точку с запятой перед следующим свойством (т.е. свойство background: blue сработает):

Тот же эффект с пропущенной точкой с запятой и в псевдо-комментариях:

И работает, если вернуть точку с запятой на место:

Размещение на той же и на следующей строке

Вот тут и подходит термин «псевдо». Может быть, и вовсе не стоит называть эту форму записи «комментарием». Из-за псевдо-комментария будет игнорироваться следующее за ним свойство. В следующем примере фон будет синим:

Псевдо-комментарий, размещенный после правильно-объявленного свойства на одной с ним строке, будет подавлять выполнение свойства на следующей строке. В примере ниже фон будет белый, а не синий:

Даже в минифицированном виде, когда все свойства записаны в одну строку, псевдо-комментарий распространяется только на следом идущее свойство. В примере ниже первое объявление background игнорируется. Парсер доходит до символа конца строки, и второе объявление background уже распознается. (фон будет синим):

Селекторы

Те же правила применяются и к селекторам. Весь селектор будет проигнорирован при наличии перед ним на одной с ним строке псевдо-комментария, даже однострочного:

Или на следующей строке:

Неправильная запись псевдо-комментариев

Работа псевдо-комментариев основана на правилах по обработке ошибок парсера. По сути, они работают из-за своей же неправильной записи.

Неизвестное значение

«Юзер агенты должны игнорировать неизвестные свойства». Объявления с нераспознанными именами свойств не будут работать. К примеру, свойство comment в селекторе body:

Недопустимые значения

«Юзер агенты должны игнорировать объявления с недопустимыми значениями.» Свойство color будет проигнорировано, так как его значение записано в формате строки:

Неправильные объявления и выражения

«Юзер агенты должны обрабатывать неожиданные символы [или выражения] до конца объявления [или выражения], если соблюдено правило парных скобок (), [], {} и кавычек «».»

Несовпадение символов (), [], {}, «» и ‘’ приводит к игнорированию всего блока (и более опасно). Символы кавычек «» и ‘’ обрабатываются не так как скобки (), [], {}.

Символы кавычек

Символ одиночной кавычки в начале второй строки в примере ниже лишний, поэтому вторая и третья строки будут проигнорированы (т.е. фон будет красный):

Однако третье объявление после одной кавычки выполняется (т.е. фон будет золотым):

В общем, символом кавычки нельзя закомментировать одну строку.

Символы скобок

В целом, символы скобок (), [], {} не стоит использовать в псевдо-комментариях, т.к. они оказывают куда больший эффект. Это связано с возможностью парсера распознавать блоки. Их использование может закомментировать больше одного блока за раз. Для полноты картины, рассмотрим некоторые из них.

К примеру, одиночный символ фигурной скобки заблокирует вообще все последующие стили до конца файла (не только текущего блока). То же самое применимо и к запятым, квадратным и обычным скобкам. В примере ниже сработает только свойство background: red;. Все остальные свойства будут пропущены вплоть до конца файла:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

При совпадении парных символов, внутренние свойства и последующие за закрывающим парным символом свойства будут проигнорированы. В примере ниже фон будет красный, а не золотой:

Закрывающая запятая или квадратная скобка подавляют только следующее за ними свойство. В примере ниже фон будет голубой:

Однако закрывающая фигурная скобка } блокирует вообще все последующие свойства в селекторе. В примере ниже фон будет красный:

@-правила

@-правила бывают в двух формах:

С фигурными скобками {…} как @media

С точкой с запятой ; как @charset

Псевдокомментарии в @-правилах ведут себя так же, как и в селекторах (т.е. блокируют весь блок).

Псевдо-комментарии в @-правилах с фигурными скобками

Если свойства находятся внутри селектора body, а тот в свою очередь внутри @-правила типа @keyframes, @media, @page или @font-face, и псевдо-комментарий поставить перед @-правилом на одной с ним строке, то весь блок стилей будет заблокирован:

Или на следующей строке:

Псевдо-комментарии в @-правилах без фигурных скобок

Псевдо-комментарии в неблоковых @-правилах типа @charset или @import блокируют все правило целиком. Псевдо-комментарий после ключевого слова блокирует всю конструкцию:

Однако псевдо-комментарий перед @-правилом блокирует и его и следующее за ним такое же правило. Так происходит потому, что парсер воспринимает псевдо-комментарий, как неправильно-записанное свойство, тем самым парсер его пропускает и ищет следующее за ним.

Поэтому псевдо-комментарий перед одним @import заблокирует серию из таких же @import’ов и первое свойство после последнего @import’а.

Исправить это можно, добавив пустые фигурные скобки после закомментированного @import

Хотя это и весело поиграться с отладкой кода, лучше избегать псевдо-комментариев в @-правилах без фигурных скобок из-за их непредсказуемого поведения.

@-правила и неизвестные @-ключи

«Юзер агенты должны игнорировать неправильно записанные ключевые слова в @-правилах и все что следует за ними вплоть до конца блока, в котором @-правило записано, или до точки с запятой, или до следующих фигурных скобок»

Проиллюстрировать данную ситуацию можно с помощью неизвестного @-правила @comment с фигурными скобками. К примеру, правило ниже парсится до закрывающей фигурной скобки }, распознается неверно-записанным и пропускается:

Сперва, это может показаться вообще безвредным, блок просто пропускается целиком. Однако одинарная кавычка должна где-то закрыться. Из-за отсутствия второй одинарной закрывающей кавычки на той же строке мы получаем ошибку. Это приводит к тому, что если закрывающая фигурная скобка в @-правиле находится на той же строке, что и одинарная кавычка, то следующее @-правило или селектор тоже будут блокироваться.

Исправить это можно с помощью двойных кавычек:

Или можно стереть фигурные скобки, перенести выражение на одну строку и добавить в конце точку с запятой:

Или на следующей строке:

Препроцессоры

В различных препроцессорах CSS поддерживаются схожие однострочные и многострочные комментарии.

Sass

«В Sass поддерживаются стандартные многострочные CSS комментарии /* */ и однострочные //. Многострочные комментарии при компиляции сохраняются, а однострочные удаляются.»

Источник

В режиме сжатия, обычно, удаляются все комментарии, если открывающий символ не начинается с /*!. Однострочные комментарии также можно оставить на выходе с помощью символа #.

Less

«Можно использовать и блочные и однострочные комментарии.»

Источник

Я не очень понимаю, в каких случаях в Less комментарии удаляются или остаются при компиляции. По информации с сайта StackOverflow линейные комментарии сохранятся на выходе, если они находятся внутри фигурных скобок.

Stylus

В Stylus тоже присутствуют как /* */, так и // комментарии. Но они будут удаляться при компиляции при включенной директиве compress. Если вам нужно, чтобы многострочные комментарии всегда оставались на выходе, воспользуйтесь многострочным буферным комментарием.

«Многострочные комментарии не удаляются, если они начинаются с /*!. В таком случае Stylus оставит их при компиляции, несмотря на режим сжатия.»

Источник

Лучшие практики

«Читабильность можно посчитать»

https://www.python.org/dev/peps/pep-0020/>Zen of Python

Комментарии добавляют ясности кода, но его читаемость зависит не только от этого параметра. Псевдо-комментарии в CSS в меньшей мере предназначены для человека, но для парсера. Если вдруг вам нужно воспользоваться псевдо-комментариями:

Используйте символы C-подобных и unix комментариев // или #.

Разместите псевдо-комментарий над тем правилом, которое необходимо проигнорировать.

Или используйте пробел на одной строке с правилом, чтобы заблокировать только одно свойство # background: ignored;

Применение псевдо-комментариев:

Для отладки, особенно в сочетании с CSS панелью разработчика типа Web Developer extension (chrome, firefox, opera).

Для блокировки объявлений, селекторов или @-правил с фигурными скобками.

Не используйте псевдо-комментарии:

Для пояснения контекста в @-правилах без фигурных скобок (типа @import). Используйте обычные /*…*/

Избегайте символов кавычек. Человеку их сложно различить.

Избегайте скобок (), [], {} – они только усложнят вам работу с отладкой.

Не используйте псевдо-комментарии в готовом минимизированном коде – они не угробят ваш код, но все же пару лишних байт добавят.

Автор: David Kaye

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree