Why doesn't the marquee shortcut work in Google Chrome.?

I want to insert an image in a marquee tag.

I wrote the following code:

<marquee scrollamount="4" behavior="alternate" direction="right" width="300"><img width="180px" style="padding-left:30px;opacity:0.7" src="img/cloud3.png"></marquee> 

Works fine in firefox and IE, but doesn't work in Chrome. What is the problem.? Please reply as soon as possible. Thanks in advance.

+4
source share
5 answers

Because the marquee tag is a crime against nature. And it is no longer supported in newer versions of Chrome.

+16
source

marquee not supported in modern html. Some time ago, Chrome refused support. You need to implement this through CSS3 or Javascript.

The W3C further states that it is non-standard and should not be used.

The effect can be easily obtained through jQuery or through CSS3

+7
source

The marquee element has various implementations, in part because there was no published specification for it. In HTML5, an element is precisely defined, and HTML5 drafts require marquee support , as defined there . (Drafts also declare it "obsolete" and "inappropriate", but this is what they say to the authors, the requirements for implementations are different). However, there are still limitations and differences in support; see, for example, MDN on marquee .

In this case, it does not look like an image, but the behavior="alternate" attribute causes a problem. If you delete it, the image will also move across Chrome.

This is an implementation error, not a lack of support. Checking the DOM in Chrome shows that the behavior property is alternate as specified, but it just doesn't work. If you add a border to the marquee element in CSS, the image starts moving one at a time, but only a few pixels left and right.

If you really alternate direction, it is best to use a different technique instead of marquee . For example, a simple moving image can be implemented using JavaScript, so that the position changes in a loop using a timer, and then you can also easily implement a variable direction. Alternatively, it may be simpler, but not so reliable (due to limited browser support), you can use CSS3 animations.

+1
source

Marquee is deprecated, so it will show unspecified behavior in different browsers.

0
source

HTML:

 <div id="cloud">image</div> 

CSS

  #cloud{ width:180px; padding-left:30px; opacity:0.7; animation:slide 10s infinite; -moz-animation:slide 10s infinite;//Firefox -webkit-animation:slide 10s infinite;//chrome and safari -o-animation: slide 10s infinite;//Opera } @keyframes slide{ 0% {-transform: translate(0px, 0px); } 100% {-transform: translate(500px,0px); } } @-moz-keyframes spin{ 0% {-moz-transform: translate(0px, 0px); } 100% {-moz-transform: translate(500px, 0px); } } @-webkit-keyframes slide{ 0% {-webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(500px,0px); } } @-o-keyframes slide{ 0% {-o-transform: translate(0px, 0px); } 100% {-o-transform: translate(500px, 0px); } } 

Here is the fiddle:

http://jsfiddle.net/qCahH

Replace text with image.

0
source

Source: https://habr.com/ru/post/1479302/


All Articles