Bonsoir, je travail sur une application web utilisant Sass (préprocesseur css).
Mon application est personnalisable par le visiteur, il peut sélectionner une couleur via un colorpicker en javascript et les autres couleurs sont des déclinaisons de la dite couleur, d'ou l'utilisation de sass.
Je suis conscient que mon topic n'est peut être pas dans la bonne section, mais le reste de l'application étant en php une solution dans ce langage est envisageable.
Je m'explique.
En php, je récupère la couleur au format hexadécimal stockée en base de donnée. C'est à partir de cette donnée que toutes les déclinaisons se font (avec sass).
Actuellement, le traitement sass, je l'effectue en local, avant d'envoyer le fichier css sur le serveur, je sais pertinemment que je vais devoir trouver une solution soit côté client, soit côté serveur, le topic étant en section php, ici nous ne parlerons que du traitement "server-side".
Je pensai à une solution ou je génère un fichier scss en php, que j'inclue dans ma config sass et je compile le tout via une lib php de sass.
Pour le moment ceci est à l'état de réflexion, sachant que c'est pour une plateforme qui a déjà un trafic important, je souhaiterai opter des à présent pour une solution viable sur du moyen/long terme et pas un bricolage temporaire.
Une fois le fichier css (compilé via sass) généré, dois-je le mettre en cache ou puis-je l'afficher côté client sans stocker de fichier physique sur le serveur.
J’espère avoir était asses clair, si vous souhaitez plus de détails concernant la configuration ou autres, n'hésitez pas.
Je tenterai d'apporter des informations à la suite de ce topic en fonction de mes avancés dans ce domaine.
D'avance, merci.
4 réponses
Bonjour, pour faire ça less aurait été surement plus adapté...
Cependant, il y a beaucoup de couleurs possibles dans le colorpicker?
Ton application est avec ou sans rechargement de pages?
On peut toujours demander à ruby depuis php (au shell en faite ) de compiler mais après on fait comment.... on stocke le fichier sur le serveur?, on l'identifie par la couleur choisit dans son nom.. Si un autre utilisateur choisit la même couleur on sait que le fichier existe déjà on le restitue.
Cela peut être une solution... m'enfin on voit là que le nombre de couleurs possibles devient une question importante...
Si On a qu'une seule page (pas de rechargement) , alors on crée le ficher scss, on compile (via le shell ... ) , on inclut le css produit dans la page statique...
MAIS 40 demandes identiques => 40 compilations...
QUID des accès concurrents? .. => un dossier temporaire par client ...
QUID des perfs??? ( à mon avis ça va faire mal...)
Sans être spécialiste php , je pense qu'il faut à tout prix éviter de recompiler 40 fois les mêmes scss, ça sera catastrophique niveau perf. Donc oui il faut du stockage côté serveur mais tout dépend le nombre de couleurs possibles...
Bonjour, merci de ta réponse détaillée.
Premièrement en quoi Less serait plus adapté ? (Je ne connais pas les subtilité de Less à ce niveau).
L'application est prévus avec un colorpicker "classique" de ce type http://www.eyecon.ro/colorpicker/ soit une quantité de couleur quasi infinie. Je souhaiterai concerver ce panel de couleur mais s'il s'avere que c'est trop "complexe" ou "lourd" à gérer, je me limiterai a une certain quantité de couleur avec quelque chose de ce type http://andreaslagerkvist.com/jquery/colour-picker/.
La sélection de couleur se fait dans l'interface de gestion du compte et de personnalisation de l'environnement. Une fois la couleur sectionnée on la stock en bdd (ajax) avec une preview en js (temps réel).
Le stockage de fichier n'est pas un problème en soit, le css mignifié fait moins de 20ko et je dispose d'un stockage important (plusieurs To), par contre comment faire en cas de changement mineur dans le css ? On recompile l'ensemble des profils ?
Je test actuellement ce concept, j'ai un colorpicker (riche) et je récupère la couleur (web) la plus proche de la couleur choisis via cette liste.
J'ai un serveur de dev et un serveur de prod, je peux par exemple, ajouter une condition qui dit que en mode dev (symfony2) pas de préférence (profile définie par défaut et compilé avant l'upload (via git) et quand je push en prod. Je lance la procédure de compilation sur tous les profils colorimétrique définis, dans l'exemple 753 fois sachant que je peux largement faire le trie et limiter par exemple à 256 couleurs donc 256 compilations. Le serveur de dev étant robuste et très peu solliciter ça ne devrai pas poser de problème majeur, je vais tester ça.
Je poste à la suite quand j'ai du nouveau.
Je n'utilise pas de framework css donc je vais pas pouvair aider directement si tu veux absolument passer par l'un deux, mais:
- Si j'ai bien compris, ton seul truc a changer d'un css a l'autre c'est la couleur, en fonction d'une couleur de base selectionnée par l'utilisateur.
- Si c'est le cas, le nombre de types de variations a appliquer a cette couleur de base pour générer les autres est sans doute limité (opacité, teinte, saturation).
- Or il existe des libraries PHP pour gérer les couleurs, passer du RGB au HSL au rgba, tu n'auras pas de mal a faire des fonctions pour reproduire les ajustements a faire.
- Pourquoi ne pas prendre comme référence l'un de tes css compilé (au format css, donc), et simplement le modifier en PHP pour changer les couleur ? En ajoutant des commentaires particuliers dans le fichier qui seront parsable en PHP, tu n'auras pas de mal a retrouver les endroits qui demandent un changeent de couleur, et y appliquer l'une des couleur que tu auras généré a partir du choix de l'utilisateur ...
non ?
Je pense avoir trouver une solution il me reste juste à effectuer les tests pour savoir si c'est viable à "grande échelle", je m'explique.
J'ai conservé Sass, donc le format scss ainsi que la quantité de couleur quasi infinie.
Grâce à la lib Scssphp je compile mon scss en css, en php sans passer par ruby.
Dans mon header, j'appelle donc un script php (plutôt qu'un fichier css physique), qui se charge de faire plusieurs vérifications avant de compiler le fichier.
D'abord, je change le doctype du dit script php pour avoir un retour en css via
header('content-type: text/css');Dans ce même fichier j'inclue donc la lib Scssphp, via un file_get_contents je stock le contenu mon style.scss dans une variable temporaire à laquelle j'ajoute mes informations colorimétriques issues de la base de données.
Ce "procédé" (malheureusement un peut lourd dans la forme) permet de créer un fichier scss "virtuel" sous forme de variable utilisable en chaîne de caractères via le compiler de Scssphp, je lance donc la compilation avec les options souhaitées.
J'obtient donc un retour css valide contenant mes couleurs, que ce soit avec une source en hexadécimal ou en "web color name" de façon instantané. Ensuite je stock le fichier généré dans le répertoire personnel de l'utilisateur comme je le fais pour un avatar (une fois compilé et mignifié, il pèses moins de 20Ko).
Lors du prochain affichage de ce profil (css), avant de le générer, je vérifie si il est dispo en cache, si c'est le cas je vérifie la date de modification du fichier cache et si il est plus récent que le fichier source (style.scss) servant de base à la compilation, je me contente d’afficher le css disponible en cache, sans passer par une compilation quelconque.
Merci pour votre aide en tout cas, ca m'aura permis de découvrir d'autres problématiques auxquelles je n'avais pas forcément pensé.
La technique que j'ai finalement utilisée, fonctionne bien avec symfony2 et s'intègre sans mal dans mon "work flow".