Global css variables does not get set

[Juliano]

I've set up multiple css variables in the :root {} selector inside a /web/main.css file that I import like so:

http.Handle("/", &app.Handler{
  Name:        "Hello",
  Description: "An Hello World! example",
  Styles: []string{
	  "/web/main.css",
  },
})

The css inside this file does get correctly interpreted but the css variables does not. They don't even appear in the source file that the browser gets.

Is it normal? Where should we set global css variables?

[Hans Raaf]

I made a test and it works as expected. Did you check that the file was loaded (the PWA is updated) and you use the right syntax? Double check from developer tools in the browser. There is nothing special with styles loaded in Go-App.

[Juliano]

I did some checks, here is what I found. As you said, it works, but for the changes to take effects, I have to close my tab and re-open it (on Safari).

On Brave, just refreshing the page does loads the new css file. Not sure why it behaves that way on Safari. I thought :root {} was not working since I did not close and open the tab again after making the change with Safari.

[Hans Raaf]

Yes, I had problems like that with Safari too. It is the browser with the most bugs we encountered (esp. with CSS & style usage). The CSS caching is one of the problems. It seems that even if the service-worker cache gets updated, the browser is not using the newly fetched version.