Css-css-кодирование, которое я никогда не видел

Я изучаю бесплатный шаблон css, называемый zerofour, найденный в http://html5up.net/zerofour/ и работающий по кодировке css, которую я никогда раньше не видел. В HTML некоторые div имеют класс, такой как "4u", но когда я проверяю файлы css, это единственный текстовый раздел, который имеет что-то с этими терминами, и выглядит так:

/* Grid */

/* Cells */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }

Когда я удаляю класс 4u с помощью хром-разработчика, страница затронута. Однако, когда я удаляю этот раздел из файла css, ничего не происходит. Я совершенно в тупике, и это действительно подшучивает над мной.

Ответ 1

Прочтите эту спецификацию: http://www.w3.org/International/questions/qa-escapes#cssescapes. Символы, следующие за косой чертой, представляют собой кодовую точку юникода. Пробел требуется, если следующий символ разрешен как часть шестнадцатеричных значений.

Ответ 2

Это первый раз, когда я вижу имена классов, подобные этому, и я задавался вопросом о значении. На странице W3C говорится:

В CSS 2.1 символ обратной косой черты (\) может указывать один из трех типов побега характера. Внутри комментария CSS обратная косая черта означает и если обратная косая черта сразу последовали за концом это также обозначает себя (то есть маркер DELIM). Первый, внутри строки игнорируется обратная косая черта, сопровождаемая новой линией (т.е. строка считается не содержащей ни обратной косой черты, ни новая линия). Вне строки, обратная косая черта, сопровождаемая новой строкой для себя (то есть DELIM, за которым следует новая строка).

Во-вторых, он отменяет значение специальных символов CSS. Любые символ (кроме шестнадцатеричной цифры, перевода строки, возврата каретки или form feed) можно сбрасывать с помощью обратной косой черты, чтобы удалить ее специальные имея в виду. Например, "\"" - это строка, состоящая из одной двойной кавычки. Препроцессоры в стиле листа не должны удалять эти обратные косые черты с так как это изменит значение таблицы стилей.

В-третьих, обратные слэши позволяют авторам ссылаться на символы, которые они не может легко вставить документ. В этом случае обратная косая черта за которым следует не более шести шестнадцатеричных цифр (0..9A..F), что означает символ ISO 10646 ([ISO10646]) с этим номером, который не должен равна нулю. (Это значение undefined в CSS 2.1, что произойдет, если таблица стилей содержит символ с кодовым нулевым кодом Unicode.) Если символ в диапазоне [0-9a-fA-F] следует шестнадцатеричное число, конец число должно быть уточнено. Это можно сделать двумя способами: с пробелом (или другим символом пробела): \26 B (&B) [...]

Примечание. Экраны с обратным слэшем всегда считаются частью идентификатор или строка (т.е. \7B не является пунктуацией, хотя { есть, а \32 разрешено в начале имени класса, хотя 2 нет). Идентификатор te\st - это точно такой же идентификатор, что и test.

Итак, насколько я понимаю, здесь \3 + number + space используется для использования чисел только как имена классов.

Ответ 3

Похоже на что-то похожее на Foundation. Я новичок в Html5up, но это моя догадка. Как обычно работает (по крайней мере, в Foundation) у вас есть "строка", которая представляет собой всю ширину вашей страницы (обычно). Внутри этой строки у вас есть столбцы (или "u" здесь по какой-то причине), причем каждый столбец занимает тот же самый% от ширины. Обычно стандарт для Фонда составляет 12 столбцов/строк, и я предполагаю, что он здесь же. Итак, в основном, если вы хотите, чтобы первые 50% строк были гигантскими div, а затем двумя div, которые разделили оставшиеся 50%, это выглядело бы следующим образом:

<div class="row">
  <div class="6u">
    Big Div Here.
  </div>

  <div class="3u">
    Small Div Here.
  </div>

  <div class="3u">
    Small Div here (same size as the other small div)>
  </div>
</div>  (This ends the row).

Причиной всего этого безумия является то, что легче сделать вашу страницу отзывчивой (что является одним из основных моментов Foundation и HTML5Up).

Взгляд в Foundation Dev Docs для более подробного объяснения и дополнительных примеров (несмотря на то, что он не обязательно является базовым) - Здесь

Ответ 4

html5up.net использует фреймворк под названием skel, чтобы сделать макеты отзывчивыми.

Если ваш вопрос "как я могу понять эти классы", а не "как эти escape-последовательности работают", то ссылка, которую вы ищете, находится в https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1.

Ответ 5

Я думаю, что этот тип css используется для мобильной совместимости.