28172 sujets

CSS et mise en forme, CSS3

@supports

Bonjour,

je suis sur la construction d'un site grid et je souhaite utiliser @supports, pour les navigateurs non compatibles, suivant ce modèle :

@supports (display:grid){

.grid {
  display: -ms-grid;
  display: grid;
  padding: 10px;
}
}

@support not (display:grid){

.grid {float: left;  
  width: 100%;}

.grid > * {
  float: left;  
  width: 100%;

}}


.grid étant mon container global.

La seconde partie (not) me semble légère pour supplanter toute la mise en page en grid.
D'après les nombreux tutoriels sur @supports, je constate qu'en dehors du container général, on peut ne cibler que certains éléments de la page avec @supports, mais pas forcément tous.

Avez-vous des conseils, là-dessus ?
Le problème étant que je n'ai pas de navigateurs ne suportant pas grid. Je ne peux pas tester.

Merci pour vos retours.
Bonjour,

Pour ma part je suis plutôt partisan à introduire ce que contient ta condition négative en tête de file et la mettre par défaut.
Ensuite j'inclus dessous mon @supports et change la disposition pour les cas où c'est supporté.

Ce qui donnerait 

.grid {
  float: left;  
  width: 100%;
}

.grid > * {
  float: left;  
  width: 100%;
}
@supports (display:grid){
.grid {
  display: -ms-grid;
  display: grid;
  padding: 10px;
}
}

Certes cela implique de faire réécrire ses propres règles mais permet une compatibilité maximale vers les navigateurs ne supportant @support ; ils deviennent de plus en plus rare mais existent toujours chez certains irréductibles.
Modifié par Greg_Lumiere (25 Jun 2018 - 08:58)
Modérateur
Perso, la première technique me parle plus, pour pouvoir facilement cleaner le code plus tard… Après, je ne sais pas si il y a une meilleure technique qu'une autre Smiley smile
Administrateur
Hello,

Bongota a écrit :
La seconde partie (not) me semble légère pour supplanter toute la mise en page en grid.

C'est surtout qu'elle est totalement inutile car @supports n'est reconnu qu'à partir de Edge, donc les navigateurs qui auraient besoin de ton fallback flottant sont exclu dès le départ.

Bongota a écrit :
je constate qu'en dehors du container général, on peut ne cibler que certains éléments de la page avec @supports, mais pas forcément tous.

Sauf erreur de ma part, c'est complètement faux.

Pour te donner une méthodologie générale, il suffit globalement d'appliquer ton fallback float à tout le monde, puis de caser ton grid layout dans un @supports... les flottants ne seront alors plus pris en compte. (EDIT : comme Greg_Lumiere )

Rachel Andrew a réalisé plusieurs patterns avec fallback, en voici un : https://gridbyexample.com/patterns/header-twocol-footer/

Bonne journée Smiley smile
Modifié par Raphael (25 Jun 2018 - 10:00)
Bonjour,
et merci pour vos réponses. La chose se complique, mais l'adversité permet d'apprendre.
Merci Raphael, j'y vois plus clair, maintenant.
Et j'ai trouvé sur Debian Midori, qui apparemment ne supporte pas grid, d'après mes essais... Il n'est même pas mentionné dans caniuse.
Administrateur
Bongota a écrit :
Et j'ai trouvé sur Debian Midori, qui apparemment ne supporte pas grid, d'après mes essais... Il n'est même pas mentionné dans caniuse.

Il doit sans doute être considéré comme insignifiant en terme de statistiques d'usage Smiley ohwell
Bonjour,
oui, Midori est très marginal, et c'est justement pour cette raison qu'il doit être un bon "client" pour tester la réponse d'un site en grid sur un navigateur qui ne le supporte pas. Peu de mises à jour, peu de suivi des nouveautés, à moins de me tromper, on ne peut trouver mieux.
J'ai déjà commencé la refonte, avec le fallback ci-dessus, et ça fonctionne bien avec Midori. Je vois qu'il manque dans ce fallback une commande importante sur le contenair général : min-height:100vh;
Sans cette ligne et surtout dans des résolutions plus hautes que larges, on a un espace en bas de la page, après le footer. Et je ne sais pas pourquoi il met un body {margin:40px;}. Y-a-t-il une utilité pour certains navigateurs ?
Bonne journée.
Bonjour,

oui, cette liste est bien connue des libristes. Elle donne surtout la liste des navigateurs sous licence libre, ou pas. Quand à "compatible html5", c'est vague, et c'est la moindre des choses. Pour notre sujet de discussion, la question est : compatible grid et @support ou pas ?

Merci de m'avoir rappelé cette liste, j'ai découvert un tout petit navigateur: uzbl. Mon layout grid/fallback a fonctionné dessus exactement comme sur Midori, en affichage non grid.
Sujet clos
Aller à