75 GitHub stars and counting — scottjehl/css-inapplicable-load is a PHP project TopGit is tracking across repositories on the platform. Testing for Asynchronous Load of Inapplicable CSS StyleSheets
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Testing for Asynchronous Load of Inapplicable CSS StyleSheets
As we aim to address more diverse conditions and environments with CSS via Responsive Design, our ability to target styles to certain contexts while minimizing their impact on others becomes increasingly critical. CSS3 Media Queries are a powerful tool for specifying where certain CSS rules should and should not apply, but media queries have no affect on whether StyleSheets are actually requested, only whether they are rendered or not after they've been requested. This was tested and verified in a previous experiment, CSS Download Tests, which showed that all of the following StyleSheets will be downloaded by all modern browsers that were tested, regardless of whether their associated media types or queries apply:
Unfortunately, not only do browsers always request StyleSheets regardless of their applicability, but many browsers delay rendering (displaying the page content to the user) until those requests have returned. This presents a significant problem, as many browsers will wait as long as 30 seconds or more for a file to load, and a variety of network or server conditions could cause that to occur.
That said, some modern browsers (particularly those based on Webkit and now Blink) will actually evaluate media queries (when present) to determine the priority at which a StyleSheet should be loaded before requesting that StyleSheet. In these browsers, StyleSheets paired with media queries that are found to be inapplicable at load time will be loaded asynchronously (and possibly deferred until higher-priority requests have been made), meaning the page content will be displayed to the user immediately and regardless of whether those de-prioritized StyleSheets have finished loading or not. Webkit's behavior in this case was first documented in this post by Ilya Grigorik.
Given the increasing number of contexts we're addressing with CSS, this prioritized loading behavior is highly desirable, but it is not implemented in all modern browsers. Unfortunately, if we build our websites to favor this browser behavior today, for example by separating our styles into @media-specific files and loading them separately, we will introduce potential points of failure for users with browsers that don't behave in this way. This dilemma led me to create a previous experiment that mimicked the behavior with JavaScript, which worked fairly well but failed to perform quite as well as a native implementation.
Ideally, this behavior would be native and reliable across browsers, but we're not there today. This experiment tests which modern browsers implement this prioritized loading behavior, so we have a clearer picture of where it applies today.
Test Case Explained
The experiment includes an HTML file containing a single link element with a media attribute containing a probably-inapplicable media query value (min-width: 40000px). The link references a stylesheet that is designed to take 45 seconds to respond when it is requested. The HTML file also contains a single heading to test whether the page content is displayed while this request is pending.
To test behavior, I loaded the page in a variety of web browsers and observed the loading behavior in a fairly non-scientific manner to see how each browser behaved, as it's easy to see whether the behavior is present by simply observing page load.
The Results
The Good
Chrome 26: Renders page immediately (while request is pending)
Safari 6.0.2: Renders page immediately (while request is pending)
iOS Safari 6.1: Renders page immediately (while request is pending)
Does scottjehl/css-inapplicable-load have a project website?
No homepage URL was recorded for scottjehl/css-inapplicable-load in TopGit's last sync. The README tab above frequently contains screenshots and demo links, or check the repository description on GitHub.
How many stars does scottjehl/css-inapplicable-load have?
scottjehl/css-inapplicable-load has 75 GitHub stars — refresh the page for the live number, or check github.com/scottjehl/css-inapplicable-load. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is scottjehl/css-inapplicable-load open source?
Yes — scottjehl/css-inapplicable-load ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/scottjehl/css-inapplicable-load.
What is scottjehl/css-inapplicable-load?
scottjehl/css-inapplicable-load (scottjehl/css-inapplicable-load) is a PHP project on GitHub. From the project's own README: Testing for Asynchronous Load of Inapplicable CSS StyleSheets
Where do I read more about scottjehl/css-inapplicable-load?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/scottjehl/css-inapplicable-load is the definitive source.
Read full README in the tab above.
Want a second opinion on css-inapplicable-load?
Ask an AI that can read this page — one click and you get its take on css-inapplicable-load.
