ct.css — Performance Hints via Injected Stylesheet Alone

This is some bonafide CSS trickery from Harry that gives you some generic performance advice based on what it sees in your <head> element.

First, it’s possible to make a <style> block visible like any other element by changing the …


The post ct.css — Performance Hints via Injected Stylesheet Alone appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

This is some bonafide CSS trickery from Harry that gives you some generic performance advice based on what it sees in your <head> element.

First, it’s possible to make a <style> block visible like any other element by changing the display away from the default of none. It’s a nice little trick. You can even do that for things in the <head>, for example…

head,
head style,
head script {
  display: block;
}

From there, Harry gets very clever with selectors, determining problematic situations from the usage and placement of certain tags. For example, say there is a <script> that comes after some styles…

<head>
  <link rel="stylesheet" href="...">
  <script src="..."></script>
  <title>Page Title</title>
  <!-- ...  -->

Well, that’s bad, because the script is blocked by CSS likely unnecessarily. Perhaps some sophisticated performance tooling software could tell you that. But you know what else can? A CSS selector!

head [rel="stylesheet"]:not([media="print"]):not(.ct) ~ script,
head style:not(:empty) ~ script {

}

That’s kinda like saying head link ~ script, but a little fancier in that it only selects actual stylesheets or style blocks that are truly blocking (and not itself). Harry then applies styling and pseudo-content to the blocks so you can use the stylesheet as a visual performance debugging tool.

That’s just darn clever, that. The stylesheet has loads of little things you can test for, like attributes you don’t need, blocking resources, and elements that are out of order.

Direct Link to ArticlePermalink


The post ct.css — Performance Hints via Injected Stylesheet Alone appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T09:05:14+00:00) » ct.css — Performance Hints via Injected Stylesheet Alone. Retrieved from https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/.
MLA
" » ct.css — Performance Hints via Injected Stylesheet Alone." Chris Coyier | Sciencx - Tuesday October 5, 2021, https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/
HARVARD
Chris Coyier | Sciencx Tuesday October 5, 2021 » ct.css — Performance Hints via Injected Stylesheet Alone., viewed 2024-03-29T09:05:14+00:00,<https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/>
VANCOUVER
Chris Coyier | Sciencx - » ct.css — Performance Hints via Injected Stylesheet Alone. [Internet]. [Accessed 2024-03-29T09:05:14+00:00]. Available from: https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/
CHICAGO
" » ct.css — Performance Hints via Injected Stylesheet Alone." Chris Coyier | Sciencx - Accessed 2024-03-29T09:05:14+00:00. https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/
IEEE
" » ct.css — Performance Hints via Injected Stylesheet Alone." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/. [Accessed: 2024-03-29T09:05:14+00:00]
rf:citation
» ct.css — Performance Hints via Injected Stylesheet Alone | Chris Coyier | Sciencx | https://www.scien.cx/2021/10/05/ct-css-performance-hints-via-injected-stylesheet-alone/ | 2024-03-29T09:05:14+00:00
https://github.com/addpipe/simple-recorderjs-demo