Regula CSS @supports
Folosește regula @supports ca să întrebi browserul dacă suportă o anumită proprietate sau valoare CSS. Cu ea poți defini și stiluri de rezervă pentru o funcție nesuportată.
Astfel, stilurile se aplică doar atunci când browserul le poate gestiona.
Sintaxă de bază
@supports (property: value) {
/* CSS rules to apply if condition is true */
}
Exemplu: Folosirea @supports cu grid și flex
Stilul de rezervă se obține combinând @supports cu CSS obișnuit.
Variantă de rezervă Flex
Un browser care suportă display: flex aplică CSS-ul din interiorul regulii @supports. Orice alt browser folosește în schimb clasa .container scrisă în afara ei.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Flex Fallback</title>
<style>
/* Fallback if the browser does not support display: flex */
.container {
float: left;
width: 100%;
}
/* Use this CSS if the browser supports display: flex */
@supports (display: flex) {
.container {
display: flex;
}
}
.container > div {
background-color: #2196F3;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h1>@supports with Flex Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
Variantă de rezervă Grid
Aici testul este display: grid. Când reușește, se aplică CSS-ul din interiorul regulii @supports, iar când eșuează, clasa .container din afara acelei reguli servește drept variantă de rezervă.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @supports - Grid Fallback</title>
<style>
/* Fallback if the browser does not support display: grid */
.container {
display: table;
width: 90%;
background-color: #2196F3;
padding: 10px;
}
/* Use this CSS if the browser supports display: grid */
@supports (display: grid) {
.container {
display: grid;
grid: auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
.container > div {
background-color: #ffffff;
color: #333;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>@supports with Grid Fallback</h1>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
Negarea cu not
Ca să aplici stiluri doar atunci când o funcție nu este suportată, scrie not în condiție.
Exemplu
@supports not (display: grid) {
.warning {
background-color: pink;
padding: 10px;
border: 1px solid red;
}
}
Combinarea condițiilor
O singură regulă @supports poate conține mai multe condiții, unite cu and, or și not.
Notă: Browserele mai vechi au nevoie de stiluri de rezervă, așa că furnizează-le întotdeauna în afara @supports.
Exemplu
@supports (display: grid) and (gap: 10px) {
.container {
display: grid;
gap: 10px;
}
}
Referință CSS
Dacă un browser suportă o funcție CSS se testează cu regula @supports.