Custom CSS by domain in @document

For large-scale system that support multi-domain and multi-instance for enterprises. One of the method to do theme or styling customisation is through a customise CSS file. And provide an option to setup the inherent relationship between the parent branding version.

Usually, the platform who provides such platform would do extra charge for such customisation support. As a company who has paid for this and have its internal colleague to deal with the maintenance. There is a case that some function action need to be hidden or customised for a specific instance.

To ensure such changes not effect other instances that inherit the same theme, a safe way to do that is to define a specific ID for the instance and use the ID to do element selection.

Just face such problem that there is no specific ID on a site. And I tried to find an existing CSS attribute which support to apply property to specific domain. Here is what I explored on Mozilla Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/@document

The @document CSS at-rule restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

@document url("https://www.example.com/") { h1 { color: green; } }

However, this is an experimental technology with only Desktop Firefox (Gecko) 1.5+ support it. Not a mature syntax to use.

Anyway, it is good to know the architect has notice such requirements on the dev world.

Posted