5568 sujets

Sémantique web et HTML

Sympas la balise < marquee >

Pages :
bonjours

j'ai testé sur Opera & Firefox & Chrome & IE & Safari la balise < marquee > pour avoir de petit texte défilant, ca fonctionne a merveilles sur tous les navigateurs

j'ai des amis qui me déconseille cette balise < marquee > de HTML5 pour les textes défilants, un script JavaScript seraient a leur yeux bien mieux, j'ai eu des echos similaire en surfant dans Internet

je n'ai rien contre JavaScript mais sur ce coup je ne vois pas l'intéret d'un tel script alors que HTML5 suffit, je vais donc me fixer avec la balise < marquee >, a moins que l'on m'indique des arguments pertinents

je suis ouvert a tout les arguments, pour l'instant je n'ai pas eu d'argument convainquant, j'atend vos reponses
c'est étonant < marquee > était une nouveauté de HTML5, finalement ils font marche arrière et abandonnent la balise qu'ils ont crées, peut être qu'ils vont en proposer d'autres équivalentes n'ayant pas ses désavantages, comment peut-on se tenir au courant ?

bon je vais écrire un script en JavaScript pour voir si le rendu est vraiment meilleurs qu'avec < marquee >
Johan_Clbrt a écrit :
Ta page ne passera donc pas le validateur W3C, ce qui peut avoir un impact sur ton référencement...


N'importe quoi...

RR7008 a écrit :
c'est étonant &lt; marquee &gt; était une nouveauté de HTML5, finalement ils font marche arrière et abandonnent la balise qu'ils ont crées, peut être qu'ils vont en proposer d'autres équivalentes n'ayant pas ses désavantages, comment peut-on se tenir au courant ?


marquee existe maintenant en CSS3 mais pour l'instant il n'est implémenté que dans webkit.

Modifié par jb_gfx (11 Jun 2013 - 19:03)
Bonjour,

En même temps les textes qui défilent, c'est le MAL(c'est juste en dessous du comic sans dans la liste du MAL) !



Les trucs qui bougent vont systématiquement détourner le regard de l'utilisateur de vrai contenu intéressant ; et dans le cas d'utilisateurs ayant des problèmes de concentration (les hyperactifs sont dans le lot), ce truc qui bouge les bloquera complétement.
Modérateur
RR7008 a écrit :
c'est étonant &lt; marquee &gt; était une nouveauté de HTML5, finalement ils font marche arrière et abandonnent la balise qu'ils ont crées, peut être qu'ils vont en proposer d'autres équivalentes n'ayant pas ses désavantages, comment peut-on se tenir au courant ?


Juste pour l’historique marquee c’est IE3 et ça a donc 17 ans, c’était une balise en réponse au <blink> de Netscape, mais n’a jamais fait partie de HTML5, ni de HTML4, ni de HTML3 ni d’aucune spécification.
Johan_Clbrt a écrit :
Ta page ne passera donc pas le validateur W3C, ce qui peut avoir un impact sur ton référencement...

Si une page invalide avait un impact sur le référencement, ça se saurait.
thierry a écrit :
Bonjour.
Le comportement de la balise marquee peut être obtenu en CSS sur n'importe quelle balise, au moins dans certains navigateurs (implémentations à vérifier) :

Oui, tout le monde sait cela, mais :
L.A a écrit :
En même temps les textes qui défilent, c'est le MAL (c'est juste en dessous du Comic sans dans la liste du MAL) !
jb_gfx a écrit :
Firefox est le seul navigateur au monde qui affiche correctement cette page : http://codepen.io/jb_gfx/pen/jGpnl

Pour l'effet blinck j'ai créé ce petit bout de code :
/* clignotement */

function Blink (){$(".tempo1").toggleClass("blink").delay(500);}
setInterval('Blink()',1000);

function Blink2 (){$(".tempo2").toggleClass("blink").delay(1000);}
setInterval('Blink2()',2000);

la class blink vient s'ajouter sur les éléments html de class tempo1 (1s) ou tempo2 (1s) :
.blink {
    /*le code en plus, une couleur par exemple, apparaissant progressivement sur une seconde*/
    -webkit-transition: 1s;
       -moz-transition: 1s;
         -o-transition: 1s;
            transition: 1s;
}

Mais on peut aussi créer cette fonctionnalité en css pur (css3). Exemple pour une rotation :
.autumn {
    color: #b06802;
    -webkit-animation: anim-autumn 5s linear infinite;
       -moz-animation: anim-autumn 5s linear infinite;
         -o-animation: anim-autumn 5s linear infinite;
            animation: anim-autumn 5s linear infinite;
}

@-webkit-keyframes anim-autumn {
    50%{-webkit-transform: rotate(5deg)}
}

@-moz-keyframes anim-autumn {
    50%{-moz-transform: rotate(5deg)}
}

@-o-keyframes anim-autumn {
    50%{-o-transform: rotate(5deg)}
}

@-keyframes anim-autumn {
    50%{transform: rotate(5deg)}
}

Ou encore avec la propriété transition, l'opacité à 50% d'une image sur un hover par exemple (possibilité d'ajouter un délais) :
.img:hover {
    opacity: .5;
    -webkit-transition: .5s;
       -moz-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}

Modifié par Olivier C (12 Jun 2013 - 20:06)
Olivier C a écrit :

Pour l'effet blinck j'ai créé ce petit bout de code :


Moi quand je veux un effet blink sur une page web je cligne des yeux. Smiley smile
jb_gfx a écrit :

Moi quand je veux un effet blink sur une page web je cligne des yeux. Smiley smile

Quand je serai grand, je t'épouse Smiley lol
jb_gfx a écrit :
Moi quand je veux un effet blink sur une page web je cligne des yeux. Smiley smile

Il n'y a pas que du clignotement de texte, ça dépend de la manière d'associer son code avec un autre code, et ce sont ces associations qui deviennent intéressantes...

Sur cette page test, vous trouverez un paneau de signalisation avec le code blink précité, associé à du text-shadow.
Marquee (De Sade) a écrit :

« L'homme serait le plus heureux des êtres si du seul besoin qu'il a d'une illusion quelconque ne naissait aussitôt la réalité. »
Bonjour,

Désolé si je m'incruste, mais, petite question :

a écrit :
Laurie-Anne : En même temps les textes qui défilent, c'est le MAL(c'est juste en dessous du comic sans dans la liste du MAL) !


Pourquoi exactement, le Comic sans MS est-il si mal vu ?

Merci

@+
Pages :
Sujet clos
Aller à