IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Glossaire des propriétés CSS


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut Glossaire des propriétés CSS


    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



    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.

  2. #2
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Points : 3 861
    Points
    3 861
    Billets dans le blog
    6
    Par défaut
    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 !

  3. #3
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    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.

  4. #4
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031
    Par défaut
    Bonjour

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


  5. #5
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par Muchos Voir le message
    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.

  6. #6
    Expert éminent
    Avatar de kdmbella
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2010
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2010
    Messages : 799
    Points : 7 038
    Points
    7 038
    Par défaut
    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

  7. #7
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par kdmbella Voir le message
    salut ça c'est du super boulot !
    Déjà,

    Citation Envoyé par kdmbella Voir le message
    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.

  8. #8
    Invité
    Invité(e)
    Par défaut
    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.

  9. #9
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par jlmag Voir le message
    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

  10. #10
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 52
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    [ [ '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 ?

  11. #11
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Points : 3 861
    Points
    3 861
    Billets dans le blog
    6
    Par défaut
    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

  12. #12
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 890
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 890
    Points : 16 337
    Points
    16 337
    Par défaut
    Citation Envoyé par Mucho-s Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  13. #13
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    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.

  14. #14
    Responsable Perl et Outils

    Avatar de djibril
    Homme Profil pro
    Inscrit en
    Avril 2004
    Messages
    19 820
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 19 820
    Points : 498 771
    Points
    498 771
    Par défaut
    Bon boulot !
    J'avais l'habitude de regarder w3school, maintenant, je regarderai aussi ton glossaire.

  15. #15
    Membre actif
    Inscrit en
    Mars 2004
    Messages
    290
    Détails du profil
    Informations forums :
    Inscription : Mars 2004
    Messages : 290
    Points : 217
    Points
    217
    Par défaut
    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.

  16. #16
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par gui80 Voir le message
    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

  17. #17
    Invité
    Invité(e)
    Par défaut
    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é */

  18. #18
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Hello,
    Une petite coquille dans "Propriétés de mise en forme d'arrière-plans" -> "Fond tout-en-un | background" :
    Corrigé. Merci.

  19. #19
    Rédacteur

    Avatar de ram-0000
    Homme Profil pro
    Consultant en sécurité
    Inscrit en
    Mai 2007
    Messages
    11 517
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Consultant en sécurité
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2007
    Messages : 11 517
    Points : 50 367
    Points
    50 367
    Par défaut
    J'applaudis des 2 mains le boulot

  20. #20
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Points : 3 861
    Points
    3 861
    Billets dans le blog
    6
    Par défaut
    Au fait, est-ce qu'un lien vers ce glossaire pourrait être inclu dans la liste des tutos CSS ?

Discussions similaires

  1. Glossaire des propriétés CSS
    Par Torgar dans le forum Mise en page CSS
    Réponses: 26
    Dernier message: 12/10/2012, 20h16
  2. [CSS/Javascript] Changement des propriété CSS dynamiquement
    Par heladar dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 06/02/2009, 12h33
  3. Supprimer des propriétés CSS par surcharge
    Par jojosbiz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/10/2007, 07h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo