5 Fonctionnalités chaudes de CSS et comment les utiliser

Sep 15, 2025
Comment
[dix] [dix] [dix]
[dix]
[dix]

Dans cet article, nous explorerons cinq nouvelles propriétés qui arrivent à CSS, jettent un coup d'œil à ce qu'ils font et comment les mettre à une utilisation pratique dans vos projets. Nous allons créer un mise en page Pour une page comprenant un secteur d'actualité et une petite boîte de discussion dans le coin. Pour plus d'astuces CSS, examinez notre article en explorant différents Exemples d'animation CSS . Si vous créez un tout nouveau site, essayez un Générateur de site Web et assurez-vous de parcourir votre hébergement Web options ici.

[dix]

Pour ce tutoriel, vous aurez besoin de Chrome 65+ ou de Firefox 59+. Jeter un coup d'œil à la Accompagnant Github Repo pour le code étape par étape. Nous utiliserons les fonctionnalités suivantes pour créer une meilleure expérience et travailler autour de quelques problèmes. Et si vous concevez aux côtés d'une équipe, utilisez le meilleur stockage en ligne garder les choses cohérentes.

Module d'affichage CSS (niveau 3)

Module de règles conditionnelle CSS (niveau 3)

Module de comportement CSS surroploll (niveau 1)

[dix]

Module Selectors CSS (niveau 4)

Le module de confinement CSS (niveau 1)

01. Configurez le HTML pour les informations

Nous devons d'abord mettre en place un marquage super simple et répété pour nos informations de journaux. Créons un .récipient div avec une liste non ordonnée à l'intérieur. Donner la & lt; ul & gt; la classe de .alimentation , puis créez 10 articles de liste chacun contenant un div avec le .carte classe et la carte de texte 1, carte 2 etc.

Enfin créer un autre Liste-item entre 5 et 6 avec une classe de .neté - Ce sera utile plus tard - et ajoutez un & lt; ul & gt; À l'intérieur avec trois articles de liste en utilisant la carte texte A, la carte B etc. 

& lt; corps & gt;
 & lt; div class = "conteneur" & gt;
 & lt; class ul = "nourrir" & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 1 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 2 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 3 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 4 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 5 & lt; / div et gt; & lt; / li & gt;
    & lt; li classe = "imbriquée" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte A & LT; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div la classe = "carte" & gt; carte B & LT; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte C & LT; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 6 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 7 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 8 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 9 & lt; / div et gt; & lt; / li & gt;
 & lt; li & gt; & lt; div mas = "carte" & gt; carte 10 & lt; / div et gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div et gt;
& lt; / corps & gt;

02. Style The Newsfeed

Maintenant, nous devons ajouter des styles rapides afin que cela commence à ressembler davantage à un secteur d'actualité. Nous pouvons d'abord donner & lt; corps & gt; une couleur de fond gris subtile. Puis donner .récipient une max-largeur de 800px et une utilisation Marge: 0 auto; au centre l'alignez.

Donnons aussi .carte fond blanc, 10px de rembourrage et de marge et enfin un hauteur minière de 300PX - cela devrait nous donner suffisamment pour rendre la page défilable. Enfin, nous saupoudrons de la magie de Flexbox sur le .alimentation Pour que les articles circulent soient bien, avec deux cartes par rangée. 

 .feed {
Affichage: flex;
Flex-Wrap: enveloppe;
}
.Feed li {
flex: 1 0 50%;
}

03. Correction des problèmes de mise en page

Si vous faites défiler la liste dans la liste, vous remarquerez que nos cartes dans la liste imbriquée, la carte A - C, causent des problèmes de mise en page. Idéalement, nous aimerions qu'ils s'installent avec le reste des cartes mais elles sont toutes coincées ensemble dans un seul bloc. La raison en est qu'un conteneur flex - qui est créé en utilisant Affichage: flex - Ne fait que fait ses enfants immédiats (c'est-à-dire les éléments de la liste) dans Flex Articles.

Maintenant, normalement le seul moyen de résoudre ce problème, c'est changer le balisage, mais prétendons que vous n'avez pas ce luxe. Peut-être que le balisage de l'information est généré par un script tiers ou son code hérité que vous n'essayez que de reskin. Alors, comment pouvons-nous résoudre ce problème?

Rencontrer Affichage: Contenu . Ce petit one-liner rend essentiellement un élément se comporter comme si ce n'est pas là. Vous voyez toujours les descendants de l'élément mais l'élément lui-même n'affecte pas la mise en page.

Parce que nous prétendons que nous ne pouvons pas changer le balisage (juste pour cette étape), nous pouvons être un peu intelligents à ce sujet et faire le .carte Éléments Les éléments Flex et ignorent presque entièrement le balisage de la liste.

D'abord supprimer l'existant .feed li classe puis utiliser Affichage: Contenu pour les deux & lt; ul & gt; et & lt; li & gt; éléments: 

 .Feed ul,
.Feed li {
Affichage: contenu;
}

Maintenant, vous devriez voir les cartes coulant dans l'ordre, mais nous avons perdu le dimensionnement. Fixer cela en ajoutant la propriété flex à la .carte au lieu: 

 .card {
Flex: 1 0 40%;
}

Ta-da! Nos cartes utilisent désormais les merveilles de Flexbox comme si leur balisage de liste introuvable structurel n'existe pas.

Comme une note latérale, vous vous demandez peut-être pourquoi le flexibilité La valeur est définie à 40%. C'est parce que le .carte La classe a une marge, qui n'est pas incluse dans le calcul de la largeur comme vous l'attendez lors de l'utilisation de Dimensionnement de la boîte: Bordure-Box . Travailler autour de cela, nous devons juste mettre le flexibilité Assez élevé pour déclencher l'emballage au point nécessaire et FLEXBOX remplira automatiquement l'espace restant.

04. Explorez les requêtes de fonctionnalité

Même si Affichage: Contenu Fait exactement ce dont nous avons besoin, ce n'est toujours que lors de l'état de travail avec le W3C. Et dans le soutien de Chrome seulement est arrivé dans la version 65 publiée en mars 2018. Incroyativement Firefox a appuyé depuis avril 2015!

Si vous désactivez le style de DevTools, vous verrez que nos modifications ont fait un bazal avec la mise en page lorsque Affichage: Contenu n'est pas appliqué. Alors, que pouvons-nous faire à ce sujet? Temps pour notre prochaine nouvelle fonctionnalité - requêtes de fonctionnalités.

Ceux-ci travaillent comme des requêtes de média, mais ils vous permettent de demander au navigateur - à l'aide de CSS seul - si une expression de propriété et de valeur est prise en charge. S'ils sont, les styles contenus à l'intérieur de la requête seront appliqués. Maintenant, déplacons notre Affichage: Contenu styles dans une requête de fonctionnalité.

[dix] 
 @supports (Affichage: Contenu) {
.feed ul,
.Feed li {
  Affichage: contenu;
}
.carte {
  Flex: 1 0 40%;
}
}

05. Utilisez 'pas' pour un résultat plus propre

Normalement, dans ce type de scénario d'amélioration progressive, nous utiliserions la requête pour ajouter les nouveaux styles, mais il devra également désactiver certains des styles d'origine nécessaires à la mise en page.

Cependant, vous pouvez décider que, car la prise en charge des requêtes de fonctionnalités est assez bonne (si vous ignorez, c'est-à-dire que vous souhaitez utiliser la requête de fonctionnalité. ne pas opérateur. Cela fonctionne comme si vous vous attendez, afin que nous puissions ré-appliquer notre original fléchir propriété sur les articles de liste quand Affichage: Contenu n'est pas pris en charge: 

 @supports non (Affichage: Contenu) {
.Feed li {
  flex: 1 0 50%;
}
}

À l'intérieur de ne pas question nous pouvons ajouter des styles afin que le .neté les articles essentiellement réappliquent ce qui était hérité en utilisant Affichage: Contenu . 

 nourrir Li.Nets {
Flex-Base: 100%;
}
.feed li.ned ul {
 Affichage: flex;
 Flex-Wrap: enveloppe;
}

06. Prendre un pas plus loin

Vous pouvez déjà voir le potentiel des requêtes de fonctionnalités, mais la chose vraiment cool est que vous pouvez combiner des expressions utilisant les trois opérateurs disponibles: et , ou et ne pas . Peut-être que nous pourrions aussi vérifier Affichage: flex support puis ajoutez une baisse basée sur le flotteur.

Nous n'allons pas faire cela ici, mais si nous étions, nous avons d'abord modifier les deux requêtes de fonctionnalité comme si: 

 @supports (Affichage: Flex) et (Affichage: Contenu) {
...
}
@supports (Affichage: Flex) et (Not (Affichage: Contenu)) {
...
}

En tant que bonus, vous pouvez également tester un support de propriétés personnalisés comme celui-ci: 

 @supports (--foo: vert) {
...
}

07. Ajouter une boîte de discussion

Maintenant, nous avons un beaux longueurs en place, ajoutons une petite boîte de discussion qui est fixée au bas à droite de l'écran. Nous aurons besoin d'une liste de messages et d'un champ de texte pour que l'utilisateur entre dans leur message. Ajoutez ce bloc juste après l'ouverture & lt; corps & gt; étiqueter: 

 & lt; div class = "chat" & gt;
 & lt; div class = "messages" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 1 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 2 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 3 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 4 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 5 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 6 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 7 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 8 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 9 & lt; / div et gt; & lt; / li & gt;
& lt; li & gt; & lt; div mas = "message" & gt; message 10 & lt; / div et gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div et gt;
 & lt; type d'entrée = "texte" class = "entrée" & gt;
& lt; / div & gt;

08. Style La boîte de discussion

Il est temps d'ajouter rapidement un peu de coiffage afin qu'il ait l'air à moitié décent. 

 .chat {
 Contexte: #fff;
 frontière: 10px solide # 000;
 bas: 0;
 Taille de la police: 10px;
 Position: fixe;
 droite: 0;
 largeur: 300px;
 z-index: 10;
}
.messages {
 frontière-fond: 5px solide # 000;
 Overflow: auto;
 Rembourrage: 10px;
 max-hauteur: 300px;
}
.un message {
 Contexte: #000;
 Rayon frontalier: 5px;
 Couleur: #fff;
 marge: 0 20% 10px 0;
 Rembourrage: 10px;
}
.MESSAGES LI: Last-Enfant .Message {
 marge-bas: 0;
}
.saisir {
 frontière: aucun;
 bloc de visualisation;
 Rembourrage: 10px;
 largeur: 100%;
}

09. Scroll Chaining

J'espère que vous aurez maintenant une petite boîte de discussion avec une liste de messages défilés assis sur votre vitesse d'actualité. Génial. Mais avez-vous remarqué ce qui se passe lorsque vous faites défiler dans une zone imbriquée et que vous atteignez la fin de sa gamme défilée? Essayez-le. Faites défiler tout le chemin jusqu'à la fin des messages et vous verrez que la page elle-même commencera à défiler à la place. C'est ce qu'on appelle le chaînage de défilement.

Ce n'est pas une grosse affaire dans notre exemple, mais dans certains cas, cela pourrait être. Nous avons dû contourner cette fonctionnalité avant lors de la création de zones défilées dans des modaux ou des menus contextuels.

Le correctif sale est de définir le & lt; corps & gt; à débordement caché , mais il y a une belle propriété CSS brillante qui corrige tout cela et c'est une simple doublure. Dire bonjour à Comportement des sursécoulements . Il y a trois valeurs possibles:

  • auto - la valeur par défaut, qui permet la chaîne de défilement
  • contenir - désactive le chaînage de défilement
  • rien - désactive le chaînage de défilement et d'autres effets de sursécoulement (par exemple la bande de caoutchouc)

Nous pouvons utiliser le raccourci Comportement des sursécoulements ou nous pouvons cibler une direction spécifique avec sursolboll-comportement-x (ou -y ). Ajoutons-le à notre .messages classer: 

 .Messages {
...
overcroll-comportement-y: contenir;
...}

Maintenant, essayez à nouveau le défilement et vous verrez que cela n'affecte plus le défilement de la page lorsque vous atteignez la fin du contenu.

Cette propriété est également assez pratique si vous souhaitiez implémenter une fonctionnalité de pull-rafraîchissante dans votre PWA, dites-vous pour rafraîchir les journaux. Certains navigateurs, tels que Chrome pour Android, ajoutent automatiquement leur propre et jusqu'à présent, il n'y avait pas eu de moyen facile de le désactiver sans utiliser JS pour annuler des événements utilisant des gestionnaires non passifs de performance.

Maintenant, il vous suffit d'ajouter Comportement des sursécoulements: contenir à l'élément contenant de la fenêtre, probablement & lt; corps & gt; ou & lt; html & gt; .

Il convient de noter que cette propriété n'est pas une norme W3C, plutôt une proposition du groupe communautaire de l'incubateur Web (WICG). Les propositions populaires, stables et matures WICG sont considérées comme une migration vers un groupe de travail du W3C à une étape ultérieure.

10. Réduisez la boîte de discussion lorsqu'elle n'est pas utilisée

Pour le moment, la boîte de discussion occupe un peu d'espace, ce qui sauf si nous interagissons avec elle est un peu distrayant. Heureusement, nous pouvons faire quelque chose à ce sujet avec une petite magie CSS.

Mais tout d'abord, nous devons modifier légèrement nos styles existants. Par défaut, nous voulons que la case de discussion soit effondrée, nous devons donc réduire la hauteur maximum valeur dans le .messages classer. Pendant que nous sommes là-bas, nous pouvons également ajouter une transition au hauteur maximum biens: 

 .Messages {
 ...
 max-hauteur: 25px;
Transition: Max-hauteur 500ms; }

Page suivante: Continuez à explorer les nouvelles fonctionnalités CSS dans les étapes 11-20

[dix] [dix]
  • 1
  • 2

Page actuelle: Explorez 5 nouvelles fonctionnalités CSS: étapes 01-10

[dix]
[dix]

Comment - Most Popular Articles

Comment construire une application Web progressive

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] MOBILE représente désormais plus de la moitié du trafic Web et les applica..

Comment construire une interface de chatbot

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Au milieu des années 2000, des agents virtuels et des chatters de service à..

Comment concevoir des formes réactives et agnostiques de l'appareil

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Qu'il s'agisse d'un flux d'inscription ou d'une étape à pas multifonction, ..

Comment utiliser Markdown dans le développement Web

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] En tant que développeurs Web et créateurs de contenu, nous passons généra..

Peindre une carte de tarot originale

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Quand j'ai reçu mon premier pont de tarot, j'étais enchanté par la belle i..

Simulez une transformation de coureur de fantôme

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..

Créer un papier peint bas Poly dans C4D

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Créez un fon..

Demandez à la création avec des portraits et du visage facifest

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Nous avons tous eu une pièce de théâtre avec l'outil Liquify dans Photosho..

Catégories