Uzoq vaqt davomida HTMLni yozgan sizlar bu elementni yodda tutishlari mumkin. Bu ekranda aylantirish matnini yaratgan brauzerga xos element edi. Ushbu element hech qachon HTML spetsifikatsiyasiga qo'shilmadi va brauzerlar orasida keng tarqalib turdi. Odamlar ko'pincha bu elementni ishlatish haqida juda kuchli fikrlarga ega edilar - bu ham ijobiy, ham salbiy. Lekin siz uni yaxshi ko'rasizmi yoki yomon ko'rgansizmi, u kutubxonalarning chegaralarini ko'rgan kontentni yaratish maqsadiga xizmat qildi.
Brauzerlar tomonidan hech qachon to'liq amalga oshirilmagani sababi, kuchli shaxsiy fikrdan tashqari, u ingl. Effekt deb qaraldi va shuning uchun uni tuzilishini belgilaydigan HTML tomonidan aniqlanmasligi kerak edi. Aksincha, ingl. Yoki taqdimot effektlari CSS tomonidan boshqarilishi kerak. CSS3 esa brauzerlarning elementlarga qanday ta'sir qilishini nazorat qilish uchun marquee modulini qo'shib qo'yadi.
Yangi CSS3 xususiyatlari
CSS3 sizning kontentingiz naqshda qanday ko'rinishini nazorat qilish uchun beshta yangi xususiyatni qo'shadi: to'ldirish uslubi, marquee uslubi, marquee-play-son, marquee-yo'nalishi va marquee-tezligi.
toshqini tarzi
Ko'tarilish uslubi xususiyati (CSS Overflow maqolasida men ham muhokama qilingan) kontent qutisini to'ldiradigan tarkib uchun afzal uslubni belgilaydi. Agar qiymati marquee-line yoki marquee-blokga o'rnatgan bo'lsangiz, kontentingiz chap / o'ngga (marquee-line) yoki yuqoriga / pastga (marquee-block) kirib chiqadi.
marquee tarzi
Bu xususiyat kontentni qanday ko'rinishda (va tashqariga) o'tkazilishini belgilaydi.
Tanlovlar aylantirish, slayd va muqobil hisoblanadi. O'tkazish tarkibi butunlay o'chirilgan holda boshlanadi va keyin butunlay o'chirilgan ekranga qadar paydo bo'ladigan maydon bo'ylab harakat qiladi. Slayd tarkibni butunlay yopiq ekrandan boshlaydi va keyin kontent to'liq ekranga ko'chirilgunga qadar davom etadi va ekranda slaydni tark etishning boshqa tarkibi yo'q.
Nihoyat, muqobil kontentni yonma-yon yo'naltirib, oldinga va orqaga siljiydi.
marquee-play-count
MARQUEE elementini ishlatishdagi nuqsonlardan biri shundaki, marquee hech qachon to'xtamaydi. Lekin marquee-play-count uslubi mulki bilan kontentni muayyan vaqt davomida ochish va o'chirish uchun marquee ni o'rnatishingiz mumkin.
marquee yo'nalishi
Bundan tashqari, kontentning ekranda aylanishi kerak bo'lgan yo'nalishni tanlashingiz mumkin. Oldinga va orqaga qadriyatlar qiymatlari toshqin uslubi marquee-liniyasi bo'lsa va yuqorida turgan yoki pastroq bo'lsa, to'ldirish uslubi marquee-blok bo'lganda matnning yo'nalishiga asoslanadi.
Marquee-yo'nalishi haqida ma'lumot
| toshqini tarzi | Til yo'nalishi | oldinga | teskari |
|---|---|---|---|
| marquee-line | ltr | chapda | o'ng |
| rtl | o'ng | chapda | |
| marquee-blok | up | pastga |
marquee-tezligi
Bu xususiyat ekranda kontentning qanchalik tez aylanishini belgilaydi. Qadriyatlar sekin, oddiy va tezdir. Haqiqiy tezlik kontentga va uni ko'rsatadigan brauzerga bog'liq, ammo qadriyatlar sekin past bo'lishi kerak.
Marquee xususiyatlarining brauzerni qo'llab-quvvatlashi
CSS marquee elementlarini ishlash uchun sotuvchi prefikslaridan foydalanishingiz mumkin. Ular quyidagichadir:
| CSS3 | Sotuvchi prefiksi |
|---|---|
| overflow-x: marquee-line; | toshqin-x: -webkit-marquee; |
| marquee tarzi | -webkit-marquee-uslubi |
| marquee-play-count | -webkit-marquee-takrorlash |
| marquee-yo'nalishi: oldinga | teskari; | -webkit-marquee-yo'nalishi: oldinga orqaga; orqaga; |
| marquee-tezligi | -webkit-marquee-speed |
| hech mos kelmaydi | -webkit-marquee-increment |
Oxirgi xususiyat, marquee ekranda kontentni aylantirish kabi qadamlar qanchalik katta yoki kichik ekanligini aniqlashga imkon beradi.
Marquee ishini bajarish uchun avvalo sotuvchi oldindan belgilangan qiymatlarni qo'yib, CSS3 spetsifikatsiyasi qiymatlari bilan ularga rioya qiling. Misol uchun, bu erda matni besh marta chapdan o'ngga 200x50 qutiga aylantiradigan marquee uchun CSS.
{
kengligi: 200px; balandlik: 50px; oq bo'shliq: nowrap;
toshqin: yashirin;
toshqin-x: -webkit-marquee;
-webkit-marquee-yo'nalishi: oldinga;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: kichik;
-webkit-marquee-takrorlash: 5;
overflow-x: marquee-line;
marquee-yo'nalishi: oldinga;
marquee uslubi: scroll;
marquee-speed: normal;
marquee-play-soni: 5;
}