CSS : background sous Safari

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu CSS : background sous Safari

Message par demeter1 le Mar 18 Oct 2016 - 18:18

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.


Dernière édition par demeter1 le Mer 19 Oct 2016 - 18:12, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8221
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS : background sous Safari

Message par Neptunia le Mar 18 Oct 2016 - 18:37

Bonjour ^^

Right 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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10930
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS : background sous Safari

Message par demeter1 le Mar 18 Oct 2016 - 20:36

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.

demeter1
+ Hyperactif +

Masculin
Messages : 8221
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: CSS : background sous Safari

Message par Neptunia le Mar 18 Oct 2016 - 21:14

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);

Neptunia
+ Hyperactif +

Féminin
Messages : 10930
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS : background sous Safari

Message par demeter1 le Mer 19 Oct 2016 - 16:01

Merci Neptunia , je teste ces modification de suite.

Bonne journée.

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

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.

demeter1
+ Hyperactif +

Masculin
Messages : 8221
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum