3 choses (presque) personne ne connaît CSS

Test des conseils CSS: Comprenez-vous vraiment CSS?

Revue des points clés

• La meilleure façon de régler la hauteur de double ligne est d'utiliser des nombres sans unité (par exemple 2), de sorte que les éléments enfants avec différentes tailles de police peuvent hériter du rapport de hauteur de ligne correct.
• Bien que l'idée fausse générale que z-index provoque elle-même le chevauchement, les éléments HTML peuvent en fait être chevauchés par l'attribut margin (en particulier la définition de marges négatives).
• Les pseudo-éléments et les pseudo-classes sont des caractéristiques très différentes dans CSS: les pseudo-classes sont appliquées à des éléments HTML réels dans des conditions spécifiques, et les pseudo-éléments permettent le style de parties d'un document qui ne sont pas des éléments HTML réels.
• W3C tente de faire la distinction entre les pseudo-éléments et les pseudo-classes dans la spécification du sélecteur CSS3 en utilisant deux colons (::first-line) pour les sélecteurs de pseudo-éléments et un côlon (:hover) pour les sélecteurs pseudo-éléments, mais dans Ordonnance pour compatibilité, le navigateur doit prendre en charge les deux versions.

Pensez-vous que vous maîtrisez CSS? Si les résultats gratuits des tests CSS que j'ai fournis en ligne au cours des six derniers mois sont de toute référence, de nombreux développeurs expérimentés ne connaissent pas autant sur CSS qu'ils le pensent. Sur les plus de 3 000 personnes qui ont participé au test jusqu'à présent, le score moyen n'est que de 55%.

Cependant, la moyenne elle-même n'est pas si intéressante. Je veux en savoir plus sur l'endroit où les gens ont tort. Pour rédiger cet article, j'ai analysé les données et me suis concentré sur trois questions où les gens ont obtenu un score particulièrement bas. J'expliquerai chaque question une question, vous montrerai les réponses que la plupart des gens choisissent et expliquent les bonnes réponses.

Il est sûr de dire que si vous passez le test vous-même après avoir lu cet article, vous aurez un avantage injuste!

Problème 1: La meilleure façon de définir la hauteur de ligne

La première question devrait être facile pour les personnes qui travaillent régulièrement sur les styles de texte:

Vous voulez que le texte sur le site Web soit à double ligne élevé par défaut. Laquelle des valeurs line-height suivantes est le meilleur moyen d'y parvenir?

• 200%
• 2em
• 2
• double

Il y a quatre réponses au choix, et vous vous attendez à ce que 25% des personnes répondent correctement par chance, mais seulement 31% répondront correctement à cette question! Prenez le temps de choisir une réponse par vous-même et continuez à lire.

Tout d'abord, double est une distraction. line-height La seule valeur de mot-clé acceptée est normal. Je suis heureux de dire que seulement 9% des personnes ont choisi cette option. Les trois autres réponses sont très populaires.

La réponse que la plupart des gens ont choisie est 2em (39% ont choisi cette réponse). En fait, 2em fournira certainement des hauteurs de double ligne pour les éléments qui l'appliquent; mais 200% le fera aussi, et seulement 21% des personnes aiment cette réponse! Soit EM est plus populaire que les pourcentages, soit les gens ne les comprennent pas vraiment.

Cependant, la bonne réponse est 2.

J'ai été instillé avec cette leçon il y a longtemps lorsque j'ai appris le CSS pour la première fois. Spécifiez toujours line-height en tant que nombre sans unité;

Supposons que la page ait une taille de police par défaut de 12 pt, mais elle contient également un titre avec une taille de police de 24 pt. Si vous définissez le line-height du corps sur 2em (ou 200%), vous obtiendrez exactement 24 pt (deux fois la taille de la police du corps) la hauteur de la ligne dans tout le document - même dans ce titre. Le titre sera donc une hauteur à double ligne au lieu d'une hauteur de double ligne!

Au lieu de cela, le réglage line-height à 2 dira au navigateur de maintenir le rapport de taille / ligne de police même si la taille de la police change. La hauteur de ligne du corps sera de 24 pt, mais pour la police de 24 pt du titre, la hauteur de la ligne augmentera automatiquement à 48 pt.

Question 2: Comment faire chevaucher les éléments

Cette question est un peu délicate. Cela nécessite une expérience de «compétence» dont la disposition CSS nécessite souvent:

Lequel des attributs CSS suivants peut provoquer le chevauchement des éléments HTML?

• z-index
• margin
• overflow
• background

Avez-vous choisi la réponse? Ok, allons dans le plus profond.

Encore une fois, il y a une option facile à exclure: background. Tout le monde sauf 2% des testeurs l'ont évité parce qu'ils savaient qu'il contrôlait la couleur et l'image d'arrière-plan.

Malheureusement, la plupart des gens choisissent directement z-index. Jusqu'à 46% ont choisi cette réponse. Je suppose que c'est parce que personne ne comprend vraiment comment z-index fonctionne. En fait, la définition de l'attribut z-index n'a pas d'effet; vous devez également définir l'attribut position de l'élément pour faire fonctionner z-index. En bref, z-index vous permet de contrôler l'ordre d'empilement des éléments qui se chevauchent, mais ils doivent d'abord se chevaucher. MDN a un très bon article intitulé «Comprendre CSS Z-Index», qui vaut la peine d'être lu pour plus de détails.

Si vous avez déjà utilisé overflow, il devrait également être facile à exclure. Il contrôle le comportement du contenu qui ne convient pas à la taille de la boîte: qu'il soit tronqué, s'il s'écoule hors du bord de la boîte, etc. Encore une fois, cela dépend si la taille de la boîte est limitée par d'autres propriétés; Pourtant, 22% pensent que c'est le cas.

Cela nous laisse uniquement margin, qui est la bonne réponse. Seulement 30% des personnes ont répondu correctement. Vous pouvez être curieux de savoir comment un attribut qui crée des distances entre les éléments peut les faire se chevaucher. Si vous avez effectué une disposition CSS réelle, la réponse doit être évidente: les marges négatives entraîneront le chevauchement des éléments.

pour le démontrer, créez une page avec deux éléments div. Réglez le margin-top du deuxième div à une valeur négative, telle que -100px. Claquer! La deuxième div couvre désormais les cent bas de pixels de la première div.

En pratique, vous chevauchez à peine les blocs comme celui-ci, mais les marges négatives sont très utiles pour compresser des éléments HTML dans des endroits qu'ils ne vont généralement pas. Je les utilise souvent pour pousser des éléments qui flottent à gauche ou à droite dans la zone de remplissage de leur boîte parent.

Pour les amateurs d'histoire de la conception Web, l'utilisation d'éléments de chevauchement de marge négative en 2005 a fait trois dispositions de pages de colonnes, y compris la soi-disant une vraie mise en page (et plus tard la disposition du Saint Graal).

Problème 3: pseudo-éléments et pseudo-classes

J'avoue que la dernière question est un peu méprisable. Mais seulement 23% des testeurs ont pu répondre correctement à cette question (c'est pire que la chance!), Et cela a évidemment touché un point déroutant:

Lequel des effets suivants est le plus adapté à l'utilisation des pseudo-éléments à mettre en œuvre?

• Ajoutez une ombre à l'utilisateur lorsqu'il plane sur l'hyperlien.
• Lorsque la case est sélectionnée, les étiquettes de la case s'affichent en différentes couleurs.
• Attribuez des couleurs d'arrière-plan différentes aux rangées étranges et même des rangées de la table.
• Dans une disposition de page flexible, affichez la première ligne du paragraphe comme texte en gras.

Ces trois choix sont tous des effets mis en œuvre à l'aide de pseudo-classes; Pouvez-vous les distinguer?

Les pseudo-classes sont des états spécifiques dans lesquels l'élément HTML réel peut être. Considérez-le comme une classe virtuelle que le navigateur s'appliquera automatiquement aux éléments dans certaines conditions.

Le pseudo-élément fait partie du document, et même s'il ne s'agit pas d'un élément HTML réel, CSS vous permet de le coiffer. C'est comme un élément HTML virtuel - vous pouvez le coiffer même s'il n'y a pas de balise HTML réelle.

Avec cette différence, jetons un coup d'œil à ces options:

Ajoutez une ombre à l'utilisateur lorsqu'il plane sur l'hyperlien.

L'hyperlien est un élément HTML réel. L'appliquer des styles à lui uniquement dans des cas spécifiques (lorsque la souris plane dessus) signifie que nous utilisons des pseudo-classes. Dans ce cas, la pseudo-classe que vous utiliserez est :hover.

22% des testeurs considéraient qu'il s'agissait d'un pseudo-élément.

Lorsque la case est sélectionnée, les étiquettes de la case s'affichent en différentes couleurs.

De même, une balise est un élément HTML réel, pas un élément virtuel. Lorsque la case est sélectionnée, le navigateur applique la pseudo-classe :checked. Vous pouvez ensuite l'utiliser dans votre sélecteur pour styliser la case à cocher, ou même styliser l'étiquette à côté (par exemple, en utilisant le sélecteur de frère adjacent ).

20% des testeurs considéraient qu'il s'agissait d'un pseudo-élément.

Attribuez des couleurs d'arrière-plan différentes aux rangées étranges et même des rangées de la table.

C'est une question qui trompe vraiment les gens, mais encore une fois, nous parlons d'appliquer des styles aux éléments HTML réels (dans ce cas, des éléments tr). tr est-il étrange ou même dans l'ensemble des éléments enfants de son élément parent, qui est juste un autre cas où vous pouvez correspondre aux pseudo-classes.

Dans ce cas, la pseudo-classe est :nth-child(even) (ou :nth-child(2n)) pour même des éléments et :nth-child(odd) (ou :nth-child(2n 1)) pour les éléments impairs.

Je suppose que c'est simplement parce que :nth-child et les pseudo-éléments ressemblent généralement à des fonctionnalités CSS très obscures, mais 36% des testeurs ont choisi cela comme un pseudo-élément.

Dans une disposition de page flexible, affichez la première ligne du paragraphe comme texte en gras.

Bien sûr, c'est la bonne réponse. Jusqu'à présent, j'espère que la différence a été claire. Dans une disposition de page flexible, vous ne pouvez pas afficher le code HTML de la page et dire "les éléments là-bas ne contiennent que la première ligne du texte du paragraphe". Le navigateur enroule la ligne en fonction de la largeur du paragraphe, que vous ne pouvez pas contrôler dans une disposition de page flexible.

:first-line est un pseudo-élément qui vous permet d'appliquer des styles à la première ligne de texte dans un bloc, quelle que soit la première ligne rompue à la deuxième ligne.

Si vous pensez "d'accord, cela semble raisonnable, mais personne ne connaît la différence entre les pseudo-éléments et les pseudo-classes", alors W3C est d'accord avec vous. Dans la spécification du sélecteur CSS3, afin de distinguer les deux, il a changé la syntaxe de sorte que le sélecteur de pseudo-élément utilise deux colons (::first-line), tandis que la pseudo-classe utilise toujours un côlon (:hover). Bien sûr, pour une compatibilité arriérée, le navigateur doit prendre en charge les deux versions.

Alors oui, comme je l'ai dit: la question signifie. Mais bon, si vous êtes un geek CSS comme moi, je pense que vous connaissez la différence entre votre pseudo-élément et votre pseudo-classe.

Comment sont vos scores?

C'est comme ceci: trois puzzles dans le test. Si vous répondez à l'une de ces questions en toute confiance, vous faites du bon travail. Avez-vous répondu correctement deux? pas mal. Si vous répondiez correctement aux trois, j'aimerais entendre ce que vous pensez! Surtout après avoir donné ces réponses, j'ai vraiment besoin de questions CSS plus difficiles. Veuillez les poster dans les commentaires!

Si vous aimez ces questions, vous aimeriez peut-être essayer le reste des tests. Rassurez-vous, d'autres questions sont beaucoup plus faciles que celles-ci… la plupart d'entre elles!

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!