Lorsque Sass 3.4+ génère des feuilles de styles au charset UTF-8, il lui arrive parfois d’ajouter le BOM. Ceci afin de respecter la recommandation CSS Syntax Module Level 3.
Rien d’anormal ni de gênant, sauf si vos feuilles de styles sont concaténées par un outil qui ne vérifie pas la présence du fameux BOM pour le supprimer avant fusion des fichiers. En effet si un outil, tel que le minificateur de Drupal, conserve le BOM des fichiers, le fichier résultant contiendra des caractères cryptiques (les fameux ) situés à chaque début de ligne qui correspond au début du fichier concaténé.
Or, les navigateurs vont purement et simplement ignorer ces lignes.
C’est ainsi que hier, après activé la minification Drupal, que je me suis retrouvé avec un site dépourvu de ses webfonts. Webfonts qui n’étaient jamais téléchargées par le navigateur.
La solution la plus rapide à mettre en place dans mon cas de figure fut d’implémenter le callback on_stylesheet_saved mis à disposition par Compass afin de supprimer les fameux BOM des fichiers générés :
1 2 3 4 5 6 7 8 9 10 11 12 | # config.rb # # Removes the BOM for UTF-8 stylesheets. on_stylesheet_saved do |filename| css = File.open(filename, 'r') content = css.read if "UTF-8" == content.encoding.name content.sub!("\xEF\xBB\xBF".force_encoding("UTF-8"), '') File.write(filename, content) end end |
Note : ce code fonctionne avec Ruby 1.9.1+.
