384400/-support.md

## -support.md

      
    Raw
  

              -support.md
            
          
    Comment utiliser la propriété @supports ?

La règle @supports permet une requête de fonctionnalité, comme l'expose Mozilla Developper Network :
@supports.
Raphaël Goetter explique que la reconnaissance des propriétés avec @supports peut recourir à Css ou à JavaScript :
Détecter le support des fonctionnalités avec @supports.
Cependant, CSS Feature Queries n'est pas supporté par tous les navigateurs, ainsi que le montre Can I Use :
CSS Feature Queries.
Même si existent certains faux positifs, l'avantage de cette fonctionnalité est de proposer une détection robuste, sans recourir à des détections hasardeuses.
À notre avis, l'utilisation de JavaScript est plus pertinente : asurer un double, voire triple, support en Css pose vite des problèmes insolubles d'écriture en Html. Avec JavaScript, on détecte le support, puis, par exemple, on ajoute une classe à <html>.
À titre de démonstration, nous allons voir comment détecter les supports de Flexible Box Layout Module et de CSS Grid Layout pour assurer la mise en page.
Voici deux ressources à propos de CSS Grid Layout :

CSS3 Grid Layout ;
Display: Grid – The Future of Responsive Grid Layouts.

Pour déterminer si le navigateur prend en charge les unités rem, vh, vw ainsi que la fonctionnalité cal(), nous pouvons écrire...
if (CSS.supports('font-size', 'calc(1rem - 10px)') && CSS.supports('display', 'flex') && CSS.supports('font-size', '1rem') && CSS.supports('font-size', '1vh') && CSS.supports('font-size', '1vw')) { 
  console.log('ok');
}
... Voire plus succintement...
if (CSS.supports('font-size', 'calc(1rem + 1vh + 1vw + 1px)') && CSS.supports('display', 'flex')) { 
  console.log('ok');
}

  
## support.html
<!DOCTYPE html>
<html class="regular-layout">
<head>
<meta charset="utf-8">
<title>Comment utiliser la propriété @supports ?</title>
<meta name="description" content="Comment utiliser la propriété supports ?" />
<style>
.regular-layout body {
  background-color: red;
}
.flex-layout body {
  background-color: blue;
}
.grid-layout body {
  background-color: green;
}
</style>
</head>
<body>
<script>
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
function supportFlex() {
    if (supportsCSS && window.CSS.supports('(display : -webkit-box) or (display : -webkit-flex) or (display : -ms-flexbox) or (display : flex)')) { /* if (supportsCSS && window.CSS.supports('display', 'flex')) { */
        return true;
    }
    return false;
}
function supportGrid() {
    if (supportsCSS && window.CSS.supports('(display : -ms-grid) or (display : grid)')) { /* if (supportsCSS && window.CSS.supports('display', 'grid')) { */
        return true;
    }
    return false;
}
if (supportGrid()) {
    document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('regular-layout', 'grid-layout');
} else if (supportFlex()) {
    document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('regular-layout', 'flex-layout');
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html class="regular-layout">
	<head>
	<meta charset="utf-8">
	<title>Comment utiliser la propriété @supports ?</title>
	<meta name="description" content="Comment utiliser la propriété supports ?" />
	<style>
	.regular-layout body {
	background-color: red;
	}
	.flex-layout body {
	background-color: blue;
	}
	.grid-layout body {
	background-color: green;
	}
	</style>
	</head>
	<body>
	<script>
	var supportsCSS = !!((window.CSS && window.CSS.supports) \|\| window.supportsCSS \|\| false);
	function supportFlex() {
	if (supportsCSS && window.CSS.supports('(display : -webkit-box) or (display : -webkit-flex) or (display : -ms-flexbox) or (display : flex)')) { /* if (supportsCSS && window.CSS.supports('display', 'flex')) { */
	return true;
	}
	return false;
	}
	function supportGrid() {
	if (supportsCSS && window.CSS.supports('(display : -ms-grid) or (display : grid)')) { /* if (supportsCSS && window.CSS.supports('display', 'grid')) { */
	return true;
	}
	return false;
	}
	if (supportGrid()) {
	document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('regular-layout', 'grid-layout');
	} else if (supportFlex()) {
	document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('regular-layout', 'flex-layout');
	}
	</script>
	</body>
	</html>