MozFR

Techniques de développement CSS

Cet article est une traduction de CSS coding techniques écrit par Belén Albeza. Belén travaille au sein de l’équipe DevRel de Mozilla et explique ici sa méthode de travail pour le code CSS afin d’obtenir des feuilles de style claires et qui puissent être maintenues facilement. Comme les autres articles de ce blog, celui-ci est placé en licence CC-BY-SA.

Merci beaucoup à Marine, Ilphrin, Banban, Sandlayth, au traducteur anonyme ainsi qu’à goofy pour sa relecture utile :)


Ces derniers temps, nous avons pu observer de nombreuses personnes qui rencontraient des difficultés avec CSS, aussi bien des débutants que des développeurs confirmés. Certains n’apprécient pas la façon dont le langage fonctionne et se demandent s’il ne vaudrait pas mieux remplacer CSS par un autre langage (ce qui a donné naissance aux processeurs CSS) ; d’autres utilisent des frameworks en espérant écrire moins de code (nous avons vu dans un article précédent que, généralement, ce n’était pas le cas). D’autres encore abandonnent CSS pour n’utiliser que JavaScript à des fins de mise en forme.

Toutefois il n’est pas toujours nécessaire d’ajouter un processeur CSS dans vos outils de travail. Nul besoin non plus d’ajouter un framework lourd simplement pour démarrer un projet. Quant à utiliser JavaScript pour faire ce pour quoi CSS a été conçu… c’est simplement une idée épouvantable.

Dans cet article, nous allons présenter quelques conseils et recommandations afin d’écrire du code CSS de meilleure qualité et qui soit plus facile à maintenir, en utilisant des feuilles de style plus courtes, avec moins de règles. Au lieu d’être un fardeau CSS pourra s’avérer réellement utile.

Le sélecteur minimal

CSS est un langage déclaratif dans lequel on définit des règles qui permettent de mettre en forme les éléments du DOM. Dans ce langage, certaines règles sont prioritaires sur d’autres selon l’ordre dans lequel elles sont appliquées. Ainsi, les styles définis dans le document remplacent certaines règles déclarées avant.

Prenons par exemple ces fragments de code CSS et HTML :

<button class="button-warning">

 

.button-warning {
  background: red;
}
button, input[type=submit] {
  background: gray;
}

Bien que la règle .button-warning soit définie avant la règle button.input[type=submit], elle prendra la priorité sur cette seconde. Pourquoi ? Quel critère est utilisé afin de décider que telle règle surcharge telle autre ?

La spécificité

Certains sélecteurs sont plus spécifiques que d’autres. Un sélecteur d’identifiant #id aura la priorité par rapport à un sélecteur de classe .class. Que se passe-t-il lorsqu’on utilise un sélecteur qui est plus spécifique que nécessaire ? Si, par la suite, on a besoin de surcharger ces règles, il faudra utiliser un sélecteur qui soit plus spécifique. Plus tard, s’il faut aller plus loin dans le détail, il faudra… encore ajouter un niveau de spécificité. On a ici une boule de neige qui risque de se transformer en avalanche, impossible à maintenir efficacement.

Aussi, quand vous écrivez vos sélecteurs, demandez-vous toujours : quel est le sélecteur le moins spécifique qui peut fonctionner ici ?

Toutes les règles liées à la spécificité sont officiellement définies dans la spécification du W3C sur les sélecteurs CSS, la meilleure source pour retrouver tous les détails qui touchent aux sélecteurs CSS. Si vous préférez quelque chose de plus abordable, vous pouvez lire cet article sur la spécificité en CSS (N.D.T. ou cette page de MDN disponible en français).

L’ajout de nouvelles règles : c’est pas automatique

Prenons une situation classique : il y a une anomalie dans votre code CSS et vous avez trouvé l’élément du DOM qui a récupéré le mauvais style. Ensuite, vous vous apercevez que celui-ci hérite d’une propriété et que ça n’aurait pas dû être le cas.

N’ajoutez pas plus de CSS. Si l’ajout de règles devient un réflexe, votre base de code grandira un peu plus et les bugs à venir seront encore plus difficiles à diagnostiquer.

Profitez-en pour prendre du recul, utilisez les outils de développement de votre navigateur et inspectez l’élément pour voir toute la cascade. Repérez la règle précise qui applique le style indésirable et modifiez cette règle existante pour qu’elle n’ait aucune conséquence malheureuse.

Avec Firefox, vous pouvez déboguer la cascade en cliquant droit sur un élément d’une page et en sélectionnant l’option « Examiner l’élément ».

La cascade CSS via l'inspecteur

Et voilà la superbe cascade. On peut voir ici toutes les règles qui s’appliquent à un élément et l’ordre dans lequel elles sont appliquées. Les règles en haut sont les plus spécifiques et peuvent surcharger les styles déclarés par ailleurs. On peut également voir que, dans certaines règles, certaines déclarations sont rayées : cela signifie qu’une règle plus spécifique s’applique à cette propriété.

En plus de voir les règles, vous pouvez également les activer et les désactiver ou les modifier pour observer les conséquences à la volée. En bref, un outil plutôt utile pour déboguer !

Le correctif pourra être une modification d’une règle, éventuellement autre part dans la cascade. Ça peut tout à fait être une nouvelle règle. Au moins, vous saurez que c’était la bonne décision à prendre et que cette règle était nécessaire à votre code.

C’est un bon moment pour lire le code et chercher les éléments qui peuvent être refactorés. Bien que CSS ne soit pas un langage de programmation, c’est du code et, à ce titre, il devrait recevoir la même estime que celle accordée au code JavaScript ou Python : il doit être propre, lisible et refactoré lorsque c’est nécessaire.

Si tout est !important, rien n’est !important !

Ceci est implicite après les précédentes recommandations, mais puisque c’est crucial je le souligne ici : n’utilisez pas !important dans votre code.

!important est une fonctionnalité du CSS qui vous permet de briser la cascade. CSS veut dire « Cascading Style Sheets » (N.D.T pour « feuilles de style en cascade »), c’est un indice.

!important est souvent utilisé pour corriger un bug à la hâte sans avoir le temps de corriger la cascade. C’est aussi fréquemment utilisé lorsqu’on inclue un framework CSS avec des règles très spécifiques et qu’il est simplement trop compliqué de les surcharger.

Lorsque vous ajoutez !important à une propriété, le navigateur va ignorer les autre règles avec des spécificités plus grandes. On réalise le problème lorsqu’on ajoute !important à une règle qui en surcharge une autre règle, déjà marquée avec !important. Il existe un cas légitime pour utiliser !important : l’utilisation des outils de développement à des fins de débogages. Parfois, vous avez besoin de trouver les valeurs d’une propriété qui vous permettront de résoudre votre bug. Utiliser !important via les outils de développement en modifiant le CSS à la volée vous permettra de trouver ces valeurs en ignorant la cascade.

Une fois que vous savez quel CSS fonctionnera, vous pouvez retourner à votre code et regarder à quel point de la cascade il est nécessaire d’ajouter ce fragment de CSS.

Le monde ne s’arrête pas à px et %

Travailler avec les unités px (pixels) et % (pourcentages) est assez intuitif, nous allons donc nous concentrer sur les unités moins connues ou moins intuitives.

em et rem

L’unité relative la plus connue est em. 1em est équivalent à la taille de fonte de cet élément.

Imaginons le fragment HTML suivant :

<article>
  <h1>Titre</h1>
  <p>Un Anneau pour les amener tous et dans les ténèbres les lier.</p>
</article>

Et une feuille de style qui contient uniquement cette règle :

article {
  font-size: 1.25em;
}

Par défaut, la plupart des navigateurs appliquent une taille de fonte de 16 pixels à l’élément racine (ce qui peut d’ailleurs être modifié par l’utilisateur, c’est sympa et ça permet d’améliorer l’accessibilité). Le paragraphe de texte dans cet élément article sera probablement rendu à l’écran avec une taille de fonte (la propriété font-size) de 20 pixels (16 * 1.25). Qu’en est-il de h1 ? Pour mieux comprendre ce qui va se passer, ajoutons cette autre règle CSS à la feuille de style :

h1 {
  font-size: 1.25em;
}

Même si, là aussi, c’est 1.25em qui est utilisé, il faut tenir compte du fait que em est lié à l’environnement dans lequel elle est utilisée (on dit également qu’elle se « compose »). Cela signifie que si h1 était un héritier direct de body, par exemple, il aurait une taille de 20 pixels (16*1.25). Cependant, notre h1 est situé à l’intérieur d’un élément qui a une taille de fonte différente de la racine (article). Dans ce cas, le coefficient 1.25 s’utilise avec la taille de fonte donnée à la cascade et h1 sera affiché avec une taille de 25 pixels (16 * 1.25 * 1.25).

Au fait, au lieu de faire toutes ces multiplications successives de tête, vous pouvez utiliser l’onglet [Calculé] dans l’inspecteur d’éléments, il affiche la taille courante et la taille finale en pixels :

La cascade CSS via l'inspecteur

L’unité em est très souple et permet de modifier simplement, voire dynamiquement, les paramètres liés aux tailles d’élément (pas seulement font-size mais aussi line-height ou width)

Si vous appréciez l’aspect relatif de em mais que vous n’aimez pas la composition, vous pouvez utiliser l’unité rem. Celle-ci se comporte em sans composition, les valeurs sont uniquement liées aux tailles des éléments de base.

Si nous modifions notre précédent code CSS pour transformer les em en rem pour l’élément h1 :

article {
  font-size: 1.25em;
}

h1 {
  font-size: 1.25rem;
}

Tous les éléments h1 auront une taille de fonte de 20 pixels (on part du principe que la taille de base est 16 pixels), sans se soucier de savoir si le titre est dans un article ou non.

vw et vh

vw et wh sont des unités liées au viewport (N.D.T. la zone du document visible à l’écran). 1vw correspond à 1% de la largeur de la fenêtre tandis que 1vh correspond à 1% de sa hauteur. Ces unités sont incroyablement utiles si vous avez besoin d’une interface utilisateur qui occupe tout l’écran (par exemple le fond noir translucide d’une fenêtre interstitielle) et qui n’est pas toujours reliée à la taille du body.

Les autres unités

Il existe d’autres unités plus rares ou moins souples que vous rencontrerez forcément un jour. Vous pouvez en lire davantage à leur sujet sur MDN.

Utiliser les boîtes flexibles (flexbox)

Nous avons abordé ce sujet dans un article précédent sur les frameworks CSS. Le module des boîtes flexibles (ou flexbox) simplifie la création de disposition et les opérations d’alignement. Si vous ne connaissez pas les flexbox, n’hésitez pas à lire ce guide introductif.

Et oui, vous pouvez utiliser les flexbox dès aujourd’hui à moins de devoir prendre en charge les anciens navigateurs à des fins professionnelles. Actuellement, les boîtes flexibles sont prises en charge à 94% dans les navigateurs, il est grand temps d’arrêter d’utiliser tous ces div flottants, difficiles à déboguer et à maintenir. N’oubliez pas de garder un œil sur le module Grid en cours d’élaboration, ce module permettra de créer des dispositions en un clin d’œil.

De l’utilisation des processeurs CSS

Les compilateurs CSS comme Sass ou Less sont très populaires parmi les développeurs front-end. Ce sont des outils puissants qui, utilisés à bon escient, permettent de travailler plus efficacement avec CSS.

Attention à l’abus d’imbrication

We don’t need to go deeper

Une fonctionnalité souvent présente dans ces processeurs (ou compilateurs) est l’imbrication de sélecteurs. Ainsi, le code Less suivant :

a {
  text-decoration: none;
  color: blue;

  &.important {
    font-weight: bold;
  }
}

Sera traduit de la façon suivante en CSS :

a {
  text-decoration: none;
  color: blue;
}
a.important {
  font-weight: bold;
}

Cette fonctionnalité permet d’écrire moins de code et de regrouper les règles qui impactent les éléments proches au sein du DOM. C’est plutôt pratique pour le débogage.

Toutefois, on voit parfois des abus liés à cette fonctionnalité et les sélecteurs CSS obtenus finissent par refléter l’ensemble du DOM. Si on a la structure HTML suivante :

<article class="post">
  <header>
    <!-- … -->
    <p>Étiquettes : <a href="https://tech.mozfr.org/post/2016/05/20/…" class="tag">non pertinent</a></p>
  </header>
  <!-- … -->
</article>

On pourra avoir une feuille de style Less comme celle-ci :

article.post {
  // … d'autres règles ici
  header {
    // …
    p {
      // …
      a.tag {
        background: #ff0;
      }
    }
  }
}

L’inconvénient ici, c’est que les sélecteurs obtenus sont extrêmement spécifiques. Or, on a déjà vu avant que c’était quelque chose à éviter. Il existe d’autres inconvénients liés à cette sur-imbrication que j’ai détaillés dans un autre article.

Bref, pour résumer : n’utilisez pas l’imbrication pour générer des règles CSS que vous ne rédigeriez pas vous-même.

Include / Extend ?

Les mixins sont une autre fonctionnalité utile des processeurs CSS et qui permettent de réutiliser des fragments de CSS. Imaginons qu’on veuille mettre en forme des boutons et que la plupart de ces boutons utilise des propriétés CSS simples. On pourrait alors créer un mixin comme celui-ci (rédigé ici en Less) :

.button-base() {
  padding: 1em;
  border: 0;
}

Puis créer la règle suivante qui utilise le mixin :

.button-primary {
  .button-base();
  background: blue;
}

Ceci générera le CSS suivant :

.button-primary {
  padding: 1em;
  border: 0;
  background: blue;
}

Comme vous pouvez le voir, le remaniement de code est très pratique !

En plus de l’inclusion d’un mixin, des options d’extension et d’héritage existent (la terminologie exacte diffère selon l’outil). Il s’agit d’une combinaison de plusieurs sélecteurs dans une unique règle.

Voyons un exemple en utilisant le mixin vu avant : .button-base :

.button-primary {
  &:extend(.button-base)
  background: blue;
}
.button-danger {
  &:extend(.button-base)
  background: red;
}

Ceci serait traduit en :

.button-primary, .button-danger {
  padding: 1em;
  border: 0;
}
.button-primary { background: blue; }.button-danger { background: red; }

Quelques articles sont partisans d’utiliser uniquement include tandis que d’autres préconisent l’usage de extend. En réalité, ils produisent chacun un CSS différent et aucun n’est intrinsèquement faux. Selon votre situation, l’usage de l’un ou de l’autre sera préférable.

Comment savoir lequel choisir ? Encore une fois, la règle générale « l’écrirais-je ainsi à la main ? » s’applique.


J’espère que cela pourra vous aider à réfléchir à votre code CSS et à écrire de meilleures règles. Comme nous l’avons déjà écrit plus haut : le CSS est du code et en tant que tel, il doit recevoir autant d’attention et de soin que le reste de votre base de code. Si vous en prenez soin, vous en tirerez de nombreux avantages.


Belén est ingénieur et développeur au sein de l’équipe Mozilla Developer Relations. Elle s’intéresse aux standards du Web, à la qualité du code, à l’accessibilité et au développement de jeux.

Android vs Firefox OS : les applications

Dans ce billet, je me focaliserai sur une comparaison entre Android (version Cyanogenmod) et Firefox OS au niveau des applications. Le test est fait via deux smartphones identiques, le ZTE Open C, l'un sous Firefox OS 2.5, l'autre sous CyanogenMod 12 (donc Android 5.x). Dans ce billet j'utilise encore l'appellation Firefox OS car le nom est encore valable pour le système d'exploitation qui fait tourner le téléphone. La version communautaire qui fera suite à l'arrêt de Firefox OS pour smartphone par Mozilla, B2G (Boot 2 Gecko) n'est encore qu'un prototype

(Voir au sujet de B2G les billets de la Communauté Mozilla francophoneLe portage de B2G Contribuez à B2G OS pour continuer Firefox OS pour smartphones)

. Sur Firefox OS, j'utilise le marketplace ou des sites webs dans leur version adaptée au mobile que je mets en favori/marque-page/raccourci.

Pour rappel, Android (et donc CyanogenMod) utilisent des applications propres au système. Firefox OS utilisent des applications dites webs basée sur les technologies HTML5/CSS3/Javascript (et elles sont donc également utilisables sur Android si besoin, ce que je n'ai pas encore fait que je n'aborderai donc pas dans ce billet).

Pour pouvoir installer des applications

Quand on commence à s'intéresser aux applications (pour connaître un peu les applications à la mode) qu'il est possible d'installer sur un téléphone Android (ou équivalent dans le cas de CyanogenMod), on s'aperçoit très rapidement que ces applications sont disponibles pour Android via le Google Play ou sur Iphone et sont absentes de Windows Phone. Le marché est donc très clairement trusté par deux systèmes. Sur CyanogenMod j'ai installé deux logiciels permettant d'installer des applications : le Google Play et F-Droid.

A chaque installation d'application, la liste des autorisations nécessaires au bon fonctionnement de l'application est consultable. Pour les applications à la mode, les applications recommandées ou considérées comme indispensables par la plupart des billets de blogs et articles de journaux qui ressortent dans les premières réponses dans les moteurs de recherche, les autorisations nécessaires font peur... Comme je le disais dans mon billet Android ou CyanogenMod ?, ces applications nécessitent un accès à quasiment à toutes les données du téléphone (dont aux données personnelles). Mon choix est donc simple : je m'en passe, je n'installe pas. Et je cherche un équivalent en logiciel libre sous F-Droid.

Les applications non disponibles sous Firefox OS

Avec CyanogenMod, j'ai toutes les applications que je n'avais pas sous Firefox OS et des fonctionnalités qui me manquaient. Il y a CozyCloud pour ne citer qu'elle (voir Test de l'application CozyCloud sous Android). Il y aussi l'application Freebox officielle fournie par Free qui permet de gérer sa Freebox depuis son smartphone (fort pratique et utile pour moi). Ce sont des applications que j'ai récupéré via le Google Play. Ainsi que SMSSecure/TextSecure (devenu Silence et Signal ; un billet sera écrit prochainement spécifiquement sur ces applications). Certes il existe des façons de récupérer ces applications et d'installer les différents "apk" (le format d'application d'Android) sans passer par le store (et donc la nécessité d'avoir un compte Google). Mais je n'ai pas encore testé cette façon de faire.

En fouillant un peu le Google play par curiosité, ce que je remarque aussi c'est qu'il y a des applications pour tout. Chaque service public et entreprise a son application. Chaque site web a son application. L'expression There's an app for that Il y a une application pour ça n'existe pas pour rien. Là où une simple version mobile du site suffirait, on a une application. Avec des demandes de droits et récupération de données personnelles...

Par conséquence, j'évite donc au maximum les applications du Google Play, préférant des logiciels libres disponibles sur F-Droid. Via F-Droid, j'ai pu installer un client OpenVPN, le TorBrowser via Orbot... Soit des applications qui n'existe pas et pour lesquelles il n'y a pas d'équivalent sous Firefox OS. Et que j'avais très clairement identifiées comme nécessaire à mon usage/mes besoins. Cf mon billet FirefoxOS - Quelles sont les applications manquantes ?

Pour les autres applications que j'installe et je teste, ce sont plus des tests d'applications dispensables, toujours trouvées via F-Droid.

Les usages communs aux 2 OS

Je consulte mes mails depuis mon Smartphone. Niveau mail, j'utilise K9Mail sur CyanogenMod ; le logiciel de mail par défaut (en existe-t-il d'ailleurs un autre pour Firefox OS). K9Mail est plus complexe et a plus de fonctionnalité mais ce n'est pas un mal.

J'utilise un client Owncloud. Sous CyanogenMod le client Owncloud officiel ; sous Firefox 0S, j'utilise TFE Drive. Il faudra que je compare ces deux applications via des tests (vitesses de récupération du même fichier, réactivité de l'application, ergonomie etc.) pour pouvoir juger et me faire un avis plus poussé.

Là où Firefox OS est peut-être gagnant c'est sur l'usage du navigateur Firefox en lui-même. Les pages s'affichent un peu plus rapidement. Est-ce lié au fait que le moteur de Firefox est part intégrante du système et que l'on gagne une couche applicative. Sûrement. Ou au fait que dans le Firefox sous CyanogenMod, comme il est possible d'installer des extensions, j'ai ajouté µBlock Origin, ce qui alourdirait Firefox ?

De même pour Twitter et Diaspora. Sous FirefoxOS, ce sont des versions mobiles/adaptées des sites webs. Sous CyanogenMod, ce sont des applications. Les applications apportent des fonctionnalités comme les notifications (même lorsque l'application n'est pas lancée), mais cela alourdit l'ensemble.

Conclusion à ce billet

Pour les anglophones, j'avais écrit un billet Still A Firefox OS user, will I migrate to Android ? que je pourrais traduire en français par utilisant toujours Firefox OS, est-ce que je migrerai sous Android ?.

Ce billet est donc un pas de plus vers une migration envisageable/envisagée, apporte quelques éléments de ma propre réflexion et expérience pour que chacun-e se fasse son propre avis. Le fait que l'on retrouve tout ce que l'on a sous Firefox OS et surtout des applications nécessaires (voir indispensable) qu'on a pas sous Firefox OS, le fait qu'il faille encore attendre plusieurs mois avant de voir la viabilité de B2G OS (nouveau nom de Firefox OS), tout cela penche de plus en plus dans la balance... A suivre...

Sur le même sujet
- Android ou CyanogenMod ?
- Android, Cyanogen et ZTE Open C

Et sur le sujet de B2G OS, les billets de la Communauté Mozilla francophone :
- Le portage de B2G
- Contribuez à B2G OS pour continuer Firefox OS pour smartphones

Le correcteur grammatical Grammalecte pour Firefox est publié

grammalecteNous avions relayé l’information concernant l’appel à financement de cette extension pour Firefox, qui avait rencontré un beau succès. Nous avons maintenant le plaisir de vous annoncer que le correcteur grammatical Grammalecte pour Firefox est disponible dans le catalogue d’extensions de Mozilla. Comme le précise son auteur sur le site Ulule :

La route a été plus longue que prévu, mais voici enfin Grammalecte pour Firefox. Pour l’instant, attendu que Mozilla n’a toujours pas implémenté l’interface de programmation qui permettra de souligner en bleu les erreurs directement dans les zones de texte, la correction se fait dans un panneau annexe. Mais dès que cette interface sera disponible, c’est bien sûr ainsi que les corrections se feront. A priori, Grammalecte pour Firefox peut et doit signaler les mêmes erreurs que la version pour LibreOffice.

Le portage de B2G

Logo Firefox OSB2G signifie Boot to Gecko, qui est le nom de code du projet Firefox OS pour smartphone. Depuis son lancement en 2012, il a grandi pour proposer différentes versions de son OS et la compatibilité avec de nombreux smartphones. De plus, pour continuer son évolution, de nombreux projets prometteurs ont vu le jour que nous vous présentons.

Depuis le début de l’année, la fondation Mozilla a annoncé des orientations différentes pour ces projets à destination des environnements embarqués comme les smartphones, les téléviseurs, l’internet des objets, etc. Penchons-nous dessus.

B2G Installer

Utilisation de B2G Installer pour Firefox OS sur Sony Z3

B2G Installer se positionne entre Firefox OS et B2G OS. Il sert à installer Firefox OS sur les téléphones qui possèdent déjà un OS comme Android.

Les premiers modèles listés, compatible officiellement avec B2G Installer sont :

  • Sony Xperia Z3 Compact
  • Mozilla Flame (Kitkat)
  • Nexus 4 (Kitkat)
  • Nexus 5 (Lollipop)
  • Wileyfox Swift
  • Sony Xperia Z3 Compact (Kitkat)
  • Fairphone 2 (Lollipop)

La procédure est facilitée avec un kit standard disponible sur GitHub.

En parallèle, de nombreux builds communautaires existent pour porter Firefox OS sur d’autres téléphones, listés sur le site de Mozilla community. Ainsi, vous pouvez porter Firefox OS sur d’autres téléphones qui ne sont pas prévus à l’origine pour Firefox OS.

Enfin, une branche Nightly existe avec des modèles en cours de portage et est fonctionnelle, mais avec des risques de bogues.

Pour installer un de ces builds sur votre téléphone, vous devez passer de préférence par la ligne de commande ou par l’add-on.

Enfin, une documentation détaillée est disponible sur MDN pour vous aider à utiliser B2G Installer sur un téléphone mobile.

B2G OS

B2G OS

La communauté Mozilla a repris le projet Firefox OS pour smartphones pour continuer à le maintenir et à le porter, sous le nom de code B2G OS.

Les versions que nous vous présentons aujourd’hui sont des versions en cours de développement, à destination des développeurs avertis. C’est pourquoi, certains modèles de téléphones sont compatibles avec la nouvelle version de Firefox OS.

Il existe plusieurs branches, dont cette Aries B2GOS 1.0 disponible sur le serveur Mega ou le serveur Mexmod.

Suivant la puissance de votre ordinateur, la compilation sera plus ou moins rapide.
Configuration conseillée : un Core i7 de chez Intel et 8 Go de RAM.

Cette nouvelle version a subi quelques refontes importantes pour respecter au mieux les standards du Web, actuels ou émergents. Ainsi, de nombreuses fonctionnalités ont pu bénéficier de ces nouveaux standards, comme :

  • L’OS gère déjà de nombreux périphériques matériels correctement
  • L’écran de verrouillage
  • Le navigateur en version basique
  • Le clavier
  • L’écran d’accueil
  • Le Wi-Fi
  • La 3G/4G

L’actualité de ce nouvel OS avance vite et nous planifions plusieurs articles dans les prochaines semaines.

Les craintes rassurantes

B2G OS proposera l’approche d’applications web, que vous utilisez avec Firefox OS. Elles seront toujours au format jSON pour être compatibles avec la version d’origine.

À suivre…


@hellosct1

Notre précédent Pourquoi Firefox OS : Annonce de la libération du code de Netscape – 22 janvier 1998

Contribuez à B2G OS pour continuer Firefox OS pour smartphones

Logo B2GLa communauté qui a pris l’initiative de continuer Firefox OS pour les smartphones lance aujourd’hui un appel aux contributeurs :

Qu’est-ce que B2G OS ?

Le projet Boot to Gecko (B2G) a été lancé [1] en 2011 pour construire un système d’exploitation complet et indépendant pour le Web ouvert. B2G est un projet libre basé sur le noyau Linux et le moteur de rendu Gecko. Il a servi de base pour les téléphones commerciaux et TV connectées sous Firefox OS.

En décembre 2015, Mozilla Corporation a annoncé [2] qu’elle se concentrait désormais sur d’autres types d’objets connectés que les smartphones [3]. Depuis, un projet de transition [4] a été lancé pour moderniser B2G et créer une plateforme plus légère sur laquelle se baser pour produire des téléviseurs et de possibles objets connectés à l’avenir. En tant que partie prenante de cette transition, la communauté Mozilla a pris l’initiative de développer les aspects de B2G spécifiques aux smartphones, afin que les employés de Mozilla puissent se concentrer sur d’autres tâches.

Ce projet de transition vise à remplacer l’environnement applicatif historique de Mozilla par des applications web basées sur les nouveaux standards et à rapprocher le cœur du système B2G de l’architecture du navigateur Firefox. Cela réduira la complexité et les coûts de maintenance, et créera une plateforme d’avenir, basée sur des standards du Web émergents.

Pourquoi avons-nous besoin de votre aide ?

Maintenir un système d’exploitation est un projet d’envergure qui requiert les efforts d’une large communauté pour que B2G continue à fonctionner sur des smartphones. Il y a de nombreux moyens de contribuer au projet comme compiler, tester l’OS, signaler et corriger des bogues, développer de nouvelles fonctionnalités, porter l’OS sur de nouveaux appareils, participer à la rédaction de la documentation et à la traduction, ou simplement en parler.

Vous pouvez d’ores et déjà aider le projet de transition pour faire fonctionner le système principal, porter les applications pour smartphones vers la nouvelle architecture et documenter tout ce qui a été modifié. Une fois la transition achevée, nous espérons rassembler une communauté encore plus importante de contributeurs afin de faire progresser B2G.

Si vous êtes intéressé par le défi consistant à aider à développer un système d’exploitation autonome complet basé fait pour le Web ouvert, alors vous êtes invité à contribuer ! B2G est réalisé par la communauté pour la communauté et nous avons besoin de votre aide.

Par où commencer ?

Il y a de nombreux moyens d’entrer en relation avec la communauté B2G, comme, par exemple, aller sur le forum principal [5], la mailing list dev-fxos [6], notre canal IRC #fxos [7] et notre groupe Telegram [8] pour des discussions plus générales et informelles. Nous tenons également des réunions hebdomadaires [9] ouvertes à toutes et à tous sur Vidyo où vous pouvez vous tenir au courant des dernières actualités et rencontrer les autres membres du projet.

Vous pouvez consulter la page B2G OS [10] sur MDN pour une liste plus complète des moyens de contribuer selon vos centres d’intérêts.


B2G OS sera ce que nous en feront ensemble.

  1. https://wiki.mozilla.org/Booting_to…
  2. https://blog.mozfr.org/post/2015/12…
  3. https://wiki.mozilla.org/Connected_…
  4. https://wiki.mozilla.org/B2G/Transi…
  5. https://discourse.mozilla-community…
  6. https://lists.mozilla.org/listinfo/…
  7. https://wiki.mozilla.org/IRC
  8. https://telegram.me/B2GOS
  9. https://wiki.mozilla.org/B2G/Meetin…
  10. https://developer.mozilla.org/en-US…

Traduit de l’anglais par la communauté.

Firefox OS : add-ons/modules : une expérience prometteuse

Firefox OS : add-ons : MarketplaceFirefox, le navigateur web de Mozilla, a conquis une bonne partie de sa popularité grâce à son système d’extensions. Dès l’origine, les extensions pouvaient modifier profondément le navigateur et faire quasiment tout ce qu’il pouvait lui-même faire. Des centaines de milliers de modules complémentaires (extensions, thèmes…) ont été développés pour Firefox et mis gratuitement à disposition des utilisateurs sur le site AMO.

Mozilla a voulu reprendre ces principes de personnalisation poussée et d’émulation de la communauté. Les applications étant développées à base de technologies web, Mozilla comptait profiter du vivier des millions de développeurs web pour ses « add-ons » comme on les appelle dans ce milieu. C’est sous ce nom que vous les trouverez en ligne.

Les add-ons n’ont pas autant de possibilités que les extensions classiques de Firefox, mais tirent parti du nouveau système WebExtensions. Il s’agit de la nouvelle génération d’extensions de Firefox qui implémente les API (bibliothèques d’instructions à la disposition des développeurs) de Google Chrome.

Firefox OS : add-ons : Homebar-Plus

Homebar-Plus permet
de tuer les applis

Cependant, les add-ons peuvent modifier le comportement des applications, dont l’interface principale de Firefox OS, aussi bien que les sites web – un seul ou tous. Ainsi, les développeurs peuvent ajouter, modifier ou retirer des fonctionnalités à Firefox OS, ou changer l’apparence ou le comportement des applications. Les développeurs peuvent même améliorer les performances d’une application donnée.

Même si Mozilla a annoncé que Firefox OS 2.6 était la dernière version qu’elle développerait pour les smartphones, elle a aussi annoncé qu’elle aidera la transition vers un modèle de développement adapté pour être mené par la communauté. Selon les discussions pour faire de Firefox OS pour smartphones un B2G OS plus webby pour faciliter sa maintenance et l’adaptation aux téléphones de Gecko (le moteur d’affichage de Mozilla) par la communauté, les add-ons devraient subsister. Mais, les changements dans l’architecture de l’OS pour smartphones seront si fondamentaux que les add-ons écrits jusque là devront être réécrits.

Voir Qu’est-ce que l’OS dans Firefox OS ? – Les Mots du Fox

Firefox OS : add-ons : Yellow Mask offFirefox OS : add-ons : Yellow Mask on
Yellow Mask ajoute un filtre jaune contre la lumière bleue

Une trentaine de modules, comme on les appelle dans le Marketplace, sont actuellement disponibles dans la boutique d’applis de Mozilla. Vous ne pouvez les voir que dans un Firefox OS compatible (2.5 et +). Cependant, l’avenir de la boutique d’applis de Mozilla est menacé et elle ne devrait pas subsister dans sa forme actuelle. Il faudra attendre des nouvelles du plan de transition vers un modèle de développement communautaire pour savoir si une méthode de collection et d’installation plus pratique que l’installation via WebIDE (méthode alternative au Marketplace qu’il faut utiliser pour installer un add-on sur un site web extérieur comme GitHub).

S’il faut aller sur le Marketplace pour installer ces modules, leur désactivation et leur suppression se fait dans les paramètres de Firefox OS, comme leur configuration le cas échéant.

Firefox OS : add-ons : Paramètres : Modules complémentaires : Mes modulesFirefox OS : add-ons : Paramètres : Modules complémentaires : Quick Settings Enhancement

Expérience en cours

Cependant, ce n’est pas une fonctionnalité aboutie. Selon votre téléphone et la version de Firefox OS qu’il contient, un add-on fonctionnera ou pas.

Vous pouvez passer votre ZTE Open C en version 2.5 ou 2.6 grâce aux builds communautaires mises à disposition par la communauté Mozilla francophone. Voyez l’article que nous publiions en juillet.

Les add-ons ne semblent pas fonctionner du tout dans la dernière version 2.6 des builds communautaires de Firefox OS pour le ZTE Open C vendu en France.

Firefox OS : add-ons : panneau Quick Settings Enhancement et Status Bar Battery Percentage
Modules Quick Settings Enhancement
et Status Bar Battery Percentage

Prenons comme exemple Quick Settings Enhancement (begeesben & gasolin) qui étend le panneau de raccourcis qui apparaît quand on développe la barre de notifications. Voilà qui est bien pratique et démontre la modification de l’interface de Firefox OS, mais il ne fonctionne que, pour le ZTE Open C, dans la version 2.5 de Firefox OS. L’add-on Twitter Ad-Blocker de Philippe Joulot démontre lui la modification d’une application et d’un site web et est rapporté fonctionner sous Firefox OS 2.6 dans un Sony Z3C, mais pas dans un ZTE Open C. C’est bien dommage, car il retire les publicités ou tweets sponsorisés de l’application Twitter et du site Twitter.com dans le navigateur de Firefox OS.


Nous suivrons – j’espère vous aussi – les add-ons dans B2G OS pour smartphones.


@Mozinet

Thunderbird en français

Thunderbird en 3 panneauxPeut-être l’avez-vous remarqué, mais, bien que disposant de nombreux utilisateurs francophones et d’une communauté active, Thunderbird n’a pas de canal d’information spécifique dans notre langue.

Alors que le logiciel de messagerie entre dans une phase d’incertitudes avec l’annonce récente des candidats à la reprise avec lesquels la fondation Mozilla discute. En effet, la fondation a décidé de se séparer complètement du client de messagerie basé sur Gecko et de lui trouver une nouvelle maison en coordination avec le Thunderbird Council. Ce conseil de bénévoles dirigeait le développement du logiciel depuis que Mozilla avait décidé d’en remettre la direction à la communauté. Mozilla n’assurait plus que les mises à jour de sécurité tout en apportant une aide en infrastructure. Les deux dernières versions majeures, suivant le rythme quasi annuel de Firefox ESR (édition longue durée pour les entreprises et organisations), dont la 45 qui est sortie depuis peu, ont été pilotées par le conseil. Mozilla n’a plus d’employé payé pour développer Thunderbird.

[Voir les liens en fin d’article]

Un architecte logiciel recherché pour la transition

La dernière annonce mentionne la recherche d’un architecte logiciel pour conseiller et étudier la séparation du développement de Firefox et de Thunderbird qui partagent encore beaucoup de code en commun (surtout le moteur de rendu HTML Gecko de Mozilla). Mozilla considère que garder la parité de code entre les deux logiciels autonomes fait peser une trop grosse pression sur les ressources limitées de Thunderbird et ralentit Firefox sur lequel Mozilla a décidé qu’elle allait concentrer le travail de ses équipes.

Selon Mark Surman de la fondation Mozilla, bien que certains accordent beaucoup d’importance à la sécurité et l’indépendance qui sont attachées à un client de courriel sur ordinateur (…), le nombre global de ces personnes dans le monde diminue. Il fixe à 2012 le moment où l’email sur ordinateur est devenu l’exception plutôt que la règle. Mozilla a alors drastiquement réduit ses investissements et a entamé la transition vers un modèle de projet dirigé par des bénévoles.

Lorsque Thunderbird n’avait pas trouvé son modèle commercial aux mains de la filiale indépendante Mozilla Messaging et avait été réincorporé à la fondation, il était clair pour les observateurs avertis que ses jours étaient comptés en tant que projet phare de Mozilla. Le logiciel n’était pas critique pour l’avancement des buts de Mozilla qui veut surtout protéger le web ouvert. Si Mozilla n’avait pas hérité du code de la suite Internet Netscape, devenue la suite Mozilla, jamais la fondation ne se serait lancée dans la création et le développement d’un client de courrier électronique. Par contre, un navigateur web moderne fait sens pour remplir ses objectifs.

Thunderbird fait face à d’importants défis

Mozilla a identifié un certain nombre de défis techniques qui attendent Thunderbird :

  • La dette technique
  • L’existence des fonctionnalités à moitié terminées
  • La possible future dépréciation par Mozilla du XUL, sa technologie actuelle d’interface utilisateur, et de XPCOM, sa technologie actuelle de composants
  • Les changements réguliers de Gecko, le moteur de rendu HTML qu’il utilise, qui ne prend pas nécessairement en compte ses besoins et dont l’adaptation demande temps et efforts
  • Les services et processus auxquels se connecte à distance le client logiciel comprennent la distribution et les procédures de revue des modules complémentaires, l’ingénierie de compilation et de création des versions, la gestion des mises à jour et l’ingénierie de sécurité, tous mêlés avec les systèmes de Firefox.

Une communauté francophone autour de Thunderbird

Donc, le processus lancé promet de futures annonces et beaucoup de questions de la part des utilisateurs de Thunderbird. Au sein de MozFr, des bénévoles de la communauté Mozilla francophone aident dans plusieurs domaines dont le développement, les tests, la traduction, l’assistance et les modules complémentaires. Il y a ainsi des bénévoles sévissant sur les pages francophones d’AMO, celles de SUMO et sur le forum d’entraide Geckozone (aussi sur la traduction du logiciel bien sûr).

Une communication en français

Il y a un peu de communication en anglais aussi produite par des bénévoles, mais pas en français. Pourtant, le travail des bénévoles, aussi bien francophones que parlant d’autres langues, pourrait être utilement mis en lumière dans un canal d’information francophone. Les changements à venir devraient aussi susciter des interrogations des utilisateurs de Thunderbird. Un tel canal pourrait participer à leur apporter les réponses qu’ils attendent dans une langue qu’ils comprennent.

Donc, j’ai pensé à ouvrir un compte (mené par des bénévoles) Twitter @ThunderbirdFr (qui pourra continuer quand Thunderbird changera de maison).

Vous pouvez aider en :

  • faisant passer l’info ;
  • vous abonnant à ce compte ;
  • l’annonçant à vos abonnés ;
  • retweetant ses nouvelles ;
  • nous faisant remonter des infos ;
  • nous indiquant des liens intéressants ;
  • faisant partie de l’équipe de publication.

Mozilla Wiki : Thunderbird/Community Members

Communication de Thunderbird en anglais

Thunderbird 45

Les événements récents

Les événements plus anciens

–– Mozinet

Little overview of community builds for firefox os and ZTE Open C

Extract from https://discourse.mozilla-community.org/t/zte-open-c/8402 A report of what i have done since 1 years 1/2 with lots of mozilliens, thanks to all <3

Hi all,
This is a topic to speak about what we have done in community build for ZTE Open C in french mozilla communaty. The result is http://builds.firefoxos.mozfr.org/

What we have done
We setup community build for zte open c, with fota support : went you install a build, you will receive update over the air, no need to reflash.
Flashing is done with adb sideload or flash zip in recovery.

Building part :
We have document all your build setup on mdn : Building and installing FOTA community builds
The builds are building on someone server, and then upload on mozfr server
We use buildbot, which automates the compile cycle (each night for nightly, and 1-click button for other build).
We can have overview of build, and see specific build, with log of output

All build (except nightly build) are tests by hand and by people, we use a simple form like this

Other people made bug report. Some made also patch (this is really amazing, thanks all !)

All our configuration for buildbot, patch or shell script are on github : github - mozfr/buildscommunautaires

We have setup this configuration in february 2015 (before we use shell script with cron, irc notification, but without log). Since this time, we have try more than 600 build.

If you have question, ask. If you need help to made the same for your phone, also ask
We are also on irc : irc.mozilla.org chan : #buildopencfr

À angle droit avec Firefox OS

Protractor pour Firefox OS Protractor va transformer votre téléphone Firefox OS en outil de bricolage.

Le but de cette application est déterminer un angle d’un objet par rapport au sol, sans besoin de faire le calcul manuellement (ou de tête !).

Jusqu’à présent pour savoir si votre meuble ou votre produit électroménager (un frigo, une machine à laver…) était bien droit par rapport au sol, vous utilisiez un niveau, une équerre ou une règle à angle droit, sinon un rapporteur pour savoir votre objet est bien droit.

Protractor pour Firefox OS Protractor pour Firefox OS

Ce type d’outillage n’est pas toujours à porter de main, même si vous en possédez un. Mais votre téléphone est là pour pallier cette absence ou votre manque d’envie de l’utiliser.

Protractor pour Firefox OS

Après avoir lancé l’application, il vous suffit de placer votre téléphone Firefox OS sur un des coins pour connaître l’angle exacte de celui-ci avec la verticale

Ainsi, vous pouvez définir si votre objet est bien d’aplomb.

Protractor pour Firefox OS

Après quelques ajustements avec les pieds de votre appareil (s’ils sont réglables), votre téléphone vous renverra la valeur « 0° », ce qui signifie qu’il est bien droit.

Protractor pour Firefox OS

Par ailleurs, vous pouvez aussi mesurer l’angle par rapport à un mur qui est aussi l’autre interêt de l’application. Mais si votre objet est bien droit, alors la valeur 90° sera affichée.

Protractor pour Firefox OS Protractor pour Firefox OS

Connaître les angles vous permet d’utiliser l’application pour vous aider à dessiner des plans dans une pièce, ce qui est bien utile quand vos angles ne sont pas droits. Ainsi, vous pouvez vous aider de votre téléphone pour tracer des traits de coupes, des plans ou préparer des travaux de découpes.

Enfin, comme vous le voyez, votre téléphone est l’outil idéal, toujours avec vous, avec cette application toujours à portée de main, mais nous mettons de réserves pour les téléphones Open C.

L’auteur de l’application, Aras Balali Moghaddam, montre dans un article comment il a conçu et réalisé cette application de A à Z.


@hellosct1

Notre appdujour précédente : Dégommer les balles avec esviji sur Firefox OS

Mozilla : “Firefox + Vous” d'avril 2016 – Newsletter francophone

Comme chaque mois nous reprenons ici la lettre mensuelle qu’ont déjà reçue les abonnés. Vous aussi, recevez bientôt le numéro de mai 2016 dans votre boîte aux lettres électronique.

Si vous êtes déjà adepte de Firefox, faites connaître ce petit bulletin à vos amis et à vos proches…