Changing a stylesheet on the fly and saving it with PHP

[Lucrezia]

Hello all!
I am using some javascript code to change some classes of an external stylesheet on the fly. Is there any way (a variable perhaps?) to access the changed stylesheet so that I store it afterwards with php, or should I rebuild it again (according to the options of the user) with my php code in order to save it?

Thanks in advance :)

[stymiee]

Save the chosen stylesheet in a cookie. Then PHP can spit out the chosen stylesheet for all new page loads.

[digital-ether]

Hello all!
I am using some javascript code to change some classes of an external stylesheet on the fly. Is there any way (a variable perhaps?) to access the changed stylesheet so that I store it afterwards with php, or should I rebuild it again (according to the options of the user) with my php code in order to save it?

Thanks in advance :)

Do you mean you're changing the DOM representation of the Style Sheet?

IE has a (string) cssText property of the Stylesheet Object. FF/NN has a cssText property of each StyleSheet Object's cssRules (Array) Property.

eg:

function myCssText(StyleSheet) {
	var text = '';
	if (typeof (StyleSheet.cssText) == 'string') {
		return StyleSheet.cssText;
	} else {
		for(var i = 0; i < StyleSheet.cssRules.length; i++) {
			text += StyleSheet.cssRules[i].cssText;
		}
	}
	return text;
}

// eg
alert(myCssText(document.styleSheets[0]));

[Lucrezia]

Do you mean you're changing the DOM representation of the Style Sheet?

IE has a (string) cssText property of the Stylesheet Object. FF/NN has a cssText property of each StyleSheet Object's cssRules (Array) Property.

eg:

function myCssText(StyleSheet) {
	var text = '';
	if (typeof (StyleSheet.cssText) == 'string') {
		return StyleSheet.cssText;
	} else {
		for(var i = 0; i < StyleSheet.cssRules.length; i++) {
			text += StyleSheet.cssRules[i].cssText;
		}
	}
	return text;
}

// eg
alert(myCssText(document.styleSheets[0]));

Thank you so much!

[digital-ether]

you're most welcome...

[Lucrezia]

I just finished my code for manipulating the css, and started on the Save part.
Scaringly enough I noticed that only IE (!) got the css right (it only capitalized the css property names, which was easily overcome with a .toLowerCase() ).
Mozilla firefox (so far I've tested with Mozilla, Safari and IE7) got it so wrong that it would probably work only in itself, adding proprietary css properties all over the place, removing others etc!!
Safari also changed it a bit, but its ok, nothing extreme there.
Is there a way I can easily overcome this with firefox, or the only way is to manipulate the string in my php code after grabbing it?

Thanks in advance..

[digital-ether]

You mean like all the moz-example: blabla; crap that mozilla adds to it?
I'd just have a String.replace() anything that starts with moz- so you don't save it.

Is there any common property to what safari adds that can be used to remove it with a regular expression?

Could you post some examples from your tests?

[Lucrezia]

Yes, I meant the -moz- stuff but not only them, they are the least nagging things about it.
Mozilla changes the separate definitions of for example background-color, background-image, bakground-repeat etc making them into one (background) which in my case is undesirable, as there will be problems when my script tries to edit the saved css again (same goes with border afaik but luckily not with font). Safari does the opposite, breaking border styles into border-left-style,border-right-style etc.
I can think of a workaround for these, but I've noticed that firefox removes some css properties, and that's what scares me the most. It converted this class:

.transparent
{
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

to this:

.transparent
{
    opacity: 0.6;
}

and ok, this particular class is not important, it will be in a different stylesheet in the future anyways. But it kinda scares me to see ff removing css rules...
The good thing is that this (.transparent) is the only class in the stylesheet which contains browser-specific css rules, so hopefully it won't do it to the other classes as well...

[Lucrezia]

I wrote down all those browser pecularities that I noticed regarding the css.
I'm posting them here, in case they help somebody and in case somebody can help me.

Mozilla firefox for Windows
-Adds proprietary css properties (-moz-something)
-Converts background-image:, background-repeat: etc into background:
-Converts hex color values into RGB ones
-Removes CSS comments
-Removes the properties filter: and -moz-opacity:

Safari for Windows
-Converts hex color values into RGB ones
-Breaks background-position into background-position-x/y (which firefox does not support!!)
-Adds proprietary css properties (-webkit-something)
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Removes quotes from fonts with blanks in their names (in property font-family).
-Removes CSS comments
-Breaks overflow into overflow-x/y
-Breaks border-something into border-top/left/bottom/right-something
-Removes the properties filter: and -moz-opacity:

Opera for Windows
-Adds background-image/repeat/attachment/position-x/position-y even if they are not defined
-Breaks padding and margin into margin/padding-top/left/right/bottom
-Converts single quotes to double quotes from fonts with blanks in their names (in property font-family)
-Breaks border-something into border-top/left/bottom/right-something
-Removes CSS comments
-Converts relative to absolute URLs
-Removes the properties filter: and -moz-opacity:
-Removes the ; characters from the last css rule

IE for Windows
-Capitalizes the css property names
-Breaks padding into padding-top/left/right/bottom
-Removes the ; characters from the last css rule
-Converts border-width, border-style, border-color to border-left/top/bottom/right

The pecularities I have marked in red are a problem for my script :(

[MidiMagic]

Mozilla (FF and NS) REQUIRES all style properties to be in the correct case for the DOM and Doctype used.

IE often allows incorrect case in styles and tags.

You can't expect to use internal representations of things, because they are proprietary.

[Lucrezia]

Mozilla (FF and NS) REQUIRES all style properties to be in the correct case for the DOM and Doctype used.

IE often allows incorrect case in styles and tags.

You can't expect to use internal representations of things, because they are proprietary.

Well, I have to :(
I just have to make a function that takes care of all this stuff. I hope its not too hard :/

[MidiMagic]

Actually, if you use the cases defined in the DOM, it should always work.

[Lucrezia]

What do you mean?

[MidiMagic]

I mean that you should find out how the Document Object Module (DOM) you are using defines each tag, property, style, and parameter, especially with respect to how the DOM uses uppercase and lowercase in each tag, property, style, and parameter. Then you should type in those tags, properties, styles, and parameters exactly as the DOM defines them.

The days of mixing up uppercase and lowercase are GONE.