Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: png parameter

  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    97
    Thanks
    2
    Thanked 0 Times in 0 Posts

    png parameter

    Hello, I have seen this css rule
    Code:
    .dark .watchWrapper {
        background: url("../images/watch-wrapper-bg.png?v=1362672694")}
    what is the v parameter after .png for ?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    That is called a "get" variable. It could be doing one of a couple (or more) things here.

    Sometimes a timestamp-generated variable like that will be generated server-side when preparing the CSS that was served. In that case, the variable is ignored by the server when your browser goes to request the PNG image but your browser is fooled into believing this is a completely unique resource because the URL has changed (with passing time, each timestamp generatd by javascript or the server will necessarily be different than the previous timestamp). The reason for doing that is to keep a user's browser from showing a cached version of the image which would cause it to not update when it should (if the image is generated dynamically on the server but always uses the same file name). If they didn't give it a different URL with this throwaway variable, the browser cache might keep users from seeing what should have been an updated image. Check out this Stackoverflow thread's accepted answer to see what I mean.

    Other times, what you will see is an ID, base64 encoded information, or other reference for the server that tells it what image you are fetching. This would be done in a case where the "../images/watch-wrapper-bg.png" request is rewritten on the server to run a PHP or ASP script (or the like) which reads the variable provided and then either alters a base image (like for game stats on forum signature images you might see if you ever wander into a gaming forum) or else does some other creation, customization, or even just basic file selection based on the variable provided and then serves up that specialized image for that request. So in this case the variable would actually control the image that you receive. If you're familiar with Captcha user verification that a lot of sites do then you've seen something like this in action. Play around with this text-to-image converter for a more direct look at this type of use.

    So, in general, it probably does "something." It might be a throwaway variable that the server ignores and is only there to keep your browser happy, or it might directly affect the response the server gives.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Arbitrator (03-09-2013)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    97
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how do they prepare a css file dinamically ? can that variable be called in some way ?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by paperino00 View Post
    how do they prepare a css file dinamically ? can that variable be called in some way ?
    Using PHP, for example, you can have a dynamic CSS file created like so:
    PHP Code:
    *{margin:0;padding:0;}
    body{font-family:'arial';}
    #some_element{background-image:url('./images/some_pic.png?v=<?php
    print time();  //this inserts a server timestamp into the CSS as the value of the "v" variable
    ?>');}
    .another_element{border:2px solid #000;}
    The result of this would be something like this:
    Code:
    *{margin:0;padding:0;} 
    body{font-family:'arial';} 
    #some_element{background-image:url('./images/some_pic.png?v=1362779246');} 
    .another_element{border:2px solid #000;}
    This requires the CSS file to actually be a *.php file or else the server's settings need to be such that it treats *.css files as *.php files (which would not be the greatest idea, but it works). That will allow the server to parse the code in the file so that it generates the intended result. So we'll assume the file is really a PHP file called "style.php"

    Then, if the developer so chose, he could rewrite (or mask) the file so that a user sees the request as http://www.example.com/style.css but when the server sees any request for that page it instead serves the result of style.php. This is done with .htaccess settings, which is probably outside of the scope of your question, though.

    With regard to your second question, the variable is called any time your browser requests the image file using that v=<whatever> URL. So I'm not sure what you mean by "calling" the variable.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    You can parse a CSS file through a server side language. For example, instead of naming your file styles.css you name it styles.php and set its MIME type to “text/css”. This way you can write CSS in there that can contain PHP variables, for example.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by VIPStephan View Post
    You can parse a CSS file through a server side language. For example, instead of naming your file styles.css you name it styles.php and set its MIME type to “text/css”. This way you can write CSS in there that can contain PHP variables, for example.
    Indeed, I neglected to set the MIME type header in my example above.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •