Nous avons publié récemment un article sur Alsacréations au sujet de -prefix-free, un outil générant automatiquement des préfixes vendeurs sur les propriétés CSS3, selon nécessité.
Nous avons publié récemment un article sur Alsacréations au sujet de -prefix-free, un outil générant automatiquement des préfixes vendeurs sur les propriétés CSS3, selon nécessité.
Cette ressource a certainement autant d’avantages que d’inconvénients…et donc autant de détracteurs que d’aficionados. Le premier argument, indiscutable, est tout simplement que JavaScript n’a théoriquement rien à faire dans une histoire de CSS pur et que rajouter une couche JS uniquement par flemme est un peu exagéré.
Soit. Mais en ce qui me concerne, je suis tout de même plutôt pour :)
Prenons un exemple simple : il y a quelques années, j’ai conçu un certain nombre de sites web avec des éléments avant-gardistes telles que des animations CSS3 (l’exemple choisi des animations vaut pour un large panel d’effets CSS3).
A cette époque, seul Webkit reconnaissait les animations et j’ai - en toute logique - appliqué uniquement un préfixe -webkit- sur mes propriétés.
Lorsque Firefox 5 a supporté les animations CSS3, j’ai eu deux choix : soit je laissais tous ces sites tels quels, donc sans animations sur Firefox; soit je les reprenais un par un et ajoutais un prefixe -moz- pour rendre mes animations compatibles sur ce navigateur. Les parts de marché de Firefox n’étant pas négligeables, j’ai opté pour la seconde alternative (c’est de l’humour, je l’aurais fait de toute façon, hein).
Le temps passant, j’ai continué à produire des sites web pour moi ou des clients, disposant de fonctionnalités CSS3 avec préfixes.
Puis, au fur et à mesure, Opera et Microsoft se sont mis à supporter toutes ces propriétés, avec leurs propres préfixes bien entendu.
Et là, autant dire que je n’avais pas forcément l’envie ni le temps de reprendre un par un tous les sites produits depuis quelques années.
Est-ce ma faute ? Aurais-je dû dès le départ proposer une demi-douzaine de préfixes sur toutes les propriétés CSS3 de tous les sites conçus depuis plusieurs années ? (au risque de surcharger des styles inutilement).
Je n’ai pas la réponse à cette question… mais en toute honnêteté, Prefix-free est une solution viable à ce problème. Grâce à cet outil, mes sites d’hier et d’aujourd’hui seront toujours, immédiatement et automatiquement supportés par le plus vaste panel de navigateurs possible, et s’adapteront à toute nouvelle version d’un navigateur reconnaissant une propriété avant-gardiste.
Je trouve qu’il s’agit d’une excellente assurance-vie pour mes clients.
Latence et chargement ?
Comme beaucoup d’outils de ce genre, -prefix-free nécessite une requête HTTP et un traitement du JavaScript, au détriment des performances du navigateur.
En ce qui me concerne, je considère que les avantages fournis contrebalancent ce handicap. Mais sur mobiles, où les temps de chargement sont prépondérants, la question mérite le détour.
Une solution radicale pourrait-elle consister à ne charger -prefix-free que sur écrans larges ?
Cela signifie que les fonctionnalités CSS3 risquent de ne plus être interprétées du tout si elles requièrent un préfixe. C’est jouable s’il s’agit de propriétés de confort ou de décoration, mais bien évidemment pas pour des parties importantes telles que du positionnement.
if(screen.width>640) {
var prefixfree = document.createElement('script');
prefixfree.src = 'https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js';
prefixfree.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(prefixfree);
}
A méditer bien entendu.
Suite à un billet récent constatant que le device-width (largeur d’écran d’un périphérique) diffère selon les navigateurs, j’ai souhaité pouvoir proposer un chargement conditionnel de mes feuilles de styles mobile voire de modifier la valeur de mon meta viewport.
Le principe est de détecter en JavaScript la valeur de device-width et de charger une feuille de style adaptée (par exemple : styles320.css, styles640.css, styles800.css, styles1024.css). Attention, je ne dis pas qu’il s’agit d’une bonne pratique, je souhaitais simplement tester cette possibilité d’adaptation.
Et là c’est le drame…
Car au final ni screen.width ni windows.innerWidth de JavaScript ne correspondent à device-width, c’est à dire la valeur indispensable pour s’adapter aux terminaux mobiles.
Pour parvenir à mes fins, j’ai rapidement créé une page HTML de test à laquelle il est possible d’accéder ici : http://bit.ly/device-width
Voici le contexte :
J’ai pu constater que selon les terminaux, leur orientation et le navigateur employé, les deux valeurs ne coïncident pas ! Testez chez vous et n’hésitez pas à me faire vos retours.
Et si vous avez une solution magique, je suis preneur !
Suite à la proposition d’Anthony, j’ai rajouté un troisième test dans la page : celui de window.matchMedia qui paraît prometteur puisqu’il correspond exactement à la valeur recherchée.
Le test en résumé ressemble à ça :
if (window.matchMedia("(min-width: 640px)").matches) {
document.write("device-width > 640px (window.matchMedia OK)");
}
Aux dernières nouvelles, les navigateurs mobiles Safari, Firefox et Android 3+ semblent supporter window.matchMedia, ce qui n’est pas le cas d’Opera (ni mobile ni mini). Pour IE mobile, je n’ai pas encore de retours.
J’ai été invité hier à parler de CSS3 lors du cycle de conférences Microsoft TechDays au Palais des Congrès de Paris.
Mon exposé s’est concentré sur 3 modules CSS3 que je considère majeurs : les Media Queries, le Grid Layout et les Animations.
C’était d’ailleurs assez pittoresque de dévoiler des technologies qui ne fonctionnent pas du tout sur les versions encore actuelles d’Internet Explorer (Grid et Animations ne sont supportées qu’à partir d’IE10 actuellement en beta), notamment dans un amphi dévoué à Microsoft… Mais le principe était de constater (avec raison) que la dernière mouture Internet Explorer était un excellent navigateur et que l’on pourrait enfin appréhender des positionnements intuitifs et pratiques sans avoir à bidouiller.
Vous pourrez visualiser mes diaporamas sur Slideshare et un article complet et détaillé sur le module Grid Layout sur Alsacréations (fini ce matin pour l’occasion).
Cahnory: UTF-8, comment ça marche � -
L’UTF-8 est un encodage permettant de gérer bien plus de caractères que l’ISO, limité à seulement 256. Il est universel et couvre aussi bien les caractères latins que cyrilliques, arabes, japonais… à titre personnel, il m’est nécessaire pour afficher mon prénom ;).
Si l’UTF-8 est très utile, il…
Dans 3 jours, je serai aux Microsoft TechDays 2012 en tant qu’orateur.
J’y présenterai une conférence sur trois avancées majeures en CSS3 : MediaQueries, Animations et Grid Layout.
If you’ve spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa.)