Hello,
Très belle présentation
ce qui est plutôt rare pour un tuto sur developpez.com
J' ai quelques remarques suite à un parcours rapide d'une partie du glossaire (je suis incapable de lire un truc de bout en bout ):
- concernant l'indication de comptabilité, je trouve qu'il faudrait indiquer d'une manière ou d'une autre lorsque le support n'est que partiel rapport à la liste de valeurs que tu énonces en-dessous (genre un astérisque ?). Quand je vois IE5 presque partout, laissant penser que IE est avant-gardiste en la matière (même s'il l'était à l'époque), j'avoue que cela fausse un peu la réalité de ces 10 dernières années ^^
- Dans la même idée on pourrait peut-être spécifier que la version css indiquée correspond à l'introduction de la propriété dans la recommandation, mais que certaines des valeurs énoncées ont été ajoutées au fil des versions (l'idéal serait d'avoir la version pour chaque valeur je pense aux valeurs de la propriété display, par exemple)
font : regroupe dans n'importe quel ordre les valeurs de font-weight, font-style, font-size, font-variant, font-family.
Seul le nom de la police (font-family) doit être placé en dernier dans la liste.
Vous n'êtes pas obligé de mettre une valeur de chacune de ces propriétés.
C'est inexact, selon la syntaxe décrite:
[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
A moins de l'utilisation d'une des valeurs (caption | icon | menu | message-box | small-caption | status-bar | inherit), le font size et le font-family sont tous les deux obligatoires et dans cet ordre (avec éventuellement le line-heigh entre deux).
'font-style' || 'font-variant' || 'font-weight' sont optionels, dans n'importe quel ordre, mais avant le font-size.
- Tu introduis certaines nouvelles propriétés ou valeurs css3, pourquoi ne pas parler de rgba pour les couleurs ?
width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore "auto" (valeur par défaut,
la largeur dépendra du contenu à l'intérieur).
Non, un élément par défaut, de type block, static et non flottant fixe sa largeur en fonction de son parent, pas de son contenu.
Perso je préfère parler d'espacement plutôt que de marges pour le padding. C'était aussi l'option retenue dans la traduction française de css2.
block : l'élément devient de type "block" (comme <p>). Un élément de type block ajoute un espace avant et après le bloc, ainsi qu'un saut de ligne ;
Je ne comprends pas le passage concernant l'ajout d'un espace avant et après le bloc ? Il serait plus judicieux de le comparer à un div plutôt qu'un p puisque le p comporte, par défaut, des marges qui n'ont rien à voir avec le block en lui-même.
hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée ;
Je préférerais parler de partie "cachée" ou "masquée" que "coupée".
scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement
pour qu'on puisse voir la suite du texte;
Je trouve qu'il est important de spécifier que les barres de défilement sont affichées même si elle ne sont pas nécessaires, ce qui fait justement la différence avec un scroll auto.
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.
Bien souvent, utiliser cette valeur revient à utiliser la valeur "scroll".
La phrase en gras n'apporte rien, si ce n'est une imprécision. Elle n'aura le même résultat qu'un scroll que si le contenu dépasse de l'élément autant en largeur qu'en hauteur.
float : permet de retirer un élément du flux normal et le place
à droite ou à gauche de son conteneur. Les éléments de type inline se répartiront autour de lui.
Je ne trouve pas la formulation très heureuse puisque dans le cas de deux float left, le deuxième viendra à la suite de l'autre (s'il a la place) et pourra donc se retrouver au centre ou à droite de son conteneur.
absolute : position absolue par rapport au coin en haut à gauche ;
fixed : position fixe. L'élément reste à sa position dans la page ;
Le positionnement absolu ne se fait pas en fonction du coin en haut et gauche mais en fonction des propriétés left right top et bottom, avec pour référence le plus proche ancêtre positionné ou, à défaut, la fenêtre de visualisation. Si aucune de ces propriétés n'est définie, il vient, sauf erreur, se positionner à l'endroit du flux.
Pour fixed, c'est la fenêtre de visualisation qui sert de référence à son positionnement. la formulation " L'élément reste à sa position dans la page" me semble incorrecte. La "page" représente pour moi tout le contenu, y compris un dépassement de la hauteur de l'écran alors que le fixed s'attache justement à la zone de visualisation et non la "page".
top - bottom - left - right : permet de définir la position d'un élément
par rapport à son conteneur. Valeur en px, %, em... À utiliser pour un positionnement absolu, fixe ou relatif.
cf plus haut pour le référent du absolute ou fixed; le terme "son conteneur" est imprécis.
Vu que, pour le relative, ce n'est pas en fonction de son conteneur mais de sa propre position dans le flux, la description devrait être revue.
list-style-position : permet de définir le retrait de la liste lorsque le contenu est sur plusieurs lignes.
Je ne sais pas si le terme "retrait de la liste" est vraiment approprié puisqu'il s'agit du positionnement de la puce qui sort carrément de sa boîte ?
Partager