CSS : background sous Safari

2 participants

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

Résolu CSS : background sous Safari

Message par demeter1 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

demeter1
Membre actif

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

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

Résolu Re: CSS : background sous Safari

Message par Neptunia 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS : background sous Safari

Message par demeter1 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

demeter1
Membre actif

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

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

Résolu Re: CSS : background sous Safari

Message par Neptunia 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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS : background sous Safari

Message par demeter1 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
CSS : background sous Safari Captur33

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

demeter1
Membre actif

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

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

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

- Sujets similaires

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