[Tutoriel] Utiliser les CSS en tant que document MODx

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[davidm]

Je viens de poster sur les forums english cette astuce,
[Tip] Making "CSS as document" work with IE

Et le tutoriel original :
http://modxcms.com/forums/index.php/topic,5258.0.html

Histoire de ne pas oublier de le traduire, je post maintenant mais je prendrai le temps de traduire plus tard, là pas le temps...

[davidm]

Maintenant que tous les problèmes liés à l'utilisation de feuille de style dynamique (autrement dit, créer vos CSS en tant que documents MODx), je vais pouvoir détailler pour  vous la procédure à suivre

Pour commencer, l'utilisation de cette méthode suppose que les URL simples sont activées, et que "Chemin d'accès pour les alias simples" est sur "Oui".


1. Dans MODx, créer un dossier pour ranger vos feuilles de style (c'est plus propre). Je partirai de l'hypothèse pour cet exemple que le dossier s'appelle "css".


2. Dans ce dossier, pour créer une feuille de style css, attention il faut sélectionner Modèle utilisé => (blank) et aller dans Réglages de la page > Type de Contenu et sélectionner "text/css"


3. Insérer vos styles, ou alors si vous voulez tirer partie des chunks, insérez des chunks contenant des styles (par exemple un chunk "mise_en_page", un chunk "style inline", etc...). Ensuite, ne pas oublier cette étape : saisissez l'alias de votre feuille de style en ajoutant .css à la fin, et sauvegardez.


4. Modifier vos gabarits :

Traditionnellement, un gabarit comprend un appel à la feuille de style s'appuyant sur la méthode "link", et un chemin d'accès sur le serveur :

Code:

<link rel="stylesheet" href="assets/templates/default/site.css" type="text/css" media="screen" />

Nous allons modifier la méthode, et pour assurer la compatibilité avec Internet Explorer, utiliser une règle @import  (la méthode link avec une feuille de style en tant que document MODx ne marche qu'avec FF et Opera) et aussi nous allons utiliser l'alias de la feuille de style (et non la syntaxe [~xx~] ou xx est l'ID de la feuille de style, cela ne marche pas avec IE) :

Code:

<style type="text/css">
@import url('css/ma_feuille_de_style.css');
</style>

Sauvegarder votre gabarit.


5. Modifier votre .htaccess : Pour vous assurer de la compatilibité de cette méthode avec IE, vous devez modifier votre .htaccess et décommenter les lignes suivantes :

Code:

BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

Et voilà !
Vous pouvez désormais vous passer des CSS statiques

Vos feuilles de styles peuvent comprendre des chunks, voire même utiliser des snippets (pour randomiser un fond d'écran par exemple). Pour les variables de modèle, cela reste à tester je ne peux pas m'avancer là dessus...

Merci à Susan Ottwell pour la méthode @import au lieu de link et alias au lieu de [~xx~].
Merci à Eastbind pour le .htaccess.

Merci à tous ceux qui m'ont aidé à résoudre les problèmes avec IE  !

[davidm]

J'espère que l'intérêt pour cette technique est large mais silencieux, car si vous n'avez pas encore essayé, vous ne savez pas ce que vous perdez !!!

[Guillaume]

Je te rassures c'est très intéressant mais je n'ai pas encore eu le temps de le mettre en place et surtout je veux comprendre un peu plus le fonctionnement pour faire facilement des mises à jour de mon site (dans le cas où je décide de changer complètement la mise en page avec une nouvelle css et sans supprimer les autres accessibles à partir de CssSwitcher)

[Marc]

Je pense que la technique est intéressante (je ne l'ai pas encore testé mais je n'ai aucun doute sur son efficacité).

Seule bémol, la feuille de style devient un document MODx, pensez la rendre accessible uniquement à l'administrateur et non aux rédacteurs (ou autres utilisateurs) du site.
Une modification de ce fichier demande une bonne connaissance des conséquences que cela entraîne.

[davidm]

Bonne remarque effectivement, j'aurai du préciser que j'utilise les autorisations d'accès.
(Mais même si les CSS sont des fichiers si un utilisateur a accès au gestionnaire de fichier il peut aussi accéder aux styles, même si c'est plus difficile.)

Je pense que l'utilisation de cette technique me fait économiser facilement 20 à 25% de temps sur la construction des gabarits et des styles... imaginez quand vous construisiez des pages web html sans chunks, et bien là c'est pareil je change un truc à un endroit, c'est appliqué partout.

En général je découpe mes css en plusieurs chunks :

mise en page
menus
style textuels communs (titre, paragraphe... etc)
formulaires

et j'ai après des chunks pour les styles spécifiques.

Un document CSS devient alors simplement un assemblage de chunks, avec en plus le bénéfice d'avoir tous les chemis d'image dynamiques avec [(site_url)]

C'est très puissant

Le seul truc qui manque aujourd'hui ce sont des snippets à utiliser dans les CSS dynamiques... on peut imaginer bcp de choses, à partir de là !

[Guillaume]

Le seul truc qui manque aujourd'hui ce sont des snippets à utiliser dans les CSS dynamiques... on peut imaginer bcp de choses, à partir de là !

Je suis perdu ! help me please !! on peut utiliser des snippets dans les chunks non ? donc pourquoi on ne peut pas dans ce cas précis ?
Merci d'éclairer ma vieille lanterne du début du siècle

[davidm]

Non pardon ce n'est pas qu'on ne peut pas, au contraire, mais c'est plutôt que les snippets qu'on pourrait utiliser sont conçu pour générer dynamiquement du contenu html (tu te vois utiliser Ditto, DropMenu ou Maxigallery dans un fichier CSS ?).

Ce que je voulais dire c'est qu'on manque de snippet qui ont pour but de générer des bouts de feuille de style dynamique... je ne sais pas moi, une fonction qui détecte la résolution du user agent et qui modifie la valeur de la largeur du div en fonction, ou alors un snippet qui randomise un fond d'écran....on peut tout imaginer !

Avis aux codeurs !

Inspiration ici :
http://www.shauninman.com/plete/2005/08/css-constants

[Guillaume]

tu te vois utiliser Ditto, DropMenu ou Maxigallery dans un fichier CSS ?

Ca pourrait être drôle 

Ce que je voulais dire c'est qu'on manque de snippet qui ont pour but de générer des bouts de feuille de style dynamique... je ne sais pas moi, une fonction qui détecte la résolution du user agent et qui modifie la valeur de la largeur du div en fonction, ou alors un snippet qui randomise un fond d'écran....on peut tout imaginer !

C'est sûr que c'est intéressant. Je n'y avait pas pensé. Faut dire aussi que moi est le design c'est pas trop ça  La seule idée que j'ai eu pour le moment, c'est d'adapter CssSwitcher pour qu'il fonctionne avec les css dynamiques. Faute de temps (je suis sur un autre projet pour le moment), je n'ai pas encore creusé la question.
Je rajoute ça dans ma liste

[Marc]

Oui en effet l'idée est très intéressante et peut donner des résultats surprenants en associant AJAX.
Je pense que je la mettrais en oeuvre. Mais dans l'immédiat je n'ai pas beaucoup de temps.

[cquiec]

Merci à Susan Ottwell pour la méthode @import au lieu de link et alias au lieu de [~xx~].
Merci à Eastbind pour le .htaccess.

bonjour. j'ai bien suivit la procédure indiquée, (car toujours problème d'affichage ds IE)
sauf que je ne comprends pa très bien le binding @import. Enfin si, je comprends sa fonction, mais sa mise en place non. un peu d'aide svp? merci

mouais.bon.

[cquiec]

réflexion faite, je décide de me dé-s'inscrire. aux nombreux posts soumis, je n'ai que peu de réponse. Je suis enchanté par modx, mais les contributeurs sur ce forum (french) sont un peu désolant. Je reviendrais de temps en temps pour trouver ailleurs ce que je ne trouves pas ici. so long

[Guillaume]

réflexion faite, je décide de me dé-s'inscrire. aux nombreux posts soumis, je n'ai que peu de réponse. Je suis enchanté par modx, mais les contributeurs sur ce forum (french) sont un peu désolant. Je reviendrais de temps en temps pour trouver ailleurs ce que je ne trouves pas ici. so long

J'en suis bien désolé. Mais il ne faut pas oublier que nous sommes tous bénévoles ici et que tout le monde ne peut pas connaitre tout sur Modx.
De plus, pour un message mis en ligne à 11:19 ce n'est pas sûr que la réponse arrive dans les heures qui suivent : la pluspart des personnes viennent le soir et non le jour.
Si tes autres messages n'ont pas eu de réponses, c'est soit pour les raisons évoqués ci dessus soit que les questions ne sont pas assez précises....

[Marc]

réflexion faite, je décide de me dé-s'inscrire. aux nombreux posts soumis, je n'ai que peu de réponse. Je suis enchanté par modx, mais les contributeurs sur ce forum (french) sont un peu désolant. Je reviendrais de temps en temps pour trouver ailleurs ce que je ne trouves pas ici. so long

Dommage pour cette décision que je trouve un peu hative.
Comme le dit Guillaume, nous sommes tous des bénévoles. Sur ce point de configuration particulière d'utilisation des css dans un document MODx, seul David auraît pu te faire partager son expérience.
J'ai remarqué qu'aujourd'hui il a été absent des échanges sur le forum et je suppose pour de bonnes raisons.

Ceci dit ce CMS est libre, le forum est ouvert à tous et tu es libre de choisir de rester, de partager ton expérience ou non.
Mais quelques parts, j'ai cru comprendre que tu comprenais l'anglais. Alors pourquoi ne pas avoir tenter de trouver réponse de ce coté là ?

Bonne continuation de ton coté 

[cquiec2]

de retour…

serait-ce cela?

http://forum.alsacreations.com/faq/#item61

merci