Quelles sont les lunettes de prescription non http://belgiquepharmacie.be/ Unie de liberté de santé oxford

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

publicité (chargement)

4 réponses pour Supprimer avec Compass le BOM introduit par Sass

  1. Super, merci Mehdi ! Est-ce que tu conseilles d’implémenter ce morceau de code seulement en cas de souci, ou bien peut-on l’ajouter « par défaut » à nos fichiers config.rb ?

  2. Dotpeach dit :

    Oh, tu as donc résolu le mystère des webfonts qui disparaissaient sur l’instance Drupal !

    Merci beaucoup pour le billet Mehdi, je garde ça dans un coin de la tête (et de mes bookmarks).

  3. piouPiouM dit :

    Hello Marie ! Hier encore je te l’aurais déconseillé puisque ce snippet force l’encodage des CSS en UTF-8 (j’avais prévenu, c’était une solution rapide à mon problème :p), et, donc, l’ajout du snippet devait se faire au cas par cas.

    Du coup j’ai mis à jour le code afin de tester l’encodage du fichier avant de le traiter : maintenant, seuls les fichiers UTF-8 verront un éventuel BOM être supprimé :)

  4. DuaelFr dit :

    OH ! Excellent conseil ! Je vais suggérer de ce pas la modif à Omega 4 pour que tout le monde en profite ! :)

Ajouter un commentaire


Syndication

Réseaux sociaux