Preferred Platform:

Did you know you can create and save your own custom presets using the built-in Gantry Presets Saver? Find out more...

Home DocumentationJoomlaAdvancedPer-Browser Specific Control

Per-Browser Specific Control

The Gantry Framework has the ability to load different css files based upon which browser and operating system is viewing the template. This allows complete control over how a site is displayed to even the pickiest browser!

Every CSS file can be customized for different browser and operating system combinations with the Gantry Framework. This is handy for targeting specific browser issues, such as IE6 compatibility. Each file is automatically loaded by the framework depending on which browser/operating system is viewing the template.

How It Works

Gantry looks for filenames based on the following mini-legend:

  • file - basename of css
  • browser - browser name (could be: ie, firefox, chrome, safari, opera, iphone (works for both iphone/ipod), ipad, android, unknown)
  • longver - the real long version of the browser (example, IE => 6.0, Safari4 => 4.0.4, Firefox 2 => 2.0.0.20)
  • shortver - the major version of the browser (example, if i'm running Safari 4.0.4 would be 4, if i'm running IE 6.0, would be 6)
  • platform - platform where the browser is running on (could be: iphone (worths for both iphone/ipod), ipad, android, mobile, win, mac, linux, unknown)

Possible Combinations

  • file.css
  • file-browser.css
  • file-platform.css
  • file-browser-platform.css
  • file-browsershortver.css [no space between the two]
  • file-browserlongver.css
  • file-browsershortver-platform.css
  • file-browserlongver-platform.css

Real world uses include the standard template-ie6.css as well as as specific fix for chrome on windows that would require a template-chrome-win.css file.