Comments (8)
I'm doing the inlining myself, because I'm using a CMS system, so it actually was inlined... but I figured out my mistake.
loadCSS() was inserting itself before the last <script> element in the HTML header... which was before the inlined critical CSS. d'oh!
from critical.
Can you elaborate on your solution to this? It looks like your sentence was cut off.
I'm encountering the exact same issue. The inlined css of above-the-fold styles is impacting the classes that override those styles in the below-the-fold content.
Looking into it a bit more, it seems like the inline-critical
package's loadCSS
function inserts the <link>
tag before the first script
tag it finds.
from critical.
Take a Look here bezoerb/grunt-critical#5
from critical.
Hey @bezoerb , thanks for the link. My fix was the same.
from critical.
Yeah so basically, it was working as expected. But I was using loadCSS() to async load the full CSS later on. The problem is that by default loadCSS() puts the style sheet in front of the first script tag it encounters in the head
So because of where the first script tag was in my html head tags, it was loading the full CSS before the inline CSS from grunt-critical... so the full CSS would never override the inline critical CSS.
Moving the tags around fixed the loading order, and thus fixed the issue.
from critical.
I have the same issue, but cannot reorder script tags, i.e. having cloudflare or browser extensions that push them at the top. loadCSS() has a useful argument that allows to point an element and inserts all stylesheets before it. So the questions are:
- Can I pass the argument?
or - Can I inline css in HTML, but withous using 'yours' loadCSS() and instead use 'mine' with the argument, stylesheets passed
from critical.
@bezoerb anything?
from critical.
@biokillos sorry for the late response. I've just released a new inline-critical
version which enables you to either pass in an selector for the before
element or just skip loadCSS
by ignoring all link
tags. link
tags inside of noscript
will be ignored by default so in case you're using loadCSS already and there are no link tags left it should just be fine. The options won't be passed through critical
yet so you'll have to generate the critical css first and inline it via inline-critical
in the next step.
Hope this helps
from critical.
Related Issues (20)
- critical just stucks at loading and does nothing HOT 2
- Remove query string from stylesheet path
- Print stylesheet unexpectedly gets `onload` attribute HOT 3
- Generated CSS is big HOT 8
- 'noscript)>[rel="stylesheet"]' is not a valid selector HOT 6
- Generate ciritical for multiple pages HOT 2
- Request: Add option to disable link media attribute wrapping HOT 1
- Rules within media queries duplicate when using multiple dimensions HOT 2
- Lots of css generated from below the fold
- Does not take redirects into account when looking for relative CSS HOT 2
- Does not take the <base HTML tag into account when looking for relative CSS HOT 7
- dimensions don't work HOT 2
- Error: Failed to launch the browser process! HOT 3
- typescript support ? HOT 1
- Add the option of a prefix path HOT 3
- On @container queries
- PageSpeed Insights consider CSS not deferred HOT 1
- Allowing internal functions to be imported HOT 3
- [✨] feat: Add the option of pass plain css HOT 2
- Several warnings appear when installing the latest version of critical HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from critical.