Hemsida » Kodning » Markeringsram i CSS - Nybörjarhandbok

    Markeringsram i CSS - Nybörjarhandbok

    Marquee introducerades först i Internet Explorer och var väldigt populärt under 90-talet innan W3C slutligen bestämde sig för att utesluta det från HTML-standardelementet på grund av användbarhetsproblem. Webbdesigners uppmanades att inte använda taggen.

    Överraskande, men markeringen gör nu en comeback, inte i en tagg format som det gjorde, men i en CSS-modul. Denna modul är tillgänglig som en del av Webkit CSS-specifikationen och W3C arbetar för närvarande med en liknande modul. Men eftersom W3C-versionen fortfarande finns i kandidatrekommendationen, är den inte tillämplig än. Så vid den här tiden kommer vi bara att täcka den från Webkit-specifikationen.

    Syntaxen

    Först och främst kan markeringen definieras med hjälp av följande syntetiska stenografi.

    -webkit-markering: [riktning] [inkrement] [upprepning] [stil] [hastighet]

    Var och en av de värden som behövs i syntaxen ovan, tror jag, är ganska självförklarande, annars kan du hitta dem tillräckligt förklarat i denna dokumentation. Så om du vill gräva djupare på hur denna syntax ska fungera kan du alltid referera till dokumentationen först.

    Följ med oss ​​då vi fortsätter för att skapa några riktiga exempel och se hur det går i aktion.

    Exempel 1: Rulla texten

    Okej, i det första exemplet kommer vi att skapa den klassiska rörelsen i markeringen som har texten flyttad från höger till vänster.

    Låt oss skapa vår textmarkering enligt nedan:

    Lollipop topping citron droppar jujubes applicake fruktkaka tart lakris sesam snaps.

    Definiera sedan markeringen med följande syntax.

     -webkit-markering: auto medium oändlig rulla normal; overflow-x: -webkit-markering;

    När markeringsriktningen är inställd på bil, det kommer som vanligt att gå från höger till vänster; Alternativt kan du ändra det här värdet till vänster. Observera också att överströmnings-x egendom måste ställas in på -webkit-marquee så att innehållet alltid kommer att fungera som ett. Om du släpper bort den här egenskapen går texten inte vidare.

    Se demo.

    Exempel 2: studsa fram och tillbaka

    I det andra exemplet kommer vi att försöka ge en annan stil till markeringen. Den här gången använder vi alternativ istället för skrolla och ändra riktvärdet till höger. På så sätt kommer markeringen att flytta från vänster till höger och studsa fram och tillbaka.

     -webkit-markering: auto medium oändlig alternativ normal; overflow-x: -webkit-markering;

    Se demo

    Exempel 3: Flytta texten uppåt

    Och för det sista exemplet kommer vi att ändra markeringsriktningen för att flytta uppåt. Det finns två riktning värden för att göra det; du kan ändra värdet till upp eller ett huvud.

    Personligen förstår jag inte varför Webkit gav två värderingar som i huvudsak gör samma sak eftersom jag tror att det kan leda till förvirring för vissa människor.

     -webkit-markering: upp medium oändlig rulla normal; overflow-x: -webkit-markering;

    Se demo

    Dessutom har jag sammanställt några fler exempel men de kommer att bli överväldigande om de alla förklaras här.

    Men du kan se alla demo och ladda ner källorna från länkarna nedan.

    • demo
    • Hämta källa

    Slutlig tanke och referenser

    Jag blev först förvånad över att det fortfarande finns intresse för tältet, som jag trodde hade mött sitt slut. Detta ledde mig också att ifrågasätta hur en CSS-modul så här kommer att vara användbar. Faktum är att alla webbläsare fortfarande stöder arv från märka.

    Så vad tycker du? Är tältet fortfarande relevant vid denna ålder och skulle det vara användbart i modern webbdesign?

    Om du fortfarande är nyfiken på det här tältet, kan du besöka några av följande referenser: