Real-time switching of CSS styles for web pages

Switch CSS styles in real time
Websites built with W3C standards can theoretically achieve complete separation of performance and structure. For example, you can completely change the skin (performance, CSS) without moving the skeleton (structure, XHMTL) and muscles (behavior, Javascript).

Of course, before changing the skin, you need to build your website according to W3C standards and prepare two sets of CSS for it with different performance. "Changing the skin" is essentially "changing the CSS". All we have to do is use some method to let the browser load another set of CSS and re-render the page. There are many methods, and I will introduce the three most common ones.

Method 1: Do nothing

? Do nothing? Well, this... to be precise: just do it a little bit (do you really think there is such a good thing...).

Suppose we have two sets of CSS, enclosed in two different files: a.css and b.css. Then add the following two lines of XHTML code between and

Then open this page with your Firefox, select View-> Page Style in the menu bar, you should be able to see The following "scenery":

It's that simple, now you can use Firefox to "reskin" it. IE? IE doesn't have this function...MS is just so stupid. W3C "explicitly recommends" that browsers are required to provide users with the power to choose their own style sheets, but it doesn't do that. Fortunately, this matter is not too complicated, so let's do it for you.

[separator]

Method 2: Javascript

Based on method 1, you can use the DOM method of Javascript to access the link object, and then set the unnecessary CSS to "disabled", and the remaining CSS will be Will be used by the browser to render the page. The script is as follows, please pay attention to the comments:

Then call this function at the appropriate place, take this page as an example, add the following two buttons:

The advantage of using Javascript is convenience, It is fast and simple, but its shortcomings are also obvious: it is difficult to switch the CSS of the entire site and can only be limited to the current page. In order to remember the user's choice, a feasible solution is to use cookies. But even if cookies are used, more articles need to be written on issues such as when to load CSS and what to do if the user does not have Javascript support. So it is better to use the following method-

Method 3: Server-side script

There is no doubt that the best CSS switcher should be developed using server-side scripts (PHP, ASP, JSP, etc.). The benefits of this are obvious: direct, efficient, good compatibility, can remember user selections, and can even combine different CSS to achieve quite complex "skin" switching.

I will use PHP as an example here. It will be similar in other languages, so it will not be any difficult for ordinary developers.

The basic idea is this: the user selects a "skin" and records the user's choice in a cookie (the same goes for the database, but the system overhead will be higher). When the user visits any page on the website, the user's choice is recorded in a cookie. Read the previous user's selection from the cookie (or database) and load the corresponding CSS file (here again, take the a.css and b.css mentioned in method 1 as an example).

Create a file named switcher.php with the following content:

This script first reads the query data, and then records the value of the parameter style. Enter the cookie and finally return to the previous page. Next we can create two links for switching styles and place them on appropriate pages, such as the homepage or user management backend (note that site.com is replaced with your domain name):

Theme A
Theme B　

Click on any link, corresponding will record "a" or "b" into the cookie, and then a script is needed to read the cookie value and output XHTML to introduce the corresponding CSS:

title="Currently selected theme" href=".css" />

Every page that needs to switch styles must add this code, so directly Just add it to the header file of the website. Of course, you can modify this script according to your own needs, but the general idea should remain the same.

title="Theme A" href="a. css" />