I started working on a project a came across a strange way to include a CSS file using javascript.
Example from the project:
document.write('<link rel="stylesheet" type="text/css" href="css/plugins/jquery.datatables.css" />');
Is there any reason (advantage) to include the file this way?
The CSS file will only be added to the page if the user has JavaScript enabled. Bandwidth saver.
This code does not include JavaScript but the CSS include...by using JavaScript. It allows to dynamically select your CSS maybe to select themes or adapt layout to the device.
Maybe to load the stylesheet only when dataTable is displayed and avoid unnecessary request ?
Related
I was wondering if it was possible to include a list of links into many HTML files. I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once.
Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp
What I want to be able to do is something like this:
<html>
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<h1>test</h1>
<div w3-include-html="links.html"></div>
</body>
</html>
Where the links.html file has a bunch of links. e.g
<link rel="stylesheet" href="style1">
<link rel="stylesheet" href="someframework">
<link rel="stylesheet" href="somescript">
I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website.
I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great.
Well, you can use partial rendering in any programming language. If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. (look for how to load stylesheets and scripts with JavaScript).
This way, you have a single place in which you manage head assets.
LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁
You could maybe make your header an include depending how you set it up. Could use <?php include "your/file/location" ?>
This will allow you to just add this piece of code at the top of each of your pages. Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching.
Went a tad off topic but hope this helps :)
If I have a website project with:
reset.css
remote bootstrap lib
master.css
remote font awesome CSS
two google fonts
JQuery lib
main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
google font
fontawesome
JQuery lib
remote bootstrap lib
reset.css
master.css
main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc
you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github.com/typekit/webfontloader
2. load css first
the below method may be the best way to go
fontawesome
JQuery lib
remove bootstrap lib
reset.css
master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS
finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.
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>.
I have a style-sheet that is saved in this location:
/opt/lampp/htdocs/project/core/styles/Style.css
Now, what I need to do is load it using that full directory, because the files that are going to be using it are located here:
/opt/lampp/htdocs/project/client/
My goal is to create a completely dynamic site that updates correctly to numerous "Clients" based on their own personal information. So far I've got everything done, however I wanted to move the CSS to be loaded dynamically as-well so if I wanted to make any changes to the style-sheet they would be instantly noticed.. Here's where I'm running into a problem, I can't figure it out. I've followed the front page of google to a dozen of different methods using JavaScript, but none of them have worked and they are all from 2009-2010.. Perhaps someone would like to shed some light on my dark path?
this works for me:
document.write('<link rel="stylesheet" type="text/css" href="/opt/lampp/htdocs/project/core/styles/Style.css" media="screen" />');
I don't see any reason to use javascript unless a loaded page needs to refresh automatically when the style-sheet is changed.
If you just need it to reload automatically on the next page-load, you can use something like:
<link rel="stylesheet" type="text/css" href="/project/core/styles/Style.css?v=<?php echo time(); ?>">
Using an absolute path makes sure it will work for any client / file in any folder.
I have added the timestamp to the css file so that it will not be cached but you can also set up the server to disable caching for specific files.
<link rel="stylesheet" type="text/css" href="test.css"/>
in case of static css we mention css file through link tag like above. suppose in case changing page theme we need change css name dynamically after downloading css file. so i just want to know how can i down load css file dynamically and change the css file name in link tag with the help of javascript. please assist me.
If you have an external CSS, you wont want to dynamically generate it as browsers will be caching it. You can set any arbitrary file type in your webserver to render dynamically though, but I wouldn't recommend it for css.
To stop CSS files caching, timestamp the querystring after them, IE:
<link rel="stylesheet" type="text/css" href="test.css?x=15/12/14 13:00:04"/>
Again this bypasses a lot of efficiencies that browsers have in place for caching, but it's there as an option.
The dynamic parts of your CSS, you could pull out the external file and have them in an internal style sheet, and dynamically insert the colour values in that way. This would work OK, and you can modularise it as an include file.