Résultats du Quiz CSS moyen

Parmi ces propriétés, laquelle permet, sur les navigateurs qui la supportent, d'appliquer une largeur de 100% - 50px à l'élément concerné ?

• width: auto - 50px;
• width: 100%- 50px;
• width: calc(100%- 50px);
• width: #captain.flam;

Comment faire pour qu'une div prenne toute la largeur disponible dans son bloc conteneur ?

• div {width: 100%; padding: 10%;}
• div {min-width: 100%;}
• div {width: 80%; padding: 10%;}
• C'est automatique, pas besoin de spécifier une largeur.

Tous les éléments de type bloc prennent par défaut toute la largeur disponible dans leur bloc conteneur. Il n'est donc pas nécessaire de préciser une largeur si ce comportement par défaut répond à nos attentes.

Il serait bien entendu techniquement possible de donner une largeur de 100% à un élément de type bloc, mais c'est inutile. Et non seulement c'est inutile, mais en plus c'est potentiellement dangereux : il suffit alors de rajouter une bordure ou des marges internes (padding) pour que la largeur totale du bloc augmente, dépassant celle du conteneur.

De plus, ne pas figer la largeur du bloc permet de réaliser des mises en page plus souples, où les bordures et marges internes viendront se retrancher à la largeur totale.

A quoi sert le sélecteur CSS3 "h1 ~ p", reconnu depuis IE7 ?

• à cibler tous les paragraphes qui suivent un titre h1
• à cibler les éléments h1 s'ils contiennent un paragraphe
• à cibler tous les titres et paragraphes de la page
• à cibler tantôt un titre h1, tantôt un paragraphe

Le positionnement relatif (position: relative)...

• permet de positionner un élément par rapport à un autre élément, pris comme repère;
• permet de positionner un élément par rapport aux limites de son élément parent;
• permet de décaler un élément A par rapport à sa position "normale", en flux
• permet d'appliquer la théorie de la relativité générale ET la théorie de la relativité restreinte à une mise en page.

Le positionnement relatif permet de décaler un élément A par rapport à sa position "normale", en flux.

Explication : le positionnement relatif est très semblable au positionnement statique (position: static) qu'adoptent par défaut les éléments d'une page.
Un élément positionné en relatif prendra sa place normale dans le flux du document (en fonction de la succession des éléments dans le code HTML, des marges des éléments, des éléments flottants...), mais sera décalé par rapport à cette position de base.

Exemple :

div {
position: relative;
left: -100px;
}

Où se placera un élément positionné en absolu (position: absolute) avec left: 100px ?

• À 100px du bord gauche de la fenêtre du navigateur;
• À 100px du bord gauche de l'élément html;
• À 100px du bord gauche de l'élément body;
• À 100px du bord gauche de son élément parent;
• À 100px du bord gauche de son plus proche ancêtre positionné.

Explication : On pense souvent que les éléments positionnés en absolu se placent, à l'aide des propriétés top, right, bottom et left, par rapport aux limites de la zone d'affichage du navigateur, ou bien par rapport aux limites de l'élément body.
Mais pour être très exact, un élément positionné en absolu, si on utilise les propriétés top, right, bottom et left (ce qui n'est pas nécessairement le cas), se placera par rapport aux limites de son plus proche ancêtre positionné.
On dit qu'un élément est positionné lorsque la valeur de la propriété position pour cet élément est absolute, fixed ou relative.
En l'absence d'élément parent ou d'ancêtre positionné, le référent utilisé sera la fenêtre du navigateur (ou, pour certains navigateurs, l'élément html, ce qui revient généralement au même).

Comment cibler les 4 premiers éléments d'une liste ?

• li:nth-child(4n)
• li:nth-child(-n+4)
• li:nth-child(4-n)
• li:nth-child(substr(4))

Comment cibler tous les liens de la page sauf ceux qui contiennent la chaîne "alsacreations" ?

• a:not([href*="alsacreations"])
• a[href!="alsacreations"]
• a![href*="alsacreations"]
• a![href$="alsacreations"]

Comment charger une feuille de style uniquement pour une fenêtre au format paysage ?

• <link rel="stylesheet" size="landscape" href="styles.css">
• <link rel="stylesheet" media="screen" size="landscape" href="styles.css">
• <link rel="stylesheet" media="landscape" href="styles.css">
• <link rel="stylesheet" media="(orientation : landscape)" href="styles.css">

Où va se positionner un élément doté d'une déclaration transform: translate(0,100px) ?

• Poussé vers le bas de 100px
• Poussé vers la droite de 100px
• Poussé tantôt à droite tantôt vers le bas selon son positionnement
• Je préfère ne pas le dire

Si j'écris a:active {color: red;} dans ma feuille de style, quels liens seront de couleur rouge ?

• les liens pointant vers des pages mises à jour régulièrement
• les liens pointant vers la page en cours (par exemple dans un menu de navigation)
• n'importe quel lien de la page, mais uniquement au moment où on clique sur ce lien
• n'importe quel lien de la page, mais uniquement au moment où on survole ce lien avec le pointeur de la souris

La pseudo-classe CSS :active permet de passer des propriétés CSS à une ancre (un lien), propriétés qui ne s'appliqueront qu'à l'état "activé", c'est à dire au moment où on active le lien avec la souris, en cliquant dessus.

Attention à ne pas la confondre avec la pseudo-classe :hover, qui correspond à l'état "survolé" d'un lien.

Enfin, et malgré son nom, la pseudo-classe :active ne peut pas servir à indiquer visuellement à un utilisateur à quel élément d'un menu de navigation correspond la page en cours (ou page "active"). Ce type d'indication devra être géré avec d'autres moyens que les feuilles de style CSS.