Propriétés Css et les navigateurs Web
Comme il est toujours intéressant d’avoir une liste des propriétés Css et leurs compatibiltés 
avec les différents navigateurs je vous présente donc sur cette page est une liste non exhaustive des propriétés CSS qui existent.
Le but n’étant pas de lister toutes les propriétés (il y en a trop) mais de présenter les plus utilisées avec un description et leurs compatibilités avec les différents navigateurs.
Compatibilité navaigateurs: IE: Internet Explorer, M: Mac IE only, F: Firefox, N: Netscape.
W3C: la valeur de la colonne « W3C » indiques dans quel CSS recommandation la propriété est définie(CSS1 or CSS2).
Background
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| background | Un raccourci pour définir toutes les propriétés dans un contexte de déclaration | background-color background-image background-repeat background-attachment background-position |
4 | 1 | 6 | 1 |
| background-attachment | Indique si une image de fond est fixe ou défile avec le reste de la page | scroll fixed |
4 | 1 | 6 | 1 |
| background-color | Définit la couleur d’arrière-plan d’un élément | color-rgb color-hex color-name transparent |
4 | 1 | 4 | 1 |
| background-image | Définit une image comme arrière-plan | url(URL) none |
4 | 1 | 4 | 1 |
| background-position | Définit la position de départ d’une image d’arrière-plan | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
4 | 1 | 6 | 1 |
| background-repeat | Définit comment une image d’arrière-plan sera répété | repeat repeat-x repeat-y no-repeat |
4 | 1 | 4 | 1 |
Border
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| border | Un raccourci pour définir toutes les propriétés pour les quatre frontières dans une déclaration | border-width border-style border-color |
4 | 1 | 4 | 1 |
| border-bottom | Un raccourci pour définir toutes les propriétés pour la bordure inférieure dans une déclaration | border-bottom-width border-style border-color |
4 | 1 | 6 | 1 |
| border-bottom-color | Définit la couleur de la bordure inférieure | border-color | 4 | 1 | 6 | 2 |
| border-bottom-style | Définit le style de la bordure inférieure | border-style | 4 | 1 | 6 | 2 |
| border-bottom-width | Fixe la largeur de la bordure inférieure | thin medium thick length |
4 | 1 | 4 | 1 |
| border-color | Définit la couleur des quatre frontières, peut avoir d’un à quatre couleurs | color | 4 | 1 | 6 | 1 |
| border-left | Un raccourci pour définir toutes les propriétés pour la bordure gauche dans une déclaration | border-left-width border-style border-color |
4 | 1 | 6 | 1 |
| border-left-color | Définit la couleur de la bordure gauche | border-color | 4 | 1 | 6 | 2 |
| border-left-style | Définit le style de la bordure gauche | border-style | 4 | 1 | 6 | 2 |
| border-left-width | Définit la largeur de la bordure gauche | thin medium thick length |
4 | 1 | 4 | 1 |
| border-right | Un raccourci pour définir toutes les propriétés pour la bordure droite dans une déclaration | border-right-width border-style border-color |
4 | 1 | 6 | 1 |
| border-right-color | Définit la couleur de la bordure droite | border-color | 4 | 1 | 6 | 2 |
| border-right-style | Définit le style de la bordure droite | border-style | 4 | 1 | 6 | 2 |
| border-right-width | Indique la largeur de la bordure droite | thin medium thick length |
4 | 1 | 4 | 1 |
| border-style | Définit le style des quatre frontières, peut avoir d’un à quatre styles | none hidden dotted dashed solid double groove ridge inset outset |
4 | 1 | 6 | 1 |
| border-top | Un raccourci pour définir toutes les propriétés pour la bordure supérieure dans une déclaration | border-top-width border-style border-color |
4 | 1 | 6 | 1 |
| border-top-color | Définit la couleur de la bordure supérieure | border-color | 4 | 1 | 6 | 2 |
| border-top-style | Définit le style de la bordure supérieure | border-style | 4 | 1 | 6 | 2 |
| border-top-width | Définit la largeur de la bordure supérieure | thin medium thick length |
4 | 1 | 4 | 1 |
| border-width | Un raccourci pour définir la largeur des quatre frontières dans une déclaration, peut avoir d’un à quatre valeurs | thin medium thick length |
4 | 1 | 4 | 1 |
Classification
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| clear | Définit les côtés d’un élément flottant où les autres éléments ne sont pas admis | left right both none |
4 | 1 | 4 | 1 |
| cursor | Spécifie le type de curseur à afficher | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
4 | 1 | 6 | 2 |
| display | Définit comment / si un élément est affiché | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
4 | 1 | 4 | 1 |
| float | Définit où une image ou un texte paraîtra dans un autre élément | left right none |
4 | 1 | 4 | 1 |
| position | Lieux d’un élément dans une statique, relative, absolue ou de position fixe | static relative absolute fixed |
4 | 1 | 4 | 2 |
| visibility | Définit si un élément doit être visible ou invisible | visible hidden collapse |
4 | 1 | 6 | 2 |
Dimension
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| height | Définit la hauteur d’un élément | auto length % |
4 | 1 | 6 | 1 |
| line-height | Définit la distance entre les lignes | normal number length % |
4 | 1 | 4 | 1 |
| max-height | Définit la hauteur maximale d’un élément | none length % |
- | 1 | 6 | 2 |
| max-width | Définit la largeur maximale d’un élément | none length % |
- | 1 | 6 | 2 |
| min-height | Définit la taille minimum d’un élément | length % |
- | 1 | 6 | 2 |
| min-width | Définit la largeur minimale d’un élément | length % |
- | 1 | 6 | 2 |
| width | Fixe la largeur d’un élément | auto % length |
4 | 1 | 4 | 1 |
Font
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| font | Un raccourci pour définir toutes les propriétés d’une police dans une déclaration | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
4 | 1 | 4 | 1 |
| font-family | Une liste hiérarchisée de noms de famille de polices et / ou des noms de famille générique pour un élément | family-name generic-family |
3 | 1 | 4 | 1 |
| font-size | Définit la taille de la police | xx-small x-small small medium large x-large xx-large smaller larger length % |
3 | 1 | 4 | 1 |
| font-size-adjust | Précise un aspect de valeur pour un élément qui permettra de préserver les x-hauteur de la police de premier choix | none number |
- | - | - | 2 |
| font-stretch | Condense ou agrandit la famille de polices | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
- | - | - | 2 |
| font-style | Définit le style de la police | normal italic oblique |
4 | 1 | 4 | 1 |
| font-variant | Affiche le texte dans un petit-caps police ou une police normale | normal small-caps |
4 | 1 | 6 | 1 |
| font-weight | Définit le poids d’une police | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
4 | 1 | 4 | 1 |
Contenu
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| content | Génère contenu dans un document. Used with the :before and :after pseudo-elements Utilisé avec l’: avant et après pseudo-éléments | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |
1 | 6 | 2 | |
| >counter-increment | Détermine le niveau des augmentations sur le comptoir chaque occurrence d’un sélecteur | none identifier number |
2 | |||
| counter-reset | Définit la valeur du compteur est fixé à chaque occurrence d’un sélecteur | none identifier number |
2 | |||
| quotes | Indique le type de guillemets | none string string |
- | 1 | 6 | 2 |
Liste et Marqueur
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| list-style | Un raccourci pour définir toutes les propriétés d’une liste en une seule déclaration | list-style-type list-style-position list-style-image |
4 | 1 | 6 | 1 |
| list-style-image | Définit une image comme élément de la liste-marqueur | none url |
4 | 1 | 6 | 1 |
| list-style-position | Définit où la liste du point marqueur est placé dans la liste | inside outside |
4 | 1 | 6 | 1 |
| list-style-type | Définit le type de la liste du point marqueur | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
4 | 1 | 4 | 1 |
| marker-offset | auto length |
1 | 7 | 2 |
Margin
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| margin | Un raccourci pour définir la marge de propriétés dans une déclaration | margin-top margin-right margin-bottom margin-left |
4 | 1 | 4 | 1 |
| margin-bottom | Définit la marge du bas d’un élément | auto length % |
4 | 1 | 4 | 1 |
| margin-left | Définit la marge de gauche d’un élément | auto length % |
3 | 1 | 4 | 1 |
| margin-right | Définit la marge droite d’un élément | auto length % |
3 | 1 | 4 | 1 |
| margin-top | Définit la marge du haut d’un élément | auto length % |
3 | 1 | 4 | 1 |
Outlines
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| outline | Un raccourci pour définir toutes les propriétés d’une esquisse de déclaration | outline-color outline-style outline-width |
- | 1.5 | - | 2 |
| outline-color | Définit la couleur du contour autour d’un élément | color invert |
- | 1.5 | - | 2 |
| outline-style | Définit le style de l’esquisse autour d’un élément | none dotted dashed solid double groove ridge inset outset |
- | 1.5 | - | 2 |
| outline-width | Définit la largeur du contour autour d’un élément | thin medium thick length |
- | 1.5 | - | 2 |
Padding
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| padding | Un raccourci pour définir l’ensemble des propriétés de rembourrage en une seule déclaration | padding-top padding-right padding-bottom padding-left |
4 | 1 | 4 | 1 |
| padding-bottom | Définit le rembourrage bas d’un élément | length % |
4 | 1 | 4 | 1 |
| padding-left | Définit le padding gauche d’un élément | length % |
4 | 1 | 4 | 1 |
| padding-right | Définit le droit de remplissage d’un élément | length % |
4 | 1 | 4 | 1 |
| padding-top | Définit le top padding d’un élément | length % |
4 | 1 | 4 | 1 |
Positionnement
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| bottom | Détermine dans quelle mesure le bord inférieur d’un élément est au-dessus ou au-dessous du bord inférieur de l’élément parent | auto % length |
5 | 1 | 6 | 2 |
| clip | Définit la forme d’un élément. The element is clipped into this shape, and displayed L’élément est clipsé à cette forme, et affichés | shape auto |
4 | 1 | 6 | 2 |
| left | Détermine dans quelle mesure le bord gauche d’un élément est à la droite / gauche du bord gauche de l’élément parent | auto % length |
4 | 1 | 4 | 2 |
| overflow | Détermine ce qui se passe si le contenu d’un élément de dépassement de sa zone | visible hidden scroll auto |
4 | 1 | 6 | 2 |
| position | Lieux d’un élément dans une statique, relative, absolue ou de position fixe | static relative absolute fixed |
4 | 1 | 4 | 2 |
| right | Détermine dans quelle mesure le bord droit d’un élément est à la gauche / droite de la droite de l’élément parent | auto % length |
5 | 1 | 6 | 2 |
| top | Détermine dans quelle mesure le bord supérieur d’un élément est au-dessus ou au-dessous du rebord supérieur de l’élément parent | auto % length |
4 | 1 | 4 | 2 |
| vertical-align | Définit l’alignement vertical d’un élément | baseline sub super top text-top middle bottom text-bottom length % |
4 | 1 | 4 | 1 |
| z-index | Définit la pile ordre d’un élément | auto number |
4 | 1 | 6 | 2 |
Table
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| border-collapse | Indique si la table frontières sont regroupés en une seule frontière ou individuelle comme dans le standard HTML | collapse separate |
5 | 1 | 7 | 2 |
| border-spacing | Définit la distance qui sépare les cellules frontières (seulement pour les «séparés frontières » modèle) | length length | 5M | 1 | 6 | 2 |
| caption-side | Définit la position de la légende d’un tableau | top bottom left right |
5M | 1 | 6 | 2 |
| empty-cells | Définit s’il faut ou non montrer des cellules vides dans un tableau (uniquement pour les « frontières séparés » modèle) | show hide |
5M | 1 | 6 | 2 |
| table-layout | Définit l’algorithme utilisé pour afficher le tableau de cellules, de lignes et de colonnes | auto fixed |
5 | 1 | 6 | 2 |
Texte
| Propriétés | Description | Valeurs | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| color | Définit la couleur d’un texte | color | 3 | 1 | 4 | 1 |
| direction | Définit la direction du texte | ltr rtl |
6 | 1 | 6 | 2 |
| line-height | Définit la distance entre les lignes | normal number length % |
4 | 1 | 4 | 1 |
| letter-spacing | Augmenter ou diminuer l’espace entre les caractères | normal length |
4 | 1 | 6 | 1 |
| text-align | Aligne le texte dans un élément | left right center justify |
4 | 1 | 4 | 1 |
| text-decoration | Détermine la décoration de texte | none underline overline line-through blink |
4 | 1 | 4 | 1 |
| text-indent | Indente la première ligne de texte dans un élément | length % |
4 | 1 | 4 | 1 |
| text-shadow | Détermine l’ombrage de l’élément | none color length |
||||
| text-transform | Contrôles les lettres d’un élément | none capitalize uppercase lowercase |
4 | 1 | 4 | 1 |
| unicode-bidi | normal embed bidi-override |
5 | 2 | |||
| white-space | Définit comment blanc espace à l’intérieur d’un élément est traité | normal pre nowrap |
5 | 1 | 4 | 1 |
| word-spacing | Augmenter ou diminuer l’espace entre les mots | normal length |
6 | 1 | 6 | 1 |
Pseudo-classes
| Pseudo-class | Purpose | IE | F | N | W3C |
|---|---|---|---|---|---|
| :active | Ajoute un style activé à un élément | 4 | 1 | 8 | 1 |
| :focus | Ajoute un style à un élément alors que l’élément a focus | - | 1.5 | 8 | 2 |
| :hover | Ajoute un style à un élément lorsque vous passez la souris sur celui-ci | 4 | 1 | 7 | 1 |
| :link | Ajoute un style à un lien | 3 | 1 | 4 | 1 |
| :visited | Ajoute un style à un lien visité | 3 | 1 | 4 | 1 |
| :first-child | Ajoute un style à un élément qui est le premier enfant d’un autre élément | - | 1 | 7 | 2 |
| :lang | Permet à l’auteur de spécifier une langue à utiliser dans un élément spécifié | - | 1 | 8 | 2 |
Pseudo-elements
| Pseudo-element | Purpose | IE | F | N | W3C |
|---|---|---|---|---|---|
| :first-letter | Ajoute un style à la première lettre d’un texte | 5 | 1 | 8 | 1 |
| :first-line | Ajoute un style à la première ligne d’un texte | 5 | 1 | 8 | 1 |
| :before | Insére du contenu avant un élément | 1.5 | 8 | 2 | |
| :after | Insére de contenu après un élément | 1.5 | 8 | 2 |
Loading ...