Forcer l’apparition des scrollbars dans Safari pour MacOS

Lorsqu’on ne bouge pas la souris ou le trackpad dans Safari sur MacOS, les scrollbars (barres de défilement) disparaissent.

Normalement ceci n’est pas un problème mais parfois les scrollbars font partie du design et il est nécessaire de signaler à l’utilisateur qu’il y a plus de contenu que ce qui est visible.

Pour forcer l’apparition des scrollbars, il suffit de rajouter le code suivant dans le CSS :

#monDiv::-webkit-scrollbar { -webkit-appearance: none; }
#monDiv::-webkit-scrollbar:horizontal,
#monDiv::-webkit-scrollbar:vertical { height: 20px; }

#monDiv::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: #ccc;
   border: 5px solid #ccc;
}

#scroller::-webkit-scrollbar-track {
   border-radius: 5px;
   background-color: #eee;
}

Merci à Stack Overflow.

Les ID en conflit dans un fichier SVG après exportation depuis Illustrator

Normalement, Adobe Illustrator donne un ID à chaque élément du SVG qui correspond à son nom dans le fichier.

Si on a le malheur d’avoir deux calques qui portent le même nom, par exemple, Adobe rajoute ’_1_’ à la fin du ID de l’un des deux.

image

Le SVG exporté contient les ID suivants :

<g id=“cases”>
<rect id=“caseTrois_1_” width=“142” height=“138”/>
<rect id=“caseTrois” width=“142” height=“138”/>
<rect id=“caseDeux” width=“142” height=“138”/>
<rect id=“caseUn” width=“142” height=“138”/>
</g>

Lorsqu’on veut manipuler les éléments selon leur ID, cela pose un problème important.

Logiquement, si on supprimait l’un des deux éléments, l’ID de l’autre devrait porter l’ID correct, mais ce n’est pas le cas.

Une fois qu’Illustrator a trouvé nécessaire de modifier l’ID, il ne veut pas le remettre automatiquement.

LA SOLUTION

La solution est d’enlever l’ID qui gêne puis de le remettre :

1. Sélectionner le nom du calque

2. Cmd-X pour le couper, puis retour pour terminer

3. Sélectionner le nom du calque (qui est maintenant générique)

4. Cmd-V pour coller le nom voulu, puis retour pour terminer

Une police italique ne s’affiche pas correctement sur la page SVG

Sur la page nous avons utilisé la version normale et aussi la version italique d’une police mais la version italique a été remplacé par la police par défaut.

Cela se passe uniquement dans Safari Mobile.

Le problème vient du fait qu’on a précisé “italic” comme style :

@font-face {
font-family:‘MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:italic;
}

En exportant le SVG depuis Illustrator, la police est listée avec son nom mais pas son style. La solution est de changer le style à “normal” :

@font-face {
font-family:’MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:normal;
}

Page trop large dans Edge & Internet Explorer ?

Quand on fait un site à base de pages SVG, parfois on constate que dans les navigateurs Edge ou Internet Explorer (Microsoft), les ascenseurs horizontaux sont trop longs : la page est trop large pour le SVG.

C’est à dire qu’il y a un grand espace blanc à droite de la page.

Ceci arrive quand le SVG principal contient des éléments qui dépassent les bords de la page.

Même si ces éléments ne sont pas visibles, les navigateurs Microsoft laissent de la place pour les accommoder.

Pour régler la situation il suffit d’ajouter à votre CSS :

    svg{
      overflow:hidden;
    }

Polices Web Optimisées

Voici comment créer une police WOFF optimisée pour le web, à partir d’une police TrueType. WOFF = Web Open Font Format.

Pour utiliser les programmes proposés :

  • TTFautoHint
  • Fontforge

Il faudra une connaissance de Terminal (Mac) ou Console (PC).

Il existe des outils gratuits en ligne mais le processus décrit ici résultera dans des fichiers moins lourds et mieux dessinés sur Windows.

1. Créer une copie de la police originale pour ne pas l’abîmer.

2. Corriger le Hinting avec TTFautoHint [facultatif]

[mise-à-jour] sous Safari, cette étape peut agrandir les espaces intra-lettre d’une manière imprévisible.

Cet étape vise à corriger des fautes d’affichage sur les plates-formes Windows.

Télécharger l’application sur freetype.org, puis l’installer (existe pour Mac & Windows).

Dans l’application Terminal (Mac) ou Console (PC), naviguer dans le dossier de la police, puis taper le texte suivant :

ttfautohint nomAvant.ttf nomApres.ttf

3. Supprimer tous les caractères dont on n’a pas besoin en Fontforge

Si on n’a besoin que des majuscules sans accent (pour les titres des paragraphes, par exemple), je peux transformer une police à 30 ko en une police a 4 ko.

Si j’ai 6-10 polices à charger, ça peut faire une grande différence dans la vitesse de chargement de la page.

Dans Fontforge :

  1. Sélectionner les lettres nécessaires (dans ce cas, les majuscules sans accent)
  2. Appuyer sur ctrl-esc pour inverser la sélection
  3. Encoding » Detach & Remove Glyphs pour supprimer les lettres sans utilité

4. Exporter en format WOFF (Web Open Font) depuis Fontforge

Dans Fontforge :

  1. Appuyer ctrl-maj-G
  2. Sélectionner Web Open Font
  3. Sauvegarder

5. Relier le fichier SVG avec la police

Dans votre fichier CSS :

font-face {
    font-family:‘nomDansLeSVGt’;
    src:url(’/fonts/nomDeLaPolice.woff’) format(‘woff’);
    font-weight:normal; font-style:normal;
}

Cet article est basé sur un excellent article en anglais sur pixelsvsbytes.com.

Noms des styles CSS en SVG

Lorsqu’on sauvegarde un fichier Illustrator en SVG avec CSS Properties: Style Elements, chaque SVG aura ces noms de style :

  • .st0{fill:#11E700;}
  • .st1{opacity:0.4;fill:#FFFFFF;}
  • .st2{display:none;fill:#697C7E;}

Un problème survient donc si on n’a plus qu’un seul SVG intégré dans un même document.

Il est nécessaire de traiter chaque SVG du côté serveur, pour modifier les noms de style afin qu’ils deviennent uniques.