Cours CSS : Unités de Mesures

Problème à signaler:


Télécharger Cours CSS : Unités de Mesures



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Cours CSS : Unités de Mesures

...

CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une trentaine de modules distincts, dont une partie est encore à l’état de brouillon.

xt-align: justify;">Compatibilité avec les navigateurs

Parmi les 130 propriétés et 35 sélecteurs nouveaux, une majorité est déjà reconnue par les navigateurs actuels, à savoir Firefox 4+, Opera 11+,

Chrome 10+, Safari 5+ et Internet Explorer 10.

Préfixes propriétaires

Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas bloquer l’évolution des agents utilisateurs : à partir des informations dispensées dans les spécifications, chaque navigateur a carte blanche pour construire ses propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur propriétaire. Lorsque la spécification atteint le stade de Recommandation

Candidate (CR), le préfixe doit être supprimé. Cela concerne :

■ les propriétés encore non finalisées (ex. -moz-animation, -webkitregions)

;

■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask).

LISTE DES PRÉFIXES

-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird

-ms- Microsoft Internet Explorer

-o- Opera

-webkit- Moteurs WebKit (ex. Safari et Chrome)

-khtml- Moteurs KHTML (ex. Linux KDE)

-xv- Propriétés auditives sur Opera

Syntaxe des pseudo-éléments

Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2.

■ :first-line [CSS 2] ■ ::first-line [CSS 3]

■ :first-letter [CSS 2] ■ ::first-letter [CSS 3]

■ :after [CSS 2] ■ ::after [CSS 3]

■ :before [CSS 2] ■ ::before [CSS 3]

Unités de valeur

■ rem : comme em mais uniquement relatif à la racine (<html>).

■ vw : pourcentage de largeur du viewport. Le viewport est égal à 100 vw.

■ vh : pourcentage de hauteur du viewport. Le viewport est égal à 100 vh.

■ vmax : hauteur ou largeur du viewport (la valeur la plus grande est conservée).

■ vmin : hauteur ou largeur du viewport (la valeur la + petite est conservée).

■ fr : fraction.

■ gr : grid (valeur de grille, définie dans le Grid Positionning Module).

■ deg, rad, s, ms : degré, radian, seconde, milliseconde.

Fonctions

■ calc() introduit les fonctions de calcul au sein d’une valeur.

Ex. div {width: calc(100%-20px)}

■ :matches() introduit la notion de factorisation au sein du sélecteur.

Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens descendants d’un <div> ou d’un <p>.

Sélecteurs

■ :lang : cible un élément selon sa langue ou celle du document.

■ :last-child: dernier enfant d’un élément.

■ :nth-child : nième enfant d’un élément.

■ :nth-last-child : nième enfant en commençant par la fin.

■ :first-of-type : 1er enfant du type désigné.

■ :nth-of-type : nième du type désigné.

■ :last-of-type : dernier du type désigné.

■ :nth-last-of-type : nième enfant d’un type en commençant par la fin.

■ :only-child : enfant unique.

■ :only-of-type : élément unique du type désigné.

■ :empty : élément sans enfants.

■ :target : cible d’une ancre.

Ex. <a href="#cible">... <h1 id="cible">

■ :not : négation d’un sélecteur.

Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe bloc.

Sélecteur adjacent général

E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E).

Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent un bloc de citation.

Sélecteurs d’attributs

■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».

■ attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».

■ attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de la chaîne contenant la valeur.

■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de valeurs séparées par des espaces.

■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs séparées par des traits-d’union.

COMPATIBILITÉ

Ces fonctions ne sont actuellement prises en charge que par un faible nombre de navigateurs : Firefox 4+, Chrome 12+, et, dans certains cas, Internet Explorer 9+.

COMPATIBILITÉ Sélecteurs CSS 3

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.2+ 10.5+ 9.0+

Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7.

Sélecteurs de formulaires

■ :enabled : élément actif.

■ :disabled : élément inactif.

■ :checked : élément coché.

■ :required : élément requis pour la soumission.

■ :optional : élément optionnel lors de la soumission.

■ :valid : élément qui remplit les exigences de son type.

■ :invalid : élément qui ne remplit pas (encore) les exigences.

Media Queries

Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée de styles à un environnement défini par un (ou plusieurs) des critères suivants :

■ width, height : dimension (largeur, hauteur) de la zone d’affichage ;

■ device-width, device-height : dimension du périphérique ;

■ orientation : orientation du périphérique (portait ou paysage) ;

■ device-pixel-ratio : densité de pixels du périphérique de sortie ;

■ resolution : résolution du périphérique (en dpi) ;

■ color : prise en charge de la couleur (en bits/pixel) ;

■ color-index : nombre d’entrées dans la table de couleurs indexées ;

■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ;

■ monochrome : nombre de bits par pixel sur un périphérique monochrome (échelle de gris) ;

■ scan : décrit le processus de balayage des périphériques de sortie de type télévision.

■ grid : détermine si le périphérique de sortie est un périphérique en grille

ou bitmap.

Exemple : @media (max-width:480px) {body {background: green;}}

La couleur de <body> devient verte lorsque la largeur du média est inférieure ou égale à 480 pixels.

Propriétés de boîtes et contenu

■ box-sizing:

content-box

border-box

inherit ; p {box-sizing: content-box;}

Les composantes de padding et border sont incluses à l’intérieur de la boîte. Elles ne s’ajoutent plus à la largeur générale de l’élément ; la largeur du contenu (width) en est par conséquent réduite.

Propriétés de boîtes et contenu

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.0+ 9+ 3.1+ 10.5+ 8.0+

■ word-wrap: normal

break-word ; #aside {word-wrap: break-word;}

Césure d’un mot long à un endroit arbitraire afin de provoquer un retour à la ligne.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.1+ 10.5+ 6.0+

■ text-overflow: clip

Ellipsis

chaîne ; #intro {text-overflow: ellipsis;}

Ajout d’un signe pour indiquer que le contenu d’un élément est rogné.

Ex. La valeur ellipsis affichera des points

de suspension (…) à l’endroit où le terme

est masqué. Il est également possible d’indiquer

une chaîne de caractères prédéfinie

(ex. text-overflow: ‟etc.”;).

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

5.0+ 9.0+ 3.1+ 10.5+ 6.0+

■ overflow-x:

■ overflow-y:

visible

hidden

scroll

auto

no-display

no-content

; p {overflow-x: auto;

overflow-y: hidden;}

Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur un seul axe à la fois : overflow-x gère les débordements horizontaux et

overflow-y les dépassement verticaux.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.0+ 9.0+ 3.1+ 10.5+ 6.0+

■ overflow-style:

auto

scrollbar

panner

move

marquee

; #advert {overflow-style:

marquee;}

Différentes possibilités de débordements de contenu : scroll, défilement automatique (marquee) ou déplacement manuel (move).

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non non non non non

Propriétés de boîtes et contenu

■ appearance:

normal

icon

window

button

menu

field

; div {appearance: button;}

Donner un rendu d’élément d’interface utilisateur standard du navigateur.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

1+ 1+ 3.0+ non non

■ resize:

none

both

horizontal

vertical

; textarea {resize: vertical;}

Définir si l’élément doit être redimensionnable ou non par l’utilisateur.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

4+ 9+ 4.0+ non non

■ font-smoothing: none subpixel-antialiased

antialiased ; body {font-smoothing:

antialiased;}

Adoucir les effets de crénelage des caractères de texte.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non 10 Mac 5.0+ Mac non non

■ font-stretch:

wider

narrower

ultra-condensed

extra-condensed

condensed

semi-condensed

normal

semi-expanded

expanded

extra-expanded

ultra-expanded

inherit

; h1 {font-stretch: expanded;}

Étirer ou condenser une famille de police.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

9+ non non non 9.0+

■ text-stroke:

text-fill-color

text-stroke-color

text-stroke-width ;

#stroke {

text-fill-color: #fff;

text-stroke-color: lightblue;

text-stroke-width: 2px;

}

Définir un contour autour de chaque lettre d’un texte.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non 9.0+ 3.1+ non non

Propriétés de boîtes et contenu Propriétés décoratives

■ text-justify:

auto

inter-word

inter-ideograph

inter-cluster

distribute

kashida

trim

newsletter

;

div {

text-align:justify;

text-justify:inter-word;

}

Affiner le calcul de l’interlettrage sur les contenus de textes justifiés. Par exemple, la valeur newsletter justifie les lignes en distribuant un espace de remplissage entre les mots et entre les caractères.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non non non non non

■ white-space:

normal

pre

nowrap

pre-wrap

pre-line

; div {white-space: pre;}

Comment traiter les espaces blancs entre les mots ou les éléments.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 3+ 3+ 9+ 8+

■ text-wrap:

normal

none

unrestricted

suppress

; footer {text-wrap: suppress;}

Spécifier les règles de césure.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non non non non non

Propriétés décoratives

■ @font-face Afficher une police exotique embarquée sur le serveur.

Exemple :

@font-face {

font-family: “Kiwi”;

src: url('/‘Kiwi-Regular.ttf’') format(“truetype”), url(‘Kiwi-Regular.

woff’) format(“woff”);

}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.2+ 10.5+ 6.0+

Propriétés décoratives

Formats @font-face reconnus

Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8

.eot .eot

.ttf .ttf .ttf .ttf .ttf

.otf .otf .otf .otf

.woff .woff .woff .woff .woff

.svg .svg .svg .svg

Valeurs RGBa et HSLa

RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de la transparence ou semi-transparence à une couleur définie pour les propriétés color, background-color, border-color, box-shadow et text-shadow.

Ex. border-color: rgba(0,255,0,0.8) indique une bordure de couleur verte opaque à 80 %.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.0+ 1.0+ 3.0+ 10.5+ 9.0+

■ opacity: valeur entre 0 et 1

; #nav a {opacity: 0.6;} inherit

Agir sur l’opacité d’un élément, c’est-à-dire son degré de transparence.

0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec

la valeur par défaut de 1, il est totalement opaque.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.0+ 9.0+ 3.1+ 10.5+ 9.0+

■ borderradius:

longueur (éventuellement par paires : longueur 1/longueur 2) pourcentage ;

.bloc {

border-radius: 15px 0 15px 0 /

30px 0 30px 0;

/* angle 1,2,3,4 horizontal /

1,2,3,4 vertical */

}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.0+ 9.0+ 3.1+ 10.5+ 9.0+

■ borderimage:

largeur de la bordure

chemin vers l’image

valeur de chacun des traits de

coupe

round / stretch / repeat / space

;

.border {

border-width: 7px 7px 16px 7px;

border-image: url('/block.png')

7 7 16 7 stretch;

}

Afficher une image au sein des bordures d’un élément et jouer sur différents aspects de l’image tels que l’étirement ou la répétition. round (répétition) et stretch (étirement) indiquent le mode de distribution des parties latérales de l’image.

border-image: est la propriété raccourcie, dont sont dérivées les propriétés suivantes :

■ border-image-source: : URL de l’image ;

■ border-image-slice: : valeurs des traits de coupe ;

■ border-image-width: : largeur de la bordure ;

■ border-image-outset: : décalage de l’image par rapport à la bordure ;

■ border-image-repeat: : type de répétition de l’image.

Propriétés décoratives

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.1+ 10.5+ non

■ outline-offset: nombre

inherit ;

Pre {

outline: solid 1px orange;

outline-offset: 5px;

}

Définir l’espacement entre un contour (outline) et le côté ou la bordure (border) d’un élément. Un contour est une ligne dessinée autour des éléments, en dehors de la bordure.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 4.0+ 10.5+ non

■ box-shadow:

décalage horizontal à droite

décalage vertical en bas

fondu

(taille)

couleur

(inset / outset)

;

img {box-shadow:

8px 8px 10px #aaa;}

/* 8px à droite et en

bas, 10px de diffusion

et couleur #aaa */

Ajouter une ombre portée sur n’importe quel élément HTML. La valeur optionnelle inset diffuse l’ombre à l’intérieur de la boîte.

COMPATIBILITÉ

Firefox Chrome Safari Opera MSI Explorer

3.5+ 9.0+ 3.1+ 10.5+ 9.0+

■ text-shadow:

décalage horizontal à droite

décalage vertical en bas

fondu

couleur

; h1 {text-shadow:

2px 2px 4px

#999;}

Créer une ombre portée sous un texte de contenu.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 9.0+ 3.1+ 10.5+ 10.0+

Arrière-plans

Images multiples

CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un même élément, en cumulant les valeurs au sein des propriétés backgroundimage,

background-position et background-repeat, ces valeurs étant simplement séparées par une virgule.

Exemple :

div {

background: url('/“first.jpg”') left top no-repeat, url(“second.jpg”)

right bottom no-repeat;

}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 9.0+ 3.1+ 10.5+ 9.0+

Propriétés décoratives

■ background-position: Il est possible de préciser 4 valeurs de position, à l’aide d’un nombre associé aux mots-clés top, right, bottom et left.

Exemple : background-position: left 3px bottom 10% (à 3 px de la gauche et à 10 % du bas)

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

13+ non non 12 9.0+

Dégradé linéaire

La valeur linear-gradient de la propriété background-image permet de générer des arrière-plans de couleur dégradée, d’une couleur à l’autre ou

via plusieurs couleurs intermédiaires (dites « couleurs stop »).

■ back -ground- image:

orientation du dégradé :

to top / to right / to bottom / to left ou angle couleurs (position des couleurs stop

en pourcentage)

;

.button { background-image:

lineargradient(to right,

#D3DAE9, #576E94);}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 9.0+ 4.0+ 11.1+ 10.0+

Dégradé radial

La valeur radial-gradient de la propriété background-image permet de générer des arrière-plans de couleur dégradée radiale, d’une couleur à l’autre ou via plusieurs couleurs intermédiaires (couleurs stop).

■ backgroundimage:

orientation du dégradé :

to top / to right / to

bottom / to left

ou angle

forme : circle / ellipse

couleurs

(position des couleurs stop en pourcentage)

; div {background-image:

radial-gradient(to right,

blue, orange 25%)}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 10.0+ 5.1+ 11.1+ 10.0+

Dimensions, limites et origine

■ background-size:

longueur

pourcentage

cover

contain

;

div {

background:

url(background.jpg)

left top no-repeat;

background-size: 80% 80%;

}

Spécifier les dimensions des images d’arrière-plan dans le but de les adapter à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redimensionne l’image à la taille minimale pouvant être contenue, et contain à la taille maximale.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

Propriétés décoratives

■ background-clip: padding-box

border-box

content-box ; p {background-clip:

content-box;}

Spécifier les limites de rendu du fond d’un élément.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

■ backgroundorigin:

padding-box

border-box

content-box ; p {background-origin:

padding-box;}

Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan).

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.6+ 9.0+ 4.0+ 10.5+ 9.0+

Propriétés de positionnement

Multicolonnage

CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à l’instar des journaux papier, via la propriété raccourcie column et ses propriétés dérivées :

■ column-count: : nombre de colonnes ;

■ column-gap: : espace entre les colonnes ;

■ column-width: : largeur des colonnes ;

■ column-span: : répartition d’un élément sur plusieurs colonnes ;

■ column-rule: : trait de séparation entre les colonnes ;

■ break-before: : saut de colonne avant l’élément ;

■ break-after: : saut de colonne après l’élément ;

■ break-inside: : saut de colonne au sein de l’élément ;

■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé).

Exemple :

.chapo {

column-count: 2;

column-gap: 10px;

column-rule: 1px solid #ccc;

}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3+ 9+ 3.1+ 10.5+ 10.0+

Flexible Box Model

Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizontale ou verticale des éléments, de disposer de largeurs fluides dans les deux sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran.

Propriétés de positionnement

Propriétés :

■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;

■ flex-direction: : sens d’affichage (valeurs : row column, reverse-raw,

reverse-column) ;

■ order: : ordre d’affichage (pondération) ;

■ justify-content: : alignement dans l’axe principal (valeurs : flex-start,

flex-end, center, space-between, space-around) ;

■ align-items: : alignement dans l’axe secondaire (valeurs : flex-start,

flex-end, center, baseline, stretch).

Exemple :

#main {

display: flex;

flex-direction: reverse-column; /* distribution en

colonne inversée */

}

NOTE Les spéci fi cations sur Flexible Box Model ont été radicalement modifi ées en

mars 2012. Un certain nombre de propriétés ont été renommées et leurs fonctions précisées. Nous adoptons ici les dernières conventions de nommage.

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 10.0+ 3.2+ non 10.0+

Grid Layout Module

CSS 3 introduit de nouvelles propriétés parmi les schémas de positionnement,

grid-columns: et grid-rows:, conjointement à deux nouvelles unités de mesure, la grille (gr) et la fraction (fr).

Exemple de construction de 2 colonnes et 3 rangées :

body {

display: grid;

grid-columns: 150px 1fr;

grid-rows: 50px 1fr 50px;

}

Les éléments sont ensuite disposés dans la grille à l’aide des propriétés grid-column et grid-row :

#item {grid-column: 2; grid-row: 1 4;}

/*s’étend sur toute la hauteur de 4 lignes */

#item2, #item3 {grid-column: 1; grid-row: 2;}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non non non non 10.0+

Regions

Modèle de positionnement destiné à répartir du contenu au sein de zones

distinctes.

Exemple :

article {

flow-into: article_flow;

}

#region1, #region2, #region3, #region4 {

flow-from: article_flow;

}

Propriétés de positionnement

COMPATIBILITÉ

Firefox Chrome Safari Opera IE non non non non 10.0+

Exclusions et Shapes

Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.

Exemple :

#exclusion { wrap-flow: both; } /* le contenu s’écoule autour de la forme */

#rond { shape-inside: circle; } /* le contenu s’écoule dans une forme circulaire */

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

non non non non non

Transformations

Transform

■ transform:

rotate() rotation de l’élément

scale(), scaleX(), scaleY()

zoom (agrandissement ou réduction)

translate(), translateX(), translateY()

translation selon l’axe X et/ou Y

skewX(), skewY() déformation de l’élément matrix() matrice mathématique;

Exemple :

a:hover , a:focus {

transform: scale(2) rotate(15deg) translate(5px,10px);

}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

3.5+ 10.0+ 3.2+ 10.6+ 9.0+

Transform 3D

Propriétés :

■ transform-origin ■ perspective-origin

■ transform-style ■ backface-visibility

■ perspective

Exemple :

div {transform-style: preserve-3d; transform: rotateY(10deg)}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

10+ 12.0+ 4.0+ non 10.0+

Transitions

Chez le même éditeur…

Mémento HTML5, R. RIMELÉ

Mémento CSS 2, 3e éd. R. GOETTER

CSS avancées : Vers HTML 5 et CSS 3. R. GOETTER

CSS 2 : Pratique du design web, 3e éd. R. GOETTER

CSS 3 pour les web designers. D. CEDERHOLM

HTML 5 pour les web designers. J. KEITH

Mémento XHTML, 2e éd. R. GOETTER

Mémento Sites web, 3e éd. E. SLOÏM transition: est la propriété raccourcie, dont sont dérivées les propriétés :

■ transition-property: : propriété(s) à animer ;

■ transition-duration: : durée de la transition (en s ou ms) ;

■ transition-delay: : délai avant de démarrer (en s ou ms) ;

■ transition-timing-function: : accélération de la transition. Valeurs : linear (linéaire), ease/ease-out (rapide puis lent), ease-in (lent puis rapide), easein-out

(lent-rapide-lent), cubic-Bezier.

Les propriétés concernées par les transitions sont toutes celles qui peuvent être défi nies par une valeur numérique : width, height, min/max-width, min/max-height, position, margin, padding, mais aussi background, opacity, font-weight, text-shadow, color, line-height, vertical-align, letter-spacing, visibility, z-index, etc.

Exemple :

#nav a {transition: all 0.5s ease-in;}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

4.0+ 10.0+ 3.2+ 10.6+ 10.0+

Animations

animation: est la propriété raccourcie, dont sont dérivées les propriétés :

■ animation-name : nom de l’animation ;

■ animation-duration : durée totale ;

■ animation-delay : attente avant le début de l’animation ;

■ animation-iteration-count : nombre d’itérations ;

■ animation-timing-function : accélération (voir Transitions) ;

■ animation-direction : sens de l’animation (normal ou alternate).

Exemple :

@keyframes disparition {

0% {opacity: 1;} /* opacité complète */

50% {opacity: 0;} /* opacité nulle à la moitié de l’animation */

100% {opacity: 1;} /* retour à l’état initial */

}

img {animation: disparition 2s infinite;}

COMPATIBILITÉ

Firefox Chrome Safari Opera IE

5.0+ 10.0+ 4.0+ non non


545