https://github.com/scottjehl/Respond
Related: MEDIA QUERIES • POLYFILLSResponsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique
Apprendre et comprendre jQuery – 1/3 Tutoriels jQuery Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages. NB : ce billet sera divisé en trois parties. Publié il y a déjà trop longtemps… Introduction HTML5 : Comprendre les Polyfills, Shivs et Shims Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey. Par Dudley Storey Lorsqu’on se lance dans le développement web, on est souvent étonné de voir que les navigateurs les plus à jour — dont Chrome — n’offrent pas la compatibilité la plus complète pour toutes les fonctionnalités HTML, CSS ou JavaScript. À la place, on observe un véritable patchwork de compatibilités, réparti sur tout le front du développement web : Firefox supporte une fonctionnalité, Chrome une autre, et Safari n’est pas compatible avec telle fonctionnalité supportée par Chrome.
Reponsive design : les Media Queries Avant, créer un webdesign, c’était simplement créer l’interface pour les écrans d’ordinateurs. Il y avait plusieurs contraintes, notamment la gestion des différents navigateurs, mais on devait aussi faire avec les différentes résolutions existantes. Aujourd’hui, c’est toujours le cas, mais le problème des résolutions est devenu encore plus important avec l’avènement de la navigation mobile. C’est pourquoi on parle maintenant de responsive design, un terme qui regroupe diverses choses et qui signifie en gros qu’un design peut s’adapter aux différentes tailles d’écran. Et si avant on pouvait facilement s’en sortir avec de simples pourcentages, la petite taille des écrans des terminaux mobiles a cassé cette facilité. Aujourd’hui encore, énormément de sites ne sont pas adaptés à la navigation mobile : il faut non seulement monter et descendre le long de la page (ça c’est normal), mais il faut également aller de gauche à droite si on veut avoir accès à tout.
Empêcher les flottants de dépasser de leur conteneur Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. JavaScript II-A. Instructions - Conditions - Boucles▲ Il est fortement recommandé de terminer l'ensemble des instructions JavaScript par un point virgule (même si, en effet, ce n'est pas toujours nécessaire). Les instructions ci-dessous ne se terminent pas par un point virgule : Taille des écrans, responsive design, et point de rupture Très régulièrement, on me pose des questions sur les tailles des écrans pour faire un design « responsive ». Pour ceux qui connaisse le terme, mais qui ne savent pas vraiment ce que cela veut dire, sachez qu’on appelle « design responsive » (ou responsive design ) la capacité d’un site web à s’adapter au terminal de lecture. Mais pourquoi faire ? Eh bien avec le nombre d’appareils différents capables d’afficher une page web, il a fallut réfléchir à un moyen pour afficher proprement un site (et de façon légèrement différentes) quelque soit le support: écran d’ordinateur, tablette, smartphone, ou télévision.
Les multicolonnes en CSS3 Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie. Encore peu usité, ce module est pourtant loin d'être en brouillon car il s'agit d'une spécification élevée au rang de Candidate Recommendation, donc stable, au sein du W3C depuis avril 2011. Compatibilité de multicolumn Le positionnement multicolonnes est - contre toute attente - plutôt bien supporté par le collège des navigateurs. Les anciennes versions d'Internet Explorer faisant bien entendu exception à la règle.