CSS @supports
La direttiva CSS3 @supports permette il feature detection lato CSS
La direttiva @supports consente di scrivere regole condizionali in CSS. È utile per fornire fallback o miglioramenti progressivi:
il browser applica le regole al suo interno solo se supporta pienamente la proprietà o il valore specificato.
Sintassi
Esempi di condizione valida:
-
(display: grid)– Verifica se il browser supporta il valoregridper la proprietàdisplay. -
(backdrop-filter: blur(5px))– Verifica il supporto per il filtro di sfocatura. -
(--my-var: value)– Verifica se le custom properties sono supportate. -
(property: value) and (property: value)– Condizione multipla con AND. -
not (property: value)– Condizione negativa (NOT).
Esempio direttiva: @supports
Codice Esempio: @supports
.layout {
display: flex;
gap: 10px;
}@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}}.box {
background-color: #98c379;
padding: 20px;
color: white;
border-radius: 5px;
text-align: center;
font-weight: bold;
}
Contenuto Esempio: @supports
Esempio di utilizzo di @supports
In questo esempio, lo stile con display: grid verrà applicato solo se il browser supporta CSS Grid. Altrimenti, rimarrà il layout fallback basato su flexbox.
CSS e HTML per l'esempio con fallback e @supports:
<style>
.layout {
display: flex;
gap: 10px;
}
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
.box {
background-color: #98c379;
padding: 20px;
color: white;
border-radius: 5px;
text-align: center;
}
</style>
<div class="layout">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
