IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Forcer code CSS suivant les navigateurs Firefox, Chrome, Safari


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mars 2017
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mars 2017
    Messages : 142
    Par défaut Forcer code CSS suivant les navigateurs Firefox, Chrome, Safari
    Bonjour

    Je rencontre des différences d'apparences suivant les navigateurs Firefox, Chrome, Safari.
    Par exemple sur cette page
    https://guideyourtrip.com/en/

    En bas ( voir photo Sur-Firefox en pj )
    Le libellé "Keep in Touch" correspond à la classe et_pb_contact_main_title
    J'ai modifié l'apparence de ce texte dans le fichier style.css

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .et_pb_contact_main_title {
     
     
    font-family: 'Amaranth' !important;  
    font-size: 1.438em !important;
    color: #0c376c !important;
      }
    Le changement de style ce fait bien sur Firefox mais pas sur Chrome ni Safari ( voir images Sur-Chrome et Sur-Safari pj )
    Faut-il ajouter une spécificité au code css pour ces navigateurs ?

    Merci pour votre aide.
    Images attachées Images attachées    

  2. #2
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 495
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 495
    Par défaut
    Je rencontre des différences d'apparences suivant les navigateurs Firefox, Chrome, Safari.
    bienvenue dans le monde merveilleux du dev web

    j'ai teste, chez moi j'ai bien le bon CSS applique

    il est possible que tu aies du cache navigateur : pour tester tes devs, tu peux ajouter un timestamp a ton css
    => tonStyle.css?ts=12345

    ps : 30 fonts, c'est de la folie !
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre confirmé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mars 2017
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mars 2017
    Messages : 142
    Par défaut
    Merci

    Je ne comprends pas quand tu dis
    => tonStyle.css?ts=12345
    Ni 30 fonts, c'est de la folie !

    Pourrais-tu m'expliquer ?
    Merci

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 679
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 679
    Par défaut
    pour les 30 polices, il voulait peut être dire qu'il trouve que c'est de trop. charger plein de polices qui ne sont pas utilisées va consommer plein de ressources inutilement côté serveur et côté client.
    de plus vous dépendez d'un service externe donc au moindre souci, cela va augmenter le temps de chargement des pages.

    pour l'url "tonStyle.css?ts=12345", le principe est de modifier l'url du fichier à chaque modification. c'est ce que fait déjà wordpress de base mais là j'ai l'impression que vous avez un autre souci puisque je ne vois pas de fichier "style.css" chargé sur la page.
    quel est le chemin du fichier qui vous modifiez ?
    est ce que vous avez une extension wordpress de cache ?

  5. #5
    Membre confirmé Avatar de Declique69
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Juin 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Formateur en informatique

    Informations forums :
    Inscription : Juin 2016
    Messages : 19
    Par défaut
    Ces propriétés sont parfaitement standard et reconnues par tous les navigateurs.
    Comme les confrères, je pense à un problème de cache.

    Ou bien est-ce que c'est la police qui n'est pas reconnue, auquel cas les navigateurs la remplace par une autre police.

    Remarque : l'usage de !important pose souvent des problèmes par la suite (mais ce n'est pas la cause ici, simplement j'évite absolument de m'en servir)

  6. #6
    Membre confirmé
    Homme Profil pro
    Consultant en Business Intelligence
    Inscrit en
    Mars 2017
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en Business Intelligence

    Informations forums :
    Inscription : Mars 2017
    Messages : 142
    Par défaut
    L'usage de !important est parfois obligatoire quand on travaille avec wordpress et un Théme.
    Il faut modifier des codes css dans le Théme enfant

  7. #7
    Membre confirmé Avatar de Declique69
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Juin 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Formateur en informatique

    Informations forums :
    Inscription : Juin 2016
    Messages : 19
    Par défaut
    Citation Envoyé par Gilles_75 Voir le message
    L'usage de !important est parfois obligatoire quand on travaille avec wordpress et un Théme.
    Il faut modifier des codes css dans le Théme enfant
    C'est vrai que si Wordpress utilise !important, on n'a plus trop le choix. C'est ce que je reproche à !Important : à partir du moment où il est utilisé quelque part on est obligé de le remettre de plus en plus souvent, et un peu de partout.
    Mais si Wordpress ne l'utilise pas, on devrait pouvoir s'en sortir avec la règle des priorités.

    Enfin bon, il faudrait voir le cas précis pour être sûr. Ce que je dis n'est qu'une remarque d'ordre général.

Discussions similaires

  1. Valeur du timeout différente suivant les navigateurs ?
    Par GBS63 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 24/08/2009, 00h03
  2. Affichage sur mon site suivant les navigateurs
    Par reedbedroom dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 18/02/2008, 09h46
  3. Bug divers suivant les navigateurs
    Par nintendoplayer dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 12/02/2008, 11h44
  4. Charger un fichier css suivant le navigateur.
    Par escteban dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 30/05/2007, 11h14
  5. probleme menu et css suivant les navigateurs...
    Par emile13 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/01/2006, 04h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo