I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes?
The syntax I imagine would be:
<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />
I'm unsure if this is permissible or not.
Defer and Async are unique attributes of the <script> tag only. You can learn more about this at this link.
It's essential to note that these attributes won't function in other tags since they are specific to scripts. Unlike scripts, stylesheets contain static styles and do not involve any logic for parallel execution or post-loading activities on a webpage.
One possible solution is to implement the following code:
<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >
In addition, you can create a noscript fallback
Acknowledgment:
Insert the following code snippet above the closing </body> tag in your HTML file
<script type="text/javascript">
/* Load First CSS File */
var acknowledgement1 = document.createElement('link');
acknowledgement1.rel = 'stylesheet';
acknowledgement1.href = '../css/yourfirstcssfile.css';
acknowledgement1.type = 'text/css';
var defer1 = document.getElementsByTagName('link')[0];
defer1.parentNode.insertBefore(acknowledgement1, defer1);
/* Load Second CSS File */
var acknowledgement2 = document.createElement('link');
acknowledgement2.rel = 'stylesheet';
acknowledgement2.href = '../css/yoursecondcssfile.css';
acknowledgement2.type = 'text/css';
var defer2 = document.getElementsByTagName('link')[0];
defer2.parentNode.insertBefore(acknowledgement2, defer2);
</script>
In September 2020, I discovered that Chrome now has built-in support for deferring CSS using the rel="preload" attribute to asynchronously load the file.
<link href="main.css" rel="stylesheet" rel="preload" as="style">
To ensure compatibility with most browsers, a more comprehensive approach involves using JavaScript and adding a noscript option for situations where JavaScript is disabled.
<link href="main.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="main.css"></noscript>
Although there is no official documentation on this, here are my observations:
Testing Method
What I Examined
I had a stylesheet that imported custom fonts and applied them to the text.
Before:
The text using the custom font remained invisible until it fully loaded and then appeared on the page.
After/Result:
Therefore, the outcome was that the text became visible immediately as the page started rendering, initially using the fallback font, and then switching to the custom font after some time.
It appears that Google Chrome supports defer on <link> tags, even if this feature is not publicly documented...
Beacon appears to be fond of the following:
<script>
window.addEventListener('load', () => {
let stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
stylesheet.href = "/path/to/style.css";
document.head.appendChild(stylesheet)
})
</script>
I've browsed Google and this site, but I couldn't find a solution to my issue. On my webpage, I have a shoutbox and a teamspeak viewer with a specific height for the outer div. The scrollbars don't look good on our new design, so I attempt ...
Currently working on debugging jQuery code and facing an issue where a particular section of the code is not being triggered upon clicking. The HTML/PHP in question: $cartlink .= "<a class='add_to_cart button' data-id='{$product->id} ...
Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...
Here are the locations of my folders: index.ejs can be found inside Markdown Blog/views/articles This is where my css stylesheet is located: ../../css/styles.css Despite ctrl+clicking the path and successfully navigating to the css file, the styles do no ...
I am looking for a way to display different content depending on whether the user is viewing my website on a large screen (PC/tablet) or a small screen (mobile). While my site is responsive and uses bootstrap, I have a lot of content that is only suitable ...
I have recently started using Bootstraps Glyphicons and encountered an issue while trying to insert text inside a button with a glyphicon icon: <button type="button" class="btn btn-default pull-left" data-toggle="collapse" data-bind="attr:{'href&a ...
After implementing the script, I noticed a strange behavior. When I click it on load, everything works perfectly. However, when I click it via a dynamically created element, the HTML seems to shift or stretch on the first click before returning to normal. ...
I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...
I'm having trouble setting up pug-php-filter (https://www.npmjs.com/package/pug-php-filter) with gulp in order to enable PHP usage in my Pug files. Any assistance would be greatly appreciated. ...
I am facing a puzzling issue where I am unable to access the input fields and textareas on my HTML form. The JS, HTML, and CSS files are too large for me to share here. Could someone provide guidance on what steps to take when troubleshooting this unusual ...
I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...
Recently, I've been working hard on building a blog from scratch. However, I encountered a major issue with the comment section. The form prompts users to enter their Name and Comment, which are stored in the following database fields: `comname` VARC ...
I have encountered a challenge while attempting to convert an HTML page with a single table (containing images or text in the td elements) to a PDF using the Python module weasyprint. The issue I am facing is that weasyprint is inserting page breaks withi ...
As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...
Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...
Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...
I'm having an issue where the right side of all the text on my website is being cut off. I've tried using Firebug to inspect the element, but it's always a paragraph text and they have different parent divs. I'm not sure what CSS adjust ...
I am currently working on a mobile app using the ionic framework. I would like to create a layout with an avatar image on the left, text in the middle, and a checkbox on the right. Can anyone provide guidance on how to achieve this? The code snippet below ...
I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...
For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...