Partage
  • Partager sur Facebook
  • Partager sur Twitter

CSS Linear gradient

CSS

Sujet résolu
    12 avril 2018 à 10:04:21

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

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 12 avril 2018 à 10:16:16

      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" ?

      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        12 avril 2018 à 10:20:22

        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.

        • Partager sur Facebook
        • Partager sur Twitter

        -> Hébergement GRATUIT <- parfait pour débuter/dev/test... -> Offre World Lite

          Staff 12 avril 2018 à 10:50:18

          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).
          • Partager sur Facebook
          • Partager sur Twitter
          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
            12 avril 2018 à 11:50:21

            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 ^^
            • Partager sur Facebook
            • Partager sur Twitter

            -> Hébergement GRATUIT <- parfait pour débuter/dev/test... -> Offre World Lite

              12 avril 2018 à 12:15:01

              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

              • Partager sur Facebook
              • Partager sur Twitter
                Staff 12 avril 2018 à 12:43:35

                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)

                • Partager sur Facebook
                • Partager sur Twitter
                Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                  12 avril 2018 à 13:11:12

                  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

                  • Partager sur Facebook
                  • Partager sur Twitter
                    Staff 12 avril 2018 à 13:13:02

                    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.
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                      12 avril 2018 à 13:16:54

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

                      Merci :)

                      • Partager sur Facebook
                      • Partager sur Twitter
                        12 avril 2018 à 14:22:37

                        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.

                        • Partager sur Facebook
                        • Partager sur Twitter
                          Staff 12 avril 2018 à 14:35:28

                          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.

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                            12 avril 2018 à 17:53:56

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

                            • Partager sur Facebook
                            • Partager sur Twitter
                              Staff 12 avril 2018 à 18:55:53

                              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 ?

                              • Partager sur Facebook
                              • Partager sur Twitter
                              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                13 avril 2018 à 9:20:30

                                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

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  Staff 13 avril 2018 à 9:50:00

                                  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)

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                                    13 avril 2018 à 13:54:23

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

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
                                      16 avril 2018 à 10:12:03

                                      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 :p (je vais mettre en résolu)

                                      • Partager sur Facebook
                                      • Partager sur Twitter

                                      CSS Linear gradient

                                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                      • Editeur
                                      • Markdown