Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Include more performance benefit info in the README #28

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Include more performance benefit info in the README #28

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ If page speed is important to you chances are high you're already doing code spl

It would be much better if a mobile user doesn't need to load desktop specific CSS, wouldn't it?

That's the use case I've written this PostCSS plugin for! It lets you extract all `@media` rules from your CSS and emit them as separate files which you can load as `<link rel="stylesheet" media="screen and (min-width: 1024px)" href="desktop.css">` or as dynamic import.
That's the use case I've written this PostCSS plugin for! It lets you extract all `@media` rules from your CSS and emit them as separate files which you can load as `<link rel="stylesheet" media="screen and (min-width: 1024px)" href="desktop.css">` or load them dynamically.

**Before**

Expand Down Expand Up @@ -38,6 +38,31 @@ That's the use case I've written this PostCSS plugin for! It lets you extract al
}
```

## Potential performance benefits

### As a `link` element with `media` attribute

If you reference the separate files using a `link` element with a `media` attribute (e.g. `<link rel="stylesheet" media="screen and (min-width: 1024px)" href="desktop.css">`) then [browsers will still load each CSS file](https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513/) (in case the user changes something which now means a different media query is matched), **but they will download the non-matching media query files as lower priority, and they will not block the initial render of the page**.

### Dynamic loading

If you don't want the unmatched media query CSS to download _at all_ then you could only reference your mobile-first CSS with a HTML `link` element, and for the rest of the media queries load the CSS dynamicaly with JavaScript. There are lots of different ways to do this, the example approach below uses [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [loadCSS](https://github.com/filamentgroup/loadCSS):


```
<!-- Load the loadCSS script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadCSS.min.js" integrity="sha256-PfuBYBreSv0el08vXRTkDhLawwSJicsqhPwaoFq/R7I=" crossorigin="anonymous"></script>

<script>
// Use matchMedia to see if the media query matches.
var desktop = window.matchMedia("(min-width: 1024px)");
// If it does, use loadCSS to dynamically load the CSS file.
if (desktop.matches) {
loadCSS("desktop.css");
}
</script>
```

## Installation

- npm
Expand Down Expand Up @@ -180,4 +205,4 @@ If you're using webpack you should use [media-query-plugin](https://github.com/S

## Credits

If this plugin is helpful to you it'll be great when you give me a star on github and share it. Keeps me motivated to continue the development.
If this plugin is helpful to you it'll be great when you give me a star on github and share it. Keeps me motivated to continue the development.