Comment utiliser HTML5 Élément pour obtenir une image réactive

Responsive Design est peut-être là pour rester mais il y a beaucoup de problèmes qui doivent être résolus quand il s'agit de rendre les images sensibles . Bien que les images responsives se redimensionnent automatiquement en fonction de la taille de la fenêtre (ce qui est techniquement facile), un des problèmes rencontrés par les utilisateurs est que le point vocal de l'image devient à peine visible lorsque l'image devient trop petite .

Le consensus idéal parmi les développeurs Web est que la dimension réelle devrait également être réactive . Le navigateur doit pouvoir charger des images plus petites ou plus grandes en fonction de la taille de la fenêtre. De cette façon, nous pouvons diriger et fournir la meilleure proportion d'image plutôt que l'image rétrécie (comme indiqué).

C'est là que l'élément d' picture HTML5 entre en jeu. L' picture nous permet de fournir plusieurs sources d'images et de contrôler la diffusion via les requêtes média. Bien qu'il n'y ait pas encore de navigateur implémentant cet élément, nous pouvons utiliser un polyfill appelé Picturefill pour cela. Voyons voir comment c'est fait, allons-nous?

Commencer

Picturefill est une bibliothèque JavaScript développée par Filament Group. Cela nous permet d'utiliser l'élément d' picture maintenant. Pour commencer, téléchargez le script dans le référentiel Github et placez le picturefill.js ou picturefill.min.js . Picurefill est une bibliothèque JavaScript autonome qui ne nécessite aucune autre bibliothèque pour fonctionner. Vous pouvez simplement l'ajouter dans l'étiquette de head .

L'image

J'ai préparé une image dans trois dimensions différentes, comme suit. L'image a été recadrée pour conserver le focus sur la personne dans l'image. Le plan ici est que nous allons montrer la plus petite taille dans les petits écrans et la plus grande image dans les grands écrans.

Utilisation de l'élément d'image

Picturefill peut fonctionner de deux façons: nous pouvons intégrer srcset dans la balise img ou utiliser l'élément d' picture . Ici, nous allons opter pour l'élément d' picture car il est plus facile à gérer, plus facile à comprendre et plus lisible.

Similaire aux éléments video et audio, l' picture enveloppe des éléments source multiples pointant vers la source de l'image, comme suit.

L'élément source, comme vous pouvez le voir dans l'extrait de code ci-dessus, est défini avec media attribut media . Dans cet attribut, nous spécifions le point d'arrêt de la fenêtre sur laquelle l'image doit être présentée. Vous pouvez voir l'effet immédiatement.

Consultez la page de démonstration, et redimensionnez la taille de la fenêtre, vous devriez trouver l'image affichée dans la largeur de la fenêtre spécifiée.

Picturefill pour WordPress

Si vous utilisez WordPress, vous pouvez utiliser un plugin appelé Picturefill.WP qui vous permet d'implémenter l'élément d'image dans WordPress, sans les tracas. Il suffit de télécharger et d'intégrer votre image comme d'habitude, et ce plugin s'occupera du reste.

Pensée finale

L'élément d' picture est un excellent ajout en HTML5. Nous avons plus de contrôle sur la taille de l'image et la dimension que le navigateur devrait présenter. Et avec picturefill, nous pouvons utiliser ce nouvel élément même si aucun navigateur ne l'a encore implémenté. Picturefill fonctionne dans un large éventail de navigateurs, y compris dans IE (mais avec quelques mises en garde).

Enfin, voir la démo et télécharger le code source ci-dessous.

• Démo
• Source de téléchargement

CSS Picnic: bibliothèque CSS légère pour démarrer vos projets Web

Certains développeurs préfèrent des bibliothèques d'interface utilisateur détaillées, telles que Bootstrap, pour ses styles riches en fonctionnalités. Mais, il y a beaucoup de petites bibliothèques de CSS faites pour l' esthétique et la personnalisation subtiles de conception .Si vous cherchez une petite bibliothèque CSS élégante, je recommande Picnic CSS . C'est

(Conseils techniques et de conception)

Comment activer / désactiver le message du centre d'action Windows sur votre PC [Quicktip]

À quelle fréquence voyez-vous cette image lorsque vous êtes sur Windows? C'est embêtant, n'est-ce pas? Chaque fois que vous redémarrez votre PC, ce rappel vient vous harceler.Ces messages proviennent du Centre d'action . Le Centre d'action vous aide à analyser votre PC pour des problèmes de sécurité et de maintenance, et il vous alertera si nécessaire. Si Windo

(Conseils techniques et de conception)