Ħolqien ta 'Kontenut Skrollabbli f'HTML5 u CSS3 Mingħajr MARQUEE

Dawk minnkom li kitbu HTML għal żmien twil jistgħu jiftakru l-element. Dan kien element speċifiku għall-browser li ħoloq banner ta 'scrolling tat-test madwar l-iskrin. Dan l-element qatt ma ġie miżjud mal- ispeċifikazzjoni tal-HTML u l-appoġġ għalih varja b'mod wiesa 'madwar il-browsers. In-nies spiss kellhom opinjonijiet sodi ħafna dwar l-użu ta 'dan l-element - kemm pożittiv kif ukoll negattiv. Imma jekk inti imħabba jew hated, hija serviet l-iskop li tagħmel il-kontenut li ħassar il-fruntieri tal-kaxxa viżibbli.

Parti mir-raġuni qatt ma ġiet implimentata bis-sħiħ mill-browsers, apparti minn opinjoni personali qawwija, kienet li hija meqjusa bħala effett viżiv u bħala tali, m'għandhiex tkun definita mill-HTML, li jiddefinixxi l-istruttura. Minflok, effetti viżivi jew ta 'preżentazzjoni għandhom ikunu ġestiti mis-CSS. U CSS3 iżid il-modulu tal-marquee biex jikkontrolla kif il-browsers iżidu l -effett tal-marquee ma 'l-elementi.

Karatteristiċi ġodda CSS3

CSS3 iżid ħames proprjetajiet ġodda biex jgħinek tikkontrolla kif il-kontenut tiegħek juri l-marquee: overflow-style, marquee-style, marquee-play-count, marquee-direzzjoni u marquee-speed.

stil ta 'overflow
Il-proprjetà ta 'stil ta' overflow (li jien diskuss ukoll fl-artikolu CSS Overflow) jiddefinixxi l-istil preferut għal kontenuti li jegħleb il-kaxxa tal-kontenut. Jekk issettja l-valur għal marquee-line jew marquee-block il-kontenut tiegħek se jiżżerżaq 'il barra u lejn ix-xellug / il-lemin (marquee-line) jew' il fuq / isfel (marquee-block).

marquee-style
Din il-proprjetà tiddefinixxi kif il-kontenut se jidħol fis-sens (u barra).

L-għażliet huma skrolljar, slide u sostitut. Scroll jibda bil-kontenut kompletament barra l-iskrin, u mbagħad jiċċaqlaq madwar iż-żona viżibbli sakemm kollox ikun kompletament skrin mill-ġdid mill-ġdid. Slide jibda bil-kontenut kompletament barra l-iskrin u mbagħad jiċċaqlaq sakemm il-kontenut ikun imċaqlaq għal kollox fuq l-iskrin u ma jkunx hemm aktar kontenut li jitħalla biex tiżżerżaq fuq l-iskrin.

Fl-aħħarnett, alternattiv jirribatti l-kontenut minn naħa għal oħra, li jiżżerżaq 'il quddiem u lura.

marquee-play-count
Wieħed mill-iżvantaġġi ta 'l-użu ta' l-element MARQUEE huwa li l-marquee qatt ma tieqaf. Iżda bil-marquee-play-counting tal-istil tal-proprjetà tista 'tissettja l-marquee biex iddawwar il-kontenut fuq u darba għal numru speċifiku ta' drabi.

direzzjoni tal-marquee
Tista 'wkoll tagħżel id-direzzjoni li l-kontenut għandu jimxi fuq l-iskrin. Il-valuri 'l quddiem u lura huma bbażati fuq id-direzzjonalità tat-test meta l-istil tat-tifwir ikun il-linja tal-marquee u' l fuq jew 'l isfel meta l-istil tat-tifwir ikun marquee-block.

Dettalji tal-Marquee-Direction

stil ta 'overflow Id-Direzzjoni tal-Lingwa quddiem reverse
marquee-line ltr xellug dritt
rtl dritt xellug
marquee-block up 'l isfel

marquee-speed
Din il-proprjetà tiddetermina kemm malajr il-kontenut jimxi fuq l-iskrin. Il-valuri huma kajman, normali u veloċi. Il-veloċità attwali tiddependi fuq il-kontenut u l-browser li jurih, iżda l-valuri għandhom ikunu bil-mod aktar bil-mod min-normal li hija aktar bil-mod minn veloċi.

Appoġġ tal-Browser tal-Proprjetajiet tal-Marquee

Jista 'jkollok bżonn tuża prefissi tal-bejjiegħ biex tikseb l-elementi ta' marquee CSS biex jaħdmu. Dawn huma kif ġej:

CSS3 Prefix tal-bejjiegħ
overflow-x: marquee-line; overflow-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
direzzjoni tal-marquee: quddiem | lura; -webkit-marquee-direzzjoni: forwards | lura;
marquee-speed -webkit-marquee-speed
l-ebda ekwivalenti -webkit-marquee-increment

L-aħħar proprjetà tippermettilek tiddefinixxi kemm hu kbir jew żgħir il-passi għandhom ikunu hekk kif il-kontenut jitla 'fuq l-iskrin tal-marquee.

Sabiex ikollok il-kariga tiegħek taħdem, għandek tpoġġi l-ewwel il-prefixi tal-bejjiegħ u mbagħad issegwihom bil-valuri ta 'speċifikazzjoni CSS3. Pereżempju, hawnhekk hija s-CSS għal marquee li tiskambja t-test ħames darbiet mix-xellug għal-lemin ġo kaxxa 200x50.

{
wisa ': 200px; għoli: 50px; spazju abjad: nowrap;
overflow: moħbija;
overflow-x: -webkit-marquee;
-webkit-marquee-direzzjoni: quddiem;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normali;
-webkit-marquee-increment: żgħir;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
id-direzzjoni tal-marquee: 'il quddiem;
marquee-style: scroll;
veloċità tal-marquee: normali;
marquee-play-count: 5;
}