Connexion

Catégories

Droit Économie Flock Hardware IA Internet Logiciel Sciences Sécurité Société

Nous Suivre

Contact rédaction Contact site Forum
Flux RSS GitHub Discord

À propos

Abonnez-vous

Google propose un kit de ressources Material Design Lite pour les sites web

Les systèmes d'exploitation et les applications, ce n'était pas assez

Google propose un kit de ressources Material Design Lite pour les sites web

Le 07 juillet 2015 à 10h00

Google vient de publier quelques ressources à l’intention des développeurs web. Sobrement nommées Material Design Lite, elles permettent la création de sites web reprenant facilement les codes visuels de l’interface mise en avant par l’éditeur depuis l’arrivée d’Android 5.0.

Material Design est un langage visuel, largement mis en avant par Google depuis un an environ. Il regroupe tout un ensemble de règles et permet de moderniser les interfaces, en faisant notamment place au contenu. Le contenant se veut simple, joue avec certains effets de matière et d’ombrage, et propose un « look » globalement plus consistant que ModernUI chez Microsoft (que certains estiment trop dépouillé), ou même que ce que propose Apple depuis iOS 7. Pour cela, Google s'appuie sur une métaphore papier et encre, le contenant étant composé de feuilles de papier à superposer, le contenu d'encre.

Le Material Design envahit peu à peu l’ensemble des produits de Google, y compris sur les autres plateformes. On a pu voir récemment sur iOS le remaniement de l’application Hangouts, dont l'apparence a évolué en s'appuyant sur cette spécification. Mais les systèmes d’exploitation et applications ne suffisent pas à Google, qui propose désormais un petit kit permettant aux développeurs web de donner un air de Material Design à leurs sites.

Material Design Lite, ou MDL, est contenu dans un petit fichier compressé d’à peine 27 ko. Il est utilisable dans de nombreuses solutions (il se veut agnostique) et propose différents éléments qui peuvent être soit utilisés ensemble, soit au contraire séparément. Il s’agit d’éléments « Paper » encapsulés individuellement, et le développeur pourra ainsi utiliser le module spécifique aux graphiques ou aux billets de texte sans utiliser le reste. Des modèles sont par ailleurs fournis.

Material Design LiteMaterial Design Lite

La seule limitation pour le développeur sera en fait la compatibilité des navigateurs. Google indique en effet qu’il faut des versions relativement récentes pour que les éléments MDL soient pris en charge correctement. Pour des Chrome, Firefox ou Opera qui se mettent à jour continuellement, il n’y aura aucun problème. Pour Safari, il faudra contrôler que l’on a bien installé toutes les mises à jour. Du côté de Microsoft, Google parle d’Edge, qui n’est même pas encore sorti, mais un coup d’œil au tableau de compatibilité montre qu’Internet Explorer 10 et 11 ne causeront aucune difficulté. Dans le cas de la version 9, MDL bascule sur un mode intégralement CSS de manière automatique.

Les développeurs qui s’intéressent à ce kit pourront le télécharger depuis la page de l’annonce.

Commentaires (45)

Vous devez être abonné pour pouvoir commenter.

Abonnez-vous
votre avatar







t-la a écrit :



Il y a quelques années, c’était le design Aqua d’Apple qui était repris partout. Maintenant, il semble qu’on se dirige vers MD.

 

 Rien qu’un phénomène de mode de plus.







Ouai, mais le style aqua est chaud à faire en HTML/CSS.







MoonRa a écrit :



Le MD est horriblement moche. Je sais, les goûts et les couleurs tout ça… mais là ça pique.







Je t’invite quand même à regarder la documentation et voir à quel point c’est plus qu’un simple design graphique, c’est vraiment tout un ensemble de règle pour présenter les choses afin qu’elles soient claires, attrayantes et cohérentes. Tout n’est pas à jeter.

Bon, et comme tu le dis, tu n’accroches pas mais c’est assez subjectif. Le flat design est très direct et minimaliste dans son approche allant dans le sens d’un monde de l’information rapide.


votre avatar







tazvld a écrit :



Ouai, mais le style aqua est chaud à faire en HTML/CSS.







Je t’invite quand même à regarder la documentation et voir à quel point c’est plus qu’un simple design graphique, c’est vraiment tout un ensemble de règle pour présenter les choses afin qu’elles soient claires, attrayantes et cohérentes. Tout n’est pas à jeter.

Bon, et comme tu le dis, tu n’accroches pas mais c’est assez subjectif. Le flat design est très direct et minimaliste dans son approche allant dans le sens d’un monde de l’information rapide.





Hé, j’ai pas dit que c’était la même chose qu’Aqua hein :) J’ai juste évoqué les effets de mode qu’on retrouve chez les créas web. Et comme dit avant, c’est pas pire que les clones bootstrap.

 

 

 Maintenant, il est clair que tout ce qui se base sur cette tendant flat design est tourné vers une facilité d’intégration et de déclinaison sur les différents écrans. Pour une fois la technique et le design ont fait bon ménage, je trouve. Oui, je préfère infiniment me cogner du responsive sur du MD que sur une maquette Aqua.


votre avatar

C’est quoi tes reproches exactement ?

votre avatar







127.0.0.1 a écrit :



NXI: v7 is coming.





<img data-src=" />


votre avatar







t-la a écrit :



Hé, j’ai pas dit que c’était la même chose qu’Aqua hein :) J’ai juste évoqué les effets de mode qu’on retrouve chez les créas web. Et comme dit avant, c’est pas pire que les clones bootstrap.

 

 

 Maintenant, il est clair que tout ce qui se base sur cette tendant flat design est tourné vers une facilité d’intégration et de déclinaison sur les différents écrans. Pour une fois la technique et le design ont fait bon ménage, je trouve. Oui, je préfère infiniment me cogner du responsive sur du MD que sur une maquette Aqua.







En faite, je faisait juste une petite remarque acide sur le fait que le développement d’environnement web prend énormément d’ampleur et que le design Aqua (Cristal?) n’est vraiment pas adapté au web et tout particulièrement au possibilité offerte par HTML et CSS. Mais sinon, je suis d’accord, la mode, ça s’en va aussi vite qu’elle est venu. Mais j’aimerai quand même précisé que le flat design semble aller bien plus loin que les précédent design “mode” et semble beaucoup plus réfléchi pour correspondre au monde d’aujourd’hui, au utilisateurs actuels.







Reznor26 a écrit :



C’est quoi tes reproches exactement ?





Personnellement, les couleurs vives , l’aspect général qui dégueule le positivisme (je te collerais bien des grumphy cat et des démotivationnal posters à la place de chaque image moi.)… après, c’est du chipotage pour mon cas. Ce design ne me sort pas encore par les yeux.


votre avatar

Dans tous les cas, c’est plutôt interressant d’avoir une alternative à Bootstrap (qui, il faut bien le dire est quand même bien pratique) . On va avoir droit à la guerre des clones&nbsp;<img data-src=" />

votre avatar

Les kits et autres framework graphiques existent depuis que la nuit des temps…

votre avatar

Un point Godwin atteint sur un sujet traitant d’un n-ième framework HTML/CSS/JS il fallait le faire ^^

votre avatar







Folgore a écrit :



Ca a pas l’air pire que les clones bootstrap :/

[…]





Material Design web sites clones is&nbsp;are coming <img data-src=" />



Et c’est quoi le problème ? les applis desktop se ressemblent bien toutes et fonctionnent toutes de la meme facon (du moins sous OS X) =&gt; plus de coherence =&gt; plus simple a utiliser.

&nbsp;

En quoi ca serait pas bien pour les applis/sites web ?

Le but c’est la couleur de la carrosserie ou le contenu ?


votre avatar

Apparemment Material Design Lite utilise flexbox (1)&nbsp;plutôt qu’une grille classique (comme Bootstrap) =&gt; tres tres bonne nouvelle ! C’est ce qui manque a Bootstrap justement.



Ca utilise Sass au lieu de LESS (Bootstrap). AMHA Sass a gagné la guerre des preprocesseurs CSS, d’autant que la prochaine version de Bootstrap sera écrite directement en Sass.



(1)&nbspgithub.com GitHub

votre avatar

ça date pas de maintenant, tout est devenu lisse sur le web plus personne n’a d’audace :(

votre avatar

Justement, MD n’est pas du flat. Et la nouvelle version de MUI ne change rien au fait style de base très dépouillé.

votre avatar







merphémort a écrit :



ce machin tout palot et tout dépouillé c’est pas du flat??! bah c’est quoi alors?… <img data-src=" />





Le material design c’est pas du flat design mais c’est de la branlette arty de designer au même titre que le flat design, tout comme le responsive design et tous les trucs où y a “design” à la fin du nom.


votre avatar

Il a encore du taff pour que je l’adopte perso…

votre avatar

Sinon, y’a materializecss.com qui propose un framework CSS simple et stylé pour rentre vos site “Material Design”

votre avatar







merphémort a écrit :



euh non c’est Edge qui vaincra, évidemment <img data-src=" />



Vu que Linux va monter à 50% de pdm en grand public d’ici 2020, impossible <img data-src=" />





(Ben quoi? <img data-src=" /> )


votre avatar







Tepec a écrit :





&gt;&nbsp;display flex qui est encore aujourd’hui sujette à problèmes dans des navigateurs récents



C’est a mon avis un point positif. Sortir un framework CSS sans utiliser flexbox en 2015 serait une erreur.&nbsp;flexbox permet de resoudre plein de problemes.

Si on ne peut pas utiliser flexbox, il y a plein d’autres frameworks CSS.

De toute facon les effets Material Design sont surement trop lents sous les vieux navigateurs.



Perso j’utilise Bootstrap et j’ai ajouté flexbox plutot que d’utiliser la grille Bootstrap pour que mes champs dans les formulaires s’adaptent bien en responsive design. Sous IE9 c’est moche (pas de support flexbox) mais ca s’affiche. Et sous les navigateurs recents ca rend vraiment bien en terme d’ergonomie.



&gt;&nbsp;technique du clearfix = anti-pattern



Ils utilisent tous ca, non ?

github.com GitHubgithub.com GitHub&gt;&nbsp;rétro-compatibilité pas fameuse du tout (à étayer, mais : peu de préfixes -moz-, peu voir pas de préfixes -ms- ou -o-, usage de display: flex, etc.)



Ils utilisent Sass et un autoprefixer, voir&nbsp;github.com GitHubet&nbsp;github.com GitHubTout comme pour flexbox, je trouve que c’est un bon point de ne pas supporter les navigateurs obsoletes.



&gt;&nbsp;checkboxes, radio buttons qui requièrent du JS pour que leur état :checked soit représenté (LOL)



Etonnant, surtout qu’ils utilisent le checkbox standard (input type=“checkbox”). Sur le meme sujet, Angular Material n’utilise pas le checkbox standard et c’est mal implementé :&nbsp;github.com GitHub&gt;&nbsp;les input en “opacity: 0” (ce qui les empêche de fonctionner sous certains navigateurs comme IE8 si je me souviens bien).&nbsp;



IE8 est sortie en mars 2009 il y a 6 ans et est à 3% de part de marché (1.5% pour la France)…

Devoir supporter IE8 est une horreur et plus personne ne le fait (AngularJS 1, Foundation, le futur Bootstrap 4, jQuery 2…). La tendance est meme de ne plus supporter IE9.



&gt;&nbsp;le JavaScript a son propre paradigme de programmation (je sais jamais comment l’appeler […])



Language a prototype et c’est ce qu’ils utilisent :&nbsp;github.com GitHub Je ne vois rien de choquant dans leur code, c’est meme plutôt conservateur comme approche (du ES5 basique).

J’aurais ete plus loin qu’eux et utilisé ES6 avec Babel et donc le mot clef “class” (comme Java et C#) voir TypeScript que j’adore et que j’utilise tous les jours pour le front et le back (Node.js).

&nbsp;

Edit : la saisie de commentaire sur PCInpact est vraiment une plaie/buggué. Svp, utilisez un composant existant et stable avec support du Markdown.


votre avatar







tanguy_k a écrit :



C’est a mon avis un point positif. Sortir un framework CSS sans utiliser flexbox en 2015 serait une erreur. flexbox permet de resoudre plein de problemes.

Si on ne peut pas utiliser flexbox, il y a plein d’autres frameworks CSS.





Autant je suis d’accord sur le fait qu’il est intéressant de faire quelque chose “de son temps”, autant le display flex est encore trop mal interprété même dans les navigateurs récents, et ici, clairement, je vois pas l’intérêt d’un display flex vu le layout des enfants qu’ils proposent (hormis pour la hype). Pour un ‘framework’ CSS qui utilise bien le display flex avec en plus une meilleure rétro-compat’ : PureCSS.







tanguy_k a écrit :



&gt; technique du clearfix = anti-pattern



Ils utilisent tous ca, non ?





Presque tous (probablement parce que “si Bootstrap le fait, c’est que c’est bien”, mais ça veut pas dire qu’ils ont raison <img data-src=" />

Faut quand même se souvenir que le float, à la base, c’était juste pour pouvoir positionner des images avec du texte. D’où un comportement qui devient vite lourdot et inutile si on veut tout gérer avec.







tanguy_k a écrit :



Tout comme pour flexbox, je trouve que c’est un bon point de ne pas supporter les navigateurs obsoletes.





Autant je suis d’accord sur le fait que la rétro-compatibilité est chiante, autant quand tu fais une application web destinée à un public international et plutôt pro, c’est juste indispensable.







tanguy_k a écrit :



&gt; checkboxes, radio buttons qui requièrent du JS pour que leur état :checked soit représenté (LOL)



Etonnant, surtout qu’ils utilisent le checkbox standard (input type=“checkbox”). Sur le meme sujet, Angular Material n’utilise pas le checkbox standard et c’est mal implementé : github.com GitHub&gt; les input en “opacity: 0” (ce qui les empêche de fonctionner sous certains navigateurs comme IE8 si je me souviens bien). 



IE8 est sortie en mars 2009 il y a 6 ans et est à 3% de part de marché (1.5% pour la France)…

Devoir supporter IE8 est une horreur et plus personne ne le fait (AngularJS 1, Foundation, le futur Bootstrap 4, jQuery 2…). La tendance est meme de ne plus supporter IE9.





les 3% de part de marché diffèrent assez largement selon l’origine des stats, et sur ce comportement particulier, je me souviens bien d’IE8, mais à confirmer si c’est le seul <img data-src=" /> De plus, il me semble qu’en terme de SEO par exemple, ce n’est pas forcément bon d’avoir des input en opacity: 0. Encore une fois, à confirmer.







tanguy_k a écrit :



Language a prototype et c’est ce qu’ils utilisent : github.com GitHub Je ne vois rien de choquant dans leur code, c’est meme plutôt conservateur comme approche (du ES5 basique).

J’aurais ete plus loin qu’eux et utilisé ES6 avec Babel et donc le mot clef “class” (comme Java et C#) voir TypeScript que j’adore et que j’utilise tous les jours pour le front et le back (Node.js).





Là, c’est vraiment le seul point sur lequel je suis pas du tout d’accord, et le fait que tu ne mentionnes ES6 que pour le “twick” de Class (alors qu’ES6 apporte au moins mille milliards ( <img data-src=" /> ) de choses plus utiles qu’une espèce de “surcouche” pour plaire aux programmeurs POO ; bon, en l’état, j’arrive juste à penser aux promises et generators … Faut que je jète un œil encore) ; par exemple, un des premiers trucs qui m’a surpris, c’est qu’ils ont forcé ce qui est de la closure naturelle en scope dans pas mal d’éléments (juste : pourquoi ne pas utiliser le comportement par défaut, hormis pour induire en erreur ?), ou ils jonglent entre coercion explicite et implicite pour des choses qui me paraissent identiques (je rate peut-être une raison à ça, mais pour l’instant je ne vois pas).



Après, je suis d’accord que ça n’est pas pire que 95% des choses qui existent, et certaines choses qui me déçoivent restent totalement subjectives. Seulement, ce n’est pas mieux non plus, et je trouve que certains choix ne sont pas cohérents avec la présentation qu’ils en font.


votre avatar



Les systèmes d’exploitation et les applications, ce n’était pas assez



&nbsp;C’etait l’idée base hein… Depuis son annonce à la IO 2014.&nbsp;

&nbsp;Le probleme c’est que jusqu’à present Google proposait MD pour le web qu’à travers Polymer et Angular, qui sont tous les deux assez connus pour leur lourdeur.

votre avatar

Le MD est horriblement moche. Je sais, les goûts et les couleurs tout ça… mais là ça pique.&nbsp;

votre avatar







MoonRa a écrit :



Le MD est horriblement moche. Je sais, les goûts et les couleurs tout ça… mais là ça pique.







Le style (couleurs) choisi pour le site de MDL est pas très folichon on est d’accord, mais suffit de le customiser et on peut arriver à des trucs très sympa


votre avatar







MoonRa a écrit :



Le MD est horriblement moche. Je sais, les goûts et les couleurs tout ça… mais là ça pique.&nbsp;





Et puis sur mobile certains components sortent de l’écran…


votre avatar

Et pour l’accessibilité… ça sera une autre fois (aucun aria-*)

votre avatar

Comment tu dis déjà, axélibilité ?

C’est quoi çe truc <img data-src=" />

votre avatar

Brace yourself



Material Design web sites clones is coming <img data-src=" />

votre avatar







Folgore a écrit :



Brace yourself



Material Design web sites clones is coming <img data-src=" />





Il y a quelques années, c’était le design Aqua d’Apple qui était repris partout. Maintenant, il semble qu’on se dirige vers MD.

&nbsp;

&nbsp;Rien qu’un phénomène de mode de plus.


votre avatar







t-la a écrit :



Il y a quelques années, c’était le design Aqua d’Apple qui était repris partout. Maintenant, il semble qu’on se dirige vers MD.

 

 Rien qu’un phénomène de mode de plus.







Ca a pas l’air pire que les clones bootstrap :/


votre avatar

NXI: v7 is coming.

votre avatar

Je vais m’y mettre, j’adore ce style d’interface! Merci NXI

votre avatar

C’est ici :&nbsphttp://www.getmdl.io/ ;)

votre avatar

D’un autre coté, je viens de lire le document sur les “règles” du material design, c’est une mine d’or pour une personne qui n’a jamais fait de design. Le document est très complet, de l’aspect graphique jusqu’à la façon d’écrire, de choisir ses mots (j’ai bien aimé la partie ou il est dit de ne pas utiliser “nous” sauf si c’est vraiment un humain qui est derrière)… J’ai envie de dire que c’est presque un exemple qui pourrait servir pour savoir faire un environnement cohérent.

votre avatar



Il regroupe tout un ensemble de règles et permet de moderniser les interfaces, en faisant notamment place au contenu.





Et c’est pour ça que les deux images dans l’actu ont des espaces vides qui bouffent une place énorme.

Logique.









Yzokrad a écrit :



Bienvenue dans un monde où tous les sites web auront le même design.

Plus aucune personnalité, plus aucune identité différente, plus aucune différence.







Ca fait un bail que la tendance est comme ça avec tous les CMS et autres moyens préfabriqués (forums phpBB, etc) qui fonctionnent sur le principe d’un template que tu peux personnaliser vaguement.


votre avatar







Yzokrad a écrit :



Bienvenue dans un monde où tous les sites web auront le même design. 



 Plus aucune personnalité, plus aucune identité différente, plus aucune différence.       


 Le nazisme appliqué au Web.&nbsp;






Et c’est quoi le problème ? les applis desktop se ressemblent bien toutes et fonctionnent toutes de la meme facon (du moins sous OS X) =&gt; plus de coherence =&gt; plus simple a utiliser.&nbsp;



&nbsp;En quoi ca serait pas bien pour les applis/sites web ?

&nbsp;Le but c’est la couleur de la carrosserie ou le contenu ?


votre avatar







zogG a écrit :



Les kits et autres framework graphiques existent depuis que la nuit des temps…









3rr0r404 a écrit :



Un point Godwin atteint sur un sujet traitant d’un n-ième framework HTML/CSS/JS il fallait le faire ^^



Ne lui répondez pas, c’est un troll permanent…


votre avatar







Patch a écrit :



Ne lui répondez pas, c’est un troll permanent…







La forme est débile, mais le fond est vrai : le Web, et l’informatique en générale, s’uniformisent de plus en plus, et pas forcément dans le bon sens.

Résultat on a de plus en plus de sites où il faut cliquer sur 12 menus planqués dans un coin de l’écran qui affichent des “fenêtres” de 300x120px dans lesquelles faut encore cliquer des trucs pour accéder à une fonction… Alors qu’on a des écrans de 24” sur desktop de nos jours.

Ou encore le menu à la con de Firefox dans lequel je ne retrouve jamais rien.



La convergence mobile/desktop, c’est pas forcément bon à toutes les sauces. Comme tout quoi.


votre avatar

Je viens de jeter un œil au CSS, les choix sur le structurel, leur implémentation etc., et : bah PureCSS est toujours beaucoup plus efficace et efficient à tout point de vue (perf, rétro-compatibilité, respect des standards) tout en restant moins contraignant.

Je suis vraiment super déçu ; il me reste encore à voir du côté du JS (que pureCSS ne propose pas), mais je suis vraiment pas fan de ce que je vois pour le moment.

<img data-src=" />

votre avatar







SebGF a écrit :



Ou encore le menu à la con de Firefox dans lequel je ne retrouve jamais rien.



le “menu à la con” comme tu dis si bien, pour moi c’est celui d’IE : sur Fx, je sais toujours où je dois aller. Sur IE, à part 2 ou 3 trucs que j’utilise en permanence, au taf, je cherche à chaque fois…


votre avatar







Akoirioriko a écrit :



Le material design c’est pas du flat design mais c’est de la branlette arty de designer au même titre que le flat design, tout comme le responsive design et tous les trucs où y a “design” à la fin du nom.





&nbsp;

Heu, dans le cas du responsive design, le “design” c’est quand même une tout autre &nbsp;notion…


votre avatar







Patch a écrit :



le “menu à la con” comme tu dis si bien, pour moi c’est celui d’IE : sur Fx, je sais toujours où je dois aller. Sur IE, à part 2 ou 3 trucs que j’utilise en permanence, au taf, je cherche à chaque fois…







Et là tu comprends pourquoi je n’aime pas utiliser ces deux daubes <img data-src=" />


votre avatar







SebGF a écrit :



Et là tu comprends pourquoi je n’aime pas utiliser ces deux daubes <img data-src=" />



tu préfères quelle autre daube du coup : Chrome ou Opera? <img data-src=" />


votre avatar







Patch a écrit :



tu préfères quelle autre daube du coup : Chrome ou Opera? <img data-src=" />







Pour l’instant Vivaldi répond au mieux a mes attentes en remplaçant de feu Opéra.

Le seul truc qui me désole est qu’il est basé sur Chromium…. Mais a-t-on le choix de nos jours ? Le web interdit tout ce qui n’est pas Webkit désormais…. <img data-src=" />

(et bientôt le GoogleWeb avec leur putain de Blink…)


votre avatar







Tepec a écrit :



Je viens de jeter un œil au CSS, les choix sur le structurel, leur implémentation etc., et : bah PureCSS est toujours beaucoup plus efficace et efficient à tout point de vue



&nbsp;

&nbsp;Tu peux donner plus de details, ca m’interesse.


votre avatar







SebGF a écrit :



Pour l’instant Vivaldi répond au mieux a mes attentes en remplaçant de feu Opéra.

Le seul truc qui me désole est qu’il est basé sur Chromium…. Mais a-t-on le choix de nos jours ? Le web interdit tout ce qui n’est pas Webkit désormais…. <img data-src=" />

(et bientôt le GoogleWeb avec leur putain de Blink…)



Le panda vaincra <img data-src=" />


votre avatar

Ahah avec plaisir ; prends quand même un certain nombre de choses avec des pincettes (généralement, je précise quand ce sont des ‘à priori’ à creuser), ce n’est qu’une première lecture du contenu. Globalement, et uniquement pour le CSS, ce qui m’a pas plu réside dans :





  • usage de la propriété display flex qui est encore aujourd’hui sujette à problèmes dans des navigateurs récents :http://caniuse.com/#search=flex

  • technique du clearfix = anti-pattern

  • implémentation parfois inutilement rigoureuse du Material Design : font-size et line-height en px spécifié pour tous les “h” =&gt; obligation soit de “nettoyer” mais en risquant d’avoir des soucis de régression de style, soit de surcharger pour revenir à des styles plus basiques mais ça paraît inutile.

  • noms de classes très verbeux, duplication de surcharges inutiles

  • rétro-compatibilité pas fameuse du tout (à étayer, mais : peu de préfixes -moz-, peu voir pas de préfixes -ms- ou -o-, usage de display: flex, etc.)

  • usage curieux de float (à creuser, mais le float, c’est assez souvent le mal <img data-src=" /> )

  • checkboxes, radio buttons qui requièrent du JS pour que leur état :checked soit représenté (LOL) ; je parle même pas de l’effet joli, juste de la représentation visuelle du checked ou non.

  • les input en “opacity: 0” (ce qui les empêche de fonctionner sous certains navigateurs comme IE8 si je me souviens bien).









    Pour les deux derniers points, je suis vraiment super étonné : pourquoi avoir mis du JS là où du CSS suffit largement, puisque leur JS ne fait rien de plus que styliser le label (pourquoi ne pas faire un “input[type=“checkbox”]:checked + label” par exemple ?)

    Alors je comprends que Twitter Bootstrap soit vraiment la grosse Bertha car son optique est d’être super facile à l’utilisation. Mais là, je comprends ni la prétention (ce n’est pas optimisé du tout comparé à du pureCSS, ce n’est pas rétro-compatible non plus d’ailleurs), ni l’intérêt (c’est très verbeux avec des classes pour tout, partout, et des noms à rallonge, le tout étant globalement restrictif).

votre avatar

(désolé du double-post, mais je ne peux plus éditer le précédent <img data-src=" /> )

Juste pour préciser : le JS a l’air très lisible pour les habitués à la POO, donc c’est un bon point … MAIS ça oblige à appliquer une forme de surcouche pas forcément optimale ; si le but est d’être optimisé, ça me paraît un peu raté : le JavaScript a son propre paradigme de programmation (je sais jamais comment l’appeler, mais j’aimais bien “objet lié à d’autres objets”), certes particulier et vite bordélique si on est pas rigoureux, mais tout aussi puissant que l’OO, donc autant en profiter.



P.S. : pour préciser sur le “input[type=“checkbox”]:checked + label”, ça implique effectivement que l’input soit placé avant le label, ce qui, en terme de lisibilité, peut être considéré comme un petit peu moins clair qu’un input dans un label, m’enfin ça serait chipoter je trouve :P

Google propose un kit de ressources Material Design Lite pour les sites web

Fermer