Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

E14 - HTML: Błędny znacznik marquee

środa,

E14 - HTML: Błędny znacznik marquee

Znacznik blokowy marquee pojawił się jako rozszerzenie przeglądarki Internet Explorer. Wkrótce został zaimplementowany w innych popularnych przeglądarkach. Podobny efekt jest możliwy do uzyskania za pomocą języka JavaScript, a ostatnio także dzięki nowym możliwościom CSS3.

Element marquee nigdy nie pojawił się w oficjalnej specyfikacji języka HTML. Być może to nie jest dla kogoś istotne, jednak ten fakt oznacza, że w kolejnej wersji przeglądarek może zostać wycofana obsługa tego elementu. Co więcej, konsorcjum W3C odradza używanie tego elementu ze względu na potencjalne problemy z użytecznością, np. przy wydrukach przesuwającego się tekstu.

Przy formalnym podejściu znacznik marquee jest błędem we wszystkich wersjach języka HTML. Obecnie ten efekt można uzyskać dzięki możliwościom CSS.

Przykład

W nowoczesnych przeglądarkach znacznik marquee można zastąpić regułami CSS. Dodatkowo możliwe jest dalsze wzbogacanie elementu, np. w poniższym przykładzie przesuwający się tekst można zatrzymać, umieszczając nad nim wskaźnik myszy. Dla porównania w demonstracji znalazł się także standardowy znacznik marquee.

Technik informatyk

Technik informatyk

Kod HTML

<marquee>Technik informatyk</marquee>
<p class="microsoft marquee"><span>Technik informatyk</span></p>

Kod CSS

<style>
	.marquee {
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>
Artykuł: Staże w Hiszpanii

Staże w Hiszpanii

Artykuł: Conformité Européenne

Conformité Européenne

Artykuł: Display Stream Compression

Display Stream Compression

Artykuł: High Dynamic Range

High Dynamic Range

Artykuł: PiP i podobne technologie

PiP i podobne technologie

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły