Marquee in CSS - Przewodnik dla początkujących
Marquee został po raz pierwszy wprowadzony w Internet Explorerze i był bardzo popularny w latach 90., zanim W3C ostatecznie zdecydowało się na wykluczenie go ze standardowego elementu HTML ze względu na problemy z użytecznością. Projektantów stron internetowych zachęcono do nieużywania tagu.
Co zaskakujące, markiza powraca, nie w tagu format jak to, ale w module CSS. Moduł ten jest dostępny jako część specyfikacji CSS Webkit, a W3C pracuje obecnie nad podobnym modułem. Ponieważ jednak wersja W3C jest nadal na etapie rekomendacji kandydata, nie ma ona jeszcze zastosowania. W tej chwili omówimy tylko ten ze specyfikacji Webkit.
Składnia
Po pierwsze, markiza może być zdefiniowana przy użyciu następującej skróconej składni.
-webkit-marquee: [kierunek] [przyrost] [powtórzenie] [styl] [prędkość]
Każda z wartości potrzebnych w powyższej składni jest, jak sądzę, dość oczywista, inaczej możesz znaleźć je w tej dokumentacji w wystarczającym stopniu wyjaśnione. Tak więc, jeśli chcesz zagłębić się w to, jak ta składnia zadziała, zawsze możesz najpierw odwołać się do dokumentacji.
Następnie dołącz do nas, gdy zaczniemy tworzyć prawdziwe przykłady i zobaczyć, jak to działa.
Przykład 1: Przewijanie tekstu
W porządku, w pierwszym przykładzie stworzymy klasyczny ruch markizy, który powoduje, że tekst przesuwa się od prawej do lewej.
Utwórzmy nasz znacznik tekstowy, jak poniżej:
Lollipop topping cytrynowe krople jujuby aplikować keksowe tarty lukrecjowe przystawki sezamowe.
Następnie zdefiniuj markizę z następującą składnią.
-webkit-marquee: normalny automatyczny nieskończony przewijanie; overflow-x: -webkit-marquee;
Gdy kierunek markizy jest ustawiony na automatyczny, domyślnie przesunie się od prawej do lewej strony; alternatywnie możesz zmienić tę wartość na lewo. Zauważ też, że przepełnienie-x właściwość musi być ustawiona na -webkit-markiza aby treść zawsze zachowywała się jak jedna. Jeśli pominiesz tę właściwość, tekst nie zostanie przeniesiony.
Zobacz prezentację.
Przykład 2: Odbij w tę iz powrotem
W drugim przykładzie spróbujemy nadać marquee inny styl. Tym razem używamy alternatywny zamiast zwój i zmień wartość kierunku na dobrze. W ten sposób markiza przesunie się z lewej strony na prawą, a następnie odbije się tam iz powrotem.
-webkit-marquee: auto medium infinite alternate normal; overflow-x: -webkit-marquee;
Zobacz prezentację
Przykład 3: Przesuwanie tekstu w górę
A dla ostatniego przykładu zmienimy kierunek markizy, aby przesunąć się w górę. Istnieją dwa kierunek wartości do tego; możesz zmienić wartość na w górę lub przed siebie.
Osobiście nie rozumiem, dlaczego Webkit podał dwie wartości, które zasadniczo robią to samo, ponieważ myślę, że może to prowadzić do zamieszania dla niektórych osób.
-webkit-marquee: w górę średnie nieskończone przewijanie normalne; overflow-x: -webkit-marquee;
Zobacz prezentację
Ponadto skompilowałem kilka przykładów, ale będą one przytłaczające, jeśli zostaną tutaj wyjaśnione.
Możesz jednak wyświetlić wszystkie wersje demonstracyjne i pobrać źródła z poniższych linków.
- Próbny
- Pobierz źródło
Ostateczna myśl i referencje
Po raz pierwszy zdziwiłem się, że nadal interesuje nas namiot, który, jak sądziłem, spełnił swój cel. Doprowadziło mnie to również do pytania, jak taki moduł CSS będzie przydatny. W rzeczywistości każda przeglądarka nadal wspiera dziedzictwo etykietka.
Więc co o tym myślisz? Czy markiza jest nadal aktualna w tym wieku i czy byłaby przydatna w nowoczesnym projektowaniu stron internetowych?
Jeśli nadal jesteś ciekawy tej markizy, możesz odwiedzić następujące referencje:
- Safari CSS Reference
- Generator namiotów Webkit
- Kompleksowa dokumentacja starego
tag z Sitepoint. - I zawsze jest generator dla prawie wszystkiego, w tym Generator Marquee.
