Словарное ядро поддерживает использование сss стилизации.

Стилизация поддерживается только для определенного набора тэгов (<div>, <table>, <tr>, <td> и <img>) в виде “inline” стилизации через атрибут 'style':

<div style="display:inline; ...">...</div>

Начиная с версии компилятора 129.102 (102 билд) появилась ограниченная поддержка css из внешних файлов (детально разобрана ниже в тексте статьи) и css классов которые можно задавать через атрибут 'class':

<div class="example-class">...</div>

В результате можно использовать одновременно и несколько классов, и “inline” стилизацию, при этом все свойства будут учтены и попадут в результирующий “блок”.

Для примера, имея css классы:

.cls1 {
    margin-left: 1em;
    padding-top: 0.55em;
    text-align: right;
}
 
.cls2 {
    text-align: left;
}

и xml вида

<div class="cls1 cls2" style="padding-top: 1em">

мы получим div со свойствами

{
    margin-left: 1em;
    padding-top: 1em;
    text-align: left;
}

Поддерживаемые значения css свойств

Значения представлены относительно CSS2.1 [https://drafts.csswg.org/css2/syndata.html#values]:

4.3.1 Integers and real numbers – поддерживаются числа от -(2^32) до +(2^32) с точностью 1/20000 (0.00005)

4.3.2 Lengths – поддерживаются числа с точностью до 1/100 (0.01) и размерности: px, pt, em, mm (EMetadataUnitType)

4.3.3 Percentages -поддерживаются числа с точностью до 1/100 (0.01)

4.3.4 URLs and URIs – поддерживается полностью
ВАЖНО: 'url()' не умеет резолвить картинки и т.п., ее строковое значение зашивается в базу “как есть”.

sld-image-url()– в дополнение к стандартной 'url()' доступна “функция” 'sld-image-url()'
С ее помощью можно задавать путь к картинкам которые будут зашиты в саму базу, в виде

background-image: sld-image-url("icon.png");

В отличие от 'url()' кавычки (одинарные или двойные) – обязательны; требования к пути такие же как и у атрибута url тэга метаданных img

В общем случае можно считать, что во всех свойствах, в которых (по стандарту) используются 'url()' и логична поддержка картинок, можно использовать 'sld-image-url()'

4.3.5 Counters – не поддерживаются

4.3.6 Colors -именованные цвета – не поддерживаются

Из CSS Color Module Level 3 поддерживаются:

4.3.7 Strings – не поддерживаются строки “разорванные” на несколько “исходных” строк (multi line strings)

!important правила – поддерживается директива !important на css свойствах.

Внешние CSS файлы

Компилятор имеет поддержку внешних css файлов, они перечисляются в тэге тэга файла проекта

Количество css файлов не ограничено. Поддерживаемые кодировки: utf-8, utf-16le и utf-32le.
Поддерживаемый синтаксис css ограничен universal селекторами с классом [https://drafts.csswg.org/css2/selector.html#class-html] без поддержки нескольких классов.
Т.е. поддерживается только синтаксис вида:

.cls-left, .cls-right {
    float: left;
    width: 1.25em;
    height: 2.3em;
    padding-top: 0.55em;
}
 
.cls-left {
    text-align: left;
}
 
*.cls-right {
    text-align: right;
}

что равносильно развернутой записи

.cls-left {
    float: left;
    width: 1.25em;
    height: 2.3em;
    padding-top: 0.55em;
    text-align: left;
}
 
*.cls-right {
    float: left;
    width: 1.25em;
    height: 2.3em;
    padding-top: 0.55em;
    text-align: right;
}

т.е. block merging и selector groups поддерживаются полностью.

Поддерживаемые свойства css

Список поддерживаемых css свойств по версии ядра/компилятора когда появилась поддержка:

129

  • display : 'block', 'inline'
  • width
  • height
  • float
  • clear
  • vertical-align
  • text-align
  • background-image
  • background-repeat
  • background-size
  • background-position
  • margin
    • margin-left
    • margin-right
    • margin-top
    • margin-bottom
  • padding
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
  • border-width
    • border-left-width
    • border-right-width
    • border-top-width
    • border-bottom-width
  • border-style
    • border-left-style
    • border-right-style
    • border-top-style
    • border-bottom-style
  • border-color
    • border-left-color
    • border-right-color
    • border-top-color
    • border-bottom-color

130

  • display : 'inline-block'
  • background-color
  • border-radius
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
  • position
  • left
  • right
  • top
  • bottom
  • z-index

130.107

  • display : 'flex', 'inline-flex'
  • justfy-content
  • align-items
  • max-height
  • min-height
  • max-width
  • min-width
  • text-indent

131.109

  • direction

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.