28172 sujets

CSS et mise en forme, CSS3

Fonction CSS calc() : layout robuste ?

Bonjour,

Je m'essaye depuis deux semaines à faire des mises en page complexes avec flexfox + calc(). Je suis très satisfais de mes premiers tests sous Chrome et Firefox. Or quelle n'est pas ma surprise en m’apercevant que ces mises en page sont difficilement (c'est peu de le dire) supportée par IE11 (oui enfin, quand je dis surprise...).

Voici une page témoin, parfaitement fonctionnelle all browsers, sauf sous IE : CodePen (resizer la page pour voir les bugs).

Une idée pour un correctif ? Un avis expert serait bienvenu...

EDIT : je me demande si le problème provient pas de la fonction calc() en éléments imbriqués... Et en même temps je viens de m’apercevoir que ma grille de base "explose" sous IE11 avec calc()... un problème avec les valeurs calc() arrondies ?
Modifié par Olivier C (24 Jun 2015 - 14:57)
Modérateur
Salut,

J'utilise pas mal le calc() dans mes mise en page complexe et il passe très bien. Si on check les compatibilités elles sont plus que correctes http://caniuse.com/#search=calc et elles tournent bien sur IE11

Par contre dans le css les 
@media all and (min-width:36rem)
à tour de bras (au passage j'avais jamais vu une utilisation des rem pour des media queries) et les 
width: calc(100% /12 * 6 - 1rem);
imbriqué les un dans les autre sur minimum 3 niveau, je pense qu'il y a de l'overkill ! Smiley lol

La seule diff que je vois entre Chromme/FF et IE11 est la hauteur es deux bloc .aside à coté du .main et ça se règle en bougeant un peu le 
@media all and (min-width:36rem){
.m6 {
    width: calc(100% /12 * 6 - 2rem); // 2rem à la place de 1 par exemple
}
}
donc je suspecterai plutôt un embrouillage dans l'utilisation des rem etc..

Bonne journée
Administrateur
Bonjour,

flexbox avec un B Smiley cligne
Est-ce que l'un des bugs d'IE compilé par Ph. Walton te concernerait, comme flex-basis + calc() ? Perso j'ai eu celui de height: 100% (et min-height en px) qui n'est pas une valeur de height en px donc pose problème dans IE...
Bonjour,

Merci pour vos réponses que je découvre en rentrant chez moi. En fait j'ai trouvé la réponse assez rapidement, pardonnez mon manque de réactivité pour vous la donner mais je n'avais plus de terminal pour donner la solution et surtout pour la tester d'abord.

Il s'agissait bien d'un bug de IE avec la fonction calc().

Alors, au lieu de :
width: calc(100% /12 * 6 - 1rem);

Je me suis dis que IE pouvait arrondir ses valeurs à un chiffre supérieur par rapport aux autres navigateurs qui doivent faire l'inverse. J'ai donc essayé ceci et bingo :
width: calc(99.9% /12 * 6 - 1rem);


Les mires de test fonctionnent désormais, notamment la complexe : CodePen.

C'est juste que ça gonfle un peu d'utiliser un tel bidouillage pour un seul navigateur. Et puis ce n'est pas beau : ça laisse un trait fin sur la droite. Je me demande si ça fonctionnerait avec 99.99% ou 99.999%. Mais je n'ai plus IE Pour tester...

Sujet résolu.

Merci à vous.
Modifié par Olivier C (24 Jun 2015 - 14:11)
_laurent a écrit :
J'avais jamais vu une utilisation des rem pour des media queries) et les
width: calc(100% /12 * 6 - 1rem);
imbriqué les un dans les autre sur minimum 3 niveau, je pense qu'il y a de l'overkill !


Tout à fait _laurent, c'était pour tester. Je comptais bien optimiser mon truc... je viens de le faire : tous les précalculs prévisibles sont désormais effectués par SASS, ne reste que les calculs imprévisibles par CSS via la fonction calc().

Donc par exemple, au lieu de (en .scss) :
width: calc(100% /12 * 5 - #{$gutter});


Nous avons désormais :
width: calc(#{100% / 12 * 5} - #{$gutter});


Ce qui donne au final, en css :
width: calc(41.66667% - 1rem);


Et du coup je me dis qu'il ne devrait plus y avoir de problème entre IE et une largeur de référence à 100% étant donné que les calculs sont gérés par SASS... sauf bien sûr si la soustraction avec les unités rem est l'origine du bug.

Quelqu'un pourrait-il me dire si cette mire est ok sous IE (10+) ? CodePen (je n'ai pas IE pour tester...)
Modifié par Olivier C (25 Jun 2015 - 07:13)
Sujet clos
Aller à