Ci z Was, którzy od dłuższego czasu piszą HTML, mogą pamiętać ten element. Był to element specyficzny dla przeglądarki, który tworzył baner z przewijanym tekstem na ekranie. Ten element nigdy nie został dodany do HTML specyfikacja i wsparcie dla niego różniły się znacznie w różnych przeglądarkach. Ludzie często mieli bardzo silne opinie na temat stosowania tego pierwiastka – zarówno pozytywne, jak i negatywne. Ale niezależnie od tego, czy go kochałeś, czy nienawidziłeś, służyło to uwidocznieniu treści, które przekraczały granice pola.
Jednym z powodów, dla których nigdy nie został w pełni zaimplementowany przez przeglądarki, oprócz silnej osobistej opinii, było to, że jest uważany za efekt wizualny i jako taki nie powinien być definiowany przez HTML, który definiuje Struktura. Zamiast tego efekty wizualne lub prezentacyjne powinny być zarządzane przez CSS. CSS3 dodaje moduł marquee, aby kontrolować sposób, w jaki przeglądarki dodają efekt markizy do elementów.
Nowe właściwości CSS3
CSS3 dodaje pięć
nowe nieruchomości aby pomóc kontrolować sposób wyświetlania treści w namiocie: styl przepełnienia, styl markizy, liczba odtworzeń markizy, kierunek markizy i prędkość markizy.w stylu przelewowym
Właściwość overflow-style (którą również omówiliśmy w artykule CSS Overflow) określa preferowany styl zawartości, która przepełnia pole zawartości. Jeśli ustawisz wartość na marquee-line lub marquee-block, zawartość będzie się przesuwać i wysuwać w lewo/prawo (marquee-line) lub w górę/w dół (marquee-block).
w stylu namiotowym
Ta właściwość określa, w jaki sposób zawartość zostanie przeniesiona do widoku (i poza). Dostępne opcje: zwój, przesuń i alternatywnie. Przewijanie rozpoczyna się od zawartości całkowicie poza ekranem, a następnie przesuwa się po widocznym obszarze, aż cała ponownie zniknie z ekranu. Slajd rozpoczyna się z zawartością całkowicie poza ekranem, a następnie przesuwa się w poprzek, aż zawartość całkowicie przesunie się na ekran i nie ma już zawartości do przesunięcia na ekranie. Na koniec, naprzemiennie odbija zawartość z boku na bok, przesuwając się w przód iw tył.
marquee-play-count
Jedną z wad używania elementu MARQUEE jest to, że markiza nigdy się nie zatrzymuje. Ale dzięki właściwości stylu marquee-play-count możesz ustawić markizę tak, aby włączała i wyłączała zawartość określoną liczbę razy.
kierunek markizy
Możesz także wybrać kierunek, w którym zawartość powinna przewijać się na ekranie. Wartości naprzód i wstecz są oparte na kierunkowości tekstu, gdy stylem przepełnienia jest marquee-line oraz w górę lub w dół, gdy stylem przepełnienia jest markiza-blok.
Szczegóły kierunku namiotu
w stylu przelewowym |
Kierunek językowy | Naprzód | odwrócić |
|---|---|---|---|
marquee-line |
ltr | lewo | dobrze |
| rtl | dobrze | lewo | |
namiot-blok |
w górę | na dół |
namiot-prędkość
Ta właściwość określa, jak szybko zawartość przewija się na ekranie. Wartości są wolne, normalne i szybkie. Rzeczywista prędkość zależy od treści i przeglądarki, która je wyświetla, ale wartości muszą być wolne, wolniej niż normalnie, czyli wolniej niż szybko.
Obsługa przez przeglądarkę właściwości markizy
Być może trzeba będzie użyć przedrostki dostawcy vendor aby elementy markizy CSS działały. Są to:
| CSS3 | Prefiks dostawcy |
|---|---|
przelew-x: markiza-linia; |
overflow-x: -webkit-marquee; |
w stylu namiotowym |
-webkit-w stylu namiotu |
marquee-play-count |
-webkit-markiza-powtórzenie |
kierunek markizy: do przodu|do tyłu; |
-webkit-marquee-direction: do przodu|do tyłu; |
namiot-prędkość |
-webkit-markiza-prędkość |
| brak odpowiednika | -webkit-markiza-przyrost |
Ostatnia właściwość pozwala określić, jak duże lub małe powinny być kroki, gdy zawartość przewija się na ekranie w ramce.
Aby Twoja markiza działała, należy najpierw umieścić wartości przedrostka dostawcy, a następnie podać wartości specyfikacji CSS3. Na przykład tutaj jest CSS dla markizy, która przewija tekst pięć razy od lewej do prawej w polu 200x50.
{
szerokość: 200px; wysokość: 50px; spacja: nowrap;
przelew: ukryty;
overflow-x:-webkit-marquee;
-webkit-marquee-direction: do przodu;
-webkit-styl markizy: przewijanie;
-webkit-marquee-speed: normalny;
-webkit-marquee-increment: mały;
-webkit-markiza-powtórzenie: 5;
przelew-x: markiza-linia;
kierunek markizy: do przodu;
styl namiotowy: przewijanie;
prędkość namiotu: normalna;
marquee-play-count: 5;
}