Share
Dans ce tutoriel, nous poursuivrons notre discussion sur les requêtes d’éléments, en nous concentrant sur la construction d’un composant responsive réutilisable..
Pour récapituler, les requêtes d'éléments nous permettent de mouler un élément en fonction des caractéristiques de son conteneur; la largeur, la hauteur et ainsi de suite. Mais il convient de souligner que les requêtes sur les éléments sont loin de devenir une norme CSS, et nous devrons probablement attendre quelques années avant que cela se produise..
Donc, pour le moment, nous devrons avoir recours à une bibliothèque JavaScript pour émuler des fonctionnalités similaires, telles que EQCSS..
EQCSS est une bibliothèque JavaScript développée par Tommy Hodgins. Regardons quelques raisons d'opter pour cette bibliothèque.
Pour commencer, EQCSS nous donne une syntaxe similaire à CSS3 Media Queries standard avec le @élément déclaration. Cela fonctionne dans une feuille de style ou intégré dans un style élément, donc se sentir très intuitif. Dans le code suivant, par exemple, nous empilons les menus dans la navigation pour faire face à la réduction de l'espace de navigation (pas celle de la fenêtre d'affichage).
.navigation .menu display: inline-block; @element ".navigation" et (max-width: 480px) .navigation .menu display: block;
EQCSS offre plus que des requêtes basées sur la largeur ou la hauteur. Il fournit également des requêtes basées sur le nombre, qui nous permettent d'appliquer des règles de style basées sur le contenu. le nombre de caractères, lignes et éléments contenus.
.tweetContent // textarea background-color: #eaeaea; @element ".tweetContent" et (min-caractères: 100) .tweetContent background-color: # ffc04d; // orange @element ".tweetContent" et (min-caractères: 140) .tweetContent background-color: # FF3333; // couleur rouge: #fff;
Il supporte différentes unités CSS, y compris les ajouts récents tels que vw, vh, vmin, et vmax.
Et pour ceux qui ont encore besoin de support pour IE8, EQCSS fournit une polyfill.
EQCSS est disponible via Bower, NPM, CDNJS et directement à partir du référentiel de Github. Choisissez le point de vente qui convient à votre déploiement de projet et assurez-vous de le charger dans votre page..
Maintenant, construisons quelque chose!
Nous allons construire un composant d'interface utilisateur de profil utilisateur, et nous commençons avec le balisage HTML.
Louie R.
Terre du Milieu
Un développeur et lecteur fréquent StackOverflow. Né, a grandi et vit sur le Web. Je parle trois langues: HTML, CSS et JavaScript.
Notre composant est composé d'une image d'avatar, du nom d'utilisateur, de l'endroit où ils vivent, d'une courte biographie et d'un bouton «Suivre». à la Twitter et moyen.
Tout d'abord, nous définissons la largeur du conteneur de composant d'interface utilisateur et le mode d'affichage sur fléchir. La syntaxe flexbox dans l'extrait de code suivant est non préfixée pour des raisons de clarté. Elle ne fonctionnera donc que dans les navigateurs les plus récents. Si nécessaire, vous pouvez toujours utiliser Autoprefixer pour générer une syntaxe plus ancienne ainsi que les préfixes du fournisseur pour prendre en charge les navigateurs hérités..
.profil utilisateur largeur: 100%; largeur maximale: 640px; affichage: flex;
Ensuite, nous définissons la proportion de largeur entre l'image de l'avatar et le résumé du profil contenant le nom, l'emplacement et la biographie courte..
.profil_utilisateur__avatar largeur: 25%; largeur maximale: 120px; flex: 1 1 120px; .user-profile__summary width: 75%; padding-left: 25px; taille de police: 1em;
Nous ajustons également légèrement la taille de la police du nom d'utilisateur et l'emplacement.
.user-profile__name font-family: 'Montserrat', sans-serif; taille de police: 1.3125em; .user-profile__location font-size: 0.87em;
Ce sont les règles de style principales permettant de montrer le fonctionnement des requêtes d'éléments. Les règles stylistiques telles que la couleur de fond, texte Couleur, et boîte ombre sont entièrement à votre goût. Dans mon cas, il apparaît comme suit.
L'utilisation de requêtes d'élément avec EQCSS est assez intuitive. Comme mentionné précédemment, la syntaxe ressemble beaucoup aux requêtes sur les médias CSS. Tout d’abord, comme nous l’avons montré précédemment, nous désignons une requête d’élément avec @élément suivi de un ou plusieurs sélecteurs d'éléments et la condition de requête telle que la largeur, la hauteur, la position de défilement, etc. de l'élément.
@element 'header, nav, footer' et (min-width: 100px) et (min-height: min-height: 300px) // Règles de style
Nous pouvons maintenant le déployer dans notre composant d'interface utilisateur, par exemple, pour redimensionner la largeur de l'élément dans le conteneur et ajuster la taille de la police lorsque la largeur du conteneur est réduite..
@element '.user-profile' et (max-width: 540px) .user-profile font-size: 0.75em; .user-profile__avatar max-width: 80px;
De plus, nous souhaitons que le composant d'interface utilisateur soit réutilisable et, surtout, présentable dans toute partie du site Web, quelle que soit la largeur disponible. La barre latérale, par exemple, où sa largeur est généralement inférieure à 400px. Dans ce cas, puisque la largeur est beaucoup plus étroite, nous devons réaligner l'ensemble de la mise en page du composant.
@element '.user-profile' et (max-width: 380px) .user-profile padding-top: 30px; rembourrage en bas: 30px; bloc de visualisation; text-align: center; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; marge inférieure: 20 px; marge gauche: auto; .user-profile__summary padding-left: 0;
Dans ce tutoriel, nous avons construit un composant d'interface utilisateur pour afficher un profil utilisateur. Il est réactif et change en fonction de son conteneur plutôt que de la fenêtre d'affichage. Vous pouvez consulter la page de démonstration et constater que la mise en page est modifiée quelle que soit la taille de la fenêtre. Soigné!
Ceci n'est qu'un exemple. Il y a une poignée d'autres exemples que d'autres ont signalés où les requêtes d'éléments ont un sens..
Rappelles toi; la syntaxe de ce didacticiel est entièrement basée sur EQCSS - que le groupe de travail du W3C l'adopte ou crée le leur est encore indécis. Néanmoins, je suis impatient que cette idée soit adoptée et révolutionne à nouveau la façon dont nous construisons des sites Web..
Accentsconagua
