CSS Caveats

This article describes typical problems that can occur when styling components created with RespVis.

Using Container Queries

Size Container Queries are a useful tool for conditionally applying styles if the size of a container changes. The usage of Size Container Queries from the outside of an SVG will work without problems. For the following code snippet to work properly, #chart-wrapper must either be the id of a parent element of the chart OR id of the chart SVG element itself ✅ :

#chart-wrapper {
  width: calc(100% - 1.5rem);
  container-type: inline-size;
  @container (width < 30rem) {
    .legend {
      display: none;
    }
  }
}

However, using Size Container Queries inside SVGs will have no effect ❌ :

#chart-wrapper {
  svg .legend {
    container-type: inline-size;
    @container (width < 30rem) {
    text {
      color: green;
    }
  }
}

Using Size Container Queries on the replicated HTML tree to change elements of the SVG tree will not have any effect either. The reason for this is that Container Queries can only be used to manipulate styles of elements inside of queried containers. Since the replicated HTML tree does not contain the SVG tree, it stays unaffected ❌ :

#chart-wrapper {
  div.legend {
    container-type: inline-size;
    @container (width < 30rem) {
    text {
      color: green;
    }
  }
}

Using Layout Breakpoints

Layout breakpoints are a built-in feature of RespVis. When using layout breakpoints, one must take into account two things:

• The values of layout breakpoints are, in CSS, only available to their corresponding chart (window-rv class) and their child elements. However, the current value can normally be queried from outside via JavaScript.
• Layout breakpoints need Style Container Queries to really be useful. Despite growing support, one major browser (Firefox) is yet not supporting them.

Laying out SVG <text> Elements

Laying out <text> elements via the RespVis layout mechanism is not an easy topic and has its own dedicated page. This section only aims to emphasize that rotations are (yet) not possible with layed out text elements without alignment issues. Exceptions to the rule are text elements which are rotated by 90° or -90°. These elements can be rotated and will still align with their corresponding layout element if styled with the correct CSS code:

text {
  --orientation: vertical;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}

Note that the specification of the orientation CSS variable is crucial hereby. Otherwise, the layout mechanism of RespVis will treat the element as horizontally oriented.

Handling Transitions

RespVis supports and uses both, D3 Transitions and CSS Transitions.

CSS Transitions are used whenever possible due to their simplicity, low computational cost and the ability to be easily overridden by external CSS.

D3 Transitions, on the other hand, exhibit the ability of defining transitions more precisely which is necesssary for more complex procedures. However, they bear the disadvantages of higher computational cost and are harder to overwrite externally. Currently only the duration of D3 transitions can be adapted by specifying corresponding CSS variables.