MARQUEE в епохата на HTML5 и CSS3

Тези от вас, които пишат HTML за дълго време, могат да запомнят елемента. Това е елемент, специфичен за браузъра, който създава банер на превъртащ се текст на екрана. Този елемент никога не е бил добавен към спецификацията на HTML и подкрепата за него варираше широко в различните браузъри. Хората често са имали много силни мнения относно използването на този елемент - както положителни, така и отрицателни. Но дали сте го обичали или не сте го мразили, то е служило на целта да направите съдържание, което прелива от границите на кутията.

Част от причината, поради която никога не е била напълно изпълнена от браузърите, освен силното лично мнение, е, че тя се счита за визуален ефект и като такава не трябва да се дефинира от HTML, който дефинира структурата. Вместо това, визуалните или презентационните ефекти трябва да се управляват от CSS. И CSS3 добавя модула за маркировка, за да контролира начина, по който браузърите добавят ефекта на маркировката върху елементите.

Нови CSS3 свойства

CSS3 добавя пет нови свойства, които ви помагат да контролирате как съдържанието ви се показва в маркировката: преливане стил, палатка стил, палатка игра броене, палатка посока и палатка скорост.

преливане стилНай- преливане стил собственост (която също съм обсъждала в преливането на CSS на статията) дефинира предпочитания стил за съдържание, което прелива от полето за съдържание. Ако зададете стойността палатка Онлайн или палатка блок вашето съдържание ще се плъзга и излиза наляво / надясно (палатка Онлайн) или нагоре / надолу (палатка блок).

палатка стилТази собственост определя как съдържанието ще се премести в изглед (и изход).

Опциите са свитък, пързалка и заместник, Скролирането започва с пълно изключване на съдържанието и след това се премества през видимата област, докато всичко отново се изключи. Плъзгането започва със съдържанието изцяло на екрана и след това се придвижва, докато съдържанието напълно се придвижи на екрана и няма повече съдържание, което да се плъзга на екрана.

Накрая, алтернативата отскача съдържанието от една страна на друга, плъзгайки се напред-назад.

палатка игра броенеЕдин от недостатъците при използването на навес елементът е, че маркетът никога не спира. Но със собствеността на стила палатка игра броене можете да настроите маркера да включва и изключва съдържанието за определен брой пъти.

палатка посокаМожете също да изберете посоката, в която съдържанието да се превърта на екрана. Стойностите напред и обратен се основават на посоката на текста, когато преливане стил е палатка Онлайн и нагоре или надолу, когато преливане стил е палатка блок.

Подробности за посоката на маркера

преливане стил	Езикова насока	напред	обратен
палатка Онлайн	л	наляво	прав
	RTL	прав	наляво
палатка блок		нагоре	надолу

палатка скоростТази характеристика определя колко бързо съдържанието се превърта на екрана. Стойностите са бавен, нормален, и бърз, Действителната скорост зависи от съдържанието и браузъра, които го показват, но стойностите трябва да бъдат бавен е по-бавен от нормален който е по-бавен от бърз.

Поддръжка на браузърите на маркетните имоти

Може да се наложи да използвате префикси на доставчиците, за да получите елементите на маркера CSS да работят. Те са както следва:

CSS3	Префикс на доставчик
преливане-х: маркировка;	преливане-х: -webkit-marquee;
палатка стил	-webkit-палатка стил
палатка игра броене	-webkit-палатка-повторение
посока на маркиране: напред | обратно;	-webkit-маркиране-посока: напред | назад;
палатка скорост	-webkit-палатка скорост
няма еквивалент	-webkit-палатка инкрементиране

Последната собственост ви позволява да определите колко големи или малки трябва да бъдат стъпките, докато съдържанието се превърта на екрана в маркировката.

За да може вашият макет да работи, първо трябва да поставите стойностите на продавача с предварително зададени стойности и след това да ги следвате с CSS3 спецификационните стойности. Например, тук е CSS за маркет, който превърта текста пет пъти от ляво на дясно в кутия 200x50.

{ ширина: 200px; височина: 50px; бяло пространство: сега; преливане: скрито; преливане-х: -webkit-палатка; -webkit-маркировка: посока напред; -webkit-marquee-style: превъртете; -webkit-marquee-скорост: нормално; -webkit-marquee-увеличение: малка; -webkit-marquee-repetition: 5; преливане-х: маркировка; посока на маркиране: напред; стил на маркетинг: превъртете; скорост на маркиране: нормално; брой играчи: 5;}