Marquee in CSS - Panduan Permulaan
Marquee mula diperkenalkan di Internet Explorer dan sangat popular pada tahun 90-an sebelum W3C akhirnya memutuskan untuk mengecualikannya daripada elemen standard HTML disebabkan oleh isu kegunaan. Pereka web digalakkan untuk tidak menggunakan tag tersebut.
Namun menghairankan, marquee kini membuat kemunculan semula, bukan dalam tag format seperti itu, tetapi dalam Modul CSS. Modul ini boleh didapati sebagai sebahagian daripada spesifikasi CSS Webkit dan W3C sedang menjalankan modul serupa. Walau bagaimanapun, sejak versi W3C masih berada di peringkat Cadangan Calon, ia masih belum terpakai. Jadi, pada masa ini, kita hanya akan menutupi satu daripada spesifikasi Webkit.
Sintaks
Pertama sekali, marquee boleh ditakrifkan menggunakan sintaks berikut.
-webkit-marquee: [arah] [kenaikan] [pengulangan] [gaya] [kelajuan]
Setiap nilai yang diperlukan dalam sintaks di atas, saya percaya, cukup jelas, atau anda boleh menemuinya dengan cukup jelas di dokumentasi ini. Jadi, jika anda ingin menggali lebih mendalam bagaimana sintaks ini akan berfungsi, anda boleh merujuk kepada dokumentasi terlebih dahulu.
Kemudian, sertai kami semasa kami meneruskan untuk membuat beberapa contoh sebenar dan melihat bagaimana ia bertindak.
Contoh 1: Menatal teks
Baiklah, dalam contoh pertama kita akan membuat pergerakan klasik tenda yang mempunyai teks bergerak dari kanan ke kiri.
Mari buat markup teks kami seperti di bawah:
Lollipop topping lemon jatuh jujubes aplikaca fruitcake tart liquorice sesame snaps.
Kemudian tentukan marquee dengan sintaks berikut.
-webkit-marquee: tatal sederhana sederhana tak terhingga biasa; overflow-x: -webkit-marquee;
Apabila arah marquee ditetapkan kepada auto, ia akan secara lalai bergerak dari kanan ke kiri; Sebagai alternatif anda boleh menukar nilai ini kepada ditinggalkan. Juga perhatikan bahawa overflow-x harta perlu ditetapkan -webkit-marquee supaya kandungannya sentiasa bertindak seperti itu. Jika anda meninggalkan harta ini, teks itu tidak akan diteruskan.
Lihat demo itu.
Contoh 2: Melantun ke belakang dan sebagainya
Dalam contoh kedua, kita akan cuba memberikan gaya yang berbeza kepada tamadun. Kali ini kita gunakan alternatif bukannya tatal dan tukar nilai arah ke betul. Dengan cara itu, tenda itu akan bergerak dari kiri ke kanan dan kemudian melantun ke belakang.
-webkit-marquee: auto sederhana tak terhingga seli normal; overflow-x: -webkit-marquee;
Lihat demo itu
Contoh 3: Memindahkan teks ke atas
Dan bagi contoh terakhir, kita akan mengubah arah tenda untuk bergerak ke atas. Terdapat dua arah nilai untuk berbuat demikian; anda boleh menukar nilai kepada up atau depan.
Secara peribadi saya tidak dapat mengapa Webkit memberikan dua nilai yang pada asasnya melakukan perkara yang sama kerana saya fikir ia boleh menyebabkan kekeliruan bagi sesetengah orang.
-webkit-marquee: tatal sederhana tanpa had normal; overflow-x: -webkit-marquee;
Lihat demo itu
Lebih-lebih lagi, saya telah mengumpulkan lebih banyak contoh tetapi mereka akan menjadi sangat menggembirakan jika semuanya diterangkan di sini.
Tetapi, anda boleh melihat semua demo dan memuat turun sumber dari pautan di bawah.
- Demo
- Muat turun Sumber
Pemikiran & Rujukan akhir
Saya mula-mula terkejut kerana masih ada minat dalam kemah, yang saya fikir telah menamatkannya. Ini juga membawa saya untuk mempersoalkan bagaimana modul CSS seperti ini berguna. Sebenarnya setiap penyemak imbas masih menyokong warisan tag.
Jadi, apa pendapat anda? Adakah marquee masih relevan pada zaman ini dan akan berguna dalam reka bentuk web moden?
Sekiranya anda masih ingin tahu perkara ini, anda boleh melawat beberapa rujukan berikut:
- Rujukan CSS Safari
- Penjana marin Webkit
- Dokumentasi komprehensif yang lama
tag dari Sitepoint. - Dan selalu ada penjana untuk hampir semuanya, termasuk Generator Marquee ini.
