Glossaire des propriétés CSS

:salut:

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 !

:fleche: Glossaire CSS

:merci:

EDIT 06/12/2013

Ce glossaire vient d'être mis à jour.
Un chapitre contours (propriétés outline) a été ajouté aux Propriétés de mise en forme des boîtes.
Une partie entière est consacrée aux Propriétés de transformation et d'animation.
Un préambule présente les préfixes vendeurs.

N'hésitez pas à faire part d'éventuelles erreurs ou imprécisions.

Vous pouvez aussi participer à l'enrichissement de ce glossaire : n'hésitez pas à faire vos propositions.

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 !

Tout d'abord merci :ccool:

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.

Bonjour

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

:merci:

Citation:

---

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.

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 :ccool:

Citation:

---

Envoyé par kdmbella

salut ça c'est du super boulot !

---

Déjà, :merci:

Citation:

---

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 :ccool:

---

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.

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.

Citation:

---

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 ? :aie:..... Merci, corrigé. Si il y en a d'autres, n'hésites pas ;)

Hello,

Très belle présentation :ccool:
ce qui est plutôt rare pour un tuto sur developpez.com :dehors:

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 :aie: je pense aux valeurs de la propriété display, par exemple)

Citation:

---

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 ?

Citation:

---

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.

Citation:

---

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.

Citation:

---

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.

Citation:

---

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".

Citation:

---

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.

Citation:

---

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.

Citation:

---

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.

Citation:

---

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".

Citation:

---

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.

Citation:

---

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 ?

Citation:

---

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 :D

Citation:

---

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:

---

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>

---

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 :oops:

Merci.

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

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.

Citation:

---

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 ;)

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

Citation:

---

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é */

---

Citation:

---

Envoyé par jreaux62

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

---

Corrigé. Merci.

J'applaudis des 2 mains le boulot :bravo:

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

Bonjour Togar,
S'il te plait quand pourrons nous avoir une version zippée téléchargeable de ce cours ? J'en ai énormément besoin vu que je n'ai pas tout le temps une connexion internet. :cry:

Bientôt bientôt :aie:

C'est en cours de validation ! Je ne vous ai pas oublié ;)

J'ai également rajouté des notes concernant la compatibilité de certaines valeurs de propriétés quand il est nécessaire de le préciser.

:salut:

J'ai le plaisir de vous annoncer que la version hors-ligne est disponible :)

Elle est accessible en bas de chaque page de ce glossaire.

Bon téléchargement ;)

Great Job :ccool: je télécharge tout de suite ;)

Merci beaucoup. :ccool::ccool: Je le telecharge immediatement !!!

Bonjour,
concernant http://css.developpez.com/tutoriels/...?page=tableaux

il me semble qu'il serait intéressant de rajouter les propriétés
- table-layout
- border-spacing

PS: je ne peux que me joindre aux autres intervenants pour saluer cet EXCELLENT travail :ccool:

Bonsoir,

Je tenterai de les rajouter ce week-end et mettrai la nouvelle version en téléchargement.

Merci votre intérêt et vos messages :ccool:

Edit : Les obligations salariales étant prioritaires, je n'ai pas encore eu le temps d'intégrer cette demande. Je reviens vers vous quand c'est chose faite. Merci de votre compréhension.

Bonjour à tous,

Grâce à l'aimable et généreuse participation de djibril, ce glossaire est maintenant au gabarit de DVP et offre ainsi les avantages qui en découlent comme : le format PDF, Ebooks, etc.

La maintenance n'en sera que plus simple avec cette nouvelle présentation.

Encore merci à djibril ^^

je trouvais l'ancienne version plus FUN, et en plus il faut que je remarques les pages, non là je déco??es.

Néanmoins il risque d'y avoir pas mal de lien mort sur le forum, j'ai usé très largement de lien vers ton travail,.

Pour exemple le lien que j'ai mis dans mon message ci dessus, tiens d'ailleurs :whistle2: elle est où la mise à jour.

Bon boulot quoiqu'il en soit :ccool:

Une redirection de l'ancienne version vers la nouvelle sera mise en place et les liens seront changés au fur et à mesure qu'ils sont découvert sur le forum.

Merci beaucoup pour le glossaire.
Par contre , j'ai l'impression que dans le fichier PDF les aperçu ne sont pas visible :(

C'est un peu normal tu ne crois pas ?
Acrobat (ou autre lecteur PDF) a un peu de mal à interpréter du code HTML / CSS... :mrgreen:

Citation:

---

Envoyé par Bovino

C'est un peu normal tu ne crois pas ?
Acrobat (ou autre lecteur PDF) a un peu de mal à interpréter du code HTML / CSS... :mrgreen:

---

:ptdr:

:salut:

Ce glossaire vient d'être mis à jour.
Un chapitre contours (propriétés outline) a été ajouté aux Propriétés de mise en forme des boîtes.
Une partie entière est consacrée aux Propriétés de transformation et d'animation.
Un préambule présente les préfixes vendeurs.

N'hésitez pas à faire part d'éventuelles erreurs ou imprécisions.

Vous pouvez aussi participer à l'enrichissement de ce glossaire : n'hésitez pas à faire vos propositions.

:fleche: Glossaire des propriétés CSS

:merci:

Voilà une nouvelle qu'elle est bonne!
:merci:

Juste pour savoir, pourquoi le clic sur Lire l'article pointe vers la page des préfixes ?

Parce que certaines propriétés doivent être préfixées pour chaque navigateur. Un petit rappel sur ce que sont les préfixes n'est pas négligeable.

D'autant plus que notre bovin adoré indique dans la partie sur les animations/transitions quelle propriété est à utiliser pour le visiteur, préfixe ou non.

D'autre mises à jour viendront courant décembre.

Ballot que je suis je n'ai pas fait le rapprochement entre les deux.

Bonjour,

Sur cette page de l'excellent glossaire, il y a une coquille.

Je pense qu'un commentaire s'est glissé.

Bien à vous.

Effectivement.
C'est maintenant corrigé.

:merci: