Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/csswizardry/ct
Let’s take a look inside your <head>…
https://github.com/csswizardry/ct
Last synced: about 1 month ago
JSON representation
Let’s take a look inside your <head>…
- Host: GitHub
- URL: https://github.com/csswizardry/ct
- Owner: csswizardry
- Created: 2021-01-06T14:15:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-21T14:17:26.000Z (about 1 year ago)
- Last Synced: 2024-06-07T23:37:16.091Z (3 months ago)
- Language: CSS
- Homepage: https://csswizardry.com/ct/
- Size: 1000 KB
- Stars: 1,872
- Watchers: 24
- Forks: 48
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-luooooob - csswizardry/ct - Let’s take a look inside your <head>… (CSS)
README
# 🧠 `ct.css` – Let’s take a look inside your ``
> Computed tomography of the head uses a series of X-rays in a CT scan of the
> head…
> — [wikipedia.org/Computed_tomography_of_the_head](https://en.wikipedia.org/wiki/Computed_tomography_of_the_head)
Your `` is the single biggest render-blocking part of your page—ensuring
it is well-formed is critical. `ct.css` is a diagnostic CSS snippet that exposes
potential performance issues in your page’s `` tags.
## Example Output
* **Red:** This is an error and should be addressed.
* **Orange:** This could be problematic in certain scenarios.
* **Green:** This is fine and is purely informational.
* **Solid:** This file is the problem.
* **Dashed:** Another file(s) are causing problems with this file.
## Simple Usage
Paste this anywhere in your HTML:
```html
```
## Chrome Snippet
[_Run Snippets Of JavaScript On Any Page With Chrome DevTools_](https://developers.google.com/web/tools/chrome-devtools/javascript/snippets)
```
(function(){
var ct = document.createElement('link');
ct.rel = 'stylesheet';
ct.href = 'https://csswizardry.com/ct/ct.css';
ct.classList.add('ct');
document.head.appendChild(ct);
}());
```
## Limitations
* **Non-matching `media` types:** Currently, `ct.css` only takes print
stylesheets into account. This means that you may experience false-positives
for other non-blocking stylesheets.
* **Injected `script` elements:** `ct.css`, as with all CSS, acts against the
DOM and not the HTML. As such, injected `script` elements will be falsely
flagged as blocking.
* Similarly, any `script` elements that are removed from the DOM will not be
flagged.
* **Third-party blocking resources:** The check for whether or not something is
a third party is naive at best.
* **CSP Issues:** If your app is blocking CSS from the `csswizardry.com` origin,
either self-host the `ct.css` file, or paste its contents into `…` tags anywhere in your page.