J'ai une couleur bleu-ish que je veux utiliser dans de nombreux endroits dans mon application et pour le moment je copie et la collant entre les styles de mon CSS. Y a-t-il une façon de définir une constante comme les couleurs standard, «bleu», «rouge», etc. que je pouvais partager entre mon CSS, mon HTML et mon JS?
J'aimerais pouvoir dire (quelque part , de préférence CSS) p> dans css dis ... p> dans html ... p> p> tag.style.backgroundColor = myblue;
10 Réponses :
Un produit très prometteur qui "compile" des expressions de niveau de plus haut niveau telles que des variables dans CSS est moins < / a>. Il a besoin de rubis. Je ne l'ai pas encore utilisé mais ça vaut vraiment la peine de regarder. Un moyen plus primitif de le faire serait d'utiliser un langage de script de serveur comme PHP. Vous définissez des constantes à PHP comme Ainsi: puis sur la sortie de la valeur si nécessaire à l'aide de Faites cela dans des fichiers CSS et JS externes, vous devez évidemment les avoir analysé par l'interprète PHP, qui n'est pas une bonne performance sage si vous avez beaucoup de visiteurs. Pour un site bas de la circulation, cela n'a probablement pas d'importance.
Oui, c'est impossible. Vous pouvez toutefois écrire votre propre préprocesseur CSS (ou utiliser l'une des personnes existantes), par exemple avec PHP. Le gros inconvénient est que vous devriez émettre le code couleur sur tout votre site avec PHP et vos scripts ressembleraient à et de même en CSS ou quelque chose de similaire. Et ce n'est pas vraiment sympa non plus. Bien sûr, vous pouvez utiliser n'importe quelle langue de script de serveur de votre choix. Autant que je puisse juger, il s'agit de la seule possibilité d'utiliser une constante de couleur dans tout un site Web. Vous pouvez consulter certains processeurs:
Pour y parvenir à l'aide de n'importe quel CSS dynamique (par exemple, servir un fichier PHP avec type text / css CSS>), votre meilleur pari est de séparer les endroits où vous définissez le "thème" . <script type="text/javascript">
var theme = '#003366';
</script>
Comment j'approcherais cela est de faire une classe dans mon CSS. Appelez-le dans mon HTML Vous pouvez affecter plusieurs classes à un élément HTML. in Le JS, juste nommez le nom de la classe bien sûr que vous pouvez jouer avec la manière dont vous souhaitez sélectionner votre élément. Une bibliothèque JS a probablement des méthodes encore plus faciles pour attribuer des classes CSS.
Puis-je concaténer des cours à travers JS? Si oui, alors c'est la réponse.
Je ne vois pas pourquoi pas. Je n'ai pas essayé, mais utilisez le code ci-dessus (non testé) pour saisir la classe et concaténer votre nom de classe à la fin. Assurez-vous d'avoir un espace entre les noms de classe. Bonne chance!
Je vais avoir un coup plus tard et vous permettra de savoir comment je vais continuer.
Alors que les autres utilisateurs ont noté, vous ne pouvez pas le faire dans HTML, JS ou CSS droit, à moins que vous n'abumiez tout contenu HTML, JS et CSS via un script CGI / PHP / ASP - ce qui n'est pas une mauvaise approche car elle est Facile à entretenir.
Si vous utilisez une chaîne de requête dans la référence aux fichiers CSS / JS inclus - par ex. '/css/stylesheet.php?timeimestamp=2010-01-01+00h00:00', puis presque tous les clients cacheront agressivement vos fichiers CSS / JS, nier tout impact sur la charge de la charge dans une langue de script peut avoir ( Bien que sauf si le site est susceptible d'être particulièrement occupé, je ne serais pas trop connecté à ce sujet).
Si vous utilisez Apache (qui est probablement), une approche alternative serait utilisée comme mod_set Pour ré-écrire tous les fichiers HTML, JS et CSS à la volée pour vous. Cela peut être plus difficile à prendre en charge si vous ne connaissez pas la configuration d'Apache (ou utilisez un autre serveur Web).
En ce qui concerne la nommage des balises:
Avec l'une ou l'autre approche, vous suggérez d'utiliser un système de marquage clair pour désigner vos variables dynamiques (par exemple% myBlue%) et pour envisager que les noms de variables soient représentatifs (par exemple,% de surplaillonnageColor%,% FontColor%, même si les deux sont définis à% Myblue%), comme cela peut empêcher les choses de devenir poilues plus tard (lorsque vous découvrez que changer une valeur ait des conséquences voulues).
L'utilisation de plus de noms représentatifs peut sembler inutilement verbeuse à première vue, mais cela provoque des problèmes dans de nombreux cas, car les couleurs finissent par des problèmes de manière inattendue lorsqu'ils sont significativement différents du schéma d'origine (cela est vrai de beaucoup de logiciels traditionnels qui est skinnable - parce que l'auteur a pris l'hypothèse que% valeur1% et% de valeur2% de 2% allaient toujours ensemble1 %1% et% de valeur de 3%, ce qui signifie que les options de thématique sont sévèrement limitées par une dépendance non intentionnelle).
Je fais cela au moment de la construction en exécutant mes fichiers CSS via Freemarker.
Il n'y a pas de concept de «variables» dans CSS, mais je vous recommanderais vivement pas faire ce que vous faites. Il n'y a aucune bonne raison pour que vous ne puissiez pas définir toutes vos informations de style dans votre feuille CSS sous forme de classes CSS. Si vous faites cela, puis appliquez simplement lesdites classes dans HTML et JavaScript, c'est une charge majeure en termes de copie et de collage. second, rappelez-vous que vous pouvez définir plus d'une classe CSS pour un élément, par exemple Vous pouvez ensuite définir ceux-ci de manière indépendante dans CSS, a la: et vous pouvez même créer des règles uniquement Lorsque les deux sont appliqués: Si vous souhaitez avoir les choix de couleur générés de manière dynamique, le seul moyen réel de le faire est que d'autres ont suggéré, ce qui prépare vos fichiers. avant le déploiement ou avoir le CSS généré de manière dynamique et signifiée par votre langue de choix.
Comment concaténez-vous des cours dans JS?
JS traite la chaîne de classe entière comme un littéral. Donc, vous pourriez analyser une partie de la chaîne et rechercher une partie de la classe (.e.g à l'aide de l'indexof ou des regexes) ou si vous souhaitez correspondre à toutes les classes, dans l'ordre, puis comparez-les directement.
Je ne suis pas sûr de votre objectif final. S'il s'agit d'autoriser la sélection de l'un des thèmes de plusieurs thèmes pour une page Web, vous pouvez simplement disposer de plusieurs fichiers CSS et une variable de cookie / de session / Base de données de la feuille de style préférée de l'utilisateur. Ensuite, vous pouvez simplement faire
<link rel=<? echo stylepref; ?> type='text/css'>
Vous êtes parti, allez lire la question à nouveau. Je ne regrette pas de repousser, je ne veux tout simplement pas répéter une couleur un million de fois le code avec un numéro magique. C'est une bonne pratique de programmation de base dans toutes les langues que HTML.
Dans Pure Client Côté CSS Grouping Selectors Vous permet de mettre la même couleur sur de nombreux éléments différents:
p, .red, #sub, div a:link { color: #f00; }