Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Gérer les dégradés sur tous les clients web

2 réponses
Avatar
Kalowycz
Bonjour à tous,

Voilà mon objectif, en résumé : je voudrais écrire un script qui adapte
mes règles de style à tout client web, en ce qui concerne les dégradés
CSS-3.

J'avais pensé n'écrire, dans la feuille de style, que les règles
conformes au standard.
Exemple:
<css>
background: linear-gradient(bottom, #CCC 2%, white 15%);
</css>

Ensuite, il suffisait de les reprendre une par une en rajoutant autant
de préfixes que nécessaire.
Exemple, pour Firefox :
<css>
background: -moz-linear-gradient(bottom, #CCC 2%, white 15%);
</css>

Hélas, "document.styleSheets[x].cssRules[x]" ne récupère que les règles
comprises et interprétées par le client !
Je n'ai pas trouvé de propriété permettant de retrouver les règles
d'origine de la feuille de style.

Donc, soit une telle propriété existe, et je l'aurais loupée, soit il
faut que je parte sur d'autres bases.

Pour ce dernier cas, j'ai vu un script qui exploite le contenu d'une
classe CSS pour faire le travail.
Exemple :
<html>
<p class="gradient bottom #CCC 2% white 15%">Blabla...</p>
</html>
Mais ce bricolage ne me plaît guère, à tout point de vue !

D'autres idées ?

Cordialement,
Kal

2 réponses

Avatar
Olivier Masson
Le 09/05/2012 20:27, Kalowycz a écrit :
Bonjour à tous,

Voilà mon objectif, en résumé : je voudrais écrire un script qui adapte
mes règles de style à tout client web, en ce qui concerne les dégradés
CSS-3.



[...]
Pour ce dernier cas, j'ai vu un script qui exploite le contenu d'une
classe CSS pour faire le travail.
Exemple :
<html>
<p class="gradient bottom #CCC 2% white 15%">Blabla...</p>
</html>
Mais ce bricolage ne me plaît guère, à tout point de vue !

D'autres idées ?

Cordialement,
Kal



Pourquoi ne pas utiliser, par exemple, des outils comme less
(http://lesscss.org/) ou sass (http://sass-lang.com/) ?
Avatar
Kalowycz
Le 10/05/2012 16:07, Olivier Masson a écrit :

Pourquoi ne pas utiliser, par exemple, des outils comme less
(http://lesscss.org/) ou sass (http://sass-lang.com/) ?



Merci, je regarde ça de près.

Entre temps, j'ai pris connaissance d'une solution consistant à
récupérer en asynchrone la feuille de style, en piochant sa référence
dans la balise <link>, puis scruter le document pour repérer et traiter
les règles avec des valeurs à préfixer.
Jusque-là, l'avantage est que l'on obtient bien les règles d'origine,
qui ne sont pas encore interprétées et que l'on peut transformer à loisir.
Après ce traitement, on supprime la référence <link> et on insère la
feuille modifiée dans une balise <style>.

La référence à ce script :
http://www.alsacreations.com/article/lire/1306-prefix-free-prefixes-CSS3.html

C'est toujours un peu ch..nt, ces standards qui arrivent a posteriori,
une fois que chacun ait cuisiné à sa sauce et dans son coin, y compris
ceux revendiquent le plus les respecter !

Tu me diras qu'on a qu'à pas les utiliser avant qu'ils soient
standardisés, mais bon...

Cdlt,
Kal