Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut Démarrer une transition ou une animation CSS lors d'un événement JS
    Bonjour.
    Question toute bête mais à laquelle je ne trouve pas de réponse sur le web :
    Comment faire démarrer une transition ou une animation CSS par un événement JS, par exemple au clic sur un bouton.
    Merci.

  2. #2
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 189
    Points : 141
    Points
    141
    Par défaut
    Salut

    Par un click, alors ça veut dire que c'est du js qui va lancer l'anim css, y a que ça.
    Style une boucle d'animation et tu change à l'intérieur de la boucle le css d'un élément à animer .

    Ou alors j'ai pas compris ton probleme ?

  3. #3
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Citation Envoyé par amateurprg Voir le message
    Ou alors j'ai pas compris ton probleme ?
    J'ai du mal m'exprimer.

    Je veux un truc dans le genre <button onclick="demarrerAnim()">Démarrer l'animation</button> et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function demarrerAnim() {
      // quelque chose, mais quoi, qui démarre la transition ou l'animation déclarée dans le CSS 
    }

  4. #4
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 189
    Points : 141
    Points
    141
    Par défaut
    Tu dois mettre en pause ton animation.

    animation-play-state: paused;

    Puis la lancer avec :

    animation-play-state: running;

    Tu peux en démarrer/pauser plusieurs :

    animation-play-state: paused, running, running;

  5. #5
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Citation Envoyé par amateurprg Voir le message
    Puis la lancer avec : animation-play-state: running;
    Ok, une instruction du genre :

    monElt.style.animationPlayState = 'running' ?

    Merci, super, j'm'en vas essayer ça !

  6. #6
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Citation Envoyé par amateurprg Voir le message
    Tu dois mettre en pause ton animation.
    Ta façon de faire fonctionne bien pour une animation.
    Serais-tu comment faire avec une transition des fois ? (Ouaip, je sais, je suis exigeant).
    Merci.

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    Bonjour,

    Merci de montrer ton code.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Merci de montrer ton code
    Je n'ai pas de code, c'est une question générale.
    Je peux cependant rédiger un exemple
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE HTML>
    <head>
    <meta charset="UTF-8">
    <style>
    #division {
        max-height: 0px;
        transition: all 1s;
        overflow: hidden;
    }
    #division:hover {
        max-height: 200px;
    }
    </style>
    </head>
    <body>
    <input type=button onclick="aider()" value="Aide">
    <div id=division>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
    </div>
     
    <script>
        // mon div étant caché, il me faut le dérouler d'une autre façon qu'au survol
        function aider() {
            // je fais comme si l'on passait la souris sur la div
        }
    </script>

    Merci.

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    OK.

    Dans le cas présent, une solution simple est d'ajouter/supprimer une classe CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #division {
      max-height: 0;
      transition: all 0.5s;
      overflow: hidden;
    }
    #division.over {
      max-height: 100px;
      overflow: auto;
    }
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    "use strict";
    function aider() {
      document.querySelector('#division').classList.toggle('over');
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 189
    Points : 141
    Points
    141
    Par défaut
    N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id des elements.
    Ne fait pas comme là, par exemple :

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    Tant a qu'à (bien) faire, si on veut pouvoir appliquer l'animation sur plusieurs éléments :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
      <div>
        <input type="button" onclick="aider(this)" value="Aide 1" />
        <div class="aide">
          Texte 1 qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
        </div>  
      </div>
     
      <div>
        <input type="button" onclick="aider(this)" value="Aide 2" />
        <div class="aide">
          Texte 2 qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
        </div>  
      </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .aide {
      max-height: 0;
      transition: all 0.5s;
      overflow: hidden;
    }
    .aide.over {
      max-height: 100px;
      overflow: auto;
      border:1px dashed #ccc;
    }
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    "use strict";
    function aider(elt) {
      console.log( elt.nextElementSibling );
      elt.nextElementSibling.classList.toggle('over');
    }

    Ou encore :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
        <input type="button" class="btnAide" value="Aide 1" />
    ...
        <input type="button" class="btnAide" value="Aide 2" />
    ...
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    "use strict";
    const btnAides = document.querySelectorAll('.btnAide');
    btnAides.forEach( function(btnAide){
      btnAide.addEventListener('click', function(){
        this.nextElementSibling.classList.toggle('over');
      });
    });

    Cela dit, tu peux aussi faire une recherche : "tooltip CSS"


    Pour afficher l'infobulle sur le "click" et plus sur le :hover, il suffit de :
    1- remplacer dans le script CSS :hover par .over
    2- Ajouter le script JS :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    "use strict";
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach( function(tooltip){
      tooltip.addEventListener('click', function(event){
        event.preventDefault(); // empêche l'évènement par défaut (ici, lien <a> : href désactivé)
        this.classList.toggle('over'); // ajoute ou supprime la class "over"
      });
    });
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 189
    Points : 141
    Points
    141
    Par défaut
    Salut
    Chui allé sur la démo, et quand je click sur un des liens à cliquer, l'infobulle apparait mais ça fait remonter la page de la hauteur de l'infobulle, donc je crois qu'il faut mettre l'infobulle en "absolute" non ?

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 867
    Points : 33 785
    Points
    33 785
    Par défaut
    Bonjour,
    il faut annuler l'action par défaut qui est réalisée au click sur un lien à savoir suivre le lien donc dans le cas présent remonter en haut de page.

    Cela se fait en utilisant la méthode Event..preventDefault().
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach(function(tooltip) {
      tooltip.addEventListener('click', function(ev) {  // récupération en paramètre de l'événement
        // annule action par défaut
        ev.preventDefault();
        this.classList.toggle('over');
      });
    });
    [EDIT]
    Je rajoutes cette page, que je n'ai jamais pris le temps de finir, comme d'hab : Animation CSS simple

  14. #14
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    Ah oui, je n'avais pas vu que c'était des liens <a>.

    Du coup, je les ai remplacés par de simples <span>, et ça fonctionne aussi bien : https://codepen.io/jreaux62/pen/MWWVvOj
    le event.preventDefault(); n'est plus nécessaire

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "use strict";
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach( function(tooltip){
      tooltip.addEventListener('click', function(){
        this.classList.toggle('over');
      });
      tooltip.addEventListener('mouseout', function(){
        let ceci = this;
        window.setTimeout( function(){
          ceci.classList.remove('over');
        } , 1000); // on masque après 1 sec.
      });
    });
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 867
    Points : 33 785
    Points
    33 785
    Par défaut
    Tu aurais également pu te passer de JavaScript en utilisant le sélecteur .tooltip:focus span, sur tes <a> avec l'avantage que la bulle ne reste pas coincée mais avec le désagrément de la remontée dans bien des cas.

    On voit que pour ce cas <nobody> is perfect </nobody> !

  16. #16
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    Oui, mais dans le script JS, je peux remplacer 'click' par 'dblclick' si je veux !
    Et là, le CSS est KO...

    D'autre part, ce serait dommage de "se passer de JavaScript"... dans le forum JavaScript !
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  17. #17
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Merci à tous.

    @amateurprg
    N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id
    Dans quel intérêt ?

  18. #18
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 189
    Points : 141
    Points
    141
    Par défaut
    Comment ça ? Y a pas d'intérêt ?

    Moi j'ai toujours fait comme ça, c'est ce que j'ai appris sur le net depuis toujours :/
    Pour moi c'est comme si tu me disais pourquoi fermer une balise (oui bon y a des balises qui ferment pas )

  19. #19
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 815
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 815
    Points : 32 346
    Points
    32 346
    Par défaut
    Bonjour,

    Citation Envoyé par amateurprg Voir le message
    Moi j'ai toujours fait comme ça...
    Ce n'est pas une réponse très convaincante...

    L'intérêt des double-quotes est que :
    • c'est la convention de syntaxe pour les attributs des éléments (X)HTML
      Les balises HTML respectent une syntaxe simple et stricte :
      • Un chevron ouvrant (<)
      • Le nom de la balise
      • Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").
      • Un chevron fermant (>)
    • sans double-quotes, plusieurs valeurs séparées par des espaces ne seraient pas correctement lues *

    * MAUVAIS :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input class=blue left value=cliquer ici />
    BON :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <input class="blue left" value="cliquer ici" />

    ...oui bon y a des balises qui ferment pas...
    En fait, si. Ca s'appelle des balises auto-fermantes (ou balises vides) :
    • <br />
    • <hr />
    • <img ... />
    • <input ... />
    • ...

    Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  20. #20
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    juin 2014
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : juin 2014
    Messages : 246
    Points : 477
    Points
    477
    Par défaut
    Citation Envoyé par amateurprg Voir le message
    Comment ça ? Y a pas d'intérêt ?
    Bonjour.
    Il peut y avoir, si l'attribut est composé de caractères dits spéciaux, comme l'espace.

    Dans le cas que tu as commenté, <div id=division> est parfaitement correct. Aucun navigateur ni le validateur du W3C ne tique.
    J'ajoute que les quotes simples sont aussi tout à fait admises pour des attributs composés du genre <div class='c1 c2'>
    Comme l'a indiqué jreaux62, les doubles-quotes sont une CONVENTION, pas une obligation.

    D'où ma question : pourquoi m'obliger à charger systématiquement le code de quotes si leur absence ne provoque aucun problème, même pas de validation, que je développe en solo et que de plus mon éditeur de code me permet de visualiser plus facilement les attributs hors quotes ?

    Citation Envoyé par jreaux62 Voir le message
    Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.
    Feu le XHTML ;-)
    (un truc qui permettait aux pinailleurs de se sentir exister !)

    Tapez pas !

Discussions similaires

  1. Arrêter une animation CSS
    Par jpagnol dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 29/01/2019, 23h48
  2. Réponses: 2
    Dernier message: 11/01/2015, 17h10
  3. Réponses: 8
    Dernier message: 27/09/2008, 13h54
  4. [CSS] Intégrer une animation Flash proprement!
    Par k o D dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 10/04/2006, 21h37
  5. Animation d'une image / CSS
    Par Trunks dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/12/2005, 16h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo