Vloeiend schalen

Overzicht

Met vloeiend schalen kunnen componenten hun interne verhoudingen (zoals lettergrootte en afstand) aanpassen op basis van hun huidige afmetingen. Dit zorgt voor een consistenter ontwerp dan wanneer je tussen vaste breekpunten springt.

In het verleden werd vloeiend schalen bereikt met viewport-eenheden (schalen op basis van de schermgrootte), maar met moderne containerquery-eenheden kunnen componenten worden geschaald ten opzichte van de bovenliggende container. Zo zien componenten er goed uit, ongeacht waar ze in een indeling worden geplaatst, wat een betere isolatie en herbruikbaarheid van componenten bevordert.

Implementatie

1. Een container definiëren

Als je containerquery-eenheden wilt gebruiken, moet je eerst een containmentcontext definiëren voor een bovenliggend element.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Eenheden voor containerquery's gebruiken

Gebruik containerquery-eenheden (cqi, cqb, enzovoort) om formaten in te stellen ten opzichte van de afmetingen van de container.

• cqi: 1% van de inline grootte van de container (breedte in horizontale schrijfmodi).
• cqb: 1% van de blokgrootte van de container (hoogte in horizontale schrijfmodi).

Opmerking: Containereenheden kunnen rechtstreeks op elke property worden gebruikt zonder dat er een @container-queryregel nodig is. Ze worden automatisch opgelost op basis van de dichtstbijzijnde voorouder met een gedefinieerde container-type.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Waarden beperken met clamp()

Gebruik de CSS-functie clamp() om te voorkomen dat formaten te klein of te groot worden. Dit heeft invloed op de mogelijkheid van de gebruiker om in te zoomen of de basislettergrootte aan te passen. Het maximale formaat mag niet meer dan 2, 5 keer het minimale formaat zijn om te zorgen dat de tekst voldoet aan de toegankelijkheidsrichtlijnen.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Reservestrategieën

Als containerquery's niet worden ondersteund door de browser, moet u een fallback bieden met viewport-eenheden of standaard mediaquery's.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Deze fallback zorgt ervoor dat de tekst nog steeds wordt geschaald, maar dan op basis van de schermbreedte in plaats van de breedte van de component. Test dit om te controleren of het werkt in uw use case.