I've got an element in an HTML page (an image button), that has a css that shows something when a mouse hovers on it.
I would like the css to be activated only for certain users - that is, I've got a login control on the page as well, so I want the css to be activated only for specific usernames.
Is there a way to do that?
Thanks!
You could use different stylesheets, and load them up depending on which you want:
<%
if user=thisguy then
%>
<link href="css/style_thisguy.css" rel="stylesheet" type="text/css" />
<%else%>
<link href="css/style_thathuy.css" rel="stylesheet" type="text/css" />
<%end if%>
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.
I'm facing a problem when our application is deployed in IIS. The styles are not applying to the content page but everything was working fine when I was running it through VS 2010.
This is what I have given in the master page.
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
The above code which I have specified will apply only for the Home page which is in the root directory but when I navigate to so other module styles are not applying to those page which are inside other folder.
I searched in Google and I tried many options like
<link href="./Styles/style.css" rel="stylesheet" type="text/css" />
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#import 'Styles/style.css'; </style>
None of the above things are working even for home page also which used to work before. Please let me know some suggestions so I can proceed further.
<head runat="server">
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
</head>
it will work and load your css on every page
try with adding the root/domain in a dynamic way before the styles folder in ur code.
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer