Een uitgebreide gids voor de CSS @supports-regel, met feature-detectie, geavanceerde queries, fallbacks en praktische voorbeelden voor het bouwen van robuuste en responsieve webdesigns.
CSS @supports onder de knie krijgen: Feature-detectie voor modern webdesign
In het voortdurend evoluerende landschap van webontwikkeling is het garanderen van cross-browsercompatibiliteit en het elegant omgaan met niet-ondersteunde features van het grootste belang. De CSS @supports-regel biedt een krachtig mechanisme voor feature-detectie, waarmee ontwikkelaars conditioneel CSS-stijlen kunnen toepassen op basis van browserondersteuning voor specifieke features. Deze blogpost duikt diep in de finesses van @supports en verkent de syntaxis, mogelijkheden en praktische toepassingen voor het bouwen van robuuste en toekomstbestendige webdesigns.
Wat is CSS @supports?
De @supports-regel, ook bekend als de CSS-supports-selector, is een conditionele at-rule waarmee u kunt controleren of een browser een specifieke CSS-feature of een combinatie van features ondersteunt. Het evalueert een voorwaarde en past de stijlen die binnen de regel zijn gedefinieerd alleen toe als de voorwaarde waar is. Dit stelt u in staat om het uiterlijk en de functionaliteit van uw website progressief te verbeteren voor browsers die nieuwere CSS-features ondersteunen, terwijl u elegante fallbacks biedt voor oudere browsers.
Zie het als een "if"-statement voor uw CSS. In plaats van JavaScript-variabelen te controleren, controleert u rechtstreeks op CSS-capaciteit.
De syntaxis van @supports
De basissyntaxis van de @supports-regel is als volgt:
@supports (condition) {
/* CSS-regels die worden toegepast als de voorwaarde waar is */
}
De condition kan een eenvoudig CSS-eigenschap-waardepaar zijn of een complexere expressie met logische operatoren.
Basisvoorbeelden: Detecteren van enkele CSS-features
Laten we beginnen met een eenvoudig voorbeeld van het detecteren van ondersteuning voor de display: grid-eigenschap:
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
}
In dit voorbeeld worden de stijlen binnen de @supports-regel toegepast op het .container-element als de browser display: grid ondersteunt, waardoor een grid-layout wordt gecreƫerd. Browsers die grid niet ondersteunen, negeren simpelweg de stijlen, en de inhoud wordt waarschijnlijk weergegeven in een meer traditionele block-layout.
Een ander voorbeeld, het detecteren van ondersteuning voor position: sticky, wat handig is voor het maken van 'sticky' headers of zijbalken:
@supports (position: sticky) {
.sticky-element {
position: sticky;
top: 0;
background-color: white; /* Voor betere zichtbaarheid */
z-index: 10;
}
}
Geavanceerde queries: Voorwaarden combineren met logische operatoren
De @supports-regel wordt nog krachtiger wanneer u voorwaarden combineert met logische operatoren zoals and, or en not.
De "and"-operator
De and-operator vereist dat beide voorwaarden aan weerszijden ervan waar moeten zijn om de @supports-regel toe te passen. Bijvoorbeeld:
@supports (display: flex) and (backdrop-filter: blur(10px)) {
.element {
display: flex;
backdrop-filter: blur(10px);
}
}
Deze regel wordt alleen toegepast als de browser zowel display: flex als backdrop-filter: blur(10px) ondersteunt. Als een van beide niet wordt ondersteund, worden de regels niet toegepast.
De "or"-operator
De or-operator vereist dat ten minste Ć©Ć©n van de voorwaarden aan weerszijden ervan waar moet zijn om de @supports-regel toe te passen. Overweeg het controleren op verschillende vendor-prefixen:
@supports ((--webkit-mask-image: url(image.png)) or (mask-image: url(image.png))) {
.masked-element {
-webkit-mask-image: url(image.png);
mask-image: url(image.png);
}
}
Dit voorbeeld controleert op de -webkit-mask-image (voor oudere Safari- en Chrome-versies) of de standaard mask-image-eigenschap. Als een van beide wordt ondersteund, wordt de maskeringsstijl toegepast.
De "not"-operator
De not-operator negeert de voorwaarde die erop volgt. Het wordt alleen als waar geƫvalueerd als de voorwaarde onwaar is. Dit is met name handig voor het bieden van fallbacks voor browsers die een specifieke feature *niet* ondersteunen.
@supports not (display: grid) {
.container {
/* Fallback-stijlen voor browsers zonder grid-ondersteuning */
float: left;
width: 33.33%; /* Voorbeeld van fallback-layout */
}
}
In dit geval worden de stijlen binnen de @supports not (display: grid)-regel toegepast op browsers die display: grid *niet* ondersteunen. Dit zorgt ervoor dat zelfs oudere browsers een basislayout krijgen.
Praktische voorbeelden en gebruiksscenario's
Laten we enkele praktische voorbeelden bekijken van hoe u @supports kunt gebruiken om uw webdesigns te verbeteren.
1. CSS-variabelen (Custom Properties) implementeren met fallbacks
CSS-variabelen bieden een krachtige manier om stijlen te beheren en dynamische thema's te creƫren. Oudere browsers ondersteunen ze echter niet. We kunnen @supports gebruiken om fallbacks te bieden:
/* Standaardstijlen (voor browsers zonder CSS-variabelen) */
body {
background-color: #f0f0f0;
color: #333;
}
@supports ( --custom-property: true ) {
body {
background-color: var(--background-color, #f0f0f0); /* Fallback als de variabele niet is gedefinieerd */
color: var(--text-color, #333);
}
}
Hier definiƫren we eerst standaardstijlen voor browsers die geen CSS-variabelen ondersteunen. Vervolgens gebruiken we binnen de @supports-regel var() om de CSS-variabelen toe te passen als ze worden ondersteund. Het tweede argument van `var()` is een fallback-waarde die wordt gebruikt als de custom property niet is gedefinieerd. Dit is een robuuste manier om potentieel niet-gedefinieerde CSS-variabelen in ondersteunende browsers af te handelen.
2. Typografie verbeteren met font-display
De font-display-eigenschap bepaalt hoe lettertypen worden weergegeven terwijl ze laden. Het wordt ondersteund door de meeste moderne browsers, maar oudere browsers herkennen het misschien niet. Hier ziet u hoe u @supports kunt gebruiken om de typografie te verbeteren en tegelijkertijd een fallback te bieden:
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Standaardstijlen */
body {
font-family: 'MyCustomFont', sans-serif;
}
@supports (font-display: swap) {
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Gebruik swap voor moderne browsers */
}
}
In dit voorbeeld definiƫren we de font-face en passen we deze toe op de body. De @supports-regel controleert vervolgens op ondersteuning voor font-display: swap. Indien ondersteund, herdefinieert het de font-face met font-display: swap, wat de browser instrueert om fallback-tekst weer te geven totdat het aangepaste lettertype is geladen. Browsers die font-display niet ondersteunen, gebruiken simpelweg het aangepaste lettertype wanneer het is geladen, zonder het 'swapping'-gedrag.
3. Formulierelementen stijlen met appearance
Met de appearance-eigenschap kunt u het native uiterlijk van formulierelementen bepalen. De ondersteuning hiervan kan echter per browser verschillen. U kunt @supports gebruiken om consistente styling te bieden terwijl u waar mogelijk gebruikmaakt van het native uiterlijk:
/* Standaardstijlen voor oudere browsers */
input[type="checkbox"] {
/* Aangepaste checkbox-styling */
width: 20px;
height: 20px;
border: 1px solid #ccc;
/* ... andere aangepaste stijlen ... */
}
@supports (appearance: none) or (-webkit-appearance: none) {
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
/* Verbeterde styling voor moderne browsers */
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: white;
position: relative;
cursor: pointer;
}
input[type="checkbox"]:checked::before {
content: "\2713"; /* Vinkje-karakter */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: green;
}
}
Dit voorbeeld definieert eerst aangepaste styling voor selectievakjes voor browsers die de appearance-eigenschap niet ondersteunen. Vervolgens, binnen de @supports-regel, reset het de appearance-eigenschap naar none en past het verbeterde styling toe met pseudo-elementen om een visueel aantrekkelijk selectievakje te creƫren. Dit zorgt voor een consistent uiterlijk in verschillende browsers, terwijl het waar mogelijk gebruikmaakt van het native uiterlijk.
4. CSS Shapes gebruiken met fallbacks
Met CSS Shapes kunt u niet-rechthoekige lay-outs maken door vormen te definiƫren waar de inhoud omheen kan vloeien. De browserondersteuning is echter niet universeel. Met @supports kunt u 'graceful degradation' implementeren.
.container {
width: 400px;
height: 300px;
position: relative;
}
.shaped-element {
width: 200px;
height: 200px;
float: left; /* Fallback voor browsers zonder CSS Shapes */
margin-right: 20px;
}
@supports (shape-outside: circle(50%)) {
.shaped-element {
float: none; /* Verwijder de float */
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 20px;
}
}
Hier gebruiken we float: left als fallback. Browsers die CSS Shapes niet ondersteunen, zullen het .shaped-element gewoon naar links laten floaten. In browsers die shape-outside *wel* ondersteunen, wordt de float verwijderd en wordt de vorm toegepast, waardoor de tekst rond de cirkel kan vloeien.
5. object-fit gebruiken voor afbeeldingsverwerking
De object-fit-eigenschap is ongelooflijk handig om te bepalen hoe afbeeldingen worden geschaald en in hun containers passen. Het gebrek aan ondersteuning vereist echter fallbacks.
.image-container {
width: 200px;
height: 150px;
overflow: hidden; /* Zorg ervoor dat de afbeelding niet buiten de container valt */
}
.image-container img {
width: 100%;
height: auto; /* Beeldverhouding behouden */
}
@supports (object-fit: cover) {
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Snijd de afbeelding bij om de container te vullen */
object-position: center; /* Centreer het bijgesneden gedeelte */
}
}
De standaardstijlen zorgen ervoor dat de afbeelding haar beeldverhouding behoudt binnen de container. De @supports-regel past vervolgens object-fit: cover toe om de afbeelding bij te snijden zodat deze de container volledig vult, en object-position: center centreert het bijgesneden gedeelte, wat resulteert in een consistente en visueel aantrekkelijke weergave van de afbeelding in verschillende browsers.
Best practices voor het gebruik van @supports
Om de @supports-regel effectief te gebruiken, overweeg de volgende best practices:
- Progressive Enhancement: Gebruik
@supportsom de gebruikerservaring te verbeteren voor browsers die geavanceerde features ondersteunen, terwijl u een functionele basis biedt voor oudere browsers. - Specificiteit: Houd rekening met CSS-specificiteit bij het gebruik van
@supports. Zorg ervoor dat de stijlen binnen de@supports-regel de juiste specificiteit hebben om eventuele conflicterende stijlen te overschrijven. - Testen: Test uw website grondig in verschillende browsers en op verschillende apparaten om ervoor te zorgen dat de
@supports-regels werken zoals verwacht. Gebruik de ontwikkelaarstools van de browser om de toegepaste stijlen te inspecteren en compatibiliteitsproblemen te identificeren. - Vendor-prefixen: Gebruik bij het controleren op eigenschappen met een vendor-prefix de
or-operator om verschillende vendor-prefixen te dekken. Bijvoorbeeld:@supports ((-webkit-transform: rotate(45deg)) or (transform: rotate(45deg))). - Leesbaarheid: Formatteer uw
@supports-regels voor leesbaarheid. Gebruik de juiste inspringing en commentaar om het doel van elke regel uit te leggen. - Vermijd overmatig gebruik: Hoewel
@supportskrachtig is, moet u overmatig gebruik ervan vermijden. Te veel@supports-regels kunnen uw CSS complexer en moeilijker te onderhouden maken. Gebruik het strategisch om specifieke compatibiliteitsproblemen aan te pakken of bepaalde features te verbeteren.
Het belang van fallbacks
Het bieden van fallbacks is een cruciaal aspect van het gebruik van @supports. Het zorgt voor een consistente gebruikerservaring in een breed scala aan browsers, ongeacht hun ondersteuning voor nieuwere CSS-features. Een goed ontworpen fallback moet:
- Functioneel zijn: De fallback moet de kernfunctionaliteit van de feature bieden, zelfs als het er visueel niet zo aantrekkelijk uitziet als de verbeterde versie.
- Toegankelijk zijn: De fallback moet toegankelijk zijn voor alle gebruikers, inclusief mensen met een beperking.
- Onderhoudbaar zijn: De fallback moet gemakkelijk te onderhouden en bij te werken zijn.
Als u bijvoorbeeld een grid-layout gebruikt, kan een fallback het gebruik van floats of inline-blocks inhouden om een basislayout te creƫren. Als u CSS-variabelen gebruikt, kunt u standaardwaarden voor kleuren en lettertypen opgeven.
Overwegingen voor browsercompatibiliteit
Hoewel de @supports-regel breed wordt ondersteund door moderne browsers, is het essentieel om op de hoogte te zijn van enkele compatibiliteitsoverwegingen:
- Oudere browsers: Zeer oude browsers ondersteunen de
@supports-regel mogelijk helemaal niet. In dergelijke gevallen worden alle stijlen binnen de@supports-regel genegeerd. Het is cruciaal om voor deze browsers adequate fallbacks te bieden. - Internet Explorer: Oudere versies van Internet Explorer hebben beperkte ondersteuning voor CSS-features. Test uw website altijd in Internet Explorer om ervoor te zorgen dat de fallbacks correct werken. Overweeg het gebruik van conditionele opmerkingen voor IE-specifieke oplossingen indien nodig (hoewel dit over het algemeen wordt afgeraden ten gunste van feature-detectie).
- Mobiele browsers: Mobiele browsers hebben over het algemeen goede ondersteuning voor
@supports. Het is echter nog steeds essentieel om uw website op verschillende mobiele apparaten en schermformaten te testen om een consistente gebruikerservaring te garanderen.
Raadpleeg bronnen zoals Can I use... om de specifieke browserondersteuning voor CSS-features en de @supports-regel zelf te controleren.
Overwegingen voor toegankelijkheid
Bij het gebruik van @supports is het van vitaal belang om rekening te houden met toegankelijkheid om ervoor te zorgen dat uw website voor iedereen bruikbaar is, ongeacht hun vaardigheden. Hier zijn enkele overwegingen voor toegankelijkheid:
- Semantische HTML: Gebruik semantische HTML-elementen om een duidelijke structuur en betekenis aan uw inhoud te geven. Dit helpt ondersteunende technologieƫn uw website correct te begrijpen en te interpreteren.
- ARIA-attributen: Gebruik ARIA-attributen om extra informatie te geven over de rollen, staten en eigenschappen van uw elementen. Dit kan de toegankelijkheid van dynamische inhoud en aangepaste widgets verbeteren.
- Toetsenbordnavigatie: Zorg ervoor dat alle interactieve elementen op uw website toegankelijk zijn via toetsenbordnavigatie. Gebruik het
tabindex-attribuut om de focusvolgorde te bepalen en visuele aanwijzingen te geven om aan te duiden welk element momenteel de focus heeft. - Kleurcontrast: Zorg voor voldoende kleurcontrast tussen de tekst- en achtergrondkleuren op uw website. Dit maakt het voor gebruikers met een visuele beperking gemakkelijker om uw inhoud te lezen.
- Testen met ondersteunende technologieƫn: Test uw website met ondersteunende technologieƫn zoals schermlezers om ervoor te zorgen dat deze toegankelijk is voor gebruikers met een beperking.
Verder dan basis feature-detectie: specifieke waarden controleren
Hoewel de meeste voorbeelden zich richten op het controleren van de ondersteuning van eigenschappen, kan @supports ook *specifieke* waarden verifiƫren.
@supports (transform-origin: 50% 50%) {
.element {
transform-origin: 50% 50%;
}
}
Dit lijkt misschien overbodig, maar het is handig bij het controleren van ondersteuning voor complexere waarden. Bijvoorbeeld:
@supports (display: contents) {
.element {
display: contents;
}
}
Dit voorbeeld controleert op ondersteuning van de waarde `contents` voor de eigenschap `display`. Hoewel `display` zelf breed wordt ondersteund, is `display: contents` een nieuwere toevoeging, en dit stelt u in staat om een fallback te bieden.
De toekomst van feature-detectie
De @supports-regel is een hoeksteen van moderne webontwikkeling, waarmee ontwikkelaars nieuwe CSS-features kunnen omarmen met behoud van compatibiliteit met oudere browsers. Naarmate CSS blijft evolueren, zal de @supports-regel een essentieel hulpmiddel blijven voor het bouwen van robuuste, responsieve en toekomstbestendige webdesigns. Samen met tools als PostCSS en Babel helpt het de kloof te overbruggen tussen geavanceerde features en wijdverspreide browseracceptatie.
Conclusie
De CSS @supports-regel is een hulpmiddel van onschatbare waarde voor elke webontwikkelaar die moderne, robuuste en cross-browsercompatibele websites wil maken. Door de syntaxis, mogelijkheden en best practices te begrijpen, kunt u @supports gebruiken om uw ontwerpen progressief te verbeteren, elegante fallbacks te bieden en een consistente gebruikerservaring te garanderen in een breed scala aan browsers en apparaten. Omarm de kracht van feature-detectie en til uw webontwikkelingsvaardigheden naar een hoger niveau. Vergeet niet om grondig te testen en doordachte fallbacks te bieden om tegemoet te komen aan het diverse landschap van webbrowsers die door mensen wereldwijd worden gebruikt.