Reload Cached CSS / JS Files in Symfony

An elegant way to force browsers to reload cached CSS / JS files in Symfony 1.4

settings.yml
Add Asset, CSSCache, JSCache to the standard_helpers row:

standard_helpers: [ Partial, Cache, I18N, Date, Asset, CSSCache, JSCache ]

lib/helper/CSSCacheHelper.php

function include_versioned_stylesheets()
{
  $response = sfContext::getInstance()->getResponse();
  sfConfig::set('symfony.asset.stylesheets_included', true);
  $html = '';
  foreach ($response->getStylesheets() as $file => $options) {
    $filepath = sfConfig::get('sf_web_dir') . '/' .  stylesheet_path($file);
    if(file_exists($filepath)) {
      $file .= '?v=' . filectime($filepath);
    }
    $html .= stylesheet_tag($file, $options);
  }
  echo $html;
}

lib/helper/JSCacheHelper.php

function include_versioned_javascripts()
{
  $response = sfContext::getInstance()->getResponse();
  sfConfig::set('symfony.asset.javascripts_included', true);
  $html = '';
  foreach ($response->getJavascripts() as $file => $options) {
    $filepath = sfConfig::get('sf_web_dir') . '/' .  javascript_path($file);
    if(file_exists($filepath)) {
      $file .= '?v=' . filectime($filepath);
    }
    $html .= javascript_include_tag($file, $options);
  }
  echo $html;
}

apps/xxx/templates/layout.php
Use the include_versioned_stylesheets() and include_versioned_javascripts() functions to load css and js files, instead of the default include_stylesheets() and include_javascripts() functions.

Table border-radius With CSS3

table tr:first-child td:first-child {
  border-top-left-radius: 5px;
}

table tr:first-child td:last-child {
  border-top-right-radius: 5px;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

Layout Jumps Left If Vertical Scrollbar Appears - HOW TO FIX IN CSS

Looks good in IE (5.5 <= 8 beta), FF (2,3), Chrome and Opera.

html {
  overflow-y: scroll;
}

Remove Yellow Border Hover from Input Boxes in Chrome

input[type="text"], input[type="password"], textarea, select { 
  outline: none;
}

Correct the Icon Position of sfAdminThemejRollerPlugin Buttons in IE, Chrome, Safari

Use this code in the layout after the CSS definitions....

Remove Dotted Outline On Links and Buttons

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 1px dotted transparent;
}
* {
    outline: none;
}

Text-Overflow in Table Cell

    

        


            Really really long text to trim...

        
    

Vertical Align in DIV

The container div must have these CSS properties:

display: table-cell;
vertical-align: middle;

and the child elements (img, div, span) must have only the vertical-align: middle; property.

Note: The container div mustn't have a float value!