hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

Développeurs: Larder est l'outil de bookmarking que vous aimerez

Développeurs: Larder est l'outil de bookmarking que vous aimerez

GitHub est une ressource puissante pour les développeurs de se connecter et de partager le travail. Mais ce n'est pas le meilleur outil d'organisation pour sauvegarder et trier les bibliothèques .Avec Larder, vous pouvez mettre en signet toutes vos bibliothèques, cadres, plugins et outils préférés en un seul endroit. Vous

(Conseils techniques et de conception)

20 conceptions de carte de visite minimalistes et professionnelles

20 conceptions de carte de visite minimalistes et professionnelles

Même de nos jours, les cartes de visite sont importantes . Ils peuvent servir à plusieurs fins: rappels, un moyen de laisser des notes, des vitrines de portefeuille, un moyen d'offrir des rabais - les possibilités sont infinies. Suivant les traces de l'excellent article de Nancy Young sur les cartes de visite, j'ai pensé vous montrer les résultats de ma recherche en préparant ma propre carte de visite.Ici,

(Conseils techniques et de conception)