Concepts généraux sur le développement de sites responsives

...

Les classes CSS conditionnelles 

Comme vu expliqué précédemment, il est malheureusement impossible avec des médias media-queries de cibler la largeur de la portlet. Nous d'une portlet => nous sommes obligés de nous baser sur la largeur de la fenêtre (pour mieux comprendre cette problématique, un article explique bien les problèmes d'implémentation de cette fonctionnalité nommée Element Query).

Il faudra donc s'abstraire des media-queries et passer par une technique alternative. La technique est Nous proposons donc de détecter en JavaScript le redimensionnement de la fenêtre et d'appliquer une classe CSS à un élément HTML en fonction de sa taille (calculée à la volée). 

<div class="container">	
	<!-- prendra la classe "small" si la taille de ce bloc est inférieur à 600px -->
	<!-- prendra la classe "medium" si la taille de ce bloc est supérieur à 600px et inférieur à 1100px -->
	<!-- prendra la classe "large" si la taille de ce bloc est supérieur à 1100px -->
</div> 

Avec un une CSS classique tirant partie parti des médias media-queries nous aurions écrit ceci : 

@media screen @media screen and (max-width: 600px) {
  /* règles pour les écrans "small" */
}
 
@media screen and (min-width: 601px) and (max-width: 1100px) {
  /* règles pour les écrans "medium" */
}
 
[...] 

Nous ne pourrons plus tirer partie des Dans la mesure où nous ne pouvons pas nous appuyer sur les media-queries donc , il nous allons faut écrire quelque chose comme cela : 

.container.small .mon-selecteur-css {
   /* mes propriétés ... */
}
 
.container.medium .mon-selecteur-css {
 	/* ... */
}
 
.container.large .mon-selecteur-css {
   /* ... */
}

...

Pour mettre en oeuvre ce qui est présenté dans la partie précédente, nous n'avons d'autres choix que de nous reposer sur JavaScript. Il existe actuellement deux solutions : 

...

C'est une toute petite librairie JavaScript qui permettra d'écrire les "simili - media-queries" dans le code HTML afin d'appliquer une classe CSS si les conditions sont validées. Voir les sources sur Github

<div data-squery="min-width:1100px=large max-width:600px=small">
    <!-- ... -->
</div>

Cela tire partie des Cette solution s'appuie sur les attributs data-* (compatible compatibles à partir de IE8+) , : ces attributs attributs data-* ne sont pas prévus pour cela à la base, mais il aucune solution CSS n'existe aucune solution en CSS actuellement pour le réaliser. L'avantage de cette librairie est qu'elle est relativement légère et qu'elle permet de mettre en place rapidement des points de bascules personnalisés.

Solution

...

"homemade"

Il est également possible de reprendre le snippet JavaScript proposé pour la version Bootstrap et en faire une version adaptée , en l'adaptant à vos besoins :

(function($) {
	var $portletContainers;
	$(document).ready(function() {
    	// all portlets must have the CSS class .container
    	$portletContainers = $(".container");
    	// Resize event isn't fired on DOM Content Loaded, we launch the function manually
   		onWindowResize();
  		$(window).resize(onWindowResize);
	});
	function onWindowResize() {
    	$portletContainers.each(function(index) {
	        var $that = $(this);
	        var portletWidth = $that.width()
	        $that.removeClass("small medium large");
	        if(portletWidth < 600)
	            $that.addClass("small");
	        if(portletWidth >= 600 && portletWidth < 1100)
	            $that.addClass("medium");
	        if(portletWidth >= 1100)
	            $that.addClass("large");
    	});
	}
})(jQuery);

...

Une grille fonctionne toujours de la même manière, c'est tout d'abord un nombre de colonne colonnes défini avec un espacement entre chaque (que l'on appellera "gouttière") qui va former une ligne. Le système de grille le plus répandu se base sur 12 colonnes mais il est autant possible d'en avoir 16 ou 8.

Dans le cadre d'un développement de ce site il Il est hautement recommandé de se baser sur une grille existante. Il est possible de se baser sur , comme celle de Bootstrap ou même Foundation, ces de Foundation par exemple. Ces deux frameworks offrent la possibilité de choisir quelles partie module de la librairie télécharger. Il devient alors possible de n'avoir que les grillescustomizer ces librairies en sélectionnant les parties/modules du framework que l'on souhaite utiliser => Il est alors possible de ne "charger" que le système de grille...

Intégration de portlet au sein d'une iframe

Comme évoqué précédemment, le concept d'Element Query (appliqué appliquer des CSS conditionnelle conditionnelles par rapport à un élément de la page et non par rapport à la fenêtre globale) n'existe pas en CSS. Cependant l'élément HTML iframe applique les media-queries de la page incluse par rapport à la taille de l'iframe. 

Cela permet donc d'utiliser les frameworks CSS sans les modifications présentés présentées dans la partie précédente. Cependant Toutefois, les iframes apportent plusieurs problématiques . Leur : leur largeur et leur hauteur sont fixes par exemple. 

Pascal Rigaux de l'université Paris 1 a développé Pour contourner le problème de hauteur fixe, il existe une solution reposant sur "postMessage" en HTML5 afin de communiquer entre la page HTML et la page incluse dans l'iframe. Le fonctionnement basique de cette solution est que simple :

• la page incluse va transmettre à la page parente la hauteur de son contenu...
• ... ce qui va permettre de positionner la bonne valeur à l'attribut height de l'élément iframe.

Il est possible de retrouver le diaporama de présentation du une présentation de ce travail réalisé par Pascal R. sur Github. Une documentation est aussi disponible sur Esup-Portail.

DA noter que d''après le site CanIUse, la fonction postMessage est compatible avec Internet Explorer 8 et supérieure. Cette fonctionnalité est donc prise en charge par plus de 90% des navigateurs du marché. 

...