The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Javascript, PHP, CSS headaches

Okay first off let me just say that I am very confused on how a webpage will be rendered using a combination of these languages. What I mean is can you use a php file to generate css? Does the extension of such a file have to be default.css or should it be default.php? Will the browser know how to link to a php file with code such as,

<link rel='stylesheet' type='text/css' href='default.php'>

Aside from these questions I really need help in determining whether or not my website's css plan is possible or workable.

Here is my plan. The client connects to my website and requests a webpage.

Client connects => Is there a current session?

Yes? Link in correct css file.

No? => Is there a cookie on the client's machine?

Yes? Link in correct css file

No? Send client to dummy Javascript page that catches the screen resolution width. Send this width information to a php file.

PHP FILE : Takes the screen width information and set up the client's session as well as make cookie containing the client's screen width. Then link in the correct css file

Render the page the client requested.

My goal is to determine the client's screen width and grab the right css file that I have made specifically for that screen resolution.
Young Coder
Monday, October 23, 2006
Aside from pointing out that in the time it takes you to do all this, you could make a single layout work regardless of browser, what you are after is pretty simple.
With the correct headers sent (or without from my experience) browsers won't care about file extensions. They will however, cache urls and so if sometimes you want /css.php to do one thing and sometimes another, you're going to need to send the correct cache-prevention headers, or (simpler but messier) stick time() or something similarly dynamic on the end of the url.

Javascript detection methods generally work off screen-size rather than the actual window dimensions of the browser. What's going to happen to users who have bigger screens, but don't maximise?
G Jones
Monday, October 23, 2006
"What I mean is can you use a php file to generate css? Does the extension of such a file have to be default.css or should it be default.php?"

Browsers don't care about the file extension, they only care about the content-type header.  So you can have css.php file that executes and returns CSS code.

"Aside from these questions I really need help in determining whether or not my website's css plan is possible or workable."

I'm not sure I fully understand your plan.
Almost H. Anonymous Send private email
Monday, October 23, 2006
Well my experience with web coding is pretty limited so I am just worried about getting screwed due to inexperience.

But hey thanks for the info, now I know at least that I can have css.php that generates some css code if I want it to.
Young Coder
Monday, October 23, 2006
You're planning on separate files containing different CSS for every possible screen size? Weird.

It is more normal to have a single PHP script that generates a single chunk of CSS/HTML, with the positioning adjusted dynamically based on the target size.
Greg Send private email
Tuesday, October 24, 2006
I agree with what others have already said about your overall approach, especially, G Jones's comment about users who don' maximize. If you really want a flexible layout, learn how to do it with static CSS. At this stage in your learning, however, you're probably better off sticking with a fixed layout for the time being.

In general, as people's CSS expertise grows, I find that their stylesheets become simpler and OS/browser/resolution specific hacks tend to go away.

That said, if you really want to generate your stylesheet in PHP (and there are good reasons for doing so) the main thing is to set the content-type to text/css. Test in multiple browsers. Some will use a stylesheet that's sent as text/html, but most won't.
Tuesday, October 24, 2006
One of the purposes of css is that it should do away with many of the worries about browser dimensions because the page is flexible to the browser's settings or it is absolutely unchanging regardless of the browser's settings. Most web designers usually go with one of two layout techniques:
1) Create a layout that can cater to even the smallest of resolutions, usually 800x600, have everything with fixed dimensions
2) Create a layout that is flexible by using percentages instead of fixed pixel dimensions

Most web browsers and client settings will screw with your pages anyway, so I generally prefer the first approach to get the most consistent layouts possible. Just make sure it displays well on 800x600 (or whatever the smallest screen-size you're concerned with) and you should be fine.

Personally, I'd just use javascript to resize elements if they are an issue. But a good webpage should remain consistently good looking even with different screen/window dimensions.
Jason Send private email
Tuesday, October 24, 2006
"Most web designers usually go with one of two layout techniques:"

There is a third option, but it's only supported in Firefox 1.5+, IE 6+ and similar generation browsers. You can specify element sizes using the "em" unit of measurement (as opposed to pixels or points) and elements will be drawn relative to the browser or user specified settings.

Bigger window, font scales up porportionally. User requests smaller text, font scales down porportionally. If you need things placed to exact standards, this obviously won't help you, but in the long run, it makes the site a lot more accessable to users.

There are similar tricks, but whether to use them or not depends on your target audience; i.e., do you still have people visiting your site with Netscape 4?

"No? Send client to dummy Javascript page that catches the screen resolution width. Send this width information to a php file."

Assuming that the client is a recent generation browser, you should not need to generate a CSS file for that client on the fly. (There are some cases when you should, but those are more advanced-rare scenario cases.)

As clcr implies, it's a lot easier to just maintain one CSS file or a group of them with all of the various options and then let the JavaScript embedded in the page adjust the element when needed.

And yes, JavaScript can - on the fly - change which style is being applied.
Tuesday, October 24, 2006
I've done this. The main reason is that I had standard colours throughout the CSS. If I needed at some point to change the scheme I'd need to change a lot of the same.

So, you need to create a file called, say, style.php.

Here is the top part of mine :

// color definitions
$airblue = "#000166";
$airred  = "#660100";
$silver  = "#EBEBEB";
$darksilver  = "#707070";
$maintext = "#000000";
$standardtextsize = "11pt";
$navigationtextsize = "10pt";


input.button {
    font-size: <? echo $standardtextsize; ?>;
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-style: normal;
    background-color: #0000A0;

So you can see how the variables are emdedded.

Now insert the stylesheet :

<link rel="stylesheet" type="text/css" href="/common/style.php" media="screen">

Hope that that helps.
Barny Shergold Send private email
Friday, October 27, 2006

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz