Can we have visualforce bindings inside static resource CSS, i need certain params to be dynamic and do not want to have the Big length of CSS in my VF code, instead i am hoping i can use the visualforce bindings directly in my css static resource file like below
<apex:stylesheet value="{!URLFOR($Resource.Test, 'Asset/bootstrap.min.css')}" />
This is inside static resource
.header-navbar-dark #header-navbar {
background-color: **{!oSitesetting.sHeadercolor}**;
-webkit-box-shadow: none;
box-shadow: none
}
Net result during output when i check the chrome console is that my visualforce bindings are not accounted and the background-color attribute above is escaped, is there any syntax i am missing?
Best Answer
You can't do that with Static Resources but you can achieve dynamic CSS binding with a Visualforce page as external CSS file.
Visualforce page (
apex:page
) has a content type (contentType
) property where you can specify the content type of the file. That means you can render a Visualforce page in different MIME types like JavaScript HTML and CSS etc.To do that you have to use
text/css
as contentType of the Visualforce page as below.Visualforce as external CSS file
Visualforce Page where the above file is referenced as CSS file