Зачем использовать темы
Qlik Sense — один из самых популярных BI-инструментов в мире, лидер квадрата Гартнера, который пользуется неизменной популярностью в России. Рассказывать все плюсы и минусы этого решения мы не будем — материал не об этом. Сам Qlik проприетарен, поэтому поковыряться у него внутри не так-то просто. Он использует браузер клиента в качестве своего рабочего окна, что с одной стороны ограничивает функциональность, а с другой — открывает широкие возможности для кастомизации с помощью средств CSS и определённых нотаций JSON. Как и обо всём, что касается Qlik, информации на русском языке о работе с темами Sense не так много. Что ж, восполним этот досадный пробел.
Если вы работаете с Qlik Sense, в большинстве случаев вы — сотрудник большой организации и отчёт вы делаете не для своих собственных нужд. У вас есть бизнес-заказчик, который не просто хочет получить информацию и сделать некоторые выводы, но он ещё и хочет, чтобы это было красиво. UX и UI не так сильно заботят заказчика, как красивый вид скриншота в Power Point на важном совещании. Разработчик BI-отчётности должен балансировать на тонкой грани между красотой и функциональностью своего приложения, поэтому работа с темами — один из самых простых механизмов облагородить внешний вид без ущерба юзабилити решения.
Кто мы и почему нам можно верить?
Над этим материалом работали сотрудники стрима «Мобильная аналитика и отчётность» Группы «Иннотех» Андрей Юндин, Олег Соколкин и наш руководитель Александр Антонов. Мы давно в отрасли, успели поработать и с классическим QlikView, и с Sense, видели разные боли и придумывали разные решения. Сейчас мы решили собрать материал по темам Qlik Sense, поскольку внешний вид — одна из самых волнующих бизнес-заказчика историй. Этот материал состоит из вводной информации (что такое темы, как ими пользоваться) и конкретных методов работы с объектами. Помимо этого, в тексте есть вполне реальные кейсы применения стилей, которые позволят быстро и просто придать отчётности более современный вид.
1. Вводная информация
Отчёт Qlik Sense использует для расположения объектов традиционные методы html-вёрстки документа. Это значит, что любая сущность на листе представлена тем или иным тегом, свойства которого могут быть в ограниченной степени скорректированы каскадными таблицами стилей (CSS). При этом для отображения простых элементов, таких как заголовки и таблицы, используются простые теги вроде <div>, <table> или <article>, в то время как отображением диаграмм занимаются специальные теги <canvas>, которые предназначены для создания сложных объектов визуализации с помощью JavaScript.
Тема для Qlik Sense представляет собой Extension, загружаемый в виде *.zip-архива. Внутри него располагается каскадная таблица стилей CSS, файл для управления визуализациями canvas *.json и опционально дополнительными элементами оформления (шрифты, изображения).
Корректировка темы позволяет управлять цветовой схемой отчёта, расположением объектов и в некоторых случаях их цветами. Все объекты отчёта представлены блочными и строчными html-тегами. Важное отличие: блочные теги, такие как <div>, <article> и <p>, имеют параметры ширины и высоты, в то время как строчные (<span>, <a>) имеют только параметр размера в контексте длины строки.
1.1. Почему не все цвета можно менять с помощью CSS
В обычном html-документе стили объектов могут задаваться в трёх разных местах:
-
С помощью тега <style>, расположенного внутри технического раздела документа <head>. Это централизованное место для хранения стилей, где с помощью специального синтаксиса указываются все селекторы, свойства и их значения. В Sense не используется.
-
С помощью внешних подключаемых таблиц стилей. Это те самые *.css-файлы, которые подключаются к документу и фактически применяются так же, как тег <style>, но при этом хранятся отдельно, что обеспечивает многократное использование. Именно такая таблица подключается к отчёту в тот момент, когда вы активируете для него тему.
-
Так называемые inline-стили. Это самый неудобный для работы вариант, когда стили прописываются для каждого тега в его описании. К примеру, <div style=»color:red»>. Именно inline-стили создает Qlik в тот момент, когда вы что-то меняете в редакторе отчёта.
Каждый элемент может быть описан в разных местах и по разным селекторам. К примеру, для блока <div id=»mainDiv» class=»textBlock»> стили можно описать сразу четырьмя селекторами или их совокупностью (на самом деле их может быть много больше, но это выходит за рамки ликбеза):
-
Селектором div, который будет менять стили для всех элементов div на странице.
-
Селектором по классу .textBlock, который будет менять стили только у тех объектов, которым присвоен класс textBlock. При этом в данной нотации селектору абсолютно неважно, будет это тег <div> или нет.
-
Селектором по тегу и классу div.textBlock, для которого верно всё указанное выше, но стили будут меняться только у объектов div.
-
И ещё селектором по id, который будет иметь вид #mainDiv.
Как браузер решает, чьими стилями пользоваться? Для этого есть таблица приоритезации. Полностью описывать мы её не будем, поэтому ограничимся замечанием о том, что id имеет высший приоритет, а все остальные селекторы становятся тем сильнее, чем подробнее они описывают элемент. У inline-свойств приоритет ещё сильнее, и для борьбы с этим нужно использовать специальную нотацию «!important», которая добавляется в конец пары свойство: значение перед символом «;».
1.2. Из чего состоит тема
Все изменения в стилевом оформлении визуализаций Qlik Sense можно корректировать в трёх местах: в самом редакторе отчёта, в файлах *.css и *.json. Стилевое оформление через редактор отчёта нельзя считать централизованным, им сложно управлять, поэтому его мы рассматривать не будем.
Тема, в свою очередь, состоит из двух основных и нескольких дополнительных файлов. Важно помнить: в темах мы не используем JS-файлы, даже если вам кажется это необходимым. Основными файлами являются *.css и *.json, дополнительными могут быть файлы шрифтов и *.qext.
1.2.1. QEXT
Файл с описанием и мета-данными темы:
Пример
{ "name": "VV Theme", "description": "Тема для отчетов блока Риски", "type": "theme", "version": "1", "author": "Oleg S." } 1.2.2. CSS
Файл вида .css позволяет точечно настраивать визуализацию на странице. Если вы хотите что-то изменить в конкретном блоке, вам необходимо точно подобрать css-селектор этого элемента, что удобно делать через консоль разработчика (shift+ctrl+i). Для того, чтобы ваша визуализация применилась, необходимо использовать декларацию «!important», о которой было рассказано выше.
Подключение внешних шрифтов может происходить как внутри того же CSS-файла, который описывает тему, так и через отдельный файл с описанием только шрифтов. Само подключение реализуется через правило «@font-face«:
Пример
@font-face { font-family: "GroupUI-Medium"; src: url("GroupUI-Medium.ttf") format("truetype"); font-weight: bold; font-style: normal; } font-family — название шрифта, которое позднее мы сможем использовать в свойстве font-family объекта для указания шрифта.
src — адрес, по которому располагается шрифт. Если он лежит в корневой папке со стилем, то можно просто указать название файла. Если он находится в какой-либо подпапке, то необходимо использовать относительный путь.
font-weight и font-style — стандартные описания базовых свойств шрифта.
1.2.3. JSON
Этот метод является единственным действенным способом оказать влияние на диаграммы. Обратите внимание: почти все настройки цветов диаграмм корректируются через этот файл созданием палетт с подходящими цветами.
JSON-файл также является обобщающим для темы т. к. содержит информацию о подключаемых CSS-файлах. Внутри него есть раздел, внутри которого перечисляются все подключаемые стили:
Пример
"customStyles": [ { "cssRef": "theme.css", "classRef": "sense-theme" }, { "cssRef": "font.css", "classRef": "theme-style" } ], 2. Общие настройки
2.1. Листы приложения Qlik Sense
2.1.1. Корректировка листа отчёта
Возможна корректировка фона как с заголовком листа, так и без него:
Скрипт примера
.qvt-sheet { background-color: red; } /* в этом случае заголовок попадет под действие фона */ #grid { background-color:blue } /* В этом случае произойдет корректировка цвета фона только блока ниже заголовка */ .sheet-title-container { background-color:green; } /* Этот стиль меняет только свойства блока заголовка */ 2.1.2. Заголовок листа
Изображение-логотип и текст меняются из основного меню редактирования, характеристики текста — в файле .css.
Скрипт примера
.sheet-title-text { font-size:25pt !important; color:blue !important; font-weight: bold !important; font-style:italic !important; } 2.2. Общие настройки блоков
2.2.1. Градиент фоном
Скрипт примера
/* градиент фона для pie-chart*/ .qv-object-piechart .qv-inner-object { background: linear-gradient(to top,#eaedf5,#ffffff) !important; }2.2.2. Выбор фильтров в любом цвете
Необходимо выполнить 2 действия:
-
В JSON файл добавить:
theme.json
"customStyles": [ { "cssRef": "dense.css", "classRef": "qv-dense" } ],-
Создать файл dense.css, в котором прописать:
dense.css
.qv-client.qv-dense li.qv-listbox-item.ng-scope.serverSelected { background-color: #4472c4; /*Фон при выбранном фильтре*/ border-bottom-color: #4472c4; /*Рамка фона при выбранном фильтре*/ } .qv-client.qv-dense li.qv-listbox-item.ng-scope.selected { background-color: #4472c4; /*Фон при выборе фильтра*/ border-bottom-color: #4472c4; /*Рамка при выборе фильтра*/ } .qv-client.qv-dense li.qv-listbox-item.ng-scope.serverSelected:hover { box-shadow: #4472c4; /*Не обязательно, не нашел отличий*/ } .qv-client.qv-dense button.sel-toolbar-btn.ng-scope.sel-toolbar-confirm { background-color: #4472c4; /*Цвет галочки, при подтверждении выбора*/ } .qv-client.qv-dense button.sel-toolbar-btn.ng-scope.sel-toolbar-confirm:hover { background-color: #4472c4; /*Цвет галочки, при наведении при подтверждении выбора*/ } .qv-client.qv-dense qv-filterpane.div.state.selected { background: #4472c4; /*Не обязательно, не нашел отличий*/ } .qv-client.qv-dense qv-filterpane.div.state.alternative { background: #4472c4; /*Не обязательно, не нашел отличий*/ } .qv-object-filterpane .qv-filterpane .qv-collapsed-listbox .state.selected { background: #4472c4; /* цвет выбранной полоски фильтра при свернутом фильтре */ } 2.3. Список объектов, доступных для корректировки из *.css
Полный список объектов
.qv-object-kpi { } .qv-object-linechart { } .qv-object-piechart { } .qv-object-table { } .qv-object-barchart { } .qv-object-boxplot { } .qv-object-combochart { } .qv-object-pivot-table { } .qv-object-treemap { } .qv-object-scatterplot{ } .qv-object-gauge{ } .qv-object-bulletchart{ } .qv-object-waterfallchart{ } .qv-object-histogram{ } .qv-object-map{ } .qv-object-container{ } .qv-object-text-image{ } .qv-object-mekkochart { } .qv-object-distributionplot { } .qv-object-qlik-barplus-chart { } .qv-object-qlik-bullet-chart { } .qv-object-qlik-funnel-chart-ext { } .qv-object-qlik-heatmap-chart { } .qv-object-qlik-multi-kpi { } .qv-object-qlik-network-chart { } .qv-object-qlik-radar-chart { } .qv-object-qlik-sankey-chart-ext { } .qv-object-qlik-smart-pivot { } .qv-object-qlik-tabbed-container { } .qv-object-qlik-variance-waterfall { } .qv-object-qlik-word-cloud { } .qv-object-sn-org-chart { } 2.4. Палитра цветов для диаграмм
Корректируется *.json файл, который в нижней части имеет описание двенадцати- и четырёхцветовых палитр. В случае 12-ти цветов имеется также алгоритм добавления цветов в зависимости от количества разделов на графике.
Скрипт примера
"palettes": { "data": [ { "name": "First data palette", "translation": "12 colors", "propertyValue": "data-palette-1", "type": "pyramid", "scale": [ [ "#3E5185" ], [ "#3E5185", "#FF8515" ], [ "#3E5185", "#FF8515", "#9A64F7" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32", "#4ad2ca" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32", "#4ad2ca", "#3f7dfe" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32", "#4ad2ca", "#3f7dfe", "#bf67c7" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32", "#4ad2ca", "#3f7dfe", "#bf67c7", "#037717" ], [ "#3E5185", "#FF8515", "#9A64F7", "#D9477C", "#FF5A32", "#4ad2ca", "#3f7dfe", "#bf67c7", "#037717", "#ff810a" ] ] }, 
Скрипт примера
"palettes": { "data": [ { "name": "Pie-Chart pallet", "translation": "Pie-Chart pallet", "propertyValue": "10", "type": "row", "scale": [ "#9bddfc", "#1e4bd2", "#99a9cd", "#00aaff", "#002882", "#ca191f", "#4cc864", "#6b7683", "#667eb4", "#001144", "#022d9a", "#0142d3", "#0062ff", "#3a85ff", "#6fa3ff", "#a7c7ff", "#d6e4fe", "#b1b5bb", "#d6d8de", "#e5e7eb", "#f3f4f6" ] }, 
Скрипт примера
"palettes": { "data": [ { "name": "First data palette", "translation": "12 colors", "propertyValue": "data-palette-1", "type": "pyramid", "scale": [ [ "#3f7dfe" ], [ "#5ecf70", "#ffaf37" ], [ "#5ecf70", "#fb67c7", "#4ad2ca" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd", "#4ad2ca" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd", "#4ad2ca", "#3f7dfe" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd", "#4ad2ca", "#3f7dfe", "#bf67c7" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd", "#4ad2ca", "#3f7dfe", "#bf67c7", "#037717" ], [ "#0abbfb", "#5ecf70", "#ffaf37", "#ff525c", "#e052bd", "#4ad2ca", "#3f7dfe", "#bf67c7", "#037717", "#ff810a" ] ] }, 3. Оформление объектов визуализации с примерами
3.1. MultiKPI
Работа со значением показателя (Value):
Скрипт примера
.qv-object-qlik-multi-kpi .qv-object-content .value { font-style:italic !important; font-size: 40pt !important; } Работа с заголовками (Label):
Скрипт примера
.qv-object-qlik-multi-kpi .qv-object-content .label { background: linear-gradient(to top,#002882,#00aaff) !important; color: #ffffff !important; font-size: 12px !important; }3.2. KPI
У блока имеется несколько встроенных объектов:
-
сам блок, описываемый в CSS стилем qv-object-kpi;
-
подзаголовок, описываемый в json. Проблема в том, что все свойства, так или иначе задаваемые через интерфейс Qlik Sense, будут иметь больший приоритет, чем что-либо, описанное в теме.
Описание модифицированного объекта:
Скрипт примера
.qv-object-kpi{ border: 6px; border-color:#000000; border-radius: 30px; background: #fafafa; box-shadow: 10px 10px 30px #bdbdbd, -5px -5px 15px #ffffff; }; Описание модифицированного объекта:
Скрипт примера
.qv-object-kpi { border: 4px !important; border-color: #bdbdbd !important; border-radius: 10px !important; background-color: #ffffff !important; padding: 12px !important; } 3.3. Table
Как сделать, чтобы при наведении строка выделялась цветом:
Скрипт примера
tr.ng-scope:hover { background-color: #dfecff !important; } 3.4. Pivot table
Разукрашиваем сводную таблицу через строку. Скрываем верхние кнопки измерений:
Скрипт примера
/* раскрасить всю таблицу через одну строчку*/ tr.ng-scope:nth-child(2n) { background-color: #dfecff; } /* так как в данном случае три строки измерения то строки Факт/План и 2021/янв/фев... также разукрашиваются, поэтому закрашиваем строки в белый цвет Если у вас одно измерение, то данные строки не нужны*/ Tr.ng-scope:nth-child(2) { background-color: #fff; } Tr.ng-scope:nth-child(4) { background-color: #fff; } /* убираем верхние кнопки измерений*/ [tid="meta.rows"], [tid="meta.columns"] { display:none; } 3.5. Waterfall
Стоит сказать про особенности Watrefall. Из-за особенностей QS, при использовании водопада съезжает заголовок, если не написать условие padding для заголовка водопада:
Рекомендуемые параметры
/* Для графика waterfall отступы текста пропадают, поэтому необходимо их добавлять отдельно */ .qv-object-waterfallchart .qv-object-header { padding: 0px 12px 10px !important; } Стандартные цвета водопада описываются в JSON.
Для примера здесь указаны цвета для positiveValue / negativeValue / subtotal /bridge.
JSON
"waterfallChart": { "backgroundColor": @lightt", "title": { "main": { "color": @defaultt", "fontSize": @font-normall", "fontFamily": @font-family-subtitlee" }, "subTitle": { "color": @defaultt", "fontSize": @font-normall", "fontFamily": @font-family-subtitlee" }, "footer": { "color": @defaultt", "fontSize": @font-normall", "fontFamily": @font-family-subtitlee", "backgroundColor": @lightt" } }, "axis": { "title": { "fontSize": @font-normall", "fontFamily": @font-family-subtitlee", "color": @defaultt" }, "label": { "name": { "color": @defaultt", "fontSize": @font-size-smalll", "fontFamily": @font-family-subtitlee" } }, "line": { "major": { "color": @defaultt" }, "minor": { "color": @defaultt" } } }, "legend": { "label": { "fontSize": @font-normall", "fontFamily": @font-family-subtitlee", "color": @defaultt" } }, "label": { "value": { "fontSize": @font-size-smalll", "fontFamily": @font-family-subtitlee" } }, "value": { "color": { "default": @defaultt", "dark": @darkk", "light": @lightt" } }, "shape": { "positiveValue": { "fill": "4472c4" }, "negativeValue": { "fill": "#d2d2d2" }, "subtotal": { "fill": "#4472c4" }, "bridge": { "stroke": "#333333" } } }, 4. Как быстро применить стиль CSS, не создавая новую тему (Multi KPI)
Для того, чтобы использовать CSS, не создавая тему, можно воспользоваться стандартным инструментом Qlik Sense, который поддерживает редактирование CSS — Multi KPI.
-
Необходимо добавить его на лист (пункты 1—3 на рисунке).
-
Необходимо прописать в меру какой-либо показатель, можно просто поставить 1 (пункт 4 на рисунке).
-
Прописать стиль CSS в специальное окно (пункт 5 на рисунке). В данном случае добавили стиль для стандартного объекта KPI. Скруглили углы, добавили тень.
Используемый код в данном примере
.qv-object-kpi { border: 4px !important; border-color: #bdbdbd !important; border-radius: 20px !important; background-color: #ffffff !important; padding: 12px !important; box-shadow: 10px 10px 30px #bdbdbd !important; } .qv-object-qlik-multi-kpi { display:none; } Для скрытия объекта Multi KPI на листе используем этот код
.qv-object-qlik-multi-kpi { display:none; }Важные моменты:
-
Для того, чтобы тема работала, необходимо добавить какую-либо меру в показатель, без меры CSS стили не применяются. Можно добавить просто цифру 1 как меру.
-
Для того, чтобы инструмент работал, необходимо его куда-то поместить на лист (он обязательно должен присутствовать на нём, минимум — клетка 1х1.
-
Все стили CSS применяются только к листу, где расположен этот объект. Если необходимо сделать на другие листы такие же стили, нужно его скопировать. Либо просто создать свою тему.
-
Если какое-то свойство не работает, можно попробовать в конце свойства, перед точкой запятой написать !important.
-
Элемент немного тормозит, если печатать код CSS прям внутри него. Поэтому, как совет, лучше прописать код в текстовом редакторе, а потом вставлять его сюда. Либо печатать медленно, чтобы каретка не улетала в конец.
5. Как может помочь режим разработчика Qlik Sense
Этот режим не только и не столько связан с темами, но не упомянуть о нём нельзя. Включается он так: необходимо зайти на страницу отчёта, приступить к его редактированию и в адресной строке изменить окончание на /options/developer/.
Таким образом, в конце адресной строки у нас будет окончание либо /state/edit/options/developer, что можно считать избыточным, либо просто /options/developer. Пример:
После этого у ПКМ любого объекта появится новый пункт: Developer. Этот пункт содержит информацию об ID объекта и ряде его свойств (не CSS). Из него же можно попасть в меню Single Configuration, протестировать экспорт объекта в PDF (полезная функция для предыдущего шага) и так далее.
Сам по себе этот id нам мало что дает, поскольку в явном виде он не используется, но, во-первых, он может быть значением некоторых атрибутов, во-вторых, часть id некоторых вложенных элементов. Здесь нельзя составить подробное описание работы с каждым видом элементов, поэтому ограничимся общим вариантом.
Для примера возьмем объект KPI. С точки зрения HTML-кода он обёрнут в тег article, которому мы обычно и меняем свойства через класс .qv-object-kpi. Разумеется, это будет касаться всех объектов этого типа, что не всегда нам подходит. Мы можем посмотреть id конкретного объекта, который нас интересует. Пример на скриншоте выше, полный id выглядит как 0d341278-321e-4b4b-9056-81dcb716d000.
Попробуем посмотреть, где он встречается у нашего объекта KPI. Помимо элементов-потомков, мы видим в среди атрибутов тега следующее:
HTML тега article
<article class="qv-object qvt-visualization qv-mode-edit qv-can-take-snapshot qv-layout-xsmall qv-object-kpi" ng-class="classList" tid="qv-object-kpi" aria-labelledby="0d341278-321e-4b4b-9056-81dcb716d333_type 0d341278-321e-4b4b-9056-81dcb716d333_title 0d341278-321e-4b4b-9056-81dcb716d333_noTitle 0d341278-321e-4b4b-9056-81dcb716d333_content">Обращаем внимание на атрибут aria-labelledby. В явном виде id там упоминается несколько раз, но с постфиксами, да ещё и в кастомном атрибуте. Здесь на помощь придут широкие возможности современного CSS. Мы можем написать следующий селектор:
для theme.css
article[aria-labelledby*='0d341278-321e-4b4b-9056-81dcb716d333_content'] { border-color:red !important; background-color:green !important; } Этот селектор ищет среди всех тегов article элементы с атрибутом aria-labelledby, в значении которого В ЛЮБОМ МЕСТЕ (это важно) содержится наш id. Важно использовать именно ‘*=’, поскольку есть также варианты поиска только в начале или конце значения. Как итог, имеем изменённые стили только у одного элемента.
Конечно, вы всегда можете использовать уникальные css-селекторы на основе положения элемента на веб-странице (речь про nth-child), но эти механизмы не гарантируют сохранения правил при изменении структуры. ID элемента, конечно, тоже может меняться, но это внесение изменений не в визуальную, а скорее в функциональную часть.
6. Как сочетаются темы, Nprinting и выгрузка в PDF
Один из самых распространённых кейсов в работе с темами — проблемы с выгрузкой отчёта в PDF посредством штатного инструмента выгрузки или Nprinting. Почти все свойства CSS без проблем применяются при выгрузке отчётов кроме одного, которое гарантированно сломается: box-shadow. Судя по нашим исследованиям, это связано с изменением внешних габаритов объекта.
6.1. Выгрузка PDF штатными средствами
Проходит без проблем кроме блоков, которые используют свойство box-shadow. Если такое свойство есть у любого экспортируемого объекта, экспорт не состоится. При этом настройки прочих объектов, не участвующих в экспорте, никак не влияют — у соседнего блока box-shadow может быть, но пока мы не решим выгрузить его в PDF, никаких проблем не будет. Все прочие CSS-свойства работают аналогично представлению в веб-версии.
6.2. Выгрузка в Nprinting
Для того, чтобы передать пользовательскую тему в Nprinting, необходимо при импорте выбрать соответствующий чекбокс. Тогда при импорте объектов из дашборда никаких проблем возникнуть не должно. Если у какого-то из импортируемых объектов будет использовано свойство box-shadow, отчёт не соберётся.
Вместо послесловия
Данное руководство — не полный мануал или подробный cookbook. Оно содержит базовые приёмы, которые позволят вам быстро приступить к работе с темами, и указывает на некоторые неочевидные нюансы. Сегодня работа с постоянно обновляющимся CSS ограничена в общем случае версией браузера, которая установлена у клиента, и версией сервера Sense, который отвечает за выгрузку отчётов во внешние форматы, например PDF.
ссылка на оригинал статьи https://habr.com/ru/company/innotech/blog/711896/
Добавить комментарий