How to write JS and CSS in the same file

This article mainly introduces the JS and CSS written in the same file in the writing method, has a certain reference value, now share to everyone, the need for friends can refer to

We often put multiple CSS or multiple JS into one to save the request, but at least two. On the MSDN blog to see the original can also be JS and CSS and in a file, then how to do? Take a look at this code first with a comment.

<!--/* Window.onload=function () {document.getElementById ("Test2"). Innerhtml= "The legendary drop of the JS tester. If you see me, that <strong>JS</strong> also takes effect "; } <!--*/  <!--#test1, #test2 {border:3px #000 solid;padding:5px;color: #123456; Background-color: #ccc;} strong{color:red;}

CSS processing will ignore the <!--, then JS is only the CSS comments/* JS * *, and JS processing when the <!--turn into/or JS of a single-line comment, a single-line comment will be the back of/* and/* and kill, but also kill the CSS, not nonsense, see examples of demonstrations.

In the online operation also through the program output a "*/*" head, or MIME does not have the browser does not work. This is the case with PHP:

<?header (' Content-type: */* ');? >

In theory, the mime of specifying a suffix on the server is a "*/*" app, but I didn't try. Write JS and CSS in the same file is particularly suitable for third-party calls, although the file is a little bigger, but can be less than half the number of requests, handsome drop

Of course, such a format must be very uncomfortable to write, but with the program to read the original already, and deal with it, so that you can keep the original file is also easy to maintain, the output file and save the request, if you want to, processing cache, with the static file almost. Here is a C #, is said to be the official drop, I am PHP, because the mechanism has not written cache is not taken out of shame, in fact, the principle is very simple, will be programmed 32 under the fix.

In fact, I am looking for a multi-CSS merge method, the synthesis of a not difficult, can be handled well the separation of the modules at the same time can be in the client cache and convenient program calls is difficult, CSS and not like JS can be called asynchronously in the client, who has a good way to introduce to me.

The legendary test
The legendary tester number one. If you see me with a border and color, that means that CSS is in effect.

Legend of the Drop JS testers. If you see me, then JS will take effect.

Use the same document: jscss.php  <link type= "text/css" rel= "stylesheet" href= "jscss.php"/><script type= "text/ JavaScript "src=" jscss.php "></script>jscss.php content  <?header (' Content-type: */* ');? >  <!--  /* Window.onload=function () {      document.getElementById ("Test2"). Innerhtml= "The legendary drop of the JS tester. If you see me, that <strong>JS</strong> also takes effect ";  }  <!--*/   <!--#test1, #test2 {border:3px #000 solid;padding:5px;color: #123456; Background-color: #ccc;} strong {color:red;}  Copyright  2006-2007 Aoao, Some rights Reserved.

above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!