Tag: css

I am trying to create an image editor using the ‘transform: matrix’ and ‘filter’ CSS properties. The ‘transform: matrix’ works fine if the ‘filter’ CSS property is not used, but as soon as I apply the ‘filter’ property the image begins to blur. I need to be able to set the image height.

Below is some html code to see how the same image blurs with different CSS configurations (images one and three are blurred, the second has proper sharpness). In some cases it is very subtle but there is definitely a change in image sharpness. It just seems the ‘transform: matrix’ and ‘filter’ properties do not play well together in this case.

<div>
    <img height="300" src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="filter:brightness(100%);transform: matrix(2, 0, 0, 2, 26.25, 0);"/>
</div>
    <div>
<img height="300" src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="transform: matrix(2, 0, 0, 2, 26.25, 0);"/>
    </div>
<div>
    <img src="https://lh4.googleusercontent.com/-_ny-la5QPxU/UrJIT6wsSbI/AAAAAAAAuMQ/YD1FR1SfVWw/w571-h857-no/IMG_1646.JPG" style="filter:brightness(100%);transform: matrix(2, 0, 0, 2, 26.25, 45.3125);height:300px;"/>
</div>

This see how this code behaves in Firefox, copy the code above and paste into the body of this online editor at W3Schools.

A bug report was submitted to Mozilla.

So you update the CSS and javascript for your website frequently, but most of your website visitors are reporting not seeing your latest style changes?  Is this a caching issue in their browser?  Can I force client browsers to pull the latest version of CSS or javascript files when I update them?

The answer is yes, this is probably a caching issue, but it is easily resolved.  When you reference you CSS or other files like javascript for instance in your html like so:

<link rel="stylesheet" type="text/css" href="lightbox.css" media="all" />

…a web browser accessing the webpage normally caches a copy of the file so subsequent visits to the page does not require the browser to download the file again unnecessarily.  This can be a good thing most of the time since you want to keep bandwidth usage to a minimum.  If the CSS hasn’t changed since the website visitor last viewed the page then there is no reason to force the browser to download the same file content over and over.

Forcing a refresh

But how do you tell a web browser to grab a new version of the CSS script after you make an update to it?  Yes you could rename the CSS file each time you update it, but that is silly.  Not only would you need to ensure you update all of the references to the script in your html, but it just isn’t necessary.  Simply add a querystring element to the file name in the html reference like so:

<link rel="stylesheet" type="text/css" href="lightbox.css?v=2" media="all" />

Here I added a ‘?v=2’ string to the end of the file name but it can be a datestamp or whatever you want basically.  This is the equivalent to changing the the file name, without the need to change the physical file name. The web browser just interprets it as this script (the lightbox.css in this case) as needing to process the v=2 you are passing through the querystring.  Since your CSS isn’t actually doing anything with the query values the script doesn’t care if the querystring is present.  The only thing that matters is the browser thinks something is different.

So for instance, each time you update a .css or .js script you could change the querystring to increment like v=3, v=4, etc.  This also allows you to update the scripts you have on your production website and see the changes (by performing a shift+reload on your browser) while silently keeping the changes from showing up for your other visitors until you change or add the querystring value; since most browsers will cache the CSS file your site visitors would not notice the change unless until you update the querystring.

Additional usage

There you go.  Now you know how to force client browsers to download the latest versions of your included scripts when you make an update.  Some Content Management Systems allow inline editing of CSS (such as the Joomla CMS).  This would allow you to build a function into the CMS that appends the latest date stamp of the CSS script to a querystring referencing the CSS file in your site template.  This may not be something you would want in all cases, but it would be a case for dynamically updating your site html for your site vistors when you make an update to the CSS.

Below is the html and CSS code to map an image. IE is a pain in the butt about letting us set the height of the link block without an image. So I am forcing the issue by added a blank image to the links. The image defines the height of the link area (which was just removed from the css). Make sure the links use a target of parent so that the links will leave the iframe wrapper (if you put this in an iframe, as I have below).

<style type="text/css">
.swine_flu_img { position: relative; width: 151px; height: 141px; background-image: url(http://pgale.web.unc.edu/?attachment_id=315); background-repeat: no-repeat; }
.link-1-Top { top: 34px; }
.link-2-Top { top: 53px; }
.link-3-Top { top: 72px; }
.link-4-Top { top: 90px; }
.linkBase { position: absolute; left: 20px; width: 110px; }
.linkHover:hover { opacity:0.2;filter:alpha(opacity=20); background-color: #fff; border: 1px dotted #fff; }
</style>
<div class="swine_flu_img">
<a class="linkHover linkBase link-1-Top" href="http://www.sph.unc.edu/swineflu#nc" title="N.C. Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-2-Top" href="http://www.sph.unc.edu/swineflu#unc" title="UNC Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-3-Top" href="http://www.sph.unc.edu/swineflu#school" title="School Info" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
<a class="linkHover linkBase link-4-Top" href="http://www.sph.unc.edu/swineflu#news" title="In the News" target="_parent"><img src="http://www.sph.unc.edu/images/blank.png" height="14px" border="0"></a>
</div>