Css map что это
Перейти к содержимому

Css map что это

  • автор:

/*# sourceMappingURL=modal.css.map */ — что значит?

В консоле пишет: GET http://landinco.ru/wp-content/themes/Divi/albanza/css/modal.css.map 404 (Not Found).
Что это означает и где взять ее? В скрипте такого файла нет.

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 2 янв 2015 в 9:32
307 2 2 золотых знака 8 8 серебряных знаков 20 20 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Это значит, что данный CSS код был сгенерирован с помощью какого-то CSS-препроцессора с использованием Карты Кода(Source Map). Если в этом файле тебе всё понятно(или разбираться в нём не нужно) и работает он корректно, то эту строку можно смело удалить.

Прочитать про карты кода можно тут http://habrahabr.ru/post/148098/

Отслеживать
ответ дан 2 янв 2015 в 9:51
311 1 1 серебряный знак 5 5 бронзовых знаков
Спасибо за ответ, а не подскажите, где более подробно почитать на эту тему?
2 янв 2015 в 10:03
Дополнил ответ.
2 янв 2015 в 10:09

  • javascript
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Source Maps: быстро и понятно

Механизм Source Maps используется для отображения исходных текстов программы на сгенерированные на их основе скрипты. Несмотря на то, что тема не нова и по ней уже написан ряд статей (например эта, эта и эта) некоторые аспекты все же нуждаются в прояснении. Представляемая статья представляет собой попытку упорядочить и систематизировать все, что известно по данной теме в краткой и доступной форме.

В статье Source Maps рассматриваются применительно к клиентской разработке в среде популярных браузеров (на примере, DevTools Google Chrome), хотя область их применения не привязана к какому-либо конкретному языку или среде. Главным источникам по Source Maps является, конечно, стандарт, хотя он до сих пор не принят (статус — proposal), но, тем не менее, широко поддерживается браузерами.

Работа над Source Maps была начата в конце нулевых, первая версия была создана для плагина Firebug Closure Inspector. Вторая версия вышла в 2010 и содержала изменения в части сокращения размера map-файла. Третья версия разработана в рамках сотрудничества Google и Mozilla и предложена в 2011 (последняя редакция в 2013).

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

Для работы Source Maps необходимы следующие файлы:

  • собственно сгенерированный JavaScript-файл
  • набор файлов с исходным кодом использовавшийся для его создания
  • map-файл отображающий их друг на друга
Map-файл

Вся работа Source Maps основана на map-файле, который может выглядеть, например, так:

Обычно, имя map-файла складывается из имени скрипта, к которому он относится, с добавлением расширения «.map», bundle.js — bundle.js.map. Это обычный json-файл со следующими полями:

  • «version» — версия Source Maps;
  • «file» — (опционально) имя сгенерированного файла, к которому относится текущий map-файл;
  • «sourceRoot» — (опционально) префикс для путей к файлам-исходникам;
  • «sources» — список путей к файлам-исходникам (разрешаются аналогично адресам src тега script, можно использовать file://.);
  • «names» — список имен переменных и функций, которые подверглись изменению в сгенерированном файле;
  • «mappings» — координаты отображения переменных и функций исходных файлов на сгенерированный файл в формате Base64 VLQ;
  • «sourcesContent» — (опционально) в случае self-contained map-файла список строк, каждая из которых содержит исходный текст файла из sources;
Загрузка Source Maps

Для того, чтобы браузер загрузил map-файл может быть использован один из следующих способов:

  • JavaScript-файл пришел с HTTP-заголовком: SourceMap: (ранее использовался ныне устаревший X-SourceMap: )
  • в сгенерированном JavaScript-файле есть особый комментарий вида:
//# sourceMappingURL= (для CSS /*# sourceMappingURL= */) 

Таким образом, загрузив map-файл браузер подтянет и исходники из поля «sources» и с помощью данных в поле «mappings» отобразит их на сгенерированный скрипт. Во вкладке Sources DevTools можно будет найти оба варианта.

Для указания пути может использоваться пседопротокол file://. Также, в может быть включено все содержимое map-файла в кодировке Base64. В терминологии Webpack подобные Source Maps названы inline source maps.

//# sourceMappingURL=data:application/json;charset=utf-8;base64,

Ошибки загрузки Source Maps

Следует заметить, что map-файлы не являются частью веб-страницы, поэтому вы не увидите информации об их загрузке во вкладке Network DevTools. Тем не менее, если в сгенерированном файле находится ссылка на несуществующий map-файл, в Console DevTools будет предупреждение вида: «DevTools failed to load SourceMap: . ». Также при наличии ссылки на несуществующий исходник, вместо него будет сообщение вида: «Could not load content for . ».

Self-contained map-файлы

Код файлов-исходников можно включить непосредственно в map-файл в поле «sourcesContent», при наличии этого поля необходимость в их отдельной загрузке отпадает. В этом случае названия файлов в «sources» не отражают их реального адреса и могут быть совершенно произвольными. Именно поэтому, вы можете видеть во вкладке Sources DevTools такие странные «протоколы»: webpack://, ng:// и т.д

Mappings

Сущность механизма отображения состоит в том, что координаты (строка/столбец) имен переменных и функций в сгенерированном файле отображаются на координаты в соотвествующем файле исходного кода. Для работы механизма отображения необходима следующая информация:

(#1) номер строки в сгенерированном файле;
(#2) номер столбца в сгенерированном файле;
(#3) индекс исходника в «sources»;
(#4) номер строки исходника;
(#5) номер столбца исходника;

Все эти данные находятся в поле «mappings», значение которого — длинная строка с особой структурой и значениями закодированными в Base64 VLQ.

Строка разделена точками с запятой (;) на разделы, соответствующие строкам в сгенерированном файле (#1).

Каждый раздел разделен запятыми (,) на сегменты, каждый из которых может содержать 1,4 или 5 значений:

  • номер столбца в сгенерированном файле (#2);
  • индекс исходника в «sources» (#3);
  • номер строки исходника (#4);
  • номер столбца исходника (#5);
  • индекс имени переменной/функции из списка «names»;

Каждое значение представляет собой число в формате Base64 VLQ. VLQ (Variable-length quantity) представляет собой принцип кодирования сколь угодно большого числа с помощью произвольного числа двоичных блоков фиксированной длины.

В Source Maps используются шестибитные блоки, которые следуют в порядке от младшей части числа к старшей. Старший 6-й бит каждого блока (continuation bit) зарезервирован, если он установлен, то за текущим следует следующий блок относящийся к этому же числу, если сброшен — последовательность завершена.

Поскольку в Source Maps значение должно иметь знак, для него также зарезервирован младший 1-бит (sign bit), но только в первом блоке последовательности. Как и ожидается, установленный sign бит означает отрицательное число.

Таким образом, если число можно закодировать единственным блоком, оно не может быть по модулю больше 15 (11112), так как в первом шестибитном блоке последовательности два бита зарезервированы: continuation бит всегда будет сброшен, sign бит будет установлен в зависимости от знака числа.

Шестибитные блоки VLQ отображаются на кодировку Base64, где каждой шестибитной последовательности соответствует определенный символ ASCII.

Декодируем число mE. Инверсируем порядок, младшая часть последняя — Em. Декодируем числа из Base64: E — 000100, m — 100110. В первом отбрасываем старший continuation бит и два лидирующих нуля — 100. Во втором отбрасываем старший continuation и младший sign биты (sign бит сброшен — число положительное) — 0011. В итоге получаем 100 00112, что соответствует десятичному 67.

Можно и в обратную сторону, закодируем 41. Его двоичный код 1010012, разбиваем на два блока: старшая часть — 10, младшая часть (всегда 4-битная) — 1001. К старшей части добавляем старший continuation бит (сброшен) и три лидирующих нуля — 000010. К младшей части добавляем старший continuation бит (установлен) и младший sign бит (сброшен — число положительное) — 110010. Кодируем числа в Base64: 000010 — C, 110010 — y. Инверсируем порядок и, в итоге, получаем yC.

Для работы с VLQ весьма полезна одноименная библиотека.

Карты

Карты в Sass содержат пары ключей и значений и упрощают поиск значения по соответствующему ключу. Они записываются как (: , : ) . Выражение перед : — это ключ, а выражение после него — это значение, связанное с этим ключом. Ключи должны быть уникальными, но значения могут дублироваться. В отличие от списков, карты необходимо записывать в круглые скобки. Карта без пар пишется () .

�� Интересный факт:

Проницательные читатели могут заметить, что пустая карта, () , записывается так же, как пустой список. Это потому, что он считается и картой, и списком. Фактически, все карты считаются списками! Каждая карта считается списком, который содержит список из двух элементов для каждой пары ключ/значение. Например, (1: 2, 3: 4) считается как (1 2, 3 4) .

Карты позволяют использовать любые значения Sass в качестве своих ключей. Оператор используется, чтобы определить, являются ли два ключа одинаковыми.

⚠️ Внимание!

В большинстве случаев рекомендуется использовать строки в кавычках, а не строки без кавычек для ключей карты. Это связано с тем, что некоторые значения, такие как названия цветов, могут выглядеть как строки без кавычек, но на самом деле быть другими типами. Чтобы избежать запутанных проблем, просто используйте кавычки!

Использование карт permalink Использование карт

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

Поиск значения permalink Поиск значения

Карты предназначены для связывания ключей и значений, поэтому, естественно, есть способ получить значение, связанное с ключом: [функция map.get($map, $key) ][ map.get($map, $key) ]! Эта функция возвращает значение на карте, связанное с данным ключом. Он возвращает null , если карта не содержит ключа.

SCSS Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700); @debug map.get($font-weights, "medium"); // 500 @debug map.get($font-weights, "extra-bold"); // null 

Sass Syntax

$font-weights: ("regular": 400, "medium": 500, "bold": 700) @debug map.get($font-weights, "medium") // 500 @debug map.get($font-weights, "extra-bold") // null 

Сделайте что-нибудь для каждой пары permalink Сделайте что-нибудь для каждой пары

На самом деле здесь не используется функция, но это по-прежнему один из наиболее распространенных способов использования карт. Правило @each оценивает блок стилей для каждой пары ключ/значение на карте. Ключ и значение присваиваются переменным, поэтому к ним можно легко получить доступ в блоке.

SCSS Syntax

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); @each $name, $glyph in $icons  .icon-#$name>:before  display: inline-block; font-family: "Icon Font"; content: $glyph; > > 

Sass Syntax

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f") @each $name, $glyph in $icons .icon-#$name>:before display: inline-block font-family: "Icon Font" content: $glyph 

CSS Output

@charset "UTF-8"; .icon-eye:before  display: inline-block; font-family: "Icon Font"; content: ""; > .icon-start:before  display: inline-block; font-family: "Icon Font"; content: ""; > .icon-stop:before  display: inline-block; font-family: "Icon Font"; content: ""; > 

Добавить на карту permalink Добавить на карту

Также полезно добавлять новые пары на карту или заменять значение существующего ключа. Функция map.set($map, $key, $value) делает следующее: она возвращает копию $map со значением в $key , установленным на $value .

SCSS Syntax

@use "sass:map"; $font-weights: ("regular": 400, "medium": 500, "bold": 700); @debug map.set($font-weights, "extra-bold", 900); // ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900) @debug map.set($font-weights, "bold", 900); // ("regular": 400, "medium": 500, "bold": 900) 

Sass Syntax

@use "sass:map" $font-weights: ("regular": 400, "medium": 500, "bold": 700) @debug map.set($font-weights, "extra-bold": 900) // ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900) @debug map.set($font-weights, "bold", 900) // ("regular": 400, "medium": 500, "bold": 900) 

Вместо того, чтобы устанавливать значения по одному, вы также можете объединить две существующие карты, используя [ map.merge($map1, $map2) ][].

SCSS Syntax

@use "sass:map"; $light-weights: ("lightest": 100, "light": 300); $heavy-weights: ("medium": 500, "bold": 700); @debug map.merge($light-weights, $heavy-weights); // ("lightest": 100, "light": 300, "medium": 500, "bold": 700) 

Sass Syntax

@use "sass:map" $light-weights: ("lightest": 100, "light": 300) $heavy-weights: ("medium": 500, "bold": 700) @debug map.merge($light-weights, $heavy-weights) // ("lightest": 100, "light": 300, "medium": 500, "bold": 700) 

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

SCSS Syntax

@use "sass:map"; $weights: ("light": 300, "medium": 500); @debug map.merge($weights, ("medium": 700)); // ("light": 300, "medium": 700) 

Sass Syntax

@use "sass:map"; $weights: ("light": 300, "medium": 500) @debug map.merge($weights, ("medium": 700)) // ("light": 300, "medium": 700) 

Обратите внимание, что поскольку карты Sass неизменяемые, map.set() и map.merge() не изменяют исходный список.

Неизменность permalink Неизменность

Карты в Sass неизменяемы, что означает, что содержимое значения карты никогда не изменяется. Все функции карты Sass возвращают новые карты, а не изменяют исходные. Неизменяемость помогает избежать множества скрытых ошибок, которые могут закрасться, когда одна и та же карта используется в разных частях таблицы стилей.

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

SCSS Syntax

@use "sass:map"; $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms); @mixin add-browser-prefix($browser, $prefix)  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global; > @include add-browser-prefix("opera", o); @debug $prefixes-by-browser; // ("firefox": moz, "safari": webkit, "ie": ms, "opera": o) 

Sass Syntax

@use "sass:map" $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms) @mixin add-browser-prefix($browser, $prefix) $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global @include add-browser-prefix("opera", o) @debug $prefixes-by-browser // ("firefox": moz, "safari": webkit, "ie": ms, "opera": o) 

Создание и использование Source Maps для css и js в GULP 4

Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не получится вырвать из контекста просто пару строк кода, поэтому разобью статью на 2 части. Первая будет с базовым кодом для Source Maps, а во второй части будет куча кода из рабочего проекта.

Source Maps нужны для проектов, где происходит сборка нескольких файлов в один, например, компиляция файлов scss в один файл main.min.css или конкатенация js-файлов в один scripts.min.js . Карты источников нужны для того, чтобы быстро вносить правки, и не искать в каком файле задано определенное правило или функция, особенно когда для сборки используются десятки файлов или различных библиотек.

Так будет выглядеть в инспекторе код без Source Maps:

Так будет выглядеть код с использованием Source Maps:

И по итогу, если нам нужно увеличить отступ снизу у элемента .icon , то нам не нужно искать по всем файлам scss где задано это правило, а с помощью карты источников видим, что данное правило указано в файле _general.scss на 44 строке.

Если вам это не нужно, то дальше можно не читать.

1. Базовый пример вывода Source Maps для js-файла

var gulp = require('gulp'); var plugin1 = require('gulp-plugin1'); var plugin2 = require('gulp-plugin2'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() < gulp.src('src/**/*.js') .pipe(sourcemaps.init()) .pipe(plugin1()) .pipe(plugin2()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); >);

Где — plugin1() и plugin2() — это какие-то образные плагины, которые занимаются минификацией и конкатенацией js-файлов, например.

Дальше будет много кода из рабочего примера, будет использоваться scss, сборка, минификация, конкатенация и т.д.

2. Кастомизированный пример подключения Source Maps в js-файлах и в css-файлах

var syntax = 'scss', gulp = require('gulp'), sass = require('gulp-sass'), cleancss = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'), notify = require('gulp-notify'),

Задача для компиляции файла main.min.css с Source Maps

// Compile .scss to *.min.css gulp.task('styles', function() < return gulp.src('app/'+syntax+'/**/*.'+syntax+'') // берем все файлы scss .pipe(sourcemaps.init()) // инициализируем создание Source Maps .pipe(sass(< outputStyle: 'compressed' >).on("error", notify.onError())) // компилируем сжатый файл .css .pipe(rename(< suffix: '.min', prefix : '' >)) // переименовываем файл в .min.css .pipe(autoprefixer(['last 15 versions'])) // добавляем вендорные префиксы .pipe(cleancss( > >)) // удаляем все комментарии из кода .pipe(sourcemaps.write()) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл main.min.css в самом конце .pipe(gulp.dest('app/css')) // перемещение скомпилированного файла main.min.css в папку app/css >);

Задача для конкатенации файла scripts.min.js с Source Maps

// Concatenate all .js from /libs/ to libs.min.js gulp.task('scripts', function() < return gulp.src([ 'app/libs/jquery/dist/jquery.min.js', // указываем пути всех подключаемых библиотек и файлов JS 'app/js/common.js', // основной файл функций подключаем в самом конце ]) .pipe(sourcemaps.init()) // инициализируем создание Source Maps .pipe(concat('scripts.min.js')) // объединяем все вышеперечисленные файлы в один scripts.min.js .pipe(uglify()) // минифицируем и удаляем комментарии из файла scripts.min.js .pipe(sourcemaps.write()) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл scripts.min.js в самом конце в формате комментария .pipe(gulp.dest('app/js')) // перемещаем полученный файл scripts.min.js в директорию app/js >);

Все классно, но есть одна проблема.

sourcemaps.write() — не указаны пути для файла *.map, значит карта источников будет записана внутри файла в самый конец, тем самым увеличивая вес файлов более чем в два раза. Это не круто, но зато карты источников будут работать и в Chrome, и в Firefox.
sourcemaps.write(‘.’) — в таком формате source map запишется отдельным файлом в той же папке, что и основной файл, в формате main.min.css.map и scripts.min.js.map.

Проблема с лишним содержимым в виде карты путей решаема.

Source Maps нужны нам только во время разработки, поэтому при билде продашена просто удалим все комментарии из файлов .css и .js — а карта источников записана именно в виде комментария.

Это часть кода из моей таски ‘build’:

var buildCss = gulp.src('app/css/**/*.css') .pipe(cleancss( > >)) // удаляем все комментарии из css .pipe(gulp.dest('dist/css')); // отправляем полученный файл на продакшен var buildJs = gulp.src('app/js/**/*.js') .pipe(uglify()) // удаляем все комментарии из js .pipe(gulp.dest('dist/js')); // отправляем полученный файл на продакшен

По итогу, на продакшене будут чистые минифицированные файлы без лишнего кода и комментариев.

Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css,…

В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда…

Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи HTML…

Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для…

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

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