CSS : background sous Safari

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
je viens de télécharger Safari et en visualisant le forum, je me suis aperçu qu'il ne prenait pas en charge certains background. je suppose qu'il s'agit d'une erreur de ma part au niveau des normes css qui changent tous les quatre matins.

Avec IE, Opera, Chrome, firefox le visuel est conforme à ce que J'ai codé.

le soucis se situe essentiellement sur du css contenant du linear-gradient :

Code:

background: linear-gradient(#4F7801,#182400);
background-image: url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,linear-gradient(#4F7801,#182400);


J'ai fait quelques recherches sur le web mais, en tentant les diverses formules proposées et en les appliquant par le biais des outils du navigateur, j'ai toujours fait choux blanc.

Avant de me lancer dans une correction de ma fiche de style qui est version xxl, j'aimerai avoir votre avis.

Merci par avance pour votre aide.

[Neptunia]

Bonjour ^^

linear-gradient sur Mozilla Developer Network

Comme indiqué sur cette page, Apple considère ces propriétés comme expérimentales et dans certains cas de figure, Safari n'acceptera que des propriétés convenablement préfixées.

[demeter1]

Re Neptunia,
j'avais trouvé ce lien mais, existe t'il une alternative pour safari (code couleur simple ou autre méthode) ?

j'ai bien essayé

Code:

background-image: linear-gradient( to left bottom, #4F7801,#182400);
background-image: url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,linear-gradient( to left bottom, #4F7801,#182400);

pour un dégradé de haut en bas mais, sans effet.

[Neptunia]

Comme expliqué la propriété doit être préfixée donc ça devrait donner :

Code:

    background-image: -webkit-linear-gradient( to left bottom, #4F7801,#182400);
    background-image: linear-gradient( to left bottom, #4F7801,#182400);
    background-image: url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,linear-gradient( to left bottom, #4F7801,#182400);

[demeter1]

Merci Neptunia , je teste ces modification de suite.

Bonne journée.

edit :
il est fort possible que je m'y prenne comme un manche

un css de ce style

Code:

.quickquote, [href*="cp?mode=ip"], [href*="mode=post_profile"], a[href*="&mode=delete"], a[href*="cp?mode=delete"], a[href*="cp?mode=lock"], a[href*="cp?mode=move"], a[href*="cp?mode=split"], a[href*="cp?mode=trash"], a[href*="cp?mode=unlock"], a[href*="merge?t="], a[href*="mode=editpost"], a[href*="mode=quote"], a[href*="mode=report"], a[href*="mode=trash"], span.M14_BtN_OpEn {background: linear-gradient(#4f7801,#182400);}

transformé en

Code:

.quickquote, [href*="cp?mode=ip"], [href*="mode=post_profile"], a[href*="&mode=delete"], a[href*="cp?mode=delete"], a[href*="cp?mode=lock"], a[href*="cp?mode=move"], a[href*="cp?mode=split"], a[href*="cp?mode=trash"], a[href*="cp?mode=unlock"], a[href*="merge?t="], a[href*="mode=editpost"], a[href*="mode=quote"], a[href*="mode=report"], a[href*="mode=trash"], span.M14_BtN_OpEn {background: -webkit-linear-gradient( to left bottom, #4F7801,#182400)!important;
    background: linear-gradient( to left bottom, #4F7801,#182400)!important;}

est invalidé par safari


j'ai essayé avec background-image mais même soucis.


J'ai fait appel à w3c qui me corrige le css en

Code:

.quickquote, [href*="cp?mode=ip"], [href*="mode=post_profile"], a[href*="&mode=delete"], a[href*="cp?mode=delete"], a[href*="cp?mode=lock"], a[href*="cp?mode=move"], a[href*="cp?mode=split"], a[href*="cp?mode=trash"], a[href*="cp?mode=unlock"], a[href*="merge?t="], a[href*="mode=editpost"], a[href*="mode=quote"], a[href*="mode=report"], a[href*="mode=trash"], span.M14_BtN_OpEn {
background : linear-gradient(to left bottom, #4F7801, #182400) !important ;
}

en me spécifiant que La propriété -webkit-linear-gradient(to left bottom,#4F7801,#182400) est une extension propriétaire inconnue

Avec les outils du navigateur ce dernier css est également invalidé.

j'ai testé background-color mais même topo.

edit 2, je suis passé à

Code:

 background: #4f7801;
    background: -webkit-linear-gradient(#4f7801,#182400);
    background: -o-linear-gradient(#4f7801,#182400);
    background: -moz-linear-gradient(#4f7801,#182400);
    background: linear-gradient(#4f7801,#182400);

et ça marche.

Maintenant, allez savoir si la formulation est correcte ??

je me pose également la question de savoir s'il faut répéter l'opération avec un background-image de ce style

Code:

background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,linear-gradient(#4F7801,#182400);}

en devant répéter plusieurs fois les images pour en arriver à ceci :

Code:

background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,#4f7801;


background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,-webkit-linear-gradient(#4f7801,#182400);

background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,-o-linear-gradient(#4f7801,#182400);

background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,-moz-linear-gradient(#4f7801,#182400;background-image:url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif),url(http://i56.servimg.com/u/f56/17/47/58/13/point_10.gif) ,- linear-gradient(#4f7801,#182400);


edit 3 : il suffit de passer par un background-color sans répéter les images.