App-specific media query for svg?

# Update I worked around the issue by using Javascript. [See my comment here](https://www.reddit.com/r/webdev/comments/16thnf0/comment/k2pxxqt/)

## context For a top-down racing game I'm developing, I've got one svg file for every game scene. In a `scene.svg` file, I'll have 4 layers, a base artwork layer, one racetrack layer, one collision detection layer (invisible in game), and one 'elevated" layer containing bridges, buildings, stuff the player can drive underneath.

The different artwork layers all have an `id` attribute, so when I load a game scene/world, I load 1 svg file into a stack of `img` tags, using the url `scene.svg#layername`, ie:

`scene.svg#world`

`scene.svg#paths`

`scene.svg#racetrack`

`<!-- car goes here -->`

`scene.svg#elevated`

with a bit of css in a `<style>` tag inside the svg file, I hide all the layers (`<g>` elements) and display the selected layer like this:

```css g { display: none!} g:target { display: block!important}

/* !important added here to override style attribute having a display property */ ```

This is all working fine. However, Inkscape uses similar css in a `style` attribute when showing/hiding layers. This means that after editing a game world scene, I'll have to remember to hide all layers. It also means Inkscape will crash when I change the visibility of a layer :)

I've tried a few things to tackle this, but I'm not finding the ideal solution.

## tl;dr: I'm looking for a way to import or load a separate css file that **only loads** when the svg file is opened in a web browser. I'm wondering if `/r/webdev` knows of a way how best to approach this?

Cheers!