I was working with someone on coding some XSLT processing in WordPress earlier today, and for some reason it led me to think about something that had never really occurred to me before:
<link rel="stylesheet" href="mycss.php">I know there are a bunch of tools out there for templating CSS and all that jazz, and I’ve used them, and I don’t really like them — they require more infrastructure to the dev environment for far less gain than they cost (in terms of packages to install, stuff to maintain, compatibility issues, headaches, etc.).
So, I did this little thing:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>
var thesize='IsLarge';
var iw=window.innerWidth;
if(window.matchMedia("(max-width:800px)").matches)
thesize="IsSmall";
var lel=document.createElement("link");
lel.rel="stylesheet";
lel.href="mycss.php?ts=" + thesize + "&iw=" + iw;
var h=document.getElementsByTagName("head");
h[0].appendChild(lel);
</script>
</head>
<body>
<div class="mystyle">
This is the mystyle block.
</div>
</body>
</html>
And put this in mycss.php:
<?php
header('Content-Type: text/css; charset=utf-8');
$c='yellow';
if($_GET['ts']=='IsLarge')
$c='green';
else if($_GET['ts']=='IsSmall')
$c='red';
$iw=$_GET['iw'];
$boxw=(int)($iw) - 100;
$boxw=(string)($boxw) . 'px';
echo ".mystyle {background-color:$c;height:400px;width:$boxw;}";
?>
And that did exactly what hoped — sent the result of the client side media query as well a the innerWidth property value of the browser window to the server, and then I could use that information to conditionally produce the styling. A big value in that, I think, is that it allows the use of PHP variables and constants for dynamically generating things that don’t allow for CSS variables, e.g.,
@media screen and (max-width: 621px)Which you could code as something like:
echo "@media screen and (max-width: $myCustomWidth)";Even if you don’t like the idea of generating CSS on the fly (why not? load time? are you using a CMS like WordPress? Is one more small PHP script execution really going to matter?), the technique could be used for development, for adjusting things until you get it the way you want, then just hit the “mycss.php” (or whatever) file directly in your browser to emit the CSS to put in a style.css (or whatever) file. For instance, if I invoke my example with this:
http://localhost/dyncss/mycss.php?ts=IsLarge&iw=672Then I get this returned to the browser:
.mystyle {background-color:green;height:400px;width:572px;}If I’d written the PHP file to generate responsive CSS, then I may not even have needed the GET query args, though I’d probably use the iw one while developing to get it where I wanted. I could also write the GET args to a <div> or alert, or even invoke the mycss.php elsewhere in the same page with the same args and dump the response into a <div>, or log it to the console, to get that iw value exactly at the point I really liked the way the thing looked/behaved.
I’m just thinking out loud, and wondering to myself why this didn’t occur to me YEARS ago. *sigh*