[Article] Glossaire des propriétés CSS

[Torgar]

Je vous propose aujourd'hui un petit glossaire sur les propriétés CSS les plus couramment utilisées : Glossaire CSS.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

Glossaire CSS

[Muchos]

C'est super ! Très bien organisé et présenté.

Une remarque : la version de css pour chaque propriété n'est pas donné. Mais il y a le support minimum par grands navigateurs, c'est cool !

[Torgar]

Tout d'abord merci

C'est une chose que je peux rajouter en effet. Je sais qu'il y a des propriétés qui ont été implantées en CSS 2, puis supprimées en CSS 2.1 et enfin remisent en CSS 3. Des trucs comme ça...

Je vais voir comment rajouter ça.

[12monkeys]

Bonjour

Vraiment du très bon boulot , voilà quelque chose qui manquait à developpez

[Torgar]

Envoyé par Muchos

Une remarque : la version de css pour chaque propriété n'est pas donné. Mais il y a le support minimum par grands navigateurs, c'est cool !

Fait.

[kdmbella]

salut ça c'est du super boulot ! le seul problème c'est qu'il n'y a pas possibilité de le télécharger pour une consultation hors ligne mais c'est déjà super

[Torgar]

Envoyé par kdmbella

salut ça c'est du super boulot !

Déjà,

Envoyé par kdmbella

le seul problème c'est qu'il n'y a pas possibilité de le télécharger pour une consultation hors ligne mais c'est déjà super

Ensuite, comme demandé, à la fois ici, et en MP, je vais voir ce qu'il m'est possible de faire pour au moins générer un PDF.

La présentation sera différente de la version Web et les quelques évènements jQuery ne seront pas reportés, cela va de soi...

Je vous tiendrai informé ici de l'avancée de cette tâche.

[jlmag]

Hello,

Bon boulot!

Une rectification est à faire il me semble dans "Propriétés de mise en forme des boîtes".
Sur "Marge intérieure droite | padding-right", la class "p-right2" n'est pas utilisée, donc pas d'effet escompté.

Voili, voilà....

PS: je n'ai pas tout lu.

[Torgar]

Envoyé par jlmag

Hello,

Bon boulot!

Une rectification est à faire il me semble dans "Propriétés de mise en forme des boîtes".
Sur "Marge intérieure droite | padding-right", la class "p-right2" n'est pas utilisée, donc pas d'effet escompté.

Voili, voilà....

PS: je n'ai pas tout lu.

T'es sûr ? ..... Merci, corrigé. Si il y en a d'autres, n'hésites pas

[Candygirl]

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:

Code :

[ [ '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.

Marges intérieures

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 ?

[Muchos]

Envoyé par Candygirl

(A propos de width: auto) 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.

Je pense comme Torgar. C'est width: inherit; qui fixe la largeur en fonction du parent.

Par contre, +1 pour toutes les remarques suivantes

[Bisûnûrs]

Envoyé par Mucho-s

Je pense comme Torgar. C'est width: inherit; qui fixe la largeur en fonction du parent.

Un élément de type block (comme un div), prend tout l'espace disponible en largeur, s'il n'est pas en position absolue/fixe ou flottant. Ce n'est pas en fonction du contenu (spécificité des éléments en ligne).

Exemple :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="fr">
<head>
   <meta charset="iso-8859-1"/>
   <title>Titre</title>
</head>
<body>
 
<div style="background-color:red;">Coucou</div>
 
</body>
</html>

[Torgar]

Salut,

@Candygirl : toutes tes remarques ont été prises en compte et sont d'ores et déjà en ligne.

En ce qui concerne le rgba, c'est tout simplement parce que c'est un glossaire évolutif au fil du temps. Je me suis d'abord concentré sur les propriétés et valeurs les plus employées. Rajouter le rgba est dans ma liste, ainsi que @charset, @import, @media, @page, les transitions, les sélecteurs et pseudo-classes, et autres propriétés CSS 3. Cette liste n'est pas exhaustive.

Pour width, c'est une erreur de ma part

Merci.

[djibril]

Bon boulot !
J'avais l'habitude de regarder w3school, maintenant, je regarderai aussi ton glossaire.

[gui80]

Bravo Torgar pour ce glossaire.

Par contre, il y a quelque chose qui serait important de mettre concernant les valeurs possibles pour une propriété.
Ce serait de préciser si une valeur est non valide avec un navigateur supportant cette propriété (bien sûr si c'est valide pour l'ensemble des navigateurs qui supportent la propriété, pas besoin d'indication).

Je pense par exemple à la partie "Positionnement" pour la propriété "display".
Certaines valeurs ne sont pas supportées par tous.

[Torgar]

Envoyé par gui80

Bravo Torgar pour ce glossaire.

Par contre, il y a quelque chose qui serait important de mettre concernant les valeurs possibles pour une propriété.
Ce serait de préciser si une valeur est non valide avec un navigateur supportant cette propriété (bien sûr si c'est valide pour l'ensemble des navigateurs qui supportent la propriété, pas besoin d'indication).

Je pense par exemple à la partie "Positionnement" pour la propriété "display".
Certaines valeurs ne sont pas supportées par tous.

Demande ajoutée à ma liste des choses à faire

[jreaux62]

Hello,
Une petite coquille dans "Propriétés de mise en forme d'arrière-plans" -> "Fond tout-en-un | background" :

background: url("./images/background.png") no-repeat top right; /* l'image reste en haut à gauche de l'écran et n'est pas répété */

[Torgar]

Envoyé par jreaux62

Hello,
Une petite coquille dans "Propriétés de mise en forme d'arrière-plans" -> "Fond tout-en-un | background" :

Corrigé. Merci.

[ram-0000]

J'applaudis des 2 mains le boulot

[Muchos]

Au fait, est-ce qu'un lien vers ce glossaire pourrait être inclu dans la liste des tutos CSS ?