Marquee in CSS - Beginnershandleiding
Marquee werd voor het eerst geïntroduceerd in Internet Explorer en was erg populair in de jaren 90 voordat W3C uiteindelijk besloot om het uit te sluiten van het HTML-standaardelement vanwege gebruiksproblemen. Webontwerpers werden aangemoedigd om de tag niet te gebruiken.
Verrassend genoeg maakt de selectiekader nu een comeback, niet in een tag formaat zoals het deed, maar in een CSS-module. Deze module is beschikbaar als onderdeel van de Webkit CSS-specificatie en de W3C werkt momenteel ook aan een vergelijkbare module. Aangezien de W3C-versie zich nog in de fase van de kandidaat-aanbeveling bevindt, is deze nog niet van toepassing. Op dit moment zullen we alleen die uit de Webkit-specificatie dekken.
De syntaxis
Allereerst kan het selectiekader worden gedefinieerd met behulp van de volgende syntaxis voor steno.
-webkit-marquee: [richting] [increment] [herhaling] [stijl] [snelheid]
Elk van de waarden die nodig zijn in de syntaxis hierboven, vind ik, is vrij duidelijk, of anders kun je ze voldoende uitgelegd vinden in deze documentatie. Dus als u dieper wilt onderzoeken hoe deze syntaxis werkt, kunt u altijd eerst de documentatie raadplegen.
Ga dan met ons mee als we doorgaan om enkele echte voorbeelden te maken en te zien hoe het in actie is.
Voorbeeld 1: door de tekst bladeren
In orde, in het eerste voorbeeld zullen we de klassieke beweging van het selectiekader creëren waarbij de tekst van rechts naar links wordt verplaatst.
Laten we onze tekstmarkering zoals hieronder maken:
Lollipop topping citroendruppels jujubes cake fruitcake taart snor zoethout sesam snaps.
Definieer vervolgens het selectiekader met de volgende syntaxis.
-webkit-marquee: auto medium oneindig scroll normaal; overflow-x: -webkit-marquee;
Wanneer de selectiekaderrichting is ingesteld op auto, het wordt standaard van rechts naar links verplaatst; alternatief kunt u deze waarde wijzigen in links. Merk ook op dat de overflow-x eigenschap moet worden ingesteld op -WebKit-tent zodat de inhoud altijd als één zal werken. Als u deze eigenschap weglaat, wordt de tekst niet verder verplaatst.
Zie de demo.
Voorbeeld 2: stuiter heen en weer
In het tweede voorbeeld zullen we proberen een andere stijl aan de tent te geven. Deze keer gebruiken we afwisselend in plaats van rol en verander de richtingswaarde in rechts. Op die manier beweegt het selectiekader van links naar rechts en kaatst vervolgens heen en weer.
-webkit-marquee: auto medium oneindig alternatief normaal; overflow-x: -webkit-marquee;
Zie de demo
Voorbeeld 3: de tekst naar boven verplaatsen
En voor het laatste voorbeeld zullen we de selectiekaderrichting wijzigen om omhoog te gaan. Er zijn er twee richting waarden om dit te doen; je kunt de waarde wijzigen in omhoog of verder.
Persoonlijk begrijp ik niet waarom de Webkit twee waarden heeft die in essentie hetzelfde doen, omdat ik denk dat dit voor sommige mensen tot verwarring kan leiden.
-webkit-marquee: up medium oneindig scroll normaal; overflow-x: -webkit-marquee;
Zie de demo
Verder heb ik nog een aantal voorbeelden samengesteld, maar die zullen overweldigend zijn als ze hier allemaal worden uitgelegd.
Maar u kunt de demo bekijken en de bronnen downloaden via de onderstaande links.
- demonstratie
- Download de bron
Laatste gedachte & referenties
Ik was eerst verbaasd dat er nog steeds belangstelling is voor de tent, waarvan ik dacht dat die het einde had bereikt. Dit leidde me ook tot de vraag hoe een CSS-module als deze nuttig zal zijn. In feite ondersteunt elke browser nog steeds de erfenis van de label.
Wat denk je ervan? Is de feesttent nog steeds relevant op deze leeftijd en zou het nuttig zijn in modern webdesign?
Als je nog steeds nieuwsgierig bent naar deze feesttent, kun je enkele van de volgende referenties bezoeken:
- Safari CSS-referentie
- Webkit marquee generator
- Uitgebreide documentatie van de oude
tag van Sitepoint. - En er is altijd een generator voor bijna alles, inclusief deze Marquee Generator.
