CSS n'est pas une langue trop complexe. Mais même si vous écrivez CSS depuis de nombreuses années, vous rencontrez probablement encore de nouvelles choses - des propriétés que vous n'avez jamais utilisées, des valeurs que vous n'avez jamais envisagées ou des détails de spécification que vous n'avez jamais connus.
Dans mes recherches, je rencontre tout le temps de nouvelles petits morceaux, alors j'ai pensé en partager certains dans ce post. Certes, tout dans ce post n'aura pas une tonne de valeur pratique immédiate, mais vous pouvez peut-être en déposer mentalement certaines d'entre elles pour une utilisation ultérieure.
Commençons par les choses les plus faciles. La propriété couleur est largement utilisée par chaque développeur CSS. Certains d'entre vous qui ne sont pas aussi expérimentés avec CSS peuvent ne pas se rendre compte, cependant, qu'il ne définit pas uniquement la couleur du texte.
Jetez un œil à la démo ci-dessous:
Voir le stylo CTWFG par SitePoint (@SitePoint) sur Codepen.
AVIS DANS LE CSS, une seule propriété de couleur est utilisée, sur l'élément corporel, en le plaçant sur jaune. Comme vous pouvez le voir, tout sur la page est jaune, y compris:
Fait intéressant, l'élément HR, par défaut n'hérite pas de la valeur de la propriété couleur, mais j'ai dû le forcer à le faire en utilisant la bordure de la bordure: hériter. C'est un peu de comportement étrange pour moi.
Tout cela est vérifié par la spécification:
Cette propriété décrit la couleur de premier plan du texte d'un élément
contenu. De plus, il est utilisé pour fournir une valeur indirecte potentielle
… Pour toutes les autres propriétés qui acceptent les valeurs de couleur.
Je ne peux penser à rien d'autre qui serait considéré comme «premier plan», mais si vous le faites, faites-le nous savoir dans les commentaires.
Vous avez probablement utilisé la propriété de visibilité des centaines de fois. Les valeurs les plus couramment utilisées sont visibles (la valeur par défaut pour tous les éléments) et cachées, ce qui fait disparaître un élément tout en lui permettant d'occuper encore de l'espace comme s'il était là (qui est différent de l'affichage: aucun).
Une valeur troisième et rarement utilisée pour la propriété de visibilité est l'effondrement. Cela fonctionne de la même manière que caché sur tous les éléments à l'exception des lignes de table, des groupes de lignes de table, des colonnes de table et des groupes de colonnes de table. Dans le cas de ces éléments basés sur une table, une valeur de l'effondrement est censée fonctionner similaire à l'affichage: aucune, de sorte que l'espace occupé par la ligne / colonne effondrée peut être occupé par d'autres contenus.
Malheureusement, la façon dont les navigateurs gèrent l'effondrement n'est pas cohérent. Essayez la démo suivante:
Voir la visibilité du stylo: s'effondrer par SitePoint (@SitePoint) sur Codepen.
L'Almanac CSS-Tricks conseille de ne jamais l'utiliser, en raison des incohérences du navigateur.
d'après mes observations:
Certes, cette valeur va probablement rarement être utilisée, mais elle existe, donc si vous ne le saviez pas auparavant, je suppose que d'une manière étrange, vous êtes maintenant plus intelligent.
Dans CSS2.1, la propriété de raccourci en arrière-plan comprenait 5 valeurs à long terme - couleur arrière-plan, image de fond, répétition d'arrière-plan, attachement d'arrière-plan et position d'arrière-plan. Dans CSS3 et au-delà, il en comprend désormais trois autres, pour un total de 8. Voici comment les valeurs mappent:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Remarquez la barre oblique, semblable à la façon dont le sténographie des polices et le rayon frontalier peuvent être écrits. La barre oblique vous permet d'inclure une valeur de taille arrière après la position de support des navigateurs.
En outre, vous avez également jusqu'à deux déclarations facultatives pour l'origine arrière et le clip de fond.
donc la syntaxe ressemble à ceci:
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>Testez-le dans votre navigateur en utilisant cette démo:
Voir les valeurs de raccourci de fond du stylo par SitePoint (@SitePoint) sur Codepen.
Quant à la prise en charge du navigateur, ces nouvelles valeurs semblent bien fonctionner dans tous les navigateurs modernes, mais il est probable que vous devrez fournir de bonnes bases pour tous les navigateurs non soutenus afin qu'il se dégrade gracieusement.
En parlant de clip de fond, vous avez probablement également vu Clip auparavant. Cela ressemble à ceci:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Cela «coupera» l'élément aux emplacements spécifiés (expliqués ici). La seule mise en garde est que l'élément vers lequel vous appliquez le clip doit être positionné absolument. Vous devez donc faire ceci:
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>Vous pouvez voir comment le clip est désactivé dans la démo ci-dessous lorsque la position: Absolute est basculé:
Voir le stylo Sifju par SitePoint (@SitePoint) sur Codepen.
Vous pouvez également définir l'élément en position: fixe, car, selon les spécifications, les éléments de position fixe sont également qualifiés d'éléments «absolument positionnés».
Celui-ci est un peu déroutant au début, sur lequel j'ai écrit auparavant. Bien que vous sachiez que les largeurs de pourcentage sont calculées en fonction de la largeur du conteneur, les pourcentages sur des propriétés telles que le rembourrage supérieur et le bas et les marges supérieure et inférieure sont également calculées en fonction de la largeur du conteneur, plutôt que de la hauteur.
Voici un exemple que vous pouvez ajuster avec un curseur de plage, afin que vous puissiez voir l'effet:
Voir le stylo Qlnpm par SitePoint (@SitePoint) sur Codepen.
Remarquez qu'il y a 3 pourcentages «verticaux» déclarés sur la boîte intérieure (rembourrage supérieur et inférieur et marge inférieure). Lorsque le curseur se déplace, il ne change que la largeur du conteneur. Mais les autres valeurs changent en réponse à cela, comme le montre la sortie de la page, montrant que ces valeurs, lorsqu'elles sont déclarées en pourcentages, sont basées sur la largeur du conteneur.
Nous avons tous fait cela à un moment donné:
<span><span>.example</span> {
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>La propriété frontalière est une propriété raccourci qui établit le style frontalier, la largeur des frontières et la couleur de la frontière - le tout dans une seule déclaration.
Mais n'oubliez pas que chacune des propriétés que la propriété frontalière représente est elle-même une propriété scolare. Ainsi, la largeur des frontières peut être déclarée:
<span><span>.example</span> {
</span> <span>position: absolute;
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>Cela définira différentes largeurs pour chacune des quatre frontières. Et il en va de même pour la couleur de la bordure et la frontière, comme le montre cette horrible démo:
Voir les raccourcis de la frontière multiple du stylo par SitePoint (@SitePoint) sur Codepen.
De plus, chacune de ces propriétés peut être encore plus décomposée avec de style bordure-gauche, de largeur de bordure, couleur frontalière, etc.
mais la capture est que vous ne pouvez pas utiliser le sténographie de la frontière ordinaire pour définir différentes valeurs pour différents côtés. C'est donc une sténographie à l'intérieur de la sténographie à l'intérieur de la sténographie, mais pas exactement.
Je savais que quelque chose sur cette liste vous épaterait.
Ceci est maintenant standard, selon la spécification:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Cette propriété représente désormais 3 propriétés: Text-Decoration-Line, Text-Decoration-Color et Text-Decoration Style.
Malheureusement, Firefox est le seul navigateur qui prend en charge ces nouvelles propriétés, et (je suppose, pour la compatibilité en arrière), ne les soutient pas encore dans le scolare.
Essayez la démo ci-dessous dans Firefox:
Voir le stylo HAPGB par SitePoint (@SitePoint) sur Codepen.
La démo utilise les valeurs à long terme pour ce faire. Ce sera finalement difficile, car tout navigateur qui voit une valeur supplémentaire en matière de texto-décoration annulera toute la déclaration, ce qui n'est clairement pas bon pour la compatibilité en arrière.
pas exactement bouleversant, et ce n'est pas nouveau, mais, en plus des valeurs de longueur standard (par exemple 5px ou 1EM), la propriété de largeur de bordure accepte trois valeurs de mots clés: moyen, mince et épais.
En fait, la valeur initiale de la propriété de la largeur des frontières est «moyenne». La démo ci-dessous utilise «épais»:
Voir le mot-clé Border-Width Mot «épais» par SitePoint (@SitePoint) sur Codepen.
Lorsque les navigateurs rendent ces valeurs de mots clés, la spécification ne nécessite pas de les cartographier à des valeurs de longueur spécifiques, mais, d'après ce que je peux voir, tous les navigateurs semblent utiliser 1px, 3px et 5px.
J'ai écrit sur la propriété CSS3 Border-Image sur SitePoint il y a quelque temps. La fonctionnalité est prise en charge dans tous les navigateurs modernes sauf IE10 et ci-dessous. Mais quelqu'un se soucie-t-il?
Cela semble être une fonctionnalité vraiment soignée, vous permettant de créer des images de bordure fluide. Utilisez la poignée de redimensionnement de cette démo pour la tester:
Voir la démo d'image de bordure de stylo par SitePoint (@SitePoint) sur Codepen.
Malheureusement, l'image des frontières semble être une nouveauté que peu de gens utilisent. Mais peut-être que je me trompe. Si vous connaissez des exemples d'image des frontières utilisés sur un vrai projet, ou si vous l'avez utilisé, veuillez nous en informer dans les commentaires et je serai heureux d'admettre que j'avais tort.
Celui-ci a un support partout, y compris IE8, et il ressemble à ceci:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Comme vous l'avez probablement compris, il est utilisé pour les tables HTML. Il indique au navigateur s'il faut afficher ou masquer des cellules de table qui n'ont pas de contenu. Essayez le bouton de bascule de cette démo pour voir l'effet de la modification de la valeur de la propriété des cellules vides:
Voir la démo des cellules vides du stylo par SitePoint (@SitePoint) sur Codepen.
Dans ce cas, j'ai dû m'assurer que les frontières étaient visibles et ne se sont pas effondrées et j'ai dû ajouter un espacement entre les frontières cellulaires. Dans certains cas, cette propriété n'aurait aucun effet visuel car il doit y avoir quelque chose de visible sur la table pour que cela fasse la différence.
à peu près chaque fois que vous voyez la propriété de style police, elle est utilisée avec une valeur de «normale» ou «italique». Mais vous pouvez également lui donner une valeur «oblique»:
Voir le stylo italique vs oblique par SitePoint (@SitePoint) sur Codepen.
Mais qu'est-ce que cela signifie exactement? Et pourquoi cela ressemble-t-il à l'italique?
La spécification explique que la valeur «oblique»…
«… Sélectionne une police qui est étiquetée comme un visage oblique ou un visage italique si on ne l'est pas.»
La description de «italique» dans la spécification est fondamentalement la même. Le mot «oblique» est un terme typographique qui représente essentiellement du texte incliné, mais pas un véritable italique.
En raison de la façon dont CSS gère le texte oblique, il est interchangeable avec l'italique à moins que (comme l'explique la spécification) la police utilisée a un visage qui est identifié comme oblique.
Je n'ai jamais entendu parler d'une police qui a en fait un visage oblique, mais peut-être que je me trompe. D'après les recherches que j'ai faites, il semble qu'il soit mal pour une police d'offrir à la fois des visages italiques et obliques, car oblique est censé être une fausse version de l'italique sur les polices qui n'ont pas de véritable italique.
Donc, si je ne me trompe pas, ce que cela signifie, c'est que si une police n'a pas de véritable visage italique, en définissant le CSS sur le style de police: l'italique affichera réellement la police comme style de police: oblique.
La propriété Word-Wrap n'est pas utilisée trop souvent, mais elle est très utile dans des circonstances spécifiques. Un exemple souvent utilisé est d'aider à envelopper de longues chaînes ininterrompues de texte (comme les URL), plutôt que de sortir de leur conteneur. Voici un exemple:
Voir la démonstration de parole de stylo par SitePoint (@SitePoint) sur Codepen.
Parce qu'il s'agissait à l'origine d'une création Microsoft, cette propriété est prise en charge dans tous les navigateurs, y compris Internet Explorer jusqu'à IE5.5.
malgré le cross-furt et, d'après ce que je peux voir, un soutien cohérent, le W3C a décidé de remplacer les mots de mots par le débordement de débordement - je suppose que l'ancien nom est considéré comme un terme impropre. Overflow-Wrap a les mêmes valeurs que Word-Wrap, et Word-Wrap est désormais considéré comme une «syntaxe alternative» pour le watflow-wrap.
Alors que quelques nouveaux navigateurs prennent en charge le débat de débordement, il semble inutile de s'en soucier car les anciens navigateurs gèrent très bien les mots de mots, et tous les navigateurs sont tenus de continuer à prendre en charge les mots de mots indéfiniment, pour des raisons héritées.
Nous pouvons commencer à utiliser le débordement de débordement lorsque tous les navigateurs à usage ont automatiquement mis à jour - mais jusque-là, je ne vois pas de point pour changer de l'ancienne syntaxe.
Avez-vous appris quelque chose de ce post? Je l'espère. Les développeurs CSS les plus expérimentés connaissaient probablement beaucoup, sinon tous, des points ci-dessus. Mais probablement ceux qui sont plus récents à CSS en bénéficieraient davantage.
Il serait intéressant de voir combien de ces points étaient nouveaux pour nos lecteurs. Publiez un commentaire ci-dessous en nous disant combien étaient nouveaux pour vous (par exemple 6/12, 4/12, ou autre).
Ramasser charge plus d'indices et de conseils CSS avec un abonnement apprenable. Vous aurez accès à des dizaines de livres et de cours, y compris des best-sellers comme Jump Start CSS , L'anthologie CSS et plus.
CSS, ou feuilles de style en cascade, possède plusieurs propriétés uniques qui ne sont pas communément connues. Par exemple, CSS dispose d'une propriété appelée «calc» qui vous permet d'effectuer des calculs pour déterminer les valeurs de propriété CSS. Cela peut être incroyablement utile pour une conception réactive. Une autre propriété moins connue est «CH», qui signifie le caractère et peut être utilisée pour définir des largeurs et autres mesures par rapport à la largeur du caractère «0» de la police utilisée.
Oui, CSS peut être utilisé pour créer des animations. La propriété «Animation» dans CSS vous permet d'animer presque toutes les propriétés. Vous pouvez contrôler la durée, la fonction de synchronisation, le retard, le nombre d'itération, la direction, le mode de remplissage et l'état de jeu de l'animation. Cela peut être un outil puissant pour améliorer l'expérience utilisateur sur un site Web.
La valeur «Héritage» en CSS est utilisée pour spécifier qu'une propriété devrait hériter de sa valeur à partir de son élément parent. Cela peut être utile dans des situations où vous souhaitez assurer la cohérence entre les éléments, ou lorsque vous souhaitez simplifier votre code CSS en réduisant la redondance.
La propriété «z-index» dans CSS est utilisée pour contrôler l'ordre des éléments d'empilement. Des éléments avec une valeur «z-index» plus élevée apparaîtront au-dessus des éléments avec une valeur «z-index» inférieure. Cela peut être particulièrement utile lors de la gestion des éléments qui se chevauchent, comme dans une disposition complexe ou lors de la création d'un menu modal ou déroulant.
Oui, CSS peut être utilisé pour styliser les entrées de formulaire. Vous pouvez utiliser CSS pour contrôler l'apparence des champs de texte, des cases à cocher, des boutons radio et d'autres entrées de formulaire. Cela peut être un outil puissant pour améliorer la convivialité et l'esthétique des formulaires sur un site Web.
La propriété «-dimensionnement de la boîte» dans CSS est utilisée pour contrôler la façon dont la largeur totale et la hauteur d'un élément est calculée. Par défaut, la largeur et la hauteur d'un élément n'incluent pas le rembourrage et les bordures. Cependant, en définissant la propriété «-dimensionnement» sur «Border-Box», vous pouvez inclure le rembourrage et les bordures dans le calcul de la largeur et de la hauteur.
La propriété «flottante» dans CSS est utilisée pour pousser un élément vers la gauche ou à droite, permettant à d'autres éléments de s'enrouler autour d'elle. Cela peut être utile pour créer des enveloppes de texte autour d'images ou pour créer des dispositions multi-colonnes.
La «fenêtre» dans CSS fait référence à la zone visible de l'utilisateur d'une page Web. Vous pouvez utiliser les unités «VW» (largeur de la fenêtre) et «VH» (hauteur de la fenêtre) en CSS pour dimensionner les éléments par rapport à la fenêtre. Cela peut être particulièrement utile pour créer des conceptions réactives qui s'adaptent à différentes tailles d'écran.
Oui, CSS peut être utilisé pour créer des gradients. Les fonctions «linéaire-gradient» et «radiale» dans CSS vous permettent de créer des transitions lisses entre deux couleurs ou plus. Cela peut être un outil puissant pour améliorer l'esthétique d'un site Web.
Un «pseudo-élément» dans CSS est utilisé pour styliser des parties spécifiques d'un élément. Par exemple, les pseudo-éléments «:: avant» et «:: après» sont utilisés pour insérer le contenu avant ou après le contenu d’un élément. Cela peut être utile pour ajouter des fonctionnalités décoratives à un site Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
