Bloeden - CSS-trucs | CSS Almanac 2025

De bleedeigenschap in CSS is voor het specificeren van ruimte buiten de paginavakgrens bij het bepalen van de grootte van een afgedrukte pagina.

@page :left ( bleed: 10pt; ) @page :top ( bleed: 5cm; )

Merk op dat bleeddeel uitmaakt van de Paged Media Module Level 3 spec, die momenteel een ontwerp aan de gang. In feite bleedwordt het nauwkeuriger beschreven als een at-rule descriptor in plaats van een eigenschap, aangezien het tot de @pageat-rule behoort .

Waarden

auto: Standaard is nul, tenzij er een cropwaarde is ingesteld voor de markseigenschap die een standaardwaarde creëert van 6pt.
: Stelt in hoe ver buiten het bleedgebied in elke richting is. Negatieve waarden worden geaccepteerd, maar er is geen standaard voor hoe ze zouden worden geïmplementeerd. Merk op dat afdrukformaateenheden (dwz pt, cmen in) worden geaccepteerd.

Meer over aftapgebieden

De term bleedkomt van afdrukken. Het wordt gebruikt om ruimte te beschrijven die buiten de rand van het papier is ontworpen, zodat wanneer het papier wordt bijgesneden, de kleur helemaal naar de rand gaat.

Hoe is dit nuttig voor webdesign? Nou, eigenlijk is het niet echt voor webdesign in die zin dat de bleed geen invloed heeft op wat er in de viewport wordt geverfd. In plaats daarvan wordt de @pageregel gebruikt voor het afdrukken van webpagina's op fysiek papier. Het hebben van een bleedeigenschap geeft ons controle over hoe webpagina's worden weergegeven wanneer ze worden afgedrukt, zoals het vaststellen van een afloopgebied dat moet worden afgesneden. Dit kan vooral cool zijn bij het ontwerpen van webpagina's die bedoeld zijn om als marketingmateriaal te gebruiken, zoals posters.