I am using embeded JS code for a service I need included in my website. It is embedding its own <style> CSS along with the HTML elements. It is a new service and there is no support for sending anything else. How can I ignore the <style> so I can use my own CSS to integrate into the theme? I don't want to resort to using !important flags.
As long as you use same classes for your CSS and you include it after the JS code loads it (assuming it loads it synchronously) your classes will override the default settings.
The way the CSS is rendered - if there is a conflict between declaration the instructions passed "later" prevail.
<html>
<head>
YOUR JS HERE
YOUR CSS to override your JS imported rules
</head>
<html>
You need to make sure you understand how CSS assesses the "weight" of the instructions though (important, inline style, id, class, html tag)
https://css-tricks.com/specifics-on-css-specificity/ - here is a decent explanation how it works.
I ended up adding !important to my CSS file since the JS file is loaded asynchronously and it would be more work to keep checking until it is loaded to remove the <style>.
Related
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
It seems to me that anytime there is a <script src="name1.js"> or a <link href="name2.css"> statement in the <head>, these two files block rendering of the markup.
FWIW, I have tried adding "async" to the <script> tag and it totally messes up some of my jQuery plug-ins
Given that, I really do not understand the phrase "Render-blocking Javascript and CSS".
Thanks!
They block rendering of markup because the browser parses the HTML file from top down.
You can avoid this by placing the script tag before the closing body:
<script src="whatever.js"></script>
</body>
You're out of luck with link elements, unless you just use inline style declarations in the head (probably not a good idea).
You can also use the async attribute in the script tag, or you can use one of any numerous async JavaScript libraries.
You can also try to load the critical css first before loading the main/minified css file to avoid render blocking on CSS files.
my platform delivers some similar widgets on the same webpage. These widgets are embedded on iframes, and share the same CSS definition among them.
Current version loads this definition using <link rel="stylesheet"> tag. But, I am thinking to change loading strategy to css inline definition inside <style> tag.
Load base javascript on target page
Create a hidden iframe, and load CSS <link> on it (async document.write call)
Set this CSS content into javascript var on target page context.
Steps 1 and 2 are already implemented and working. Now, how should step 3 be implemented?
After some new tests, I'll post here any positive results.
You don't want to use Javascript for something that can be done (or at least done easily) with pure CSS. There are a lot of people who don't have JS enabled...I don't think you want to limit their access to your site. What you are looking for can be done with the CSS #import rule. It's pretty simple -- all you need to do is place #import "path/to/css/file" above all your other style rules. The path is relative to the current stylesheet; if it's in an HTML file then it's relative to the HTML file.
For example, if you had a domain like stackunderflow.com, a stylesheet in the top-level folder, and a stylesheet called style2.css in a folder called extra-styles, then you could import the stylesheet from extra-styles via a relative path: #import "extra-styles/style2.css" Another good thing about this is that it's supported in almost all browsers.
So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.
In order for my webpage to degrade gracefully, I have some CSS that should only be loaded if its corresponding JavaScript will function.
What is the simplest way to load local CSS if and only if the browser has JavaScript enabled?
Also it's quite a big block of CSS, so I'd rather not have to write a JavaScript line to add each attribute. (Oh, and if necessary I can use jQuery).
Set a class on the body tag of "noJS". Then use Javascript to remove that class.
For the CSS rules that you want to be used when no JS is present, just use .noJS .myRules {}
In the <head> you can include it with document.write(). I've never tried this, but it should work in theory. No script execution means no stylesheet loaded.
<head>
<script type='text/javascript>
document.write("<link rel='stylesheet' href='your.css' media='whatever />");
</script>
</head>
You have a few options.
The one I like is to add the following code to the body tag.
<body id="no-js"><script>document.body.id="js"</script>
Then I can target #no-js and #js from my master CSS.
An additional option is to load an extra stylesheet with JavaScript, but that will slow down you initial load, which I try to avoid.
Check out the body conditionals for html5 boilerplate to see how to employ modernizr.
Also good example here: http://webdesignernotebook.com/css/how-to-use-modernizr/
Then write your css selectors for .no-js .addl-selector {}
I simply do this:
document.documentElement.className = "js"
This adds class js to <html> tag, then you can target your elements by css using:
.js #someid{}