BT

Accueil InfoQ Actualités Google apporte la Conception Contexturelle à CSS, HTML et JavaScript

Google apporte la Conception Contexturelle à CSS, HTML et JavaScript

Leia em português

Favoris

La Conception Contexturelle Légère (Material Design Lite - MDL) de Google a pour objectif d'activer le look and feel conception contexturelle pour les sites web. La conception contexturelle est un langage visuel qui est standard sur Android et que Google propose de manière transversale aux plateformes.

D'après Google, MDL remplit trois exigences qui permettent de la qualifier de "légère" :

  • Elle a peu de dépendances, ce qui la rend simple à installer et d'utilisation.
  • Elle est agnostique par rapport aux frameworks, permettant aux développeurs de l'intégrer dans n'importe quelle chaîne d'outillage côté client disponible.
  • Elle est relativement petite en termes de taille de code.
  • Elle a un périmètre étroit, l'implémentation des orientations de la conception contexturelle, et n'est pas un framework complet.

Voilà comment déclarer un bouton basic relevé avec une ondulation :

 

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button

 

MDL n'est pas la première implémentation HTML/CSS/JS de conception contexturelle, et des alternatives comme Materialize et Material Bootstrap sont également disponibles. L'avantage principal de MDL par rapport à ces efforts communautaires selon Google, est qu'elle a été développée "en étroite collaboration avec les équipes de Conception Contexturelle et Chrome UX, et qu'elle est l'objet de revues régulières de conformité de spéc".

Avant MDL, Polymer était l'implémentation canonique de la conception contexturelle pour CSS/JS. Comparé à MDL, Polymer dispose d'un plus large périmère qui va au-delà du domaine visuel en incluant des composants de communication de données, de même que des composants qui ne relèvent pas de la conception contexturelle.

Pour le moment, MDL n'est ni optimisé, ni ne supporte l'utiisation de composants individuels, p.e. un bouton. Toutefois, pour les développeurs qui souhaitent uniquement utiliser un nombre réduit de composants MDL, il est possible d'adapter une distribution personnalisée en commentant les composants non désirés de material-design-lite.css et les scripts non souhaités du Gulpfile, puis d'exécuter gulp.

MDL suit la convention BEM pour assurer la consistance, l'isolation et l'expressivité des noms des classes. Google détaille également quelles orientations ils ont suivi dans la mise en application de BEM pour MDL. Côté négatif, BEM peut conduire à une explosion des noms de classe et d'après le retour initial, MDL semble être sujette à celà en nécessitant 17 différents noms de classe pour une simple carte, un concept basic en conception contexturelle.

Google affirme que MDL fonctionne dans tous les navigateurs modernes (Chrome, Firefox, Opera, Microsoft Edge et Safari), en même temps qu'il se dégrade élégamment sur les navigateurs comme IE9, et suggère de référencer leur CDN afin d'intégrer MDL dans un site web, mais il est également possible de le télécharger ou de l'importer via npm ou Bower.

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Votre profil est-il à jour? Merci de prendre un instant pour vérifier.

Note: en cas de modification de votre adresse email, une validation sera envoyée.

Nom de votre entreprise:
Rôle dans votre entreprise:
Taille de votre entreprise:
Pays/Zone:
État/Province/Région:
Vous allez recevoir un email pour confirmer la nouvelle adresse email. Ce pop-up va se fermer de lui-même dans quelques instants.