Bonjour,

J'ai un problème au niveau CSS avec Safari et IE et Cortana.

Sur firefox et Chrome je n'ai pas de problèmes avec ce code :

background-image: 
			linear-gradient(transparent 11px,
				rgba(255,255,255,.9) 12px,
				transparent 12px),
			linear-gradient(90deg,
				rgba(218,218,218) 11px,
				rgba(255,255,255,.9) 12px,
				transparent 12px);

Cela affiche des petit carré dans une div.

Cependant sur Safari et IE et Cortana rien ne s'affiche. Quelqu'un connaitrait un équivalent à ce code pour ces navigateurs ?

Merci

Bonjour,

Safari a besoin de préfixes pour linear-gradient de la version 4 à la version 6. Si tu vois un souci c'est que tu testes Safari pour Windows, qui s'est arrêté à la version 5, et il y a 0.01% de gens dans le monde qui ont cette version : oublie-la, ne t'en préoccupes pas. Ne mets pas de préfixes pour linear-gradient, inutile de se raccrocher aux vieux trucs.

Pour IE : avec quelle version testes-tu ? Les gradients sont gérés à partir de la version 10.

Et Cortana : euh, c'est pas un navigateur, ça. Veux-tu dire "Edge" ?

Salut,

https://developer.mozilla.org/fr/docs/Web/CSS/linear-gradient 

Si tu descends un peu tu as une partie dédiée à ton problème.

FloJDM > parles-tu des préfixes ? Si oui, il ne faut pas. Les préfixes propriétaires ont été une très mauvaise idée qui a échappé à ses créateurs - le W3C regrette de l'avoir fait -, et c'est une chose du passé. Il faut les oublier, ne plus les utiliser, sauf quelques rares exceptions (comme les préfixes pour Flexbox sur IE10, parce que IE10 est un navigateur moderne).

Lamecarlate a écrit:

FloJDM > parles-tu des préfixes ? Si oui, il ne faut pas. Les préfixes propriétaires ont été une très mauvaise idée qui a échappé à ses créateurs - le W3C regrette de l'avoir fait -, et c'est une chose du passé. Il faut les oublier, ne plus les utiliser, sauf quelques rares exceptions (comme les préfixes pour Flexbox sur IE10, parce que IE10 est un navigateur moderne).

Ok, autant pour moi alors 

Merci de vos réponse

Cependant quelqu'un à une idée du code ?

Car j'ai beau essayé je ne trouve pas de réponse à mon problème. Pourtant je pensais que tout les navigateurs récents pourraient supporter cela...

j'ai vu que sur Safari cela se ferait avec :

-webkit-linear-gradient

Mais je ne trouve pas comment faire l'équivalent à linear-gradient.

Merci

Tu n'as pas répondu à mes questions : quel IE ? Et c'est quoi Cortana ?

(et oublie Safari 5, sérieusement : ne mets pas de préfixes pour linear-gradient)

Hello,

Lamecarlate : je profite de ton intervention sur les préfixes propriétaires. Ne visant que i11 au minimum, je peux donc supprimer ma tâche d' " autoprefixer" sous Gulp alors...

ps: Cortana est l'équivalent de Siri d'Apple (recherche vocale sous W10)

-
Edité par Lucky13 12 avril 2018 à 13:15:23

Lucky13 > c'est bien probable. Fais éventuellement des tests : compare le fichier avant et après, et vois s'il y a encore des différences.

Ok, je vais  faire comme ça, étant porté sur l'avenir c'est une bonne chose.

Merci 

Merci de ta réponse.

C'est pour Safari et IE (dans les dernières versions) et je me suis trompé je voulais dire Edge :p.

Pour les préfix ok je ne les utiliserais pas. Le problème c'est que dans safari le linear gradient ne fonctionne pas (ni dans IE et Edge).

Cela marche sur chrome et firefox.

Si tu as la dernière version de IE c'est la 11, qui gère très bien les gradients : https://web.archive.org/web/20180331185802/https://caniuse.com/#feat=css-gradients

Edge aussi.

Donc, il se peut que ta page fasse passer IE en "mode quirks", c'est-à-dire qu'il se prend pour IE5.5 - qui ne gère donc pas les gradients. Peux-tu regarder ? De mémoire si tu fais F12 et que tu cliques sur une des icônes sur la gauche, l'une d'elle te dit quelle version du moteur est chargée. (je dis de mémoire car je n'ai pas IE, ni Edge)

À noter que la syntaxe de ton premier gradient est fausse, il faut préciser la direction.

Merci pour la réponse.

pourrais tu, si possible, me donner un exemple de ce code avec une bonne direction (sachant que ça doit faire des carrés, ça doit etre 45° ou 90°)

(le code marche sur firefox et chrome car il rectifie le code ?)

Le f12 m'indique "document mode edge" donc je suppose  que le problème vient de la syntaxe fausse des gradient...

Eh bien, pour la direction, c'est à toi de me le dire Si c'est "vers la droite", c'est 'to right" ou "90deg". Ne rien mettre est interprété comme "to bottom" par Firefox - et apparemment j'ai dit des bêtises, la direction est optionnelle et est "to bottom" par défaut… Du coup, pourquoi sous Edge ça ne marcherait pas ? Étrange… Tu pourrais donner plus de code, notamment le CSS de l'élément avec le background dessus, pour qu'on puisse le reproduire ?

Enfaite, le code est juste ça :

tu peux tester ce code sur firefox ou chrome, ça affiche une div avec des petits carreaux.

Et ce code ne peut pas fonctionner sous IE ni Safari ? (en plus de Edge ? )

<?php
include(dirname(dirname(dirname(dirname(__FILE__))))."/configuration.inc.php");
include Cortex::$viewpath."layout/portal/header.php";
?>
<style>
	div.petitcarreau
	{
		background-image: 
		linear-gradient(transparent 11px,
			rgba(255,255,255,.9) 12px,
			transparent 12px),
		linear-gradient(90deg,
			rgba(218,218,218) 11px,
			rgba(255,255,255,.9) 12px,
			transparent 12px);
		background-size: 100% 12px, 12px 100%;
	}
</style>

<div class="background-square">
	<div class="" style="height:146px;">
	</div>
	<div class="container-fluid petitcarreau" style="height:354px;">
	</div>
</div>

Merci

EDIT : Finalement je suis passé par une image repeat de ces petits carreaux. comme ça plus de problème... sauf vectoriel...

-
Edité par bob456 13 avril 2018 à 9:37:13

Ahhhhh j'ai trouvé !

rgba() attend 4 arguments. Pour le second linear-gradient tu n'en donnes que 3, et si Firefox est gentil et interprète l'absence de l'argument "alpha" comme "1", IE est plus strict, et dit "nope c'est invalide je fais rien merci bisous". Ajoute simplement ", 1" dans le rgba ligne 13 et hop, ça marche ! (testé dans IE11 uniquement)

Au passage si ta balise style est après l'include de ton header alors elle est très certainement en dehors du head de ton fichier, ce qui n'est pas autorisé.

Pour ce qui est du respect des bonnes pratiques, ton CSS devrait être rassemblé dans un fichier à part et non pas dans une balise style (à fortiori si cette dernière n'est effectivement pas placé au bon endroit) ni inline au beau milieu de ton HTML (lignes 2 et 4 de ton second bout de code). 

Merci Lamecarlate, je vais tester ça

Mewen_bzh, j'ai mon code dans un fichier css. Là c'est pour le test que j'avais tout écris dans la balise style.

Encore merci pour votre aide (je vais mettre en résolu)