Attaching multiple stylesheets, evaluation order?

Hi,

I’m aiming to attach additional stylesheets to a VisualElement when running on certain devices, to override styles just on those devices.

But VisualElement.stylesheets.Add() goes to a set, and so probably doesn’t have deterministic order. So is the evaluation order random when adding multiple stylesheets to a VisualElement, and you have overlapping classes?

For example, maybe the main stylesheet has padding around a box:

.box {
    padding: 10px;
}

But then on mobile, I want to attach an additional style sheet just to override this:

.box {
    padding: 0px;
}

If the order were deterministic, the second would override the first. But is it deterministic when the stylesheet is a set?

Hi,

The order will be deterministic. This is a “set” because each style sheet can appear only once on a visual element, but the set is ordered internally.

Fantastic! Just two points of clarification:

  • Do you have a more preferred way of doing the equivalent of @anon_28705954 queries? I’m perfectly happy attaching stylesheets with the intent of overriding. But if there’s a way to e.g. inject constants into UI Elements that are then interpreted in the stylesheet, that would sound superior.

  • Is the ordered set fundamental to how it’s designed internally? Is there a risk that since the docs refer to it as a set, that someone in the future will feel free to change it to a non-deterministic set?

  • Right now media queries are not supported. If you have a main sheet with a very simple override what you are doing makes sense to me.

  • The order is deterministic and enforced by tests. You can rely on that, it won’t change.

Perfect, thanks!