Tutoriels sur Joomla et la création de site

Le Framework Gantry est capable de charger différents fichiers CSS selon le navigateur et le système d'exploitation qui est en train de visionner le template. Cela permet un contrôle complet sur la façon dont un site est affiché même au plus pointilleux des navigateurs !

Chaque fichier CSS peut être personnalisé pour différentes combinaisons de navigateurs et de systèmes d'exploitation. Ceci est pratique pour cibler les problèmes de navigateur spécifiques, comme la compatibilité IE6.
Chaque fichier est automatiquement chargé par le framework en fonction du navigateur / système d'exploitation qui consulte le template.

Comment ça fonctionne

Gantry cherche des noms de fichiers basés sur la mini-légende suivante :

• file - nom de base de css
• browser - navigateur [firefox, chrome, safari, opera, iphone (works for both iphone/ipod), ipad, android, unknown]
• engine - moteur [trident, gecko, webkit, presto, unknown]
• longver - la version longue réelle du navigateur (example, IE => 9.0, Safari 5 => 5.0.4, Firefox 5 => 5.0.0.20)
• shortver - la version principale du navigateur (Par exemple, si je fais tourner Safari 5.0.4 ce sera 5,  si je fais tourner IE 9.0, ce sera 9)
• platform - [iphone (compte pour les deux iphone/ipod), ipad, android, mobile, win, mac, linux, unknown]

Combinaisons possibles

• file.css
• file-browser.css
• file-engine.css
• file-platform.css
• file-browser-platform.css
• file-browsershortver.css [pas d'espace entre les deux]
• file-browserlongver.css
• file-browsershortver-platform.css
• file-browserlongver-platform.css

Usage dans le Monde Réel

Le contrôle spécifique par navigateur fonctionne uniquement pour les fichiers CSS. Pour que Gantry recherche un fichier spécifique selon votre navigateur, il doit y avoir une référence au fichier CSS de base utilisant $gantry->addStyle(); ou le fichier CSS issu de la méthode $gantry->addLess();. Dans les templates d'avant -Gantry 4, il y avait toujours une référence pour charger template.css vous pouviez donc utiliser template-ie8.css pour cibler IE8 ou template-chrome-win.css si vous avez besoin de cibler un fichier chrome sur windows .

Dans les templates Gantry 4 il y a un cas particulier qui permet à un fichier CSS personnalisé d'être manuellement créé: [TEMPLATE]/css/[TEMPLATE]-custom.css. Ce fichier, s'il est trouvé, sera automatiquement ajouté. Vous pouvez également utiliser les options de navigateur sur ce fichier, par exemple[TEMPLATE]/css/[TEMPLATE]-custom-trident.css.

Example dans le Monde Réel

Dans le  template gantry default  il existe un fichier global.less qui est compilé et sorti vers un fichier master.css . Si vous utilisiez Chrome v21 sur Mac, gantry recherchera automatiquement les fichiers suivants dans votre dossier [TEMPLATE]/css/ :

• master.css
• master-chrome.css
• master-mac.css
• master-webkit.css
• master-chrome-mac.css
• master-chrome21.css
• master-chrome21.0.1180.82.css
• master-chrome21-mac.css
• master-chrome21.0.1180.82-mac.css