Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - box-shadow

Fil des billets - Fil des commentaires

mardi, juin 9 2009

Les nouveautés de Firefox 3.5 en 35 jours

Mozilla vient d'ouvrir un site, hacks.mozilla.org. Pendant 35 jours, nous allons vous montrer les nouvelles possibilités du moteur de Firefox, tant en terme d'API javascript, qu'en terme de support de HTML5 et de CSS3. J'ai réalisé une démo qui sera publié sur ce site. Ce sera une démo sur CSS, qui utilisera des fontes téléchargeables (propriété font-face), les ombrages sur les textes (text-shadow) et les boites (box-shadow), accompagné d'une pincé de bords arrondis (border-radius).

Stay tuned !

Mise à jour: comme promis...

vendredi, avril 24 2009

Quand une nouveauté CSS en chasse une autre...

Les nouvelles propriétés CSS qui arrivent dans nos navigateurs permettent de faire des choses plus sophistiquées mais de façon plus simple qu'avant.

J'avais déjà montré cette facilité en appliquant des styles d'ombrages et de rotation sur la page d'accueil de jelix.org. Mais il n'y a pas que les sites web qui vont pouvoir profiter de ces avancées, il y a aussi Firefox.

Comme vous le savez certainement déjà, Firefox utilise un langage XML, le XUL, pour son interface graphique et CSS pour le design de cette interface. Je vais prendre un exemple de l'utilisation des nouvelles propriétés CSS dans Firefox : la barre de boutons de la boite de dialogue des extensions, sous MacOSX.

Dans Firefox 3.0, ça donne ça :

toolbar dans Firefox 3.0 sur MacOSX

C'est assez sobre. Pour les arrondis sur les boutons droite et gauche, border-radius[1] est utilisée, et sur tout les boutons, il y a une simple image de fond avec un léger dégradé.

Durant le développement de Firefox 3.5, est arrivé la propriété border-image (Voir un de mes billets sur ce sujet). Un contributeur s'est dit, "utilisons là", pour rendre ces boutons plus jolis. Et les boutons sont devenus ceci, comme on peut le voir dans Firefox 3.1 beta3:

toolbar dans Firefox 3.1 beta 3 sur MacOSX

Comme vous le voyez, avec border-image, on peut faire des bordure plus sympa et assez facilement en CSS. D'ailleurs l'auteur en a profité pour ajouter des "effets" selon l'état du bouton (voir par exemple le bouton "extension" sur lequel j'ai le bouton de la souris enfoncé). Le seul souci de cette approche est que ça utilise pas mal d'images. Déjà, il y a trois types de boutons (gauche, milieu, centre), mais en plus il y a plusieurs états du boutons : relâché, sélectionné, enfoncé, actif etc... Voici par exemple trois de ces images pour le bouton de droite :

images pour réaliser une toolbar dans Firefox

Pour réaliser des bordures complexes, on n'a toutefois pas le choix.

Mais que remarque-t-on sur ces images ? En fait elles ne font que reproduire des effets d'ombres.

Des ombres ? Ça tombe bien, il y a une autre nouvelle propriété dans Firefox 3.5 pour faire des ombres : box-shadow. Et si on l'utilisait ? C'est ce que s'est dit un contributeur. Hop, quelques lignes de css à modifier, suppression de toutes ces images (70ko en moins) et le résultat que vous pourrez admirer dans Firefox 4[2] :

toolbar dans Firefox 3.6a1 sur MacOSX

On obtient quasiment la même chose qu'avec la technique du border-image précédente, mais sans images donc plus léger, avec une manière plus simple de créer et modifier le design.

Notes

[1] ou plutôt -moz-border-radius, cette propriété n'étant pas encore un standard dans CSS3, Mozilla l'a préfixé avec -moz- comme le permet la spécification CSS, tout comme box-shadow

[2] pas sûr que le patch sera intégré dans Firefox 3.5

dimanche, juillet 27 2008

Avancées dans Gecko 1.9.1

Malgré les 3 ans de développement qu'a necessité Gecko 1.9.0 (le moteur de Firefox 3), il n'a pas été possible d'implémenter certaines choses qu'ont déjà Safari et Opera, bien que toutefois les nouveautés pour les développeurs soient très alléchantes, avec des morceaux de HTML5 dedans :-). En effet, les développeurs du "coeur" s'étaient concentrés principalement sur la gestion de la mémoire, les performances, la refactorisation de gros morceaux de code, et la correction de bugs pour passer le test Acid2. C'était donc beaucoup de travail sur des choses "qui ne se voient pas". Mais une des conséquence de ces développements "sous-terrains", c'est que Gecko 1.9.0 est devenu une bonne base pour avancer bien plus vite sur l'implémentation des standards.

Du coup, les développeurs peuvent se concentrer sur le futur. Et ils ne s'en privent pas depuis un mois et demi. Je vous avez parlé de l'implémentation de la balide video, de l'implementation du style CSS border-image, mais aussi évoqué l'implementation complète des selecteurs CSS3 (modulo 2-3 bugs), le support de text-shadow (pour créer des ombres sur du texte), de box-shadow (pour faire des ombres sur des boîtes).

Et ces derniers jours, voici les nouveautés :

  • Implémentation de la propriété CSS3 word-wrap
  • Implémentation des propriétés CSS3 column-rule-*, pour styler les séparations entre les colonnes CSS. Souvenez-vous que depuis sa version 1.5, Firefox permet de créer des colonnes en CSS, ce qui évite de faire appel à des tables pour avoir des colonnes de texte. J'en avais parlé à l'époque.
  • Implémentation de l'objet NodeIterator dans l'API DOM traversal, permettant de parcourir un arbre DOM de manière séquentiel, contrairement au TreeWalker qui propose plutôt une vue arborescente de la navigation.
  • Implémentation des toutes nouvelles fonctions DOM querySelector et querySelectorAll : elles permettent de récupérer un ou plusieurs noeud DOM en utilisant un sélecteur CSS, ce qui est plus simple que d'utiliser un selecteur XPath (fonction evaluate sur les objets document). Voici un exemple issue de la spécification. Voici ce qu'il faut faire en temps normal quand on veut récupérer la deuxième cellule de chaque ligne d'un tableau (ayant pour id score) :
var table = document.getElementById("score");
var groups = table.tBodies;
var rows = null;
var cells = ;

for (var i = 0; i < groups.length; i++) {
  rows = groupsi.rows;
  for (var j = 0; j < rows.length; j++) {
   cells.push(rowsj.cells1);
  }
}

Et voici maintenant l'équivalent avec querySelectorAll :

 var cells = document.querySelectorAll("#score>tbody>td:nth-of-type(2)");

Sympa non ? :-)

Parmis les développements actifs en ce moment, et qui vont donc aboutir d'ici quelques semaines, voici ceux là :

  • Les propriétés CSS de transformation proposées par Webkit, permettant de faire des animations en CSS.
  • L'implémentation des medias queries de CSS. (mise à jour : en fait ça vient juste d'être intégré dans le trunk !)
  • Fonctions javascript trim, ltrim, et rtrim
  • DOMWorkerThreads : la possibilité de faire, en javascript, de vrai traitement en parallèle...
  • Une partie de l'implémentation de @font-face

Bien sûr, cette liste est loin d'être exhaustive :-)