web-dev-qa-db-fra.com

CSS calc ne fonctionne pas dans Safari et secours

J'ai cette disposition sur laquelle je travaille. Cela dépend fortement de CSS calc pour effectuer les calculs nécessaires.

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

Maintenant, je ne peux pas faire fonctionner cela dans Safari. Y a-t-il quelque chose que je fais mal?

Et puis-je également introduire un mécanisme de secours pour les navigateurs qui ne le prennent pas en charge? Le pourcentage ne fera pas du bon travail, car je dois soustraire l'objet au milieu, des deux sur le côté.



Merci.

htmlcsssafarifallback
26
Borsn

La façon dont j'ai résolu ce problème, introduit une solution de secours CSS pure, que les navigateurs plus anciens qui ne prennent pas en charge le calcul CSS ne liraient que.

figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

Les panneaux gauche et droit obtiennent une largeur de 48% si le navigateur ne peut pas lire les valeurs de calcul.

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

Et le logo, qui se trouve entre les deux panneaux, obtient une largeur de 4%. Et aussi une largeur minimale de 40px. Et si les valeurs de calcul peuvent être lues par le navigateur, elles sont de 40 pixels.

39
Borsn

Votre code semble correct, donc je pense que le problème est la compatibilité du navigateur. Selon Documentation Mozilla , cette fonctionnalité fonctionne dans Chrome, Firefox et IE (les versions les plus récentes), mais est inexistante dans Opera = et est bogué dans Safari. cette question pour plus d'informations sur la compatibilité. Une alternative/alternative beaucoup plus sûre serait de faire vos calculs en Javascript:

if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  // do something here for smaller values
}

Vous pouvez utiliser la fonction jQuery .width() pour détecter la largeur du document, puis définir la largeur de vos éléments en conséquence. Mais juste pour vous avertir, essayez de garder autant de vos styles en dehors de vos scripts et à l'intérieur de vos feuilles de style car sinon ce sera impossible à maintenir.

Si cela ne fonctionne toujours pas dans certains navigateurs, utilisez Modernizr pour détecter le navigateur/version/OS, puis redirigez-les vers une version différente de la page.

Édition 1: Réactivité accrue
Édition 2: Intervalle supprimé
Édition 3: Ajout de la mention Modernizr

2
hkk