csswizardry / ct Goto Github PK

View Code? Open in Web Editor NEW

1.9K 1.9K 48.0 1 MB

Let’s take a look inside your <head>…

Home Page: https://csswizardry.com/ct/

CSS 59.99% HTML 39.85% JavaScript 0.16%

ct's Introduction

Hi there 👋

ct's People

Contributors

Stargazers

Watchers

Forkers

drs90 sanderheilbron redstrike ahmadnasrhosna sergkovalsky kelston3 ydobro ahmetcetin zascia apokorni kylesnod hachesilva-forks crystaldave smaller-studios uvacoder valgaze jakenuts luisdamora angelgabrielcachavilano hulkike-forks jcarhuazv murindwaz armspkt alejandroredradix repos-css druvisc ericdasilvaseidler iamnathanj alangreene lnked upl-depot lorincjuraj davidpa86 pedroparraperez alejandroasc96 ninomaj cristianlabadie abdallah-nour cloudnepal simonhermann lsb-web-design shawneejv koddsson aozgh85 rviscomi devdevdany

ct's Issues

Inline module scripts can usefully have `async`

ct/ct.css

Lines 187 to 203 in 1f0a063

    
           /** 
        
            * Async and defer simply do not work on inline scripts. It won’t do any harm, 
        
            * but it’s useful to know about. 
        
            */ 
        
           head script:not([src])[async], 
        
           head script:not([src])[defer] { 
        
             border-style: var(--ct-is-problematic); 
        
             border-color: var(--ct-warn); 
        
           } 
        
             head script:not([src])[async]::before { 
        
               content: "The async attribute is redundant on inline scripts" 
        
             } 
        
             head script:not([src])[defer]::before { 
        
               content: "The defer attribute is redundant on inline scripts" 
        
             }

Async and defer simply do not work on inline scripts. It won’t do any harm, but it’s useful to know about.

This is true for classic scripts, but type=module inline scripts can usefully have async applied:

<script type=module>
  // I run like `defer`!
</script>

<script type=module async>
  // I run as soon as encountered but non-blocking!
</script>

defer is still useless, as it is redundant.

Relevance of ressource order in 2022?

I'm very interested in the relevance of the resource ordering n the head in the year 2022, especially knowing this discussion.

License

Sorry if this has been asked before.

What's the license for this project? I can't find a LICENSE file.

Bookmarklet that add the style to any page

Example (in ES5 for more compatibility with older browsers)

javascript:(function() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/gh/csswizardry/ct/ct.css';
(document.head || document.body).appendChild(link);
})();

Lots of highlighted nodes are not all displayed due to missing scrollbars

If a lot of stylesheets / nodes are matched by the selectors, not all are visible and are not reachable since no scrollbars are visible.

Suggestion:
some extra Styling on head fixed this issue for me

head {
    overflow: auto;
    height: 100vh;
}

csswizardry / ct Goto Github PK

ct's Introduction

Hi there 👋

ct's People

Contributors

Stargazers

Watchers

Forkers

ct's Issues

Inline module scripts can usefully have `async`

Relevance of ressource order in 2022?

License

Bookmarklet that add the style to any page

Lots of highlighted nodes are not all displayed due to missing scrollbars

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	/**
	* Async and defer simply do not work on inline scripts. It won’t do any harm,
	* but it’s useful to know about.
	*/
	head script:not([src])[async],
	head script:not([src])[defer] {
	border-style: var(--ct-is-problematic);
	border-color: var(--ct-warn);
	}

	head script:not([src])[async]::before {
	content: "The async attribute is redundant on inline scripts"
	}

	head script:not([src])[defer]::before {
	content: "The defer attribute is redundant on inline scripts"
	}