Avis aux développeurs, amateurs de HTML et de CSS : Firefox 16 proposera des fonctions avancées qui permettront par exemple de visualiser des sites de manière «responsive», sur un desktop comme sur mobile. Et bien d’autres choses encore…
Si le navigateur Chrome de Google gagne incontestablement du terrain sur ses concurrents, Firefox va frapper un grand coup avec pour cible les développeurs. En effet, la version 16 du navigateur de la fondation Mozilla embarquera des fonctions très pratiques pour les développeurs, résolument orientées responsive web design.
Ces fonctions sont d’ores et déjà accessibles, à condition de télécharger la dernière version « nightly builds » de Firefox, à savoir la version 16, dont la date de sortie finale n’est pas encore connue. Les nouveautés pour les développeurs sont donc légion. Commençons par la plus pratique : le clic droit sur un élément d’une page Web. Vous verrez dans la vidéo ci-dessous qu’il contient de nouveaux outils pour les développeurs. La fonction « Inspecter l’élément » change complètement, et vous donnera cette vue :
On remarque donc une nouvelle vue « layout » en bas à droite, avec toutes les informations (marges, bordures, etc.) dont la taille par exemple. Dans ce mode, vous pouvez encore naviguer dans la page pour inspecter d’autres éléments.
Mieux : vous pouvez inspecter les éléments CSS et comprendre comment ils réagissent. Dans l’exemple de la vidéo, le logo passe du rouge au noir lorsque la souris passe dessus. Directement depuis la nouvelle vue, vous avez accès à la fonction « :hover », qui simule le passage de la souris et donc l’activation du CSS. Vous pouvez aussi copier le code HTML directement, intérieur et extérieur, sans repasser par la vue HTML prévue à cet effet dans les précédentes versions de Firefox.
Responsive web design
Mozilla a travaillé l’aspect responsive web design pour les développeurs et une nouvelle fonction « responsive mode » (qui réduit la page web à l’intérieur du navigateur) qui vous permet de manipuler un site et de voir comment il réagit lorsque la taille de l’écran change.
Vous pouvez aussi directement choisir une taille d’écran pour visualiser le site.
Cette fonction vous permet aussi de visualiser un site comme si vous étiez sur un mobile, avec les vues horizontales et verticales.