How do I make a media-query for a canvas made in Java?

Question

Media queries in CSS file has no effect on the GUI made in javaFX.

I have made a canvas using javaFX. I have used FXML to setup the different GUI elements. Then I have used a CSS file to style everything. The problem now is, that I want to make it responsive. When I try to use media queries in the CSS file, nothing happens.

.userMenu {
-fx-max-height: 30; 
-fx-max-width: 130;
-fx-background-color:  rgba(255, 255, 255, 0.5);
-fx-padding: 10px;
-fx-background-radius: 12px;
}

@media only screen and (min-width: 300px) {

.userMenu {
    -fx-max-height: 150; 
    -fx-max-width: 300;
    -fx-background-color:  rgba(255, 255, 255, 0.5);
    -fx-padding: 10px;
    -fx-background-radius: 12px;
  }
}

I expect the userMenu box to rescale when crossing 300px width.

Answer 1

Just found this when searching myself and the simple answer is: You don't.

From the official docs :

While the JavaFX CSS parser will parse valid CSS syntax, it is not a fully compliant CSS parser. One should not expect the parser to handle syntax not specified in this document.

@-keyword statements are ignored.

I guess one needs to write Java code for that ¯\\_(ツ)_/¯

Edit:

After looking at the JavaFX 8 docs there are two supported @-rules: @import and @font-face . But that's all.