Is it just me or does a site like:
http://www.infoq.com/news/2009/04/fubu-mvc
often load without a style, because the author put the stylesheet over on:
http://cdn1.infoq.com/styles/style.css
I know this is all trendy way to do css, image and javascript files now. But I seem to bump into this issue all the time. Is it only a Firefox issue?
I just saved the source locally and tested it out. It seems that when the styles do not appear, the LINK element is resolving as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn3.infoq.com/styles/style.css;jsessionid=2BAD2D184D56C3163ADC70B99E711F47" />
..the important part being the ';jsessionid....' which is knocking the css out of commission.
On a reload, that jsessionid apparently kicks into action for some reason, and the LINK element resolves normally as:
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn4.infoq.com/styles/style.css" />
I'm not sure what is actually causing the jsessionid to not work, then work on reload...but that seems to be the culprit in one way or another. Also, I had the same exact experience in IE7 and Safari...so definitely not a browser specific thing.
I believe the issue is because firefox checks for crossdomain.xml to see if the request is allowed, and IE just grabs it regardless.
Related
Hello I am trying to fix render blocking CSS recommendation from Google Page speed.
<style>here goes critical path</style>
<link rel="preload" as="style" media="all" href="wp-content/cache/autoptimize/css/autoptimize_fb3761d5ff1bb5dcb1bc273f35788f8e.css" onload="this.rel='stylesheet'" />
<noscript id="aonoscrcss">
<link type="text/css" media="all" href="wp-content/cache/autoptimize/css/autoptimize_fb3761d5ff1bb5dcb1bc273f35788f8e.css" rel="stylesheet" />
</noscript>
I use Autoptimize for this purpose, so I inserted critical path and checked defer CSS. However Google doesn't count this as a fixed recommendation.
From this code part, is there any issues that causing it, or it something else? Any hints on how to troubleshoot this issue?
And also Google shows 2 blocking css files with the same name and url.
Well, to be honest, I've been dealing with these kind of stuff for ages. The only thing I manage to do is to add "inline" css to all pages... Yes, it's a pain in the *ss. but after all... google is ok with it..
the solution would be to get ALL css rules for EACH page and add it as an inline-css in your html (minimized of course.)
not sure if that's the best way to go, however, that's what solved the issue for me..
cheers
With Autoptimize, you can enable the Inline all CSS? option, the problem will gone.
Your "critical css" is likely considered insufficient by GPSI #Eng80lvl, you'll have to look into that (regenerating it elsewhere or tweaking it yourself).
"inline all" fixes the "render blocking"-warning, but will (except is you have very little CSS) see GPSI complaining about "prioritize visible content" (as the amount of inlined CSS will cause your actual content to be available later, even if part of the same response).
I added the attribute rel="preload" to all css links like this :
<link rel='preload' onload='this.rel="stylesheet"' as='style'
id='reworldmedia-style-css' href='style.css' type='text/css' media='all'
/>
It works fine in Chrome but not in Safari or Firefox
I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:
<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
What I also discovered is a hacky alternative to the above could be including "rel" twice, like:
<link href="style.css" rel="stylesheet" rel="preload" as="style">
For Firefox, it's only supported in Firefox 56 Nightly. It will ship on September 26, 2017. You can download it from here.
Update: This feature is landed on FF 56 but removed in 57. Here is the reason:
This feature was available in Firefox 56, but only for cacheable resources. It has been disabled in Firefox 57 because of various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land in Firefox 59
See can I use.
It is not supported in Firefox and will be added in the next release of Safari.
So what you are seeing is expected behaviour.
I can't think of something more explanatory than the documentation itself. On the caniuse.com site there is this http://caniuse.com/#feat=link-rel-preload and if you follow that and go to the w3c specifications you find this. https://w3c.github.io/preload/ where is clearly stated that "This is a work in progress and may change without any notices." Maybe soon when this "Draft" will be refined, support will be added.
Reliably preload across browsers with loadCSS
One issue with preloading is that it is not supported by browsers like Firefox and Internet Explorer (as of Nov 2018). As a result, these browsers will not download the CSS file and this can result into serious display issues for your web-pages. This makes it critical to include a JavaScript polyfill for preload - loadCSS.
Download the loadCSS JavaScript file or simply copy it’s JS code from
here.
Load the loadCSS polyfill wherever CSS stylesheet preload is
performed:
<style>
[Your critical CSS goes here]
</style>
<!– Reliably defer loading of non-critical CSS with loadCSS–>
<link rel=“preload” href=”[yourcssfile]” as=“style” onload=“this.onload=null; this.rel=‘stylesheet’”>
<noscript><link rel=“stylesheet” href=”[yourcssfile]” ></noscript>
<!– Inline the loadCSS preload polyfill code or load it via external JS file–>
<script src=“./cssrelpreload.js”></script>
As of November 2021. I've used the following and it works on Firefox/Safari/Chrome and other major browsers:
<link rel="stylesheet preload" as="style" href="style.css" >
You don't need to double the "rel" or to use two for the same CSS file.
This works <link rel="preload stylesheet" href="./style.css" as="style"> to instruct the browser to download key resources as soon as possible.
I have soulution this is works and best for website speed
This is for normal code for every browser put as a default
<link rel="stylesheet" rel="preload" href="css/xyz.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript><link rel="stylesheet" href="css/main.css" /></noscript>
and for mozilla firefox use this, when file run in mozilla its show this code otherwise its show default css code <?php if(isset($_SERVER['HTTP_USER_AGENT'])){$agent = $_SERVER['HTTP_USER_AGENT'];} if(strlen(strstr($agent,"Firefox")) > 0 ){$browser = 'firefox';} if($browser=='firefox'){echo '<link rel="stylesheet" href="css/xyz.css" />';}?>
Best solution for 2021:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Why is this best option?
Currently (in 2021) all modern browsers support preload tag but if someone visits your page with device using not updated browser, IE or some native mobile browser like Samsung Mobile your page will still look bad or wont be styled at all. On the other hand gain in page load time (and pagespeed score) using preload is too big to give it up just to support less than 1% of devices.
Top voted answer using 2x rel tag still negatively affects FCP render time (you can test that with chrome devtools performance tab). Using media attribute switch we get solution that doesnt block page render
and works for older browsers.
Fetch priority
Its important to say that 'preload' tag fetches non-critical css with highest priority which can deprioritize other important downloads, but if in your case you want priority provided with preload you can use this workaround:
<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.
I have printer stylesheet setup on my site. It works in all browsers but Chrome. Chrome shows nothing in the print preview and when I attempt to print Chrome prints nothing. If I remove the print stylesheet and click print it shows the entire page including hidden portions of the page that should not display. Not sure what to do or why it is not working.
Have others seen this behavior? What can I do? What code do you need to see?
Here is the way the print stylesheet is called if something is wrong?
<link href="print.css" media="print" type="text/css" rel="stylesheet" />
The issue appeared to have been a caching issue. Once I refreshed the cache and corrected earlier errors the issue resolved itself.
When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!