Les perspectives des CSS regions et du binding de données

Les alignements de zones de la page à l'aide de propriétés de flottement ne sont pas évidentes ; le calcul des largeurs de boîtes et de gouttières demandent de dénouer un grand nombre de nœuds dans son cerveau. Heureusement, de nouvelles propriétés CSS3 pour la création de grilles sur une page web arrivent, elles coïncident avec la réalisation de plus en plus importante de webapp.

Les CSS regions

Les CSS regions sont des propriétés CSS3 permettant de définir une grille dans sa page, contenant : X lignes et X colonnes ; et de placer une zone dans cette grille en lui permettant de s'étendre sur un certain nombre de lignes et de colonnes (équivalent à de la fusion de cellules).

La logique ne s'éloigne pas énormément de la manière dont fonctionnaient les tableaux dans les années 2000, mais en mieux.

Pour la définition des dimensions de chaque lignes et colonnes, on indique dans le fichier CSS général des valeurs absolues (200px) ou relatives en terme de fraction (2fr). Il devient facile de créer un affichage pleine page avec redimensionnement automatique de la zone principale (en fonction de la dimension de l'affichage) tout en respectant une valeur fixe (ou minimale) pour une zone de navigation ou de contrôle.

Lire Introduction into CSS3 Grid Layout. Working with grids.

Les enjeux des CSS regions

Il semble qu'en dehors du confort que peut apporter cette nouvelle propriété ; on rentre dans un changement de concevoir le flux d'information et de contenu sur une page.

Les exemples présentés utilisant cette propriété s'approchent, en effet, beaucoup des jeux vidéos et représentent, très souvent, des applications pour téléphones ou tablettes.

Les CSS regions vont être un élément constitutif du développement simplifié d'applications web qui pourront être publiées sur les "places de marché".

Tristan Nitot faisait remarquer que désormais, nous vendons plus de smartphones que d'ordinateurs de bureaux. Sachant que certains pays vont naviguer quasi exclusivement sur ces petits appareils ; le développement d'applications web (webapp) devient un enjeu majeur. D'où le projet de Mozilla Boot To Gecko.

Avec les CSS regions, nous allons définir des types de zone de contenu, découper nos pages web en plaçant ces zones sur la page, puis insérer des types de contenu à l'intérieur.

Voir Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2).

Le principe du binding de données

Le Data binding permet de lier des objets entre eux pour les faire communiquer, il permet de donner un nom à une zone et de le lier avec une fonction de génération de contenu et, en fonction du contexte, de modifier ce contenu dans la zone concernée.

Par exemple, vous définissez un système de gestion de données et événementiel grâce à une librairie JavaScript, puis vous l'insérer dans une zone HTML.

Pour vous informer sur ce fonctionnement et allez au delà de ma définition bancale, je vous conseille de vous penchez sur des librairies comme Knockout JS ou Angular JS.

Angular, soutenu par Google, fait beaucoup parlé de lui en ce moment, mais Knockout se débrouille pas mal. Petit plus, le tutorial en ligne de Knockout qui permet de comprendre le fonctionnement du système et de progresser pas à pas.

Conclusion

Le web change encore une fois, le web évolue pour prendre une dimension de plus en plus importante, mais ce n'est pas pour autant que le web se complexifie.

Je reste convaincu que le plus dur se situe dans la phase de conception et de collaboration ; pour autant, il faudra, chers intégrateurs se pencher sur les régions CSS et sur ces librairies de binding de données.

La courbe d'apprentissage peut être assez rapide, pour un avantage sur le long terme non négligeable.

Lire Working with CSS Regions and Shadow DOM.