Integrating asynchronous CSS in your website

Is there a way to create async CSS with integrity? I've tried using preload without integrity and rel=stylesheet with integrity, but I can't seem to get it to work. Am I missing something?

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" as="style" onload="this.rel='stylesheet'">
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY"></noscript>

I'm encountering an issue where my browser doesn't load the CSS with this code. The dev console is empty, which is confusing me. This should be a straightforward process, so why isn't it working?

htmlcssasynchronous

Answer №1

Everything is running smoothly, and here's why: I've implemented a bootstrap styled button that receives its design 1.5 seconds after the preload completes.

<button type="button" class="btn btn-primary">I'll be styled with Bootstrap after 1.5 seconds!</button>

<script>
  function updateRel(cssPreload) {
    if (cssPreload.rel !== 'stylesheet') {
      setTimeout(function() {
        console.log('Styling will take effect now!');
        cssPreload.rel = 'stylesheet';
      }, 1500);
    }
  }
</script>

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" as="style"
onload="updateRel(this)">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assign the hidden field's value to be the same as the input field's value using JavaScript

This may seem like a silly question, but I'm really hoping to find the best answer. Here's my issue: I have an input field and a hidden field. How can I set the value of the input field to be the same as the value of the hidden field? <input ...

javascriptjqueryhtml

locate the following div using an accordion view

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/ There are various methods to achieve this, but one approach is by using a CSS class called sub to hide a 'nested' div and then using jQuery to toggle the Glyphicon while displaying the 'nest ...

javascriptjqueryhtmlcss

In Internet Explorer 7, a newline within a <pre> tag may cause display issues

Within my ASP.NET MVC 3 project, I am working with the following code: <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" ty ...

htmlasp.net-mvc-3newlineinternet-explorer-7pre

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

javascripthtmllocaljsfiddle

Display a div beside it when hovering over a specific part of the image

If I have an image that is 200px wide and 900px tall How can I make a div display alongside it when hovering over a specific section of the image? ...

javascriptjquerycss

What are the steps for sharing and sending content using email?

I have a website and I'm looking for a way to post content via email, similar to popular social networks like Facebook and Flickr. For example, I'd like to send a message to '[email protected]'. The title would be stored in a MySQ ...

phphtmlmysqlapache

Looking to toggle visibility on multiple divs with an onclick button in Jquery?

Lately, I've been struggling to make my code display questions in a specific order. My goal is to have the next question show up once the submit button is pressed, while hiding the previous one. Currently, I'm developing a game similar to Family ...

javascriptjqueryhtmlcss

In my PHP project, I am working on implementing a feature that will display the name of the logged-in user on the website, such as "Hello Mike" or "Welcome Mike"

When a user is logged into my website, I want it to display a greeting like "Hello" or "Welcome User." This is the code I am currently using: <?php $user = $_GET['session_is_registered']; echo ('$user'); ?> However, the PHP c ...

phphtml

Attempting to align multiple images in the center

I'm struggling with this issue, trying to center my images. It seems like the first image referenced in imgTop is centered while the second one goes to the right. I want both to be centered evenly. Any help would be appreciated! #imageContainer { ...

htmlcssimage

Accessing Local Data with Local HTML on Android - Error: File Not Found

After organizing my project in a folder within the main root directory, I successfully created a basic hello world project. The HTML file displays perfectly in Chrome, but trying to load files from the main project folder or subfolders results in a net::ER ...

androidhtmlgoogle-chromeandroid-webview

"Exploring the relationship between UIWebView and CSS's fixed positioning

My UIWebView is set up with a fixed position header. Everything works seamlessly when the initial view of the ViewController containing the UIWebView is displayed. However, if I present that same ViewController using a Modal segue, an issue arises. When ...

iphoneioscssxcodeuiwebview

How can I implement a hover effect without triggering a click event?

My structure is pretty basic, here it is: .container { height: 100vh; width: 100%; pointer-events: none; } .click-layer { background-color: #ccc; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto; } .box { ...

javascripthtmlcssreactjs

What is the best way to choose the closest <input> element?

How can I achieve an interactive icon effect within an input field? Specifically, when hovering over the icon, I want it to change and also alter the "type" attribute of the targeted input field among three similar fields. Here's the HTML structure: ...

jqueryhtmlcssjquery-selectorsselector

As the text in the textarea grows, the dimensions of the div containing it will

When text is entered in the div, its height increases accordingly. However, I would like the height to also adjust based on the size of the text when I press enter. Additionally, I need the width to remain constant until the text reaches the maximum width ...

jqueryhtml

What could be causing the overlap of my input box with its parent container?

Here is the code snippet I am working with: <section className="createTodo-box"> // parent <div className="createTodo-inside"> // child <Input value={this.state.text} style={{ width: '200px' }} ...

htmlcss

Beginner guides on creating combo boxes and Facebook-style message composers using CSS and Javascript (or JQuery)

1) Looking to revamp a combo box using CSS and minimal or no javascript. Seeking tutorials that can provide guidance. 2) Facebook users may have noticed the feature where typing in recipients creates a "button" around the user's name. Curious about h ...

javascriptjquerycss

Is there a way to manipulate the color of this Unicode character in Edge without altering the font? (The current code functions correctly in Firefox.)

Is there a way to adjust the following code to ensure the Unicode character with HTML code ◼ prints in red in both Firefox and Edge browsers? Currently, it displays in red in Firefox but in black in Edge. <html> <body> <span style=" ...

htmlcss

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

Discover the country's three-letter code with the power of HTML and Javascript!

I am in search of a way to determine the location of a user based on the country they are browsing from. I want to achieve this using HTML and Javascript. While researching on stackoverflow, I came across various suggestions to use different API's for ...

javascripthtmlajaxgeolocationreverse-geocoding

Steering your pop up to the top with CSS

Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...

htmlcsspopup