The following two files contain identical content, as confirmed by a diff checker.
<link rel="stylesheet" href="https://www.craft.do/_next/static/css/53915118cb795b35.css" data-n-g=""/>
<link rel="stylesheet" href="https://opine-development.s3.eu-west-1.amazonaws.com/zxxtq6iozbczyy8zqxtlozjxhvpe?response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIATEKXMHF3YUQ3TDWF%2F20230216%2Feu-west-1%2Fs3%2Faws4_request&X-Amz-Date=20230216T231116Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=f5ab9461e698f7026f0a5d6476709f714fa32e12cdf16a480808aec2abb368f8" data-n-g=""/>
Both open correctly to identical content when in the browser.
However, only the first one is read and processed correctly by an HTML page that the content is on. Has anyone seen anything like this before?
Related
Is there any standard place and way to define a css file and reference it in some of the pages of a subsite?
The following code works, but having an absolute path and an arbitrary location doesn't seems to be a good solution (specially when we are dealing with hundreds of topics.
<link rel="stylesheet" type="text/css" href="PATH_TO_FILE/mystyle.css">
Attaching your CSS file at any page and referencing it by appending /pub/%WEB%/Webhome/ to the path works. Maybe not a standard solution, but still works.
<link rel="stylesheet" type="text/css" href="/pub/%WEB%/Webhome/mystyle.css">
So I've been slowly trudging my way through a responsive eBay listing template using Bootstrap, it took some trial and error but I seem to have nailed everything down except the ability to use font-awesome in the listing.
The first attempt at a solution was to point to the font-awesome cdn for the css file which is supposed to include the necessary information to embed the font, but it did not work.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I read somewhere else where the link had http: in front, so I tried that, it also didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then I tried to point it all directly to my own server. So I put a full path to the css file on my server:
<link rel="stylesheet" href="http://www.lqskins.com/ebay/font-awesome/css/font-awesome.min.css">
Then I edited the css file directly in order to put the correct path to the font files themselves in the css file, example:
src:url('http://www.lqskins.com/ebay/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0')
None of these solutions have worked. If I pull up my test template on the server that points to the same css file, they work fine there. Is there a way to load font-awesome for use within an ebay listing, or is crippled beyond workability?
I am having no issues with this. The following code correctly displays a cog in my ebay listing.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-cogs"></i>
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.
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!
I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
#import "screen.css"; /* Note that some (older?) browsers don't support #import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
#import "mobile.css";
</style>
<style type="text/css" media="print">
#import "print.css";
</style>
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
You should have a range of CSS sheets for various tasks, else things get messy fast!
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more.
Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.