J'ai un problème de support avec IE pour les grilles CSS. Pour info je teste mon code avec IE11. Mon code fonctionne à peu près correctement sauf pour deux choses, grid-gap, et le width du container. D'une part grid-gap n'est visiblement pas pris en compte par IE et d'autre part la taille horizontale de la grille dépasse de la taille de la fenêtre malgré de nombreux changements... ci-dessous mon code. Merci d'avance.
<body>
<!---------------------------->
<!---------- HEADER ---------->
<!---------------------------->
<header>
<div id="<?php echo $id_logo; ?>">
<a href="<?php echo $index_link; ?>.php#<?php echo $anchor_page; ?>">
<img src="<?php echo $folder_pictures; ?>/<?php echo $img_logo; ?>" alt="Logo de l'entreprise <?php echo $name; ?>" />
</a>
</div>
<div id="<?php echo $id_slogan; ?>">
Découvrez la Provence et les Alpes à moto avec <?php echo $name; ?>
</div>
</header>
</body>
/* Body */
body {
font-family: /* Police 1 */ Arial, /* Police 2 */ Georgia, /* Police 3 */ serif;
margin: 0;
/* FLEXBOX */
/* ---------- ---------- ---------- */
/* Flex property for IE */ display: -ms-grid;
/* Flex property */ display: grid;
/* ---------- ---------- ---------- */
/* Definition of columns for IE */ -ms-grid-columns: [column1] auto [column2] auto [column3] minmax(25%, 50%);
/* Definition of columns */ grid-template-columns: [column1] auto [column2] auto [column3] minmax(25%, 50%);
/* ---------- ---------- ---------- */
/* Definition of rows for IE */ -ms-grid-rows: [row1] auto [row2] auto [row3] auto [row4];
/* Definition of rows */ grid-template-rows: [row1] auto [row2] auto [row3] auto [row4];
/* ---------- ---------- ---------- */
/* Definition of gaps */ grid-gap: 1em;
/* ---------- ---------- ---------- */
}
/* Header */
header {
background-color: #4db1e9;
/* PLACEMENT */
/* ---------- ---------- ---------- */
/* Columns placement for IE */ -ms-grid-column: 1;
/* Columns placement for IE */ -ms-grid-column-span: 3;
/* Columns placement */ grid-column: 1 / 4;
/* ---------- ---------- ---------- */
/* Rows placement for IE */ -ms-grid-row: 1;
/* Rows placement for IE */ -ms-grid-row-span: 1;
/* Rows placement */ grid-row: 1 / 2;
/* ---------- ---------- ---------- */
/* Horizontal alignment for IE */ -ms-grid-column-align: stretch;
/* Horizontal alignment */ justify-self: stretch;
/* ---------- ---------- ---------- */
/* Vertical alignment for IE */ -ms-flex-item-align: start;
/* Vertical alignment for IE */ -ms-grid-row-align: start;
/* Vertical alignment */ align-self: start;
/* ---------- ---------- ---------- */
}
Si tu as une obligation de support pour IE11, alors laisse tomber les grids. Si ce n'est pas une obligation, alors laisse tomber IE11 et contente-toi des navigateurs modernes (Edge du côté de Microsoft, donc). IE11 a bientôt 8 ans, c'est impensable de lui demander de prendre en charge des spécifications beaucoup plus récentes ; quand bien même celui-ci proposait le premier une version préfixée des tous premiers working draft de grid-layout, ceux-ci n'ont plus rien à voir aujourd'hui.
if( navigator.userAgent.match(/MSIE/)) alert('Selon les recommandations de Microsoft, vous devez changer votre navigateur !')
Ne jamais se fier au userAgent.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Oui, et alors ? Sous prétexte que l'userAgent n'est pas quelque chose de totalement sûr, tu vas t'interdire de donner une information pourtant nécessaire à ceux qui utilisent IE ?
Rassure-moi, ce n'est pas ce que tu voulais dire ?
@Domi65: Alors non, ce n'était pas ce que je voulais dire, mais puisque tu en parles :
Informer un utilisateur sur le non-support de son navigateur parce que le site utilise telle ou telle technologie non-supportée, dans le cas où il n'est pas possible de faire autrement, oui. Leur pourrir volontairement la navigation sans que ce ne soit nécessaire, non.
Notamment parce que, dans la très grande majorité des cas, ceux qui utilisent IE n'ont tout simplement pas le choix.
Du reste, voici la chaine du UserAgent de IE11 :
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
- Edité par EmmanuelBeziat 12 novembre 2019 à 14:42:01
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
« Informer un utilisateur sur le non-support de son navigateur parce que le site utilise telle ou telle technologie non-supportée, dans le cas où il n'est pas possible de faire autrement, oui »
Merci pour vos réponses. Je vais donc trouver une version plus récente de IE. Et peut-on parler du problème Safari ? Comment faites-vous pour tester vos codes sous Safari étant donné que la pomme ne publie plus de version Safari pour Windows et que la dernière en date est complètement obsolète ?
Mais bon, ne t'embête pas outre-mesure à tester sur touzmille navigateurs. C'est certes plus "safe", mais si tu n'as pas de contraintes précises pour ton travail (par exemple, si tu développes un intranet pour un client dont tout le parc informatique est sous IE11), alors ne te prends pas la tête : fais un code propre et valide, et s'il marche sur l'un, tu es à peu près sûr qu'il fonctionne sur les autres.
Ça ne t'empêche pas de vérifier bien entendu, mais le risque d'avoir de grosses différences est très faible sur des navigateurs à jour.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Problème support display: grid; avec IE
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !