Proper way of linking CSS files to the page

[Michal Kováč]

Hello!

I am trying to show jQuery UI Dialog on a page, but somehow the CSS I try to append always gets ignored.

I need to link 2 CSS files to the page in my userscript, but the solutions I can think of do not work well.

The CSS simply is not applied for whatever reason, so only unformatted Test with Close button are displayed. 

Is there a way to make this always work with linking the files, or do I have to copy-paste the content of the files into <style> element?

Sample userscript, the problem is visible for example on page https://jqueryui.com/support/   :

// ==UserScript==

// @name        Test

// @namespace   namespace21932193210

// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

// @require  https://code.jquery.com/ui/1.12.1/jquery-ui.js

// @include     https://jqueryui.com/support/

// @version     1

// ==/UserScript==

$('document.head').append('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">'+

                 '<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">'+

                 '<style id="userScriptCss" type=\'text/css\'>' +

                 '@import url("http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");'+

                 '@import url("http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css");'+

                 '</style>');

$('body').append('<div id="testDialog">Test</div>');

$( '#testDialog' ).dialog();