Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

How to prevent cache issue with Images, CSS and Java scripts, a better aproach

Generally when we update images, CSS or java script (.js) files on server, browser still shows old files. This is because in first request, browser download all images, CSS and .js files. But on subsequent requests, browser load images, CSS and .js files from its cache. Here is the solution which you might found on most of blogs i.e. add a DateTime.Now.Ticks as parameter after file name like this:-
<img src='PTCL-3.jpg?websiteversion=<%=DateTime.Now.Ticks.ToString()%>' alt="Sample Image" />

This will solve your problem and you will always get updated images. But the problem with this approach is that your images, CSS and java script will be downloaded for every request which will slowdown your site's performance.

Now, here is how you can solve both the problems, Add a key in appSettings section of your wen.config file like this:-
<appSettings>
    <add key="WebsiteVersion" value="1"/>
</appSettings>

And add the parameter to your images, CSS and java script files like this:-
<img src='PTCL-3.jpg?websiteversion=<%=System.Configuration.ConfigurationSettings.AppSettings["WebsiteVersion"] %>' alt="Sample Image" />

Now whenever you change any Image, CSS or .js file you have to update the WebsiteVerion value in your web.config file.

Do share your comments, happy coding !!!
Posted by Zeeshan Umar 2 comments
Labels: , , ,

How to create a single border table with help of CSS

When I was new with CSS, I found it very difficult to create a single bordered excel like tables. Most of the time my tables look like this:-



So I learned a trick through which I can get a smooth 1px border quite easily. Here is the CSS which I use to create good looking tables.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        table, td, th
        {
            border: 1px solid #A0A0A0; /*Border Color*/
            border-collapse: collapse; 
        }
        th
        {
            background-color: #0875CC;/*Background color of Header*/
            color: white;/*Font Color of Header*/
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="4">
            <tr>
                <th>
                    First Name
                </th>
                <th>
                    Last Name
                </th>
                <th>
                    Age
                </th>
            </tr>
            <tr>
                <td>Zeeshan</td>
                <td>Umar</td>
                <td>29</td>
            </tr>
            <tr>
                <td>Hassan</td>
                <td>Hamayoun</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Muhamamd</td>
                <td>Arshad</td>
                <td>49</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Here is how above code's output looks like on browser:-


First Name
Last Name
Age
Zeeshan Umar 29
Hassan Hamayoun 25
Muhamamd Arshad 49

Feel free to share your comments. Happy Coding !!!
Posted by Zeeshan Umar 1 comments
Labels:
Subscribe to: Posts (Atom)