Conseils et techniques CSS utiles —

Si vous êtes dans le domaine du développement Web depuis plus longtemps, vous vous souviendrez peut-être de l’époque où CSS était complètement déroutant et où vous deviez trouver des hacks et des solutions de contournement pour que les choses fonctionnent. Heureusement, ces jours sont révolus et de nouvelles fonctionnalités telles que requêtes de conteneurcouches en cascade, Imbrication CSSle :has sélecteur, grille et sous-grille, et même nouveaux espaces colorimétriques faire du CSS plus puissant que jamais.

Et l’innovation ne s’arrête pas là. Nous pourrions aussi avoir requêtes de style et peut-être même requêtes d’étatavec habillage de texte équilibré et Positionnement de l’ancre CSS venant à notre rencontre.

Avec tout ça belles nouvelles fonctionnalités CSS À l’horizon, dans cet article, nous plongeons dans le monde du CSS avec quelques techniques utiles, une analyse approfondie de la spécificité, de la ponctuation suspendue et des variables CSS auto-modifiables. Nous espérons qu’ils vous seront utiles dans votre travail.

Introduction à la cascade et à la spécificité

Beaucoup craignent la cascade et la spécificité du CSS. Cependant, le concept n’est pas aussi difficile à appréhender qu’on pourrait le penser. Pour vous aider à vous sentir plus à l’aise avec deux des parties les plus fondamentales du CSSAndy Bell a écrit un merveilleux introduction à la cascade et à la spécificité.

Le guide explique comment certains types de propriétés CSS seront prioritaires par rapport à d’autres et approfondit notation de spécificité pour vous aider à évaluer la probabilité que le CSS d’une règle spécifique s’applique. Andy utilise des exemples pratiques pour illustrer les concepts et simplifie le modèle mental sous-jacent pour le rendre facile à adopter et à utiliser. Un boost de puissance pour vos compétences CSS.

Tester le HTML avec le CSS moderne

Avez-vous déjà envisagé de tester HTML avec CSS au lieu de JavaScript ? Sélecteurs CSS sont si puissants aujourd’hui qu’il est possible de tester la plupart des types de modèles HTML en utilisant uniquement CSS. Partisan de cette pratique, Heydon Pickering a résumé tout ce que vous devez savoir sur tester HTML avec CSSque vous souhaitiez tester l’accessibilité, découvrir une surcharge HTML ou vérifier la convivialité générale.

Comme le souligne Heydon, tester avec CSS présente de nombreux avantages. Surtout si vous travaillez dans le navigateur et préférez explorer régressions visuelles et les informations de l’inspecteur sur les journaux de ligne de commande, les tests avec CSS pourraient être pour vous. Cela brille également dans les situations où vous n’avez pas d’accès direct à la pile d’un client : fournissez simplement une feuille de style de test, et les clients peuvent localiser les instances de mauvais modèles que vous avez identifiés pour eux sans avoir à vous intégrer pour les aider à le faire. Intelligent!

Variables CSS auto-modifiables

La spécification CSS pour les propriétés personnalisées n’autorise pas un propriété personnalisée pour se référencer – bien qu’il existe de nombreux cas d’utilisation dans lesquels une telle fonctionnalité serait utile. Pour combler l’écart, Léa Verou a proposé un inherit() fonction en 2018, que le CSSWG a ajouté aux spécifications en 2021. Il n’a pas encore été édité, mais Roman Komarov a trouvé un solution de contournement cela permet de commencer à impliquer son comportement.

L’approche de Roman utilise des requêtes de style conteneur pour accéder à l’état précédent d’une propriété personnalisée. Cela peut être utile quand on veut parcourir différentes teintes sans avoir une liste statique de valeurs, pour correspondre au border-radius visuellement, ou pour imbriquer des listes de menus, par exemple. La solution de contournement est encore strictement expérimentale (donc ne l’utilisez pas en production !), mais comme il est probable que les requêtes de style bénéficieront d’une large prise en charge par les navigateurs avant inherit()il a un grand potentiel.

Ponctuation suspendue en CSS

hanging-punctuation est une jolie petite propriété CSS. Il étend les signes de ponctuation tels que citations d’ouverture pour répondre à des blocs de texte agréables et propres. Et même si elle n’est actuellement prise en charge que dans Safari, cela ne fait pas de mal de l’inclure dans votre code, car la propriété est un exemple parfait d’amélioration progressive : elle laisse les choses telles qu’elles sont dans les navigateurs qui ne la prennent pas en charge et ajoute l’option supplémentaire. un peu de polissage dans les navigateurs qui le font.

Jeremy Keith a remarqué un effet secondaire involontaire de hanging-punctuation, cependant. Lorsque vous l’appliquez globalement, il s’applique également aux champs de formulaire. Ainsi, si le texte d’un champ de formulaire commence par un guillemet ou un autre signe de ponctuation, il est poussé hors du champ et masqué. Jeremy partage un correctif : Ajouter input, textarea { hanging-punctuation: none; } pour éviter que vos guillemets disparaissent. Une petite astuce qui peut vous éviter bien des maux de tête.

Fixation aspect-ratio Problèmes

Le aspect-ratio la propriété brille dans les environnements fluides. Il peut gérer n’importe quoi, de l’insertion d’un objet de forme carrée <div> pour correspondre à la taille 16:9 d’un <video>, sans que vous réfléchissiez aux dimensions exactes. Et la plupart du temps, cela se fait parfaitement. Cependant, il existe certains des choses qui peuvent casser aspect-ratio. Chris Coyier en examine trois de plus près raisons pour lesquelles votre aspect-ratio pourrait ne pas fonctionner comme prévu.

Comme Chris l’explique, un problème potentiel réside dans la définition des deux dimensions, ce qui peut sembler évident, mais cela peut prêter à confusion si l’une des dimensions est définie à un endroit auquel vous ne vous attendiez pas. Les étirements et les contenus qui obligent à prendre de la hauteur peuvent également conduire à des résultats inattendus. Un bon aperçu de ce qu’il faut surveiller quand aspect-ratio pauses.

Disposition de maçonnerie avec CSS

CSS Grid a fait passer les mises en page sur le Web à un niveau supérieur. Cependant, aussi puissant que soit le CSS aujourd’hui, toutes les mises en page imaginables ne sont pas réalisables. La disposition en maçonnerie fait partie de ces choses qui ne peuvent pas être réalisées avec CSS seul. Pour changer cela, le groupe de travail CSS est demander votre aide.

Il y a actuellement deux approches en discussion au sein du groupe de travail CSS sur la façon dont CSS devrait gérer les mises en page de style maçonnerie – et ils demandent l’avis des développeurs et des concepteurs du monde réel pour trouver la meilleure solution.

La première approche consisterait à étendre CSS Grid pour inclure la maçonnerie, et la seconde approche consisterait à introduire une disposition en maçonnerie en tant que display: masonry Type d’affichage. Jen Simmons résumé ce qu’il faut savoir sur le débat en cours et comment vous pouvez donner votre avis sur la direction que CSS devrait prendre.

Avant de tirer une conclusion, assurez-vous également de lire Message de Rachel Andrew sur le sujet. Elle explique pourquoi l’équipe Chrome s’inquiète de la mise en œuvre d’une disposition en maçonnerie dans le cadre de la spécification CSS Grid et clarifie ce que permet la proposition alternative.

Boostez vos compétences CSS

Si vous souhaitez approfondir vos connaissances sur CSS, nous sommes là pour vous, avec quelques événements amicaux et SmashingConfs à venir cette année :

Nous serions absolument ravis de vous accueillir dans l’une de nos expériences spéciales Smashing, que ce soit en ligne ou en personne !

Newsletter hebdomadaire fracassante

Avec notre bulletin hebdomadairenous visons à vous apporter des informations utiles et pratiques et partagez certaines des choses utiles sur lesquelles les gens travaillent dans l’industrie du Web. Il y a donc de nombreuses personnes talentueuses travaillent sur des projets brillants, et nous apprécierions si vous pouviez contribuer à faire passer le message et leur donner le crédit qu’ils méritent !

Aussi, en vous abonnant, il n’y a pas de mailings de tiers ni de publicité cachée, et votre soutien nous aide vraiment à payer les factures. ❤️

Intéressé par le parrainage ? N’hésitez pas à consulter notre options de partenariat et entrer en contact avec l’équipe à tout moment – ils ne manqueront pas de vous répondre dès que possible.