МАРКУЕЕ у доба ХТМЛ5 и ЦСС3

Они од вас који већ дуго пишу ХТМЛ можда се сећају тог елемента. Ово је елемент специфичан за прегледач који је створио натпис за померање текста преко екрана. Овај елемент никада није додат у ХТМЛ спецификација и подршка за њу су се веома разликовали у читачима. Људи су често имали врло јака мишљења о употреби овог елемента - и позитивна и негативна. Без обзира да ли сте га волели или мрзели, он је служио у сврху да садржај који прелази границе оквира учини видљивим.

Део разлога што га претраживачи никада нису у потпуности имплементирали, осим јаког личног мишљења, био је тај сматра се визуелним ефектом и као такав не би требало да га дефинише ХТМЛ, који дефинише структура. Уместо тога, визуелним или презентацијским ефектима треба да управља ЦСС. А ЦСС3 додаје модул за означавање како би контролисао како прегледачи додају ефекат маркуее елементима.

Нова својства ЦСС3

ЦСС3 додаје пет нова својства да бисте помогли да контролишете како се ваш садржај приказује у маркуее-у: преливајући стил, маркуее-стиле, маркуее-плаи-цоунт, маркуее-дирецтион и маркуее-спеед.

instagram viewer

преливен стил
Својство стила преливања (о чему смо такође говорили у чланку ЦСС Оверфлов) дефинише преферирани стил за садржаје који прелазе оквир за садржај. Ако вредност подесите на маркуее-лине или маркуее-блоцк, ваш садржај ће клизати улево / удесно (маркуее-лине) или горе / доле (маркуее-блоцк).

шаторски стил
Ово својство дефинише како ће се садржај премештати (и излазити). Опције су свитак, клизати и наизменично. Померање започиње са садржајем који је потпуно искључен са екрана, а затим се креће по видљивом подручју док се поново потпуно не искључи са екрана. Дијапозитив започиње са садржајем потпуно ван екрана, а затим се премешта све док се садржај у потпуности не пресели на екран и не остане више садржаја за клизање по екрану. И на крају, алтернативни садржај одбија садржај с једне на другу страну, клизећи напред-назад.

маркуее-плаи-цоунт
Један од недостатака коришћења МАРКУЕЕ елемента је тај што се шатор никад не зауставља. Али са својством стила маркуее-плаи-цоунт можете да подесите да тачка окреће и искључује садржај одређени број пута.

шетња-правац
Такође можете да одаберете смер у којем би садржај требало да се креће по екрану. Вредности унапред и уназад заснивају се на усмерености текста када је стил преливања маркуее-лине и горе или доле када је стил преливања маркуее-блоцк.

Маркуее-Дирецтион Детаљи

преливен стил Лангуаге Дирецтион напред обрнуто
маркуее-лине лтр лево јел тако
ртл јел тако лево
маркета-блок горе доле

маркуее-спеед
Ово својство одређује колико брзо се садржај помера на екрану. Вредности су споре, нормалне и брзе. Стварна брзина зависи од садржаја и прегледача који га приказује, али вредности морају бити споро, спорије је него нормално, што је спорије од брзог.

Подршка претраживача за својства ознаке

Можда ћете морати да користите префикси добављача како би елементи ЦСС ознаке радили. Они су следећи:

ЦСС3 Префикс добављача
оверфлов-к: маркуее-лине; оверфлов-к: -вебкит-маркуее;
шаторски стил -вебкит-маркуее-стиле
маркуее-плаи-цоунт -вебкит-маркуее-понављање
смер кретања: напред | уназад; -вебкит-маркуее-дирецтион: унапред | уназад;
маркуее-спеед -вебкит-маркуее-спеед
нема еквивалента -вебкит-маркуее-прираст

Последње својство вам омогућава да дефинишете колико велики или мали кораци треба да буду док се садржај помера на екрану у маркизи.

Да би ваша маркета успела, прво треба да поставите префиксиране вредности добављача, а затим да их пратите са вредностима спецификације ЦСС3. На пример, овде је ЦСС за ознаку која пет пута помера текст с лева на десно унутар оквира од 200к50.

{
ширина: 200пк; висина: 50пк; празан простор: новрап;
прелив: скривен;
оверфлов-к: -вебкит-маркуее;
-вебкит-маркуее-правац: напред;
-вебкит-маркуее-стиле: помицање;
-вебкит-маркуее-спеед: нормално;
-вебкит-маркуее-прираст: мали;
-вебкит-маркуее-понављање: 5;
оверфлов-к: маркуее-лине;
правац за кретање: напред;
маркуее-стиле: помицање;
брзина истицања: нормална;
број наградних игара: 5;
}
instagram story viewer