Only one single file

CSS and JavaScript in only one single file

by Lucas Krause

HTML

<link rel="stylesheet" href="http://futape.de/files/qWmGMSFgaxpy2JLKF5Mg.css" />
<script type="text/javascript" src="http://futape.de/files/qWmGMSFgaxpy2JLKF5Mg.css"></script>

<div></div>

<table>
    <thead>
        <tr>
            <th>Where</th>
            <th>Term</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>CSS part: Inside of style rules</td>
            <td>//;/*<br />/*/</td>
        </tr>
        <tr>
            <td>CSS part: Outside of style rules</td>
            <td>//{}/*<br />/*/</td>
        </tr>
        <tr>
            <td>JavaScript part</td>
            <td>//{}/*<p>(or use inline comments (//))</p></td>
        </tr>
    </tbody>
</table>

CSS

table {
    margin-top:50px;
}
tbody tr:nth-child(odd) {
    background-color:#EEE;
}

JavaScript

/**
 * CSS and JavaScript - two parts of a website and of two different types merged in only one single file.
 * In the Result panel you can see the CSS part's result (red square) and by taking a look on you browser's console you will see that also the JavaScript part works well.
 * Benefits of using this method is that you have to make only one request to the server.
 * Unfortunately there are some disadvantage, too.
 * + All comments must be followed by specific terms. See table in the Result panel.
 * + The file will be transferred with a wrong MIME type.
 *
 * Have a look on the loaded resource (http://futape.de/files/qWmGMSFgaxpy2JLKF5Mg.css) as example.
 * Try to change the resource's extension to "js" in the HTML panel.
 *
 * Retweet or reply: https://twitter.com/LucasKrause_/status/322408778794401792
 * Moreover feel free to fork the fiddle. :-)
 */