Welcome to the MacNN Forums.

skalie · Oct 20, 2004, 04:51 AM

Um, before I wade in any deeper, is there anything inherently stupid to be using php variables to "style" a stylesheet?

As in....

Code:

<?php

$font_family = "Verdana, Arial, Helvetica, sans-serif";

echo<<<STYLESHEET
#text{
	font-family: $font_family;
	}
STYLESHEET;

?>

Simon Mundy · Oct 20, 2004, 05:36 AM

Not at all! It's all text in the end

skalie · Oct 20, 2004, 06:51 AM

Shame you can't put Javascript in the .css file, could do a nifty screen.width detector and auto adjust the style sheet for different resolutions.

Simon Mundy · Oct 20, 2004, 07:20 AM

Originally posted by skalie:
Shame you can't put Javascript in the .css file, could do a nifty screen.width detector and auto adjust the style sheet for different resolutions.

You don't need a CSS file for Javascript to do its magic. Think window.onload and DOM...

skalie · Oct 20, 2004, 07:32 AM

Well actually, what I'm doing now is....

Code:
<script language="javascript">
var $width = screen.width;
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"includes/css_"+$width+".php\" />");
</script>

...then making a css_640.php, css_800.php file etc. with..

Code:
<?php
// variables that change with resolution
$height = "600px";
include "css_inc.php";
?>

including all the other irrelevant to resolution stuff in the css_inc.php.

All this is vaguely satisfying, and although I'm probably re-inventing the wheel here, it's been a speedier process than trying to work out how use css without absolute positioning.

Chris O'Brien · Oct 20, 2004, 07:40 AM

To follow up from Simon, you can manipulate individual objects rather easily with the DOM, but you might not know how to manipulate actual style rules.

So anyway - here's how:

Code:
<html>
  <head>
    <title>Style Rule Manipulationy Goodness</title>
    <style>
        .something  {height: 20px; width: 100px; border: 1px solid black}
    </style>
    <script>
        function manipulateRules() {
            var css_rules = document.styleSheets[0].cssRules;
            css_rules[0].style.width = (screen.availWidth/2) + "px";
        }
    </script>
  </head>
  <body onload="manipulateRules()">
    <div class="something">hello</div>
  </body>
</html>

Obviously document.styleSheets returns an array of the style sheets and cssRules the same for the rules within those stylesheets. If you don't know what index the of the particular rule you want to manipulate is, you can loop through them all and make a comparison against the selector...

Anyway. None of that helps you with the example you provided, since you're referencing an id'd element anyway, so document.getElementById("text").style.width would work just as well.

Just thought I'd share...

Millennium · Oct 20, 2004, 09:47 AM

You can do it, but be sure to send the proper header so that your server sends it as text/css rather than text/html.

As others have noted, this is where a small snippet of JavaScript can help you immensely. Attach it to the body or window's onload event handler, and you're good to go.

Oisín · Oct 21, 2004, 12:36 AM

Originally posted by skalie:
Shame you can't put Javascript in the .css file, could do a nifty screen.width detector and auto adjust the style sheet for different resolutions.

Actually, you can put JavaScript in CSS files, although it's not much use...

Millennium · Oct 21, 2004, 09:59 AM

Originally posted by Ois�n:
Actually, you can put JavaScript in CSS files, although it's not much use...

There is no method which works in all browsers. IE/Windows and Gecko both have better methods than this of doing it, but their methods are also mutually-incompatible.

I kind of like this guy's JavaScript Event Sheets idea. It's still not the same as embedding JavaScript in CSS, but it could be extremely useful anyway.

skalie · 10:03 AM

// edit: question answered answered by Millennium in another thread

Originally posted by Millennium:
Aha; now it all becomes clear. You're not sending your CSS with the proper MIME type, and Safari is getting confused.

To fix this, add the following line of code to your PHP. It must go before any "echo" statements, but can otherwise go anywhere in the code:

Code:
header("Content-Type: text/css");

That will cause your code to be sent with the proper MIME type. You need a similar header for anything you do in PHP which does not output HTML.

// end edit
__________________________

Originally posted by Millennium:
You can do it, but be sure to send the proper header so that your server sends it as text/css rather than text/html.

Er, what do you actually mean by that? A header in the CSS file?