htaccess: set and use environment variables inside your htaccess

A while ago I learned how to set a variable in my .htaccess that can later on be user in PHP:



Something that I could not figure out was how to use the defined variable inside the htaccess. While searching for CORS implementation, I ran across this post on

There there is the answer to my question, how to set and get an environment variable in htaccess:

SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1
<FilesMatch "\.woff$">
    Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

htaccess: allow access control from subdomains

When having an application running on the top domain of your site you may want to allow subdomains to make ajax requests to the top domain. If that is the case, and if you do not know which subdomain will be making the request, you should consider adding the following rule to you .htaccess file in your top domain:

?View Code APACHE
SetEnvIf Origin "^(.*\.(appcropolis|simplifysites|localhost.+)\.com)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

Render jQuery Mobile on Desktop Computers

If you designed a jQuery Mobile site that it is intended for small size screens, that does not mean that someone will never open your app from a desktop computer. Obviously, an app that was design for an actual screen size of 320 px will not look right if it is opened on a desktop computer.

To prevent the app from looking awful, we can apply CSS to restrict the jQuery Mobile pages from rendering at a width higher that, let’s say, 480 px.

@media only screen and (min-width : 480px) {
	div[data-role="page"] > *[data-role="header"],
	div[data-role="page"] > *[data-role="footer"] {
	    width: 480px !important;
        left: 50%;
        margin-left: -240px;
	div[data-role="page"] {
	    width: 480px !important;
        left: -240px !important;
        margin-left: 50%;
	/* add your favorite image to the background */
	body {
		background-image: url('my-favorite-background.jpg');
		background-attachment: fixed;

Setting Up The Default Values Of The jQueryMobile Preloader

Here is a quick example that shows how to setup the default values of the jQueryMobile preloader:

$(document).on("mobileinit", function () {
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = false;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";