Menu
Screenshot from Chrome Dev Tools:
I was wondering, as the question says: why are my CSS assets fetched by jQuery?
The CSS sheet is included as you normally would; a <link rel="stylesheet"> in the <head> tag. jQuery and jQueryUI are then included as the last thing in the body.
When I go to the according line (6128), it shows me the function curCSS.. I can't really find anything about it, only that it's being used by jQueryUI and that it's been depricated.
jQuery v1.11.1
Google Chrome v39.0.2171.65 (64-bit)
Those assets are not used by jQueryUI. They are just some background images and fonts for my content.
I have commented jQueryUI out, reloaded the page (Ctrl+F5) and now they're still loaded by, but now with something on line 3580.
**jQuery.js snippet removed for brevity**
When I comment out jQuery as well they are loaded as normal.
To clarify why I loaded only jQuery + UI and no other scripts:
I had included jQuery + UI in my base template, and I loaded another page that didn't use jQuery at all. I went to debug that page and noticed jQuery was doing strange things :P
This is the least markup possible:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pagetitle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div style="font-family: ArialNarrowBold">CONTENT</div>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
</body>
</html>
Now the Chrome dev-tools look like this:
The ArialNarrowBold font is in fonts.css. As you can see I have no further scripting on the page, besides including jQuery and jQuery-UI. Even if I take out the jquery-ui.min.css this keeps the same.
Even when I load the font in a style block, jQuery still wants to load it himself..
<style type="text/css">
@font-face {
font-family: 'ArialNarrowBold';
src: url('fonts/ArialNarrowBold.eot');
src: url('fonts/ArialNarrowBold.eot?#iefix') format('embedded-opentype'),
url('fonts/ArialNarrowBold.woff') format('woff'),
url('fonts/ArialNarrowBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
972
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements.
You can change CSS using the jQuery css() method which is used for the purpose of getting or setting style properties of an element. Using this method you can apply multiple styles to an HTML all at once by manipulating CSS style properties.
What's the difference? In a nutshell, CSS uses your graphic card to process the transition, where as using jQuery uses your main processor. However jQuery is generally more backwards compatible than CSS. That said, CSS transitions will revert to jQuery if the browser doesn't support CSS transitions.
This is definitely a regression in Chrome Devtools. I just double checked using Chrome Canary and Chromium, and I'm unable to replicate this situation on either one of the browsers. You should definitely report this issue: https://support.google.com/chrome/answer/95315?hl=en
Before you submit the bug report, please check if you are on the latest version of Chrome, if not see if that helps.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
