15 astuces CSS utiles que vous auriez pu oublier

Si vous êtes développeur Web front-end pendant un certain temps, il y a de fortes chances que vous ayez eu un moment où vous essayiez de trouver comment coder quelque chose et que vous réalisiez, après un peu de googler, “il y a CSS pour ça”. Si vous ne l'aviez pas fait, vous êtes sur le point de.

Cet article regroupe de tels codes CSS, qui peuvent vous donner des fonctionnalités telles que rendre un élément collant, vous donner des capacités de soulignement de lignes pointillées, faire passer le texte de votre page sous une forme spéciale ou obtenir un effet de parallaxe. Certains sont largement pris en charge alors que d’autres sont sur le point d’être entièrement pris en charge par tous les navigateurs..

1. Numérotation des titres et des sous-titres

   Supposons que vous ayez un ensemble de titres et de sous-titres dans votre document et que vous les numérotiez manuellement ou via un script. Pour ce faire, vous pouvez utiliser des compteurs CSS. Il y a déjà un article en profondeur à ce sujet ici. Et puisqu'il s'agit d'une spécification CSS2, vous pouvez parier qu'il est pris en charge par tous les navigateurs, sauf peut-être IE 6..

2. Spice Up Plain Underlines

   Parfois, nous voulons souligner avec une belle ligne en pointillé ou en pointillé au lieu d'une ligne solide. Comme il n'y a pas d'option pour cela, nous nous contentons de bas de la bordure. Mais bas de la bordure n’est pas une bonne solution si le texte sur lequel vous soulignez des enveloppes.

   CSS3 a spécifié non pas une mais trois nouvelles propriétés pour la décoration de texte texte-décoration-couleur, texte-decoration-line, et style de décoration de texte qui peut être en désavantage dans le bon vieux texte-décoration.

   Vous pouvez les utiliser pour souligner, surligner, même faire clignoter le texte, etc. Depuis avril 2015, seul Firefox prend en charge cette propriété, mais vous pouvez activer “fonctionnalités de la plateforme web expérimentale” l'utiliser sur Chrome.

3. Citation d'une citation

   Tout d’abord, il n’est pas nécessaire de s’ennuyer à taper les guillemets bouclés corrects pour les citations courtes, car il existe du HTML pour cela: balise indiquant les citations en ligne.

   le tag se charge également de citer les guillemets intérieurs avec des guillemets simples. Alors, où est le “il y a 'CSS' pour ça” moment dans cette?

   Disons que vous ne voulez pas les guillemets par défaut ou que vous avez plus d'un niveau de guillemets imbriqués, vous pouvez définir vos préférences de devis pour l'élément quote avec CSS à l'aide de CSS2. citations propriété.

4. Gérer les tables indisciplinées

   Vous avez peut-être rencontré une grande table avec une taille de contenu variable par cellule qui refuse de rester dans la largeur que vous avez spécifiée, quoi que vous essayiez. Apprivoisez cette table avec le disposition de la table property (pour une hauteur de colonne égale, suivez ce lien).

   Pour être précis, le correctif est dans le table-layout: corrigé; valeur. Lorsque vous affectez une présentation fixe à la table, la table et la largeur de la cellule sont déterminées par la largeur de la table ou de la première ligne de cellules (pouvant être définies par l'utilisateur) et non par le contenu. Ceci est supporté par tous les navigateurs.

5. Le rendre collant

   Les éléments collants sont des éléments d'une page qui ne seront pas défilés. En d'autres termes, il se colle à une zone visible (fenêtre ou champ défilant). Vous pouvez créer ceci avec CSS en utilisant position: collante;.

   Ils agissent comme des éléments relativement postulés avant tout défilement et plus tard comme des éléments fixes une fois le seuil de défilement atteint. Pour l'instant, seulement Firefox le soutient.

6. Obtenez votre texte en forme

   Voulez-vous que le texte de votre page soit bien courbé sur une image que vous avez affichée à côté? Tu peux essayer Formes CSS. Pour implémenter des formes CSS, nous pouvons utiliser trois propriétés forme extérieure, marge de forme et forme-image-seuil. A partir d'avril 2015, CSS Shapes est soutenu par navigateurs webkit.

7. Champs obligatoires

   Si vous avez un formulaire, il y a de fortes chances que certains champs y soient obligatoires, alors que d'autres ne le sont pas. Vous devrez faire savoir aux utilisateurs lequel est lequel. Le CSS pour cela est :Champs obligatoires :optionnel pseudo classes. Tous les navigateurs modernes les supportent.

8. Pointilleux avec des couleurs

   Si vous n'aimez pas une certaine couleur, comme le bleu, nous pouvons colorer la zone sélectionnée avec une autre couleur et le ::sélection Le pseudo élément est le CSS pour cela. Ceci est supporté par tous les navigateurs modernes.

9. Ai-je vérifié?

   Dans les cas où une case à cocher a été cochée, il serait bien d’avoir une autre indication en plus de la petite coche à l’intérieur de la case à cocher par défaut pour indiquer que l’élément a été coché..

   Il y a CSS pour celui qui exploite le lien entre la fratrie immédiate, deux éléments côte à côte. CSS a un sélecteur de fratrie adjacent désigné par le plus + signer, et nous pouvons l'utiliser pour cibler l'étiquette à côté de la case à cocher. Mais qu'en est-il de cibler d'abord la case à cocher? Il y a le :vérifié pseudo classe pour ça.

10. Comme un livre de contes

    Alors, ça ne serait pas bien si le premier “O” dans le “Il était une fois” est jolie? Nous pouvons le rendre joli, après tout, il existe CSS pour cela. Voici où ::première lettre Le pseudo élément vient à la rescousse. Il cible la première lettre de la première ligne de l'élément ciblé. En savoir plus à ce sujet ici.

11. Voulez-vous en savoir plus?

    Un élément peut avoir la classe X ou la donnée Y ou une autre valeur pour un attribut. Si nous avons besoin d'afficher une telle valeur d'attribut d'un élément proche de celui-ci, nous pouvons utiliser le contenu: attr (X). Il récupère la valeur de l'attribut X de l'élément, nous pouvons alors l'afficher à côté de l'élément.

12. Un peu plus à gauche

    Centrer les éléments pour les débutants en CSS est un exploit. Différents éléments nécessitent un ensemble différent de propriétés CSS pour les centrer. Nous allons examiner un exemple parmi de nombreux disponibles sur le Web, de sorte que vous puissiez vous rappeler à nouveau qu'il existe un CSS pour centrer les choses..

13. Divulguer le format de fichier des liens

    Avez-vous déjà vu une petite image près d'un lien indiquant ce qu'est ce lien? Un PDF? ou un DOC? Oui, il existe CSS pour y parvenir. le contenu: url () est ce que nous allons utiliser pour afficher l'image derrière les liens.

14. Trigger Parallax Effect

    L'effet de parallaxe est un effet utilisé pour décrire le mouvement apparemment lent de l'arrière-plan par rapport au premier plan. Cet effet est populaire sur les sites Web qui implémentent le défilement parallaxe. Il existe différentes manières de le mettre en œuvre, l'exemple ci-dessous fonctionne dans Firefox avec attachement de fond: fixe;.

15. Le pouvoir des animations CSS

    Probablement pas un énorme “il y a CSS pour ça” moment, parce que vous êtes probablement tous au courant des animations CSS à ce jour. Mais un petit rappel ne fait pas de mal. Les animations CSS ont de nombreuses utilisations, mais en voici une pour un exercice de coloration simple..

Maintenant lu: 50 extraits de code CSS utiles que chaque concepteur devrait avoir