CMS MADE SIMPLE FORGE

CMS Made Simple Core

 

[#12852] function.cms_stylesheet.php preload is useless this way and may be lower on some browser

avatar
Created By: Philippe Thomas (filto)
Date Submitted: Sat Sep 12 23:57:42 -0400 2026

Assigned To: Fernando Morgado (JoMorg)
Version: 2.2.24
CMSMS Version: 2.2.24
Severity: Minor
Resolution: Works For Me
State: Open
Summary:
function.cms_stylesheet.php preload is useless this way and may be lower on some browser
Detailed Description:
cms_stylesheet preload option generates these two lines in succession
<link rel="preload" href="style.css" as="style" media="screen"
onload="this.onload=null;this.rel='stylesheet'" />
<link rel="stylesheet" type="text/css" href="style.css.css" media="screen" />

in this case, preloading is useless and may be lower on some browser you forgot
noscript tag !

IMPORTANT : Inform users that preload css is used ONLY for For NON CRITAL CSS in
head
<link rel="preload" href="non_critical_style.css" as="style" media="screen"
type="text/css" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="non_critical_style.css" media="screen"
type="text/css">
</noscript>

For NON cirtical css used by js function when the page is loaded you can put it
at Bottom page before </body>

note : type="text/css" must be present in preloaded link
note : no / at end of link tag : no Trailing slash on void elements like html5
tags: link, base, img...

L 347 to 366
if( isset($params['preload']) && cms_to_bool($params['preload']) ) {
	if (!empty($media_query)) {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
media="'.$media_query.'" onload="this.onload=null;this.rel=\'stylesheet\'"
/>'."\n";
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_query.'" />'."\n";
	} elseif (!empty($media_type)) {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
media="'.$media_type.'" onload="this.onload=null;this.rel=\'stylesheet\'"
/>'."\n";
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_type.'" />'."\n";
	} else {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
onload="this.onload=null;this.rel=\'stylesheet\'" />'."\n";
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" />'."\n";
	}
} else {
	if (!empty($media_query)) {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_query.'" />'."\n";
	} elseif (!empty($media_type)) {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_type.'" />'."\n";
	} else {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" />'."\n";
	}
}

### correction 

if( isset($params['preload']) && cms_to_bool($params['preload']) ) {
	if (!empty($media_query)) {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
type="text/css" media="'.$media_query.'"
onload="this.onload=null;this.rel=\'stylesheet\'">'."\n";
$stylesheet .= '<noscript><link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_query.'"></noscript>'."\n";
	} elseif (!empty($media_type)) {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
type="text/css" media="'.$media_type.'"
onload="this.onload=null;this.rel=\'stylesheet\'">'."\n";
$stylesheet .= '<noscript><link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_type.'"></noscript>'."\n";
	} else {
$stylesheet .= '<link rel="preload" href="'.$root_url.$filename.'" as="style"
type="text/css" onload="this.onload=null;this.rel=\'stylesheet\'">'."\n";
$stylesheet .= '<noscript><link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'"></noscript>'."\n";
	}
} else {
	if (!empty($media_query)) {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_query.'">'."\n";
	} elseif (!empty($media_type)) {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'" media="'.$media_type.'">'."\n";
	} else {
$stylesheet .= '<link rel="stylesheet" type="text/css"
href="'.$root_url.$filename.'">'."\n";
	}
}

#### shorter version

$css_media = '';
if(!empty($media_query)) { $css_media =' media="'.$media_query.'"';}
elseif(!empty($media_type)) { $css_media =' media="'.$media_type.'"';}

$stylesheet = '<link'.$css_media .' href="'.$root_url.$filename.'"
type="text/css"';
        
if( isset($params['preload']) && cms_to_bool($params['preload']) ) {	
$stylesheet .= ' rel="preload" as="style"
onload="this.onload=null;this.rel=\'stylesheet\'">'."\n";
$stylesheet .='<noscript><link'.$css_media.' rel="stylesheet"
href="'.$root_url.$filename.'" type="text/css"></noscript>'."\n";
} else {
	$stylesheet .= ' rel="stylesheet">'."\n";
}

 


History

Comments
avatar
Date: 2026-09-21 01:13
Posted By: Philippe Thomas (filto)

just for information

with inline option active
and  minify option active
if user use Content-Security-Policy with hash for style-src

automatically disables minification for admin ->  output 2 various stylesheet
(for easier development and debugging.)

one for front-end (user is logged in - not minified version )
one for front-end (user NOT logged in - minified version)

then Content-Security-Policy require 2 various hash for style-src instead of
just one.
      
Updates

Updated: 2026-09-21 01:13
assigned_to_id: 17679 => 12532

Updated: 2026-09-15 04:17
assigned_to_id: 12532 => 17679

Updated: 2026-09-13 21:31
resolution_id: => 11