For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override:
https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package
It's straight forward and allows you to create a patch for the nextjs-Sourcecode.
Polymer has support for <style is="custom-style"> which allows you to define styles that only apply to elements, e.g. the shadow DOM.
Polymer also has support for <dom-module id="shared-styles"> which allows you to package a set of style declarations that can be imported into an element definition.
Thus the point of both of them seems to be to allow you to style a polymer element. Why would you use one over the other? The use cases overlap substantially, it seems.
Additional confusion: shared-styles can be imported into custom-style. Why would you do this? Why not?
A <dom-module id="my-shared-styles"> declares a reusable style module hat you can import into elements or <style is="custom-style"> tags.
Use in a custom element
<dom-module id="my-element>
<template>
<style include="my-shared-styles"></style>
...
</template>
</dom-module>
or in the <style> tag outside a custom element (for example in <head>)
<head>
<style is="custom-style" include="my-shared-styles"></style>
</head>
<style is="custom-style"> is only required when you want to use Polymer CSS features (CSS variables and mixins) in a style element that is not inside a <dom-module>. Inside <dom-module> just <style> is enough.
Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.
I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.
So far, I have tried in, and outside of the <template> definition:
<link rel="stylesheet" href="./account-list.css"> with an #import
<style>#import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css
But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.
Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.
There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).
Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.red { color: red; }
</style>
</template>
</dom-module>
Then obviously you need to import this file in your page.
<link rel="import" href="shared-styles.html">
Now, there are two scenarios.
If you are using custom-style at the document level, you need to
include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
If you simply want to include the style module inside one of your
elements, do this -
<dom-module id="my-element">
<style include="shared-styles"></style>
Have a look at this plunker that demonstrates both scenarios.
Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.
Using dom-module concept, and in order to use a external third party I did the next and it is working, but probably is not a Polymer best practice.
Dom module with 3rd party css (third-party-styles.html)
<dom-module id="third-party-styles">
<link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>
I created a container (elements.html) where import all needed html modules, and there I registered the third party style module and my module
<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">
And I added the elements.html in the head of my index.html
<head>
...
<link rel="import" href="elements.html">
<head>
<body>
<my-module></my-module>
</body>
In my Polymer Element (my-module.html)
<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
<style include="third-party-styles"></style>
<template>
<p class=".thirdPartyClass">Content with third party css rule</p>
</template>
</dom-module>
any feedback?
So it's not supported to have:
...
<body>
<link rel="stylesheet" type="text/css" href="theme.css">
...
but what's the consensus with being able to do:
...
<body>
<style>
#import '/custom.css';
</style>
...
style tags and link rel should be within the head tags but that does not mean it won`t work inside body or divs. its just not good practice
#import '/custom.css';
should be placed only inside css files
Yes, you can have an #import rule at the start of a style sheet even when the style sheet appears as the content of a style element.
However, neither style nor link elements are allowed within body, only within body, according to the formal rules of HTML. These rules are not enforced in practice; the elements work just as they do inside head. (Division into body and head is really just formal.)
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>