28220 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis confronté a un petit probleme.
On dit partout que le css, c'est l'avenir de la mise en forme etc. Mais je me heurte au manque de dynamisme... J'ai des pages html générées a partir de php, mais mon style.css lui, reste statique.
Ca me pose souci surtout sur les background-image par exemple.
Dans mon projet, j'ai plusieurs themes, donc un dossier themes/ avec mes dossier de chaque theme (par exemple themes/theme1/, themes/theme2/ ...), contenant chacun son fichier style.css
Maintenant, j'ai un dossier parallelement a themes, qui contient toutes les images de background de tous les themes, mais ce dossier je ne souhaite pas le fixer, je le désigne par $dossierImages dans mon code. Mais dans mon fichier css, comment afficher une image dans un dossier dont le nom n'est pas codé en dur ?

Merci, je suis pres a réexpliquer ou apporter des précisions si besoin est
Modifié par Raymi (13 Dec 2005 - 10:08)
Tu ne pourras pas rendre dynamique ta feuille de style externe. Par contre tu peux spécifier les backgrounds dans le head de chaque pageet là tu pourras mettre du php dans ton code css.
OK c'est ce que je pensais.
Mais dans ce cas je trouve que ca limite beaucoup l'intérêt des feuilles de styles css
Bonjour,

Quelques explications, ou mieux, une url ?

A priori, c'est une contrainte qui se règle simplement en jouant sur la cascade, c'est à dire plusieurs CSS cumulées dans une page:
- CSS "common"
- CSS de section ou de styleswitch

... avec la cuisine serveur de son choix.
Modifié par Laurent Denis (13 Dec 2005 - 11:26)
octopussy a écrit :
Tu ne pourras pas rendre dynamique ta feuille de style externe. Par contre tu peux spécifier les backgrounds dans le head de chaque pageet là tu pourras mettre du php dans ton code css.

sisi on peut ! fichier style.css.php :

<?php
header("Content-type: text/css; charset=iso-8859-1");
?>
body { ... }
...
Bonjour,

octopussy a écrit :
Tu ne pourras pas rendre dynamique ta feuille de style externe.
Raymi a écrit :
OK c'est ce que je pensais.
Mais dans ce cas je trouve que ca limite beaucoup l'intérêt des feuilles de styles css
Si j'ai bien compris le problème posé et la remarque de Raymi qui s'en suit je dirais qu'il y a une petite confusion. La limitation, relativement au problème posée, ne porte pas sur les CSS mais sur l'architecture client/serveur asynchrone, donc en gros sur le mode de fonctionnement des protocoles Internet.

La notion de dynamique ne peut pas qualifier les CSS. On ne peut pas dire que les CSS sont ou ne sont pas dynamiques au sens utilisé dans ce sujet.

Ce qui est éventuellement dynamique c'est la tambouille que réalise le serveur. Et là je peux très bien générer chaque microseconde des fichiers CSS différents avec un serveur très dynamique qui gère des conditions très fluctuantes.

Malheureusement, si j'envoie à T0 une page HTML établie avec certaines conventions puis à T1, T2 ... (instants proches de T0) d'autres objets de la page (images, CSS...) établis avec d'autres conventions, le client qui rassemble tout ça (le navigateur) te montera un résultat différent de ce que tu attends si les conventions présentent des incohérences.

Maintenant si tu es capable de tout calculer dynamique en restant cohérent pour tous les cas de figure, rien n'empêche de générer à la volée une feuille de style CSS qui dépend d'une variable sur une plateforme PHP.
Xavier a écrit :
La limitation, relativement au problème posée, ne porte pas sur les CSS mais sur l'architecture client/serveur asynchrone, donc en gros sur le mode de fonctionnement des protocoles Internet.


<auto-censuré />
Modifié par Laurent Denis (13 Dec 2005 - 13:01)
Houla, merci des réponses mais j'avouerai que j'ai du mal à tout suivre.

Xavier je vois vaguement ce que tu veux dire mais pas en détails. Le problème viens du fait que le fichier css n'est pas inclus dans la page html, mais bien séparé, et donc si je le génère dynamiquement, le temps que je le recoive sur mon navigateur il pourra changer a cause d'un autre client qui appelle la page ? Ou je suis complètement a coté de la plaque... En fait je vois mal ce que tu désignes par 'conventions'
Ne penses tu pas que la méthode de RomsIW fonctionnerai ? si en feuille de style je donne une page php, que je l'appelle avec des parametres, et que je traite les parametres dans la feuille de style, je n'y avais jamais songé je ne sais pas si ca peut marcher

Laurent, qu'appelles tu css de section ou de styleswitch ? Une 2e page css ou alors du css directement codé dans la page html ? Je n'ai pas d'url encore a proposer, mais ca ne serait pas tres parlant, je désire simplement stocker mes images de backgrounds dans un dossier que je ne connais pas encore (et qui pourra changer) donc que je passe en php par la variable $imagesHost.
En gros sur une page html, je veux comme background: $imagesHost/monBackground.jpg
Mais je ne peux pas mettre ca dans une feuille de style 'style.css' associée a ma page html générée... Pour l'instant ce que je fais c'est d'associer ma page style.css, et parallelement j'ajoute dans ma page html
<body style="background-image:url(<?=$imagesHost/monBackground.jpg?>);">
. Mais je trouve ca bien dommage de pas pouvoir utiliser la ligne de style dans mon style.css, bien que je ne vois pas bien comment je pourrais passer la valeur de $imagesHost a mon style.css, sauf peut etre comme le dit RomsIW avec une feuille style.css.php.
Si j'ai bien suivi:
- soit tu as un site avec des pages utilisant des CSS différentes les unes des autres sur certains points, comme les images
- soit tu as des styles alternatifs

Dans les deux cas :
- les styles constants, permanents... peuvent être fixés par une première CSS, disons /css/common/default.css
- les images permanentes seront placées dans un sous-répertoire de ce style : /css/common/img/. Rappel important: une url placée dans une feuille de style est relative au fichier de feuille de style, pas au fichier HTML qui l'appelle. autrement-dit, il suffit d'écrire background: url(img/image.png) dans la CSS /css/common/default.css pour que ce soit l'image /css/common/img/image.png qui soit appelée.
- les styles spécifiques peuvent être placés dans des feuilles de style distinctes, appelée en plus de la CSS précédente. On les placera chacune dans leur répertoire: /css/style1/feuille.css, /css/style2/feuille.css.
- Et de la même manière, chacun de ces répertoires aura son sous-répertoire d'images...

Sinon, comme l'a très bien rappelé RomsIW, rien n'empêche de créer une CSS dynamique, c'est à dire un script PHP générant une CSS à la volée (on peut même la mettre en cache...). C'est assez classique, pour tout dire.
Modifié par Laurent Denis (13 Dec 2005 - 15:47)
le styleswitcher, c'est comme sur WebRankInfo par exemple (voir petite icone carrée en haut à droite sur page d'accueil et son code source Smiley cligne )

le PHP peut-être bien si tu veux gérer certains styles via la base de données, ou des couleurs utilisateurs par cookie, sinon peu d'intérêt...
Ok merci

RomwIW, et pour mon cas tu penses qu'il n'y a pas d'intéret ? Car je n'entre dans aucune de tes catégories, j'ai juste un dossier d'image dynamique, avec des pages qui sont elles bien fixes...
Merci pour les éclaircissement. En l'occurence c'est vrai que je n'ai qu'une grosse feuille de style pour toutes mes pages, mais que ca m'est venue a l'idée dans créer des spécifiques. Mais la ca n'aurait pas trop d'intéret, sauf si la encore je les génère dynamiquement, mais je ne pense pas que ca vaille vraiment le coup étant donné que dedans j'aurai juste 3 ou 4 lignes.

le stylewitcher j'ai toujours pas compris, mais c'est pas bien grave on va dire.

Cela dit est ce que c'est considéré comme propre de générer une feuille de style en php ainsi ? Car mon projet sera reprit par d'autre, et il doit etre le plus évolutif possible, facilement adaptable et tout et tout...
Just my five cents...

L'explication combinée des 2 dernières réponses me semble la mieux appropriée :
- Laurent Denis pour la partie "styleswitcher", au cas où ton changement de css (et d'images) soit dépendant du choix d'un "style" ou d'un "thème" par l'utilisateur, et dans ce cas il faudra bien que tu implémente un code (associé à un formulaire de choix par un "select") de changement de thème (donc un styleswitcher).
- RomsIW qui fait remarquer que les feuilles de style générées "à la volée" sont un cas très particulier où on veut que seuls CERTAINS utilisateurs aient accès à un thème particulier.

Ta remarque "le stylewitcher j'ai toujours pas compris" peut nous laisser penser que l'on n'a pas vraiment compris ce que tu voulais faire....
Non mais en fait j'avais pas bien compris ce que voulais dire ce terme...
En fait il s'agit d'une combobox (ou autre moyen) permettant a l'utilisateur de changer de theme en naviguant c'est bien ca ?
Moi ce ne sera pas le cas... J'aurai plusieurs themes, mais c'est l'administrateur qui le déterminera, et ce sera par conséquent le meme pour tous jusqu'a ce que l'admin le change.
Concretement j'ai plusieurs dossier themes, aveec chacun leur feuille de style. Dans ces feuilles de styles en général (et c'est ce que je veux faire), on a également les background, par exemple la dans mon style.css, j'aurai une ligne
body {
background-image:url(mon/image.jpg);
}
Cependant toutes les images de tous mes themes ne sont pas stockés dans un dossier propre a chaque theme, mais dans un dossier a part qui n'est pas fixé, donc que je désigne par $dossierImages, variable qui est initialisée dans le code php de chaque page.
Mais je ne peux pas mettre dans mes feuilles css
body {
background-image:url($dossierImages/theme1.jpg);
}

Voila j'amerai avoir une url qui ne soit pas statique.
Dans ce cas la solution de RomsIW me parait appropriée non ?

J'espère que vous y voyez plus clair.

Mais si vous avez tout dit, dans l'ensemble je pense avoir saisi les différentes idées, donc maintenant je vais essayer de faire ma part des choses, mais vous pouvez toujours surencherir Smiley lol

merci

edit: mais je viens de penser a un truc:
Si je veux générer des feuilles css avec du php, en ayant une page style.css.php, dans ce cas les paramètres je ne pourrais les passer qu'avec la méthode GET j'imagine, vu que dans la page html qui défnint les stylesheet on doit donner une url seulement...
Hors le passage de paramètres par la méthode get est limité a 255 caractères il me semble, ce qui signifie que si je veux une feuille dynamique sans limite de paramères je vais finir par etre bloqué
Modifié par Raymi (14 Dec 2005 - 08:45)
Raymi a écrit :
Xavier je vois vaguement ce que tu veux dire mais pas en détails. Le problème viens du fait que le fichier css n'est pas inclus dans la page html, mais bien séparé, et donc si je le génère dynamiquement, le temps que je le recoive sur mon navigateur il pourra changer a cause d'un autre client qui appelle la page ? Ou je suis complètement a coté de la plaque... En fait je vois mal ce que tu désignes par 'conventions'
Le problème ne vient pas de ce qu'un autre client demande aussi la page. Mais de ce que j'ai appelé les conventions (ou disons algorithme) implémentées sur le serveur. Apparemment tu as de bonnes raisons d'avoir des images dont les noms ou urls sont volatiles. Ce qui suit n'est pas réaliste, mais imaginons que tu tires au hasard le nom (ou l'url) des images chaque 1/10 de seconde, et bien il y a peu de chances que l'internaute reçoive la bonne page puisque le html appelle une CSS qui appelle une image qui n'existe probablement plus.
Raymi a écrit :
Ne penses tu pas que la méthode de RomsIW fonctionnerai ?
Mais si, c'est bien une façon de rendre une feuille de style dynamique.

Pour approfondir, et à la lumière de tes dernières explications, je comprends que "l'effet dynamique" ne provient pas de l'utilisateur (pas de style switcher par exemple), donc il n'y a pas besoin a priori de véhiculer d'information du client vers le serveur. L'effet dynamique provient :
- de l'administrateur
- et éventuellement (?) de la page envoyée à l'internaute.

Pour le premier paramètre il suffit de mettre une variable représentative du thème choisi par l'administrateur dans un fichier que tu pourras consulter.
Pour ce qui est de la page, tu peux utiliser les sessions (mais c'est lourd pour le besoin exprimé) ou plus simplement la variable du header donnant l'url référente.
Ah oui je vois mieux merci. Oui quand je parlais de dynamisme, c'était exagéré c'était simplement par raport au fait que le code n'était pas figé en html mais généré par du php. Si mon dossier d'images est volatile, ce n'est pas parcequ'il change souvent, c'est simplement une contrainte de programmation qui vient du dessus, car je suis sur un projet évolutif, on ne sait pas encore ou on va stocker les images, et en cas de changement on veut ne pas avoir a passer tout le code en revue, donc on met un maximum de variables dans des fichiers de configurations pour un maximum de flexibilité.

En tout cas merci de ses réponses, ca me permet de voir plus clair dans les possibilités du développement web.

Je vais arréter de vous enquiquiner ici, j'ai eu assez de réponses (meme si je n'ai pas trop compris l'histoire de l'url référente de l'header)