Degenen onder jullie die al heel lang HTML schrijven, herinneren zich het element misschien nog. Dit was een browserspecifiek element dat een banner met scrollende tekst over het scherm creëerde. Dit element is nooit toegevoegd aan de HTML specificatie en ondersteuning ervoor varieerde sterk tussen browsers. Mensen hadden vaak een zeer uitgesproken mening over het gebruik van dit element - zowel positief als negatief. Maar of je er nu van hield of er een hekel aan had, het diende wel om inhoud die de grenzen van de box overschreed zichtbaar te maken.
Een deel van de reden dat het nooit volledig door browsers werd geïmplementeerd, afgezien van een sterke persoonlijke mening, was dat: het wordt beschouwd als een visueel effect en als zodanig zou het niet moeten worden gedefinieerd door de HTML, die de. definieert structuur. In plaats daarvan moeten visuele of presentatie-effecten worden beheerd door CSS. En CSS3 voegt de selectiekadermodule toe om te bepalen hoe browsers de selectiekader-effect naar elementen.
Nieuwe CSS3-eigenschappen
CSS3 voegt vijf toe nieuwe eigendommen om te helpen bepalen hoe uw inhoud wordt weergegeven in het selectiekader: overloopstijl, selectiekaderstijl, selectiekader-afspelen, selectiekader-richting en selectiekader-snelheid.
overloop-stijl
De eigenschap overflow-style (die we ook hebben besproken in het artikel CSS Overflow) definieert de voorkeursstijl voor inhoud die het inhoudsvak overloopt. Als u de waarde instelt op marquee-line of marquee-block, schuift uw inhoud in en uit naar links/rechts (marquee-line) of omhoog/omlaag (marquee-block).
tent-stijl
Deze eigenschap definieert hoe de inhoud in beeld komt (en eruit). De opties zijn: rol, schuif en wissel af. Scroll begint met de inhoud volledig buiten het scherm en beweegt vervolgens over het zichtbare gebied totdat alles weer volledig buiten het scherm is. Slide begint met de inhoud volledig buiten het scherm en beweegt dan naar voren totdat de inhoud volledig op het scherm is bewogen en er geen inhoud meer over is om op het scherm te schuiven. Ten slotte stuitert afwisselend de inhoud van links naar rechts, heen en weer schuivend.
marquee-play-count
Een van de nadelen van het gebruik van het MARQUEE-element is dat de tent nooit stopt. Maar met de stijleigenschap marquee-play-count kun je het selectiekader instellen om de inhoud een bepaald aantal keren aan en uit te zetten.
selectiekader-richting
U kunt ook de richting kiezen waarin de inhoud op het scherm moet schuiven. De waarden voorwaarts en achterwaarts zijn gebaseerd op de richting van de tekst wanneer de overloopstijl een selectiekader is en omhoog of omlaag wanneer de overloopstijl een selectiekader is.
Marquee-richting details
overloop-stijl |
Taalrichting | vooruit | omgekeerde |
|---|---|---|---|
selectiekader |
ltr | links | Rechtsaf |
| rtl | Rechtsaf | links | |
tent-blok |
omhoog | naar beneden |
selectiekader-snelheid
Deze eigenschap bepaalt hoe snel de inhoud op het scherm scrolt. De waarden zijn langzaam, normaal en snel. De werkelijke snelheid hangt af van de inhoud en de browser die deze weergeeft, maar de waarden moeten langzaam zijn, langzamer dan normaal, wat langzamer is dan snel.
Browserondersteuning van de selectiekadereigenschappen
Mogelijk moet u gebruik maken van leveranciersvoorvoegsels om de CSS-selectiekaderelementen te laten werken. Ze zijn als volgt:
| CSS3 | Leveranciersvoorvoegsel |
|---|---|
overloop-x: selectiekader; |
overflow-x: -webkit-selectiekader; |
tent-stijl |
-webkit-selectiekader-stijl |
marquee-play-count |
-webkit-selectiekader-herhaling |
selectiekader: vooruit|achteruit; |
-webkit-selectiekader-richting: vooruit|achteruit; |
selectiekader-snelheid |
-webkit-selectiekader-snelheid |
| geen equivalent | -webkit-selectiekader-toename |
Met de laatste eigenschap kunt u definiëren hoe groot of klein de stappen moeten zijn als de inhoud op het scherm in het selectiekader schuift.
Om uw selectiekader te laten werken, moet u eerst de vooraf ingestelde waarden van de leverancier plaatsen en deze vervolgens volgen met de CSS3-specificatiewaarden. Hier is bijvoorbeeld de CSS voor een selectiekader dat de tekst vijf keer van links naar rechts scrolt in een vak van 200x50.
{
breedte: 200px; hoogte: 50px; witruimte: nowrap;
overloop verborgen;
overflow-x:-webkit-selectiekader;
-webkit-selectiekader-richting: vooruit;
-webkit-selectiekader-stijl: scroll;
-webkit-selectiekader-snelheid: normaal;
-webkit-marquee-increment: klein;
-webkit-selectiekader-herhaling: 5;
overloop-x: selectiekader;
selectiekader: vooruit;
selectiekader-stijl: scroll;
selectiekader-snelheid: normaal;
marquee-play-count: 5;
}