# CSS

### Critical CSS <a href="#critical-css" id="critical-css"></a>

Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. Above-the-fold is all the content a viewer sees on page load, before scrolling.

Every kind of pages (ex: home, category, single..) has different CSS. You can find it's name by view the page source:

![](https://1645388323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MYNqsVWdjtnuDIOHong%2F-MYPSiq3QXM42kovFm2Y%2F-MYPU4VplO3HMHXtxulv%2Fcritical-css.png?alt=media\&token=8efb0b52-bf63-428d-b1df-b09e254b9e8d)

The critical CSS files are located in directory `wp-content/uploads/critical-css`

This hook helps you to insert stuffs before critical CSS or determine whether there are critical css or not.

```
//do exist or not exist, 
add_action('print_critical_css', function($css) {
	//when no exist critical: fix css before generate critical css
	if(!$css) {
		echo '<style>.gem-icon .gem-icon-half-1,body:not(.compose-mode) .gem-icon .gem-icon-half-2{opacity:0!important;}</style>';
	}
	//font , used with `font-display:optional`
	foreach(hpp_criticalcss_extract_fonts($css) as $i=>$font_url) {
		if($i<5 ) printf('<link rel="preload" as="font" href="%s" crossorigin>', $font_url);
	}
});
```

You can share the same CSS between the pages, so you don't need to generate duplicate CSS for those pages.

```
//use same critical file
add_filter('get_criticalcss_path', function($file, $uri){
	if(hpp_in_str($uri, ['/about-us/','/contact/'])) {
		return WP_CONTENT_DIR.'/uploads/critical-css/page-page.css';
	}
	return $file;
}, 10, 2);
```

To edit the content of critical CSS, you have 2 ways: by editing CSS file directly OR via hook:

```
add_filter('hpp_critical_css', function($css, $file){
	if(strpos($file, '.mobile.css')===false) {
		$css .= '.example-class{height: 100px;}';
	}
	return $css;
}, 10, 2);
```

### Lazy CSS <a href="#lazy-css" id="lazy-css"></a>

Some Inline CSS on the page can load resources such as background image, font-face. So we will extract the CSS code that contains resources & group all of them in a separate tag named `<style media="not all"` . This technical called lazy CSS, help to reduce the page load time. Now, You can modify this lazy CSS by using the code like this:

```
add_filter('hpp_lazycss', function($css) {
	// $css = str_replace('find', 'replace', $css);
	return $css;
});
```