0

I have a Spring Boot REST application and want to create a swagger for it.

It works fine, the swagger loads without problem.

Now I want to be generic and flexible at the same time:

  1. First priority is to load swagger related JS and CSS files in the HTML from the web
  2. I also store the swagger related JS and CSS files in the source code
  3. So when the application loads, I want to load the files from the internet AND only if it fails then load them from the source as a fallback.

This solution works fine for JS, because I use this way (loads the JS first from source and then overrides from the internet if it can be found):

<!-- swagger-ui-bundle.js -->
<script src="swagger/js/swagger-ui-bundle.js"></script>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>

<!-- swagger-ui-standalone-preset.js -->
<script src="swagger/js/swagger-ui-standalone-preset.js"></script>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-standalone-preset.js"></script>

But it does not work for CSS, I tried this way:

<!-- swagger-ui.css -->
<link rel="stylesheet" type="text/css" href="swagger/css/swagger-ui.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css">

Is it possible to define a priority for loading CSS files in HTML? Please give me some examples. Thanks!

Helen
  • 87,344
  • 17
  • 243
  • 314
victorio
  • 6,224
  • 24
  • 77
  • 113
  • 1
    It does not seem a good way to proceed. If both files exist in Javascript it overrides the functions with the same name but it could also execute the same code 2 times, for example on `onload` event. On CSS if you have two styles the second CSS rewrites the first but sum the styles. Example: first CSS `.class {color: red; font-size: 12px;}` second `.class {color: black; font-weight: bold;}` the results will be: `.class {color: black; font-size: 12px; font-weight: bold;}`. This if both exist. If one of the two does not exist anyway you could have slowdowns for resources not found. – Baro Jul 29 '20 at 09:57
  • [A realy fast example of possible problems if the two versions will be different. JSFiddle](https://jsfiddle.net/tnq2z0eL/1/) – Baro Jul 29 '20 at 10:15
  • 1
    solution: "" but does not work for – victorio Jul 29 '20 at 11:01

1 Answers1

1

It's Cascading Style Sheet.

They are loaded one after the other. Rules in later css overwrite rules in earlier loaded css. It should work when you load the fall back first and then the internet version. A problem can be that you define some css rules that are not overwritten by original internet version.

HugoHiasl
  • 314
  • 2
  • 15