I am using an AJAX call to pull data out from my database and push into certain <div>'s with an id using jQuery, however I'm struggling styling those elements which are being pulled out. Or would I have to do in-line styling inside of the db?
If I am popping in my html markup within the database, can I still use an external style sheet to style them i.e: <link href="./style.css" type="text/css" rel="stylesheet"> ? I have tried to do the below which does not work...
Database snapshot:
CSS:
#testingDB{
color: red;
}
This should work. If it doesn't, do check the address bar URL, since it's possible that the relative link to the stylesheet resolves to elsewhere.
<link href="./style.css" type="text/css" rel="stylesheet">
Assuming style.css is at http://localhost/style.css and the page you load is at http://localhost/test/page.html, specifying href="./style.css" will instead try to load http://localhost/test/style.css which doesn't exist.
To validate this, press F12, click the network tab, filter by CSS and refresh the page. If it didn't load, the request will be in red.
I'm having problems with CSS within a tag and source-maps.
In order to improve the load time of my project, I have changed the way I put the CSS in my HTML, turning this:
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Source-maps working wonderfully</h1>
</body>
</html>
Into this:
<html>
<head>
<style>
h1 { color: red };
//more css
/*# sourceMappingURL=css/style.css.map */
</style>
</head>
<body>
<h1>Source-maps not working :(</h1>
</body>
</html>
Basically, during the building process, the original CSS file generated with sassc (with sourcemaps flag) is dumped into the html that will be served.
I am having troubles because it does not recognise the source-maps when the CSS is inside a tag but it does it perfectly when i use the tag . Am I missing an extra annotation or it is not supported?
I'm using chrome.
/*# sourceMappingURL= is the old syntax, /*# sourceMappingURL= should be used instead.
The new Syntax is implemented in all major browser source and Internet explorer 11+ source.
Chrome dev tools
Open Developer Tools F12
Open Settings F1.
Click "Enable CSS source maps" checkbox
Firefox dev tools
Open Developer Tools F12
Open Toolbar Options (Cog on right).
Click "Show original sources" checkbox
Internet Explorer dev tools
Open Developer Tools F12
Open Debugger panel Ctrl+3
click the last icon on the right
Safari dev tools & Firebug
enabled by default.
IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave
When using Meteor.com anyone know how to detect if the browser's JavaScript is disabled...
AND show a message to the end user in the browser window, i.e "Turn on JavaScript."
I assume that you have a layout.html or at least a main.html that contains at least a <head>.
A trick is to place <noscript> in the <head> instead of the <body>.
Meteor does not render everything in JS. There are some stuff that get's rendered in an initial page, proof of which can be seen in View Source (CTRL+U).
I'm using the latest Meteor in Chrome, and head tags were not merged. Only this worked for me:
<head>
<noscript>Please enable JavaScript.</noscript>
</head>
<template name="index">
...
</template>
I just used this and it really worked like a charm
<head>
<noscript>
<style>
body {font-size: 32px;text-align: center;line-height: 100vh;}
body:after {content: "Please enable JavaScript";}
</style>
</noscript>
</head>
How do I stop the flash of unstyled content (FOUC) on a web page?
The problem with using a css style to initially hide some page elements, and then using javascript to change the style back to visible after page load, is that people who don't have javascript enabled will never get to see those elements. So it's a solution which does not degrade gracefully.
A better way therefore, is to use javascript to both initially hide as well as redisplay those elements after page load. Using jQuery, we might be tempted to do something like this:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
However, if your page is very big with a lot of elements, then this code won't be applied soon enough (the document body won't be ready soon enough) and you might still see a FOUC. However, there is one element that we CAN hide as soon as script is encountered in the head, even before the document is ready: the HTML tag. So we could do something like this:
<html>
<head>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(document).ready(function() { // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
$('html').show(); // EDIT: Can also use $('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
Note that the jQuery addClass() method is called *outside* of the .ready() (or better, .on('load')) method.
This is the one that has worked for me and does not require javascript and it works great for pages with many elements and lots of css:
First, add a dedicated <STYLE> setting for the <HTML> tag with visibility 'hidden' and opacity as '0' at the top of your HTML, e.g, in the beginning of the <HEAD> element, for example, at the top of your HTML add:
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:
html {
visibility: visible;
opacity: 1;
}
If you already have an existing style block for the 'html' tag, then move the entire 'html' style to the end of the last .css file and add the 'visibility' and 'opacity' tags as described above.
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
A CSS-only solution:
<html>
<head>
<style>
html {
display: none;
}
</style>
...
</head>
<body>
...
<link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
</body>
</html>
As the browser parses through the HTML file:
The first thing it will do is hide <html>.
The last thing it will do is load the styles, and then display all the content with styling applied.
The advantage to this over a solution that uses JavaScript is that it will work for users even if they have JavaScript disabled.
Note: you are allowed to put <link> inside of <body>. I do see it as a downside though, because it violates common practice. It would be nice if there was a defer attribute for <link> like there is for <script>, because that would allow us to put it in the <head> and still accomplish our goal.
A solution which doesn't depend on jQuery, which will work on all current browsers and do nothing on old browsers, include the following in your head tag:
<head>
...
<style type="text/css">
.fouc-fix { display:none; }
</style>
<script type="text/javascript">
try {
var elm=document.getElementsByTagName("html")[0];
var old=elm.class || "";
elm.class=old+" fouc-fix";
document.addEventListener("DOMContentLoaded",function(event) {
elm.class=old;
});
}
catch(thr) {
}
</script>
</head>
Thanks to #justastudent, I tried just setting elm.style.display="none"; and it appears to work as desired, at least in current Firefox Quantum. So here is a more compact solution, being, so far, the simplest thing I've found that works.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
An other quick fix which also works in Firefox Quantum is an empty <script> tag in the <head>. This however, penalizes your pagespeed insights and overall load time.
I had 100% success with it. I think it's also the main reason, why above solutions with other JS in the works.
<script type="text/javascript">
</script>
None of the CSS-only solutions presented here work with modern browsers (asynchronous loading of css and fonts). You have to use Javascript. What I've done to avoid FOUC is:
<html>
<body onload="document.body.style.visibility=`visible`;">
<script>document.body.style.visibility=`hidden`;</script>
With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.
It is a simple solution but so far it is working.
This will not affect users who have disabled Javascript because the <script> tag is ignored.
No one has talked about CSS #import
That was the problem for me i was loading two extra style sheets directly in my css file with #import
Simple solution: Replace all #import links with <link />
Every answer on this page slows down the load and it only hides the underlying issue. If you're experiencing FOUC, find out WHY it's happening and fix that.
At the core, this is happening:
because your stylesheets are not being loaded correctly: they should be loaded via link tag in the HTML, not via JavaScript
because you placed script tags before link tags, which may force a "layout operation" and trick the browser into rendering before it even attempts to load the style.
For reference, here's an example of FOUC:
I came up with a way that requires no real code change whatsoever, woohoo! My issue was related to importing several css files AFTER some javascript files.
To resolve the issue I just moved my CSS links so that they would be above my javascript imports. This allowed all my CSS to be imported and ready to go ASAP, so that when the HTML appears on the screen, even if the JS isn't ready, the page will be properly formatted
Here is my code .. hope it solve your problem
set <body style="opacity:0;">
<script>
$(document).ready(function() {
$("body").css('opacity', 1);
});
</script>
A simple solution to avoid a flash of unstyled content without javascript:
<!DOCTYPE html>
<html>
<head>
<title>Bla bla</title>
<link href="..." rel="stylesheet" />
<link href="..." rel="stylesheet" />
</head>
<body style="opacity: 0">
<!-- All HTML content here -->
<script src="..."></script>
<script src="..."></script>
<style>
body {
opacity: 1 !important;
}
</style>
</body>
</html>
When the parser arrives at the body, it is faded out using "opacity: 0". When the parser finally arrives at the very bottom after everything else is parsed, the body is faded in again using an in-page style. The !important keyword there is important ;-), because it overrules the previous inline style of the body tag.
In this case, using "opacity: 0" to fade out is better than "display: none", because if you have layout operations done by javascript, they may not work when the affected element is not rendered.
That worked for me.
The best solution I found till now is like this:
Add all styles of your header to a <style/> tag in <head/>
at the top of style tag add .not-visible-first{visibility: hidden} + other header style
Add css via JS at the end of body
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
And remember to add .not-visible-first{visibility: visible} to the end of main.min.css
This option will create better user experience
You could try this with vanilla
function js_method(){
//todos
var elementDiv = document.getElementById("main");
elementDiv.style.display ="block";
}
<body onload="js_method()" id="main" style="display:none">
//todos
<h2>Hello</h2>
</body>