defer-css

v1.0.1

Published

2 years ago

ExtraSlim Javascript to Load css in your page without affecting load speed.

Downloads

0High
0Medium
0Low

trapcode

Defer Css

Simple LightWeight function to defer css in your web applications or websites.

DEMO: stackblitz.com

It's 2023 and there is still a need to defer CSS yourself. One would think that with all the frameworks and libraries out there, this would be a solved problem. But it's not. This is a simple plugin that will help you defer your CSS.

Why or when should I use this plugin?

There are some styles that are not needed for the initial page load. A good list of these styles are:

Fonts
Icons
AnimateCSS

With this plugin you can defer these styles and load them when they are needed.

Do I need this if am I using a framework like angular, react or vue?

Yes, you do. Most frameworks have a way to defer CSS, but they are not perfect. You don't get to decide when to load the CSS. You can only decide if you want to load it or not in the component.

Direct Browser Installation

<!--Using JsDeliver CDN-->
<script src="https://cdn.jsdelivr.net/npm/defer-css"></script>

<!-- Or Using UnPkg CDN-->
<script src="https://unpkg.com/defer-css"></script>

<!-- Example Script -->
<script>
  const { deferCss } = window;
</script>

Using Package Managers

npm i defer-css
# or using yarn
yarn add defer-css

Import the package in your project

import { deferCss } from 'defer-css';

Example Usage


<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>

  <!-- Styles will be placed before this element-->
  <link id="defer-css" />
  <!--  OR   -->
  <link id="custom-id" />
</head>
</html>

The deferCss function takes two arguments, the first is the path/paths to the css file and the second is the id of the element to place the styles before.

The default id is defer-css but you can change it to any id you want by passing it as the second argument.

// Using a string
deferCss("/style-1.min.css");

// Using a single object
deferCss({ href: "/style-2.min.css", crossOrigin: "anonymous" });

// using a mix of string and object in an array
const styles = [
    "/style-3.min.css",
    { href: "/style-4.min.css", crossOrigin: "anonymous" }, 
];

deferCss(styles, "custom-id");

Result:


<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
  
  <link rel="stylesheet" href="/style-1.min.css" />
  <link rel="stylesheet" href="/style-2.min.css" crossorigin="anonymous" />
  <link id="defer-css" />
  
  <link rel="stylesheet" href="/style-3.min.css" />
  <link rel="stylesheet" href="/style-4.min.css" crossorigin="anonymous" />
  <link id="custom-id">
</head>

If a link object includes an onDefer function, it is executed when the css file is loaded.

deferCss([
  {
    href: 'style-1.min.css',
    onDefer: function() {
      // do something
    }
  },
])

Multiple deferCss

Let's say you want to mount css in multiple places.


<head>
  <link id="main-css">
  <style>
    .some-style-before-other-css {
      background: teal;
    }
  </style>
  <link id="other-css">
</head>

deferCss(['main-css-1.css', 'main-css-2.css'], 'main-css');
deferCss([
  { href: 'other-css-1.css', crossOrigin: 'anonymous' },
  'other-css-2.css'
], 'other-css');

This will result to.


<link rel="stylesheet" href="main-css-1.css">
<link rel="stylesheet" href="main-css-2.css">
<style>
  .some-style-before-other-css {
    background: teal;
  }
</style>
<link rel="stylesheet" href="other-css-1.css" crossorigin="anonymous">
<link rel="stylesheet" href="other-css-2.css">

DeferCssData

The deferCssData includes details you may need.

({
  // Element mounted on, default = 'defer-css'
  "defer-css": {
    total: Number, // total number of css defined
    loaded: Number // total number of css loaded (at the moment)
  }
});

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme