Discussion :

[abc.xyz]

Bonjour,
mon problème est le suivant:
Sur une page html où je dois afficher un quadrillage d'images (3 bandes occupant chacune toute la largeur de l'écran, et l'une en dessus de l'autre, avec 5 images sur chaque bande disposées suivant la longueur), je rencontre le problème que je n'y arrive pas.
En effet la page est découpée en deux parties:
dans la partie supérieure de la page il y a un bandeau de haut de page dont la hauteur est exprimée en pixels et en dessous de ce bandeau le quadrillage d'images.
Je pense que le fait que la hauteur du bandeau soit exprimée en pixels (au lieu de l'être en %) m'empêche de disposer correctement mon quadrillage d'images.

Qu'en pensez vous?

[abc.xyz]

voici la question posée en termes beaucoup plus simples et compréhensibles:
sur une page html où la hauteur du bandeau du haut est exprimée en pixels, peut t'on dans la partie inférieure de la page (sous le bandeau donc) disposer plusieurs images (en ne les dimensionnant pas en pixels elles) en bandes remplissant ainsi tout l'espace disponible pour que cet espace disponible soit correctement rempli par ces images sur tous les devices?

[psychadelic]

oui, on peut.
c'est la fonction calc => https://developer.mozilla.org/fr/docs/Web/CSS/calc

[NoSmoking]

Bonjour,
je dirais à la louche qu'un mode de rendu flex associé aux MediaQueries devraient faire l'affaire.

[abc.xyz]

Bonjour,
ici https://blog.lesieur.name/la-proprie...s-inutilement/
il est écrit:

Support IE9
Comme dit en introduction, si vous souhaitez supporter calc() pour des versions plus vieille que IE8, il va falloir vous procurer un polyfill comme celui-ci. En ce qui concerne IE9, il est mentionné qu'elle est partiellement supportée. En réalité, cela vient du fait que si vous écrivez calc(50%-30px) cela fonctionnera partout sauf sur IE9 ou il faut bien mettre des espaces entre les symboles d'opération comme ceci : calc(50% - 30px).

je ne comprends pas, moi je pensais qu'il fallait utiliser le préfixe -ms pour rendre compatible avec les anciennes versions de IE une propriété CSS récente. Ils parlent ici de mettre des espaces entre les symboles d'opération.

[psychadelic]

c'est pour que le polyfill puisse faire correctement son job, ça n'a rien à voir avec l'utilisation des préfixes.

PS: faut faire des retours, j'avais fini par penser que tu te fichais complètement des réponses qu'on puisse te faire.

[abc.xyz]

non je m'en fiche pas, puisque je pose les questions.
Je n'ai toujours pas compris la tournure de la phrase, je ne comprends pas le lien avec le polyfill dont tu me parles, il est question de IE9 et non du polyfill non?

[NoSmoking]

Tu as cité

En réalité, cela vient du fait que si vous écrivez calc(50%-30px) cela fonctionnera partout sauf sur IE9

cela marchera nulle part !


Ressource :
↪https://drafts.csswg.org/css-values-3/#calc-syntax

In addition, white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)

[abc.xyz]

exact, c'est avec ces espaces que calc doit être écrite, et sans eux cela ne marche très certainement nulle part.
Je pose maintenant une autre question, comment est implémentée cette fonction calc (ou d'ailleurs toute autre fonction css), je veux dire comment concrètement les espaces dont on parle sont implémentés?

[psychadelic]

ben ,il c'est tout de même passé une semaine avant d'avoir un retour de ta part...

sinon j'ai l'impression que tu n'a pas compris le principe des polyfill :

la fonction css calc n'est implémentée dans les navigateurs que depuis 2012 ( en gros, pour le détail voir : https://caniuse.com/#search=calc )

donc les anciens navigateurs IE, antérieurs a la version 9, ne connaissent pas cette fonction. ( ou l'on implémenté de manière partiale)
Si on veux malgré tout utiliser cette fonction sur un navigateur qui ignore cette fonction, on lui ajoute par le biais d'un polyfill.
le polyfill est donc un morceau de code JS supplémentaire qu'il faut inclure dans sa page html.

et pour en revenir à ma phrase :

c'est pour que le polyfill puisse faire correctement son job

c'est parce le polyfill en question opère une analyse des descriptions css, et que si ces description sont écrites sans bien mettre des espace, ben ,il passe à coté.

Dans ce polyfill calc : https://github.com/closingtag/calc-polyfill

il faut copier le fichier calc.js et le placer avec les autres fichiers de ton projet,
puis ajouter <script type="text/javascript" src="path/to/calc.js"></script>( juste après tous les fichiers css)
en remplaçant path/to/ par ton propre chemin

[NoSmoking]

comment est implémentée cette fonction calc (ou d'ailleurs toute autre fonction css)

il faut lire ce qui est écrit dans le lien que je t'ai fourni, c'est juste le paragraphe suivant dans lequel il explique la démarche à suivre.
Pendant que tu y seras lit également la suite.