web-dev-qa-db-fra.com

Utiliser Javascript en CSS

Est-il possible d'utiliser Javascript dans CSS?

Si c'est le cas, pouvez-vous donner un exemple simple?

javascriptcss
66
HelpMe

IE et Firefox contiennent tous deux des moyens d'exécuter JavaScript à partir de CSS. Comme Paolo le mentionne, une méthode dans IE est la technique expression, mais il existe également le comportement plus obscur HTC comportement , dans lequel un code XML séparé contenant votre script est chargé via CSS. Une technique similaire existe pour Firefox, en utilisantXBL. Ces techniques n'exécutent pas JavaScript à partir de CSS directement, mais l'effet est le même. 

HTC avec IE

Utilisez une règle CSS comme ceci:

body {
  behavior:url(script.htc);
}

et dans ce fichier script.htc ont quelque chose comme:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

Le fichier HTC exécute la fonction main() sur l'événement ondocumentready (en référence à l'état de préparation du document HTC.)

XBL avec Firefox

Firefox supporte un hack similaire exécutant un script XML, en utilisant XBL.

Utilisez une règle CSS comme ceci:

body {
  -moz-binding: url(script.xml#mycode);
}

et dans votre script.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">
  <implementation>
    <constructor>
      alert("XBL script executed.");
    </constructor>
  </implementation>
</binding>

</bindings>

Tout le code de la balise de constructeur sera exécuté (une bonne idée pour envelopper le code dans une section CDATA).

Dans les deux techniques, le code ne s'exécute que si le sélecteur CSS correspond à un élément du document . En utilisant quelque chose comme body, il s'exécutera immédiatement au chargement de la page.

62
Zach

Je pense que vous pensez peut-être que expressions ou "propriétés dynamiques" , qui ne sont prises en charge que par IE et vous permettent de définir une propriété avec le résultat d'un expression javascript. Exemple:

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Ce code fait que IE émule la propriété max-width qu'il ne prend pas en charge.

Cependant, tout bien considéré , évitez de les utiliser . Ils sont une mauvaise chose.

35
Paolo Bergantino

Pour faciliter la résolution potentielle de votre problème compte tenu des informations que vous avez fournies, je vais supposer que vous recherchez une CSS dynamique. Si tel est le cas, vous pouvez utiliser un langage de script côté serveur pour le faire. Par exemple (et j'aime absolument faire des choses comme ça):

styles.css.php:

body
 {
margin: 0px;
font-family: Verdana;
background-color: #cccccc;
background-image: url('<?php
echo 'images/flag_bg/' . $user_country . '.png';
?>');
 }

Cela définirait l’image d’arrière-plan sur tout ce qui était stocké dans la variable $ user_country . Ce n'est qu'un exemple de CSS dynamique; Il existe des possibilités pratiquement illimitées lors de la combinaison de CSS et du code côté serveur. Un autre cas serait de permettre à l’utilisateur de créer un thème personnalisé, de le stocker dans une base de données, puis d’utiliser PHP pour définir diverses propriétés, comme ceci:

user_theme.css.php:

body
 {
background-color: <?php echo $user_theme['BG_COLOR']; ?>;
color: <?php echo $user_theme['COLOR']; ?>;
font-family: <?php echo $user_theme['FONT']; ?>;
 }

#panel
 {
font-size: <?php echo $user_theme['FONT_SIZE']; ?>;
background-image: <?php echo $user_theme['PANEL_BG']; ?>;
 }

Encore une fois, cependant, il ne s'agit que d'un exemple banal; Exploiter la puissance des CSS dynamiques via des scripts côté serveur peut conduire à des tâches assez incroyables.

4
Hexagon Theory

IE supporte CSS expressions:

width:expression(document.body.clientWidth > 955 ? "955px": "100%" );

mais ils ne sont pas standard et ne sont pas portables sur tous les navigateurs. Évitez-les si possible. Ils sont obsolètes depuis IE8 .

2
sastanin

J'ai rencontré un problème similaire et j'ai développé deux outils autonomes pour y parvenir:

  • CjsSS.js est un outil Javascript Vanilla (donc pas de dépendances externes) qui prend en charge le retour à IE6.

  • ngCss est un module angulaire + filtre + usine (alias: plugin) prenant en charge Angular 1.2+ (revenons à IE8)

Ces deux outils vous permettent de le faire dans une balise STYLE ou dans un fichier * .css externe:

/*<script src='some.js'></script>
<script>
    var mainColor = "#cccccc";
</script>*/

BODY {
    color: /*{{mainColor}}*/;
}

Et ceci dans vos attributs style sur la page:

<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div>

ou

<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div>

NOTE: Dans ngCss, vous pouvez aussi faire $scope.mainColor à la place de var mainColor

Par défaut, le Javascript est exécuté dans un IFRAME en mode bac à sable, mais puisque vous créez votre propre CSS et que vous l'hébergez sur votre propre serveur (tout comme vos fichiers * .js), XSS n'est pas un problème. Mais le bac à sable offre beaucoup plus de sécurité et de tranquillité d'esprit.

CjsSS.js et ngCss se situent quelque part entre les autres outils permettant d’accomplir des tâches similaires:

  • MOINS , SASS et Stylus ne sont que des préprocesseurs et vous obligent à apprendre une nouvelle langue et à modifier votre code CSS. Fondamentalement, ils ont étendu CSS avec de nouvelles fonctionnalités linguistiques. Tous sont également limités aux plugins développés pour chaque plate-forme tandis que CjsSS.js et ngCss vous permettent d'inclure n'importe quelle bibliothèque Javascript via <script src='blah.js'></script> directement dans votre CSS!

  • AbsurdJS a vu les mêmes problèmes et est allé dans la direction opposée des pré-processeurs ci-dessus; Plutôt que d’étendre CSS, AbsurdJS a créé une bibliothèque Javascript pour générer du CSS.

CjsSS.js et ngCss ont pris le terrain d'entente; vous connaissez déjà le langage CSS, le langage Javascript, alors laissez-les simplement travailler ensemble de manière simple et intuitive.

0
Campbeln