defer-css - npm Package Compare versions

defer-css

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.9 to 0.0.10

package.json

		{
		"name": "defer-css",
		"version": "0.0.9",
		"version": "0.0.10",
		"description": "ExtraSlim Javascript to Load css in your page without affecting load speed.",
		@@ -5,0 +5,0 @@ "main": "index.min.js",

readme.md

		### Defer Css

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

		@@ -11,5 +11,5 @@ DEMO: [Jsfiddle.net](https://jsfiddle.net/trapcode/j8vsg7az/)
		\| -------- \|--------- \| -----\|
		\| deferCss \| `(scripts=[], mountOnId='defer-css')` \| For loading a style or array of styles
		\| hasStyleSheet \| `(search='', return=false)` \| A bonus helper function for checking if the browser has loaded a particular stylesheet using `document.styleSheets`
		\| \| \| if `$return` is "all" the `CSSStyleSheet` Object is returned, else if any string we assume its a key in the `CSSStyleSheet` object you are trying to get.
		\| deferCss \| `(scripts=[], mountOnId='defer-css')` \| For loading a style or array of styles \|
		\| hasStyleSheet \| `(search='', return=false)` \| A bonus helper function for checking if the browser has loaded a particular stylesheet using `document.styleSheets` \|
		\| \| \| if `$return` is "all" the `CSSStyleSheet` Object is returned, else if any string we assume its a key in the `CSSStyleSheet` object you are trying to get. \|

		@@ -28,13 +28,14 @@ #### Direct Browser Installation
		#### From Package Managers
		You can include using `require` or `import` but defer-css does not export anything.
		You can include `defer-css` in your project using `require` or `import` but defer-css does not export anything.

		It sets `window.deferCss` && `window.deferCssData`
		It sets `window.deferCss`, `window.deferCssData` && `window.hasStyleSheet`


		#### Usage
		Defined styles are loaded before the link element with `defer-css` id in your page
		Defined styles are loaded before any element with id `defer-css` id in your page
		```html
		<html>
		<head>
		<!-- Styles will be placed before this link element-->
		<script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
		<!-- Styles will be placed before this element-->
		<link id="defer-css"/>
		@@ -48,3 +49,3 @@ </head>
		<head>
		<!-- Some Styles -->
		<!-- Some Styles -->
		<link href="....">
		@@ -69,3 +70,3 @@ <link href="....">
		```html
		<link rel="stylesheet" href="style-1.min.css" crossorigin="anonymous">
		<link rel="stylesheet" href="style-1.min.css">
		<link rel="stylesheet" href="style-2.min.css" crossorigin="anonymous">
		@@ -112,3 +113,2 @@ ```
		```
		```html

		@@ -124,3 +124,3 @@ This will result to.
		</style>
		<link rel="stylesheet" href="other-css-1.css">
		<link rel="stylesheet" href="other-css-1.css" crossorigin="anonymous">
		<link rel="stylesheet" href="other-css-2.css">
		@@ -127,0 +127,0 @@ ```

Improved metrics

Worsened metrics