Post on 28-Jun-2020
GénéralitésCSS3estuneévolutiondeslangagesCSS1etCSS2présentéesousformed’unetrentainedemodulesdistincts,dontunepartieestencoreàl’étatdebrouillon.
CompatibilitéaveclesnavigateursParmilacentainedepropriétésetlesdizainesdesélecteursnouveaux,unemajorité est déjà reconnue par les dernières versions des navigateursFirefox,Opera,Chrome,Safari,InternetExploreretEdge.
ÀSAVOIRPriseenchargedeCSS(toutesversions)parlesnavigateursactuels:–IE8reconnaîtenviron15%desspécificationsCSS;–IE11reconnaîtenviron53%desspécificationsCSS;–Edgereconnaîtenviron62%desspécificationsCSS;–ChromeetOperareconnaissentenviron77%desspécificationsCSS;
–Safarireconnaîtenviron80%desspécificationsCSS;–Firefoxreconnaîtenviron81%desspécificationsCSS.
PréfixespropriétairesLeW3CproposedepuisCSS2.1unealternativequialeméritedenepasbloquer l’évolution des agents utilisateurs : à partir des informationsdispenséesdanslesspécifications,chaquenavigateuracarteblanchepourconstruiresespropriétéspersonnellesdérivéesenlesfaisantprécéderd’unpréfixe vendeur propriétaire. Lorsque la spécification atteint le stade deRecommendation Candidate (CR), le préfixe doit être supprimé. Celaconcerne:lespropriétésencorenonfinalisées(ex.:-moz-animation,-webkit-regions);les éléments propriétaires (ex. : -ms-filter, -ms-zoom, -webkit-mask).
LISTEDESPRÉFIXES
-moz- MoteurderenduGeckodeMozillaFirefoxouThunderbird
-ms- MicrosoftInternetExplorer
-webkit- MoteursWebKit(ex.:SafarietChrome)
Syntaxedespseudo-élémentsDepuisCSS3,uneconventiond’écritureproposéepar leW3Cdistingueles pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant àl’aidedesdoublesdeux-points(::),mais ilsrestentrétrocompatiblesavecl’écritureCSS2.:first-line[CSS2]devient::first-line[CSS3]:first-letter[CSS2]devient::first-letter[CSS3]:after[CSS2]devient::after[CSS3]:before[CSS2]devient::before[CSS3]
Unitésdevaleur
DÉFINITIONLeviewportreprésentelapartievisibleauseindelafenêtredunavigateur.
rem:commeem,maisuniquementrelatifàlaracine(<html>)vw:pourcentagedelargeurduviewport(leviewportestégalà100vw)vh:pourcentagedehauteurduviewport(leviewportestégalà100vh)vmax:hauteuroulargeurduviewport(lavaleurlaplusgrandeselonl'orientation)vmin:hauteuroulargeurduviewport(lavaleurlapluspetiteselonl'orientation)fr:fractiondel’espacerestant(ex.:GridLayout)minmax() : valeur comprise entre une borne minimale et une bornemaximaledeg,rad,s,ms:degré,radian,seconde,milliseconde
Fonctionsdecalculcalc()introduitlesfonctionsdecalculauseind’unevaleur.ex.:div{width:calc(100%-20px)}
COMPATIBILITÉCes fonctions ne sont actuellement prises en charge que par lesnavigateursrécents(àpartird’InternetExplorer9,parexemple).
Sélecteurs:lang:cibleunélémentselonsalangueoucelledudocument:last-child:dernierenfantd’unélément:nth-child():nièmeenfantd’unélément:nth-last-child():nièmeenfantencommençantparlafin:first-of-type:1erenfantdutypedésigné:nth-of-type():nièmedutypedésigné:last-of-type:dernierdutypedésigné:nth-last-of-type():nièmeenfantd’untypeencommençantparlafin:only-child:enfantunique:only-of-type:élémentuniquedutypedésigné:empty:élémentsansenfants:target:cibled’uneancreex.:<ahref="#cible">...<h1id="cible">:not():négationd’unsélecteur.ex. : p:not(.bloc) désigne tous les paragraphes, sauf les éléments declassebloc.
SélecteuradjacentgénéralE~ F cible tous les frères (F) suivant, directement ou non, un élémentdésigné (E). ex. : blockquote ~ p {font-style: italic;} cible tous lesparagraphesquisuiventunblocdecitation.
Sélecteursd’attributsattr^="kiwi"]:sélectionsil’attributattrdébuteparlachaîne«kiwi»attr$="kiwi"]:sil’attributfinitparlachaîne«kiwi»attr*="kiwi"]:sil’attributcontientlasous-chaîne«kiwi»auseindelachaînecontenantlavaleurattr~="kiwi"] : si l’attributcontientexactement«kiwi»auseind'unelistedevaleursséparéespardesespacesattr|="kiwi"] : si l’attribut débute par « kiwi » au sein d'une liste devaleursséparéespardestraitsd’union
COMPATIBILITÉSélecteursCSS3Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 9.0+
Exception : les sélecteurs d’attributs sont compatibles depuis InternetExplorer7.
Sélecteursdeformulaires:enabled:élémentactif;:disabled:élémentinactif;:checked:élémentcoché;:required:élémentrequispourlasoumission;:optional:élémentoptionnellorsdelasoumission;:valid:élémentquiremplitlesexigencesdesontype;:invalid : élément qui ne remplit pas (encore) les exigences de sontype;:in-range:valeurdanslepérimètreounon;:out-of-range:valeurhorsdupérimètreounon.
COMPATIBILITÉSélecteursdeformulairesFirefox Chrome Safari Opera IE
4.0+ 10+ 5.0+ 10.5+ 10.0+9+pour:checked
@supports@supports permet de détecter quelles sont les fonctionnalités CSSsupportéesparlenavigateur.Exemple:@supports(display:grid){
.container{
display:grid;
}
}
@supportsnot(display:grid){.container{
display:flex;
}
}
COMPATIBILITÉFirefox Chrome Safari Opera Edge
22+ 28+ 9+ 12+ Toutesversions
MediaQueriesGrâce aux « requêtes demédias » CSS, il devient possible de limiter laportéedesstylesàunenvironnementdéfini.Voiciquelquescritèresusuels:width,height:dimensions(largeur,hauteur)delazoned’affichage;device-width,device-height:dimensionsdupériphérique;orientation:orientationdupériphérique(portaitoupaysage);resolution:résolutiondupériphérique(endpi,dpcmetdppx);color:priseenchargedelacouleur(enbits/pixels);aspect-ratio:ratiodupériphériquedesortie(ex.:16/9);
Exemple:@media(max-width:480px){body{background:green;}}La couleur de <body> devient verte lorsque la largeur de fenêtre estinférieureouégaleà480pixels.
COMPATIBILITÉFirefox Chrome Safari Opera MSIExplorer
3.5+ 9.0+ 4.0+ 10.5+ 9.0+
Propriétésdeboîtesetcontenu
box-sizing:content-boxborder-boxinherit
p{box-sizing:content-box;}
Lescomposantesdepadding etborder sont incluses à l’intérieur de laboîte.Ellesnes’ajoutentplusàlalargeurgénéraledel’élément;lalargeurtotaledel’élémentcorrespondparconséquentàwidth.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.0+ 9+ 3.1+ 10.5+ 8.0+
word-wrap:normalbreak-word #aside{word-wrap:break-word;}
Césured’unmotlongàunendroitarbitraire,afindeprovoquerunretouràlaligne.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.1+ 10.5+ 6.0+
text-overflow:clipellipsischaîne
#intro{text-overflow:ellipsis;}
Ajoutd’unsignepourindiquerquelecontenud’unélémentestrogné.ex.:Lavaleurellipsisafficheradespointsdesuspension(…)àl’endroitoùleterme est masqué. La déclaration overflow: hidden est nécessaire pourappliquertext-overflow.
COMPATIBILITÉFirefox Chrome Safari Opera IE
5.0+ 9.0+ 3.1+ 10.5+ 6.0+
overflow-x:overflow-y:
visiblehiddenscrollautono-displayno-content
p{overflow-x:auto;overflow-y:hidden;}
VariantesspécifiquesdelapropriétéCSS2overflow,quiagissentsurunseulaxeàlafois:overflow-xgèrelesdébordementshorizontauxetoverflow-ylesdépassementsverticaux.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.0+ 9.0+ 3.1+ 10.5+ 6.0+
overflow-style:autoscrollbarpannermovemarquee
#advert{overflow-style:marquee;}
Découvrir les différentes possibilités de débordement de contenu : scroll,défilementautomatique(marquee)oudéplacementmanuel(move).
COMPATIBILITÉFirefox Chrome Safari Opera IE
non non non non non
appearance:normaliconwindowbuttonmenufield
div{appearance:button;}
Donner un rendu d’élément au sein de l'interface utilisateur standard dunavigateur.
COMPATIBILITÉFirefox Chrome Safari Opera IE
1+ 1+ 3.0+ 24+ non
resize:nonebothhorizontalvertical
textarea{resize:vertical;}
Définirsil’élémentdoitêtreredimensionnableounonparl’utilisateur.
COMPATIBILITÉFirefox Chrome Safari Opera IE
4+ 9+ 4.0+ 12.1+ non
font-smoothing:
nonesubpixel-antialiasedantialiased
body{font-smoothing:antialiased;}
Adoucirleseffetsdecrénelagedescaractèresdetexte.
COMPATIBILITÉFirefox Chrome Safari Opera IE
non 10Mac 5.0+Mac non non
font-stretch:widernarrowerultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expandedinherit
h1{font-stretch:expanded;}
Étireroucondenserunefamilledepolices.
COMPATIBILITÉFirefox Chrome Safari Opera IE
9+ non non non 9.0+
text-stroke:text-fill-colortext-stroke-colortext-stroke-width
#stroke{text-fill-color:#fff;text-stroke-color:lightblue;text-stroke-width:2px;}
Définiruncontourautourdechaquelettred’untexte.
COMPATIBILITÉFirefox Chrome Safari Opera IE
non 9.0+ 3.1+ 24+ non
text-align-last:auto(valeurinitiale)startendleftrightcenterjustifyinherit
p{text-align:justify;text-align-last:center;}
Spécifier l’alignementdescontenusdeladernièrelignedetexte,ouavantunsautdeligneforcé.Écraselavaleurglobaledetext-align.
COMPATIBILITÉFirefox Chrome Safari Opera IE
12+ 25+ 7+ non 6
white-space:normalprenowrappre-wrappre-line
div{white-space:pre;}
Traiterlesespacesblancsentrelesmotsouleséléments.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 3+ 3+ 9+ 8+
hyphens:nonemanual(valeurinitiale)auto
p{hyphens:auto;/*césureautorisée*/}
Communiqueraunavigateurlaméthodeàutiliserpourappliquerlacésuredesmots.Lavaleurautoconfèreaunavigateur lapossibilitédecouper lesmotsselonlesrèglestypographiquesdelalanguedudocument.
COMPATIBILITÉFirefox Chrome Safari Opera IE
6+ non 5.1+ non 10+
Propriétésdécoratives@font-faceAfficherunepoliceexotiqueembarquéesurleserveur.
NOTELesdifférentsformatsdepolicesactuelssont:
.ttf:TrueTypeFont;
.otf:OpenTypeFont;
.eot:EmbeddedOpenType(propriétaireMicrosoft);
.woff,.woff2:WebOpenFontFormat.
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+
Formats@font-facereconnusFirefox Chrome Safari Opera IE9+ IE6,IE7,IE8
.eot .eot
.ttf .ttf .ttf .ttf .ttf
.otf .otf .otf .otf
.woff .woff .woff .woff .woff
.woff2 .woff2 .woff2 .woff2
ValeursRGBaetHSLaRGBaetHSLanesontpasdespropriétés,maisdesvaleursquiajoutentdelatransparence ou semi-transparence à une couleur définie pour les propriétéscolor,background-color,border-color,box-shadowettext-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:valeurentre0et1inherit #nava{opacity:0.6;}
Agirsurl’opacitéd’unélément,c’est-à-diresondegrédetransparence.0rendl’élément (et ses descendants) entièrement invisible, tandis qu’avec la valeurpardéfautde1,ilesttotalementopaque.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.0+ 9.0+ 3.1+ 10.5+ 9.0+
border-radius:
longueur(éventuellementparpaires:longueur1/longueur2)pourcentage
.bloc{border-radius:15px01em50%;}/*arrondide15pxenhautàgauche,dezéroenhautàdroite,puisdanslesensdesaiguillesd’unemontre*/
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.0+ 9.0+ 3.1+ 10.5+ 9.0+
border-image:largeurdelabordurecheminversl’imagevaleurdechacundestraitsdecouperound/stretch/repeat/space
.border{border-width:7px7px16px7px;border-image:url(block.png)77167stretch;}
Afficher une image entre les bordures d’un élément et jouer sur différentsaspectsde l’image telsque l’étirementou la répétition.round (répétition) etstretch (étirement) indiquent lemodededistributiondesparties latéralesdel’image.border-image: est la propriété raccourcie dont sont dérivées les propriétéssuivantes:border-image-source::URLdel’image;border-image-slice::valeursdestraitsdecoupe;border-image-width::largeurdelabordure;border-image-outset::décalagedel’imageparrapportàlabordure;border-image-repeat::typederépétitiondel’image.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.1+ 10.5+ 11+
outline-offset:nombreinherit
pre{outline:solid1pxorange;outline-offset:5px;}
Définir l’espacement entre un contour (outline) et le côté ou la bordure(border)d’unélément.Uncontourestunelignedessinéeautourdeséléments,endehorsdelabordure.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 4.0+ 10.5+ non
box-shadow:décalagehorizontalàdroitedécalageverticalenbasfondu(taille)couleur(inset/outset)
img{box-shadow:8px8px10px#aaa;}/*8pxàdroiteetenbas,10pxdediffusionetcouleur#aaa*/
Ajouter une ombre portée sur n’importe quel élément HTML. La valeuroptionnelleinsetdiffusel’ombreàl’intérieurdelaboîte.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.1+ 10.5+ 9.0+
text-shadow:décalagehorizontalàdroitedécalageverticalenbasfonducouleur
h1{text-shadow:2px2px4px#999;}
Créeruneombreportéesousuntextedecontenu.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.1+ 10.5+ 10.0+
Arrière-plansImagesmultiplesCSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur unmêmeélément,encumulant lesvaleursauseindespropriétésbackground-image, background-position et background-repeat, ces valeurs étantsimplementséparéesparunevirgule.Exemple:div{
background:url(“first.jpg”)lefttopno-repeat,url(“second.jpg”)rightbottomno-repeat;}
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 9.0+ 3.1+ 10.5+ 9.0+
background-position:Ilestpossibledepréciser4valeursdeposition,àl’aided’unnombreassociéauxmots-cléstop,right,bottometleft.Exemple:background-position:left3pxbottom10%(à3pxdelagaucheetà10%dubas)
COMPATIBILITÉFirefox Chrome Safari Opera IE
13+ 27+ 7+ 12 9.0+
DégradélinéaireLa valeur linear-gradient de la propriété background-image permet degénérerdesarrière-plansdecouleurdégradée,d’unecouleuràl’autreouviaplusieurscouleursintermédiaires(dites«color-stops»).
background-image:
orientationdudégradé:totop/toright/tobottom/toleftouanglecouleurs(positiondescouleursstopenpourcentage)
.button { background-image: linear-gradient(toright,#D3DAE9,#576E94);}
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 9.0+ 4.0+ 11.1+ 10.0+
DégradéradialLa valeur radial-gradient de la propriété background-image permet degénérerdesarrière-plansdansundégradédecouleursradial,d’unecouleuràl’autreouviaplusieurscouleursintermédiaires(color-stops).
background-image:
orientationdudégradé:forme(ellipse,circle)etpointdedépart(attop,atright,atbottom,atleft,atcenter)ouangle(positiondescouleursstopenpourcentage)
div {background-image: radial-gradient(circleatcenter,blue,orange25%)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 10.0+ 5.1+ 11.1+ 10.0+
Dimensions,limitesetorigine
background-size:longueurpourcentagecovercontain
div{background:url(background.jpg)lefttopno-repeat;background-size:80%80%;}
Spécifierlesdimensionsdesimagesd’arrière-plandanslebutdelesadapteràcelles de l’élément sur lequel elles sont appliquées. cover (optionnelle)redimensionnel’imageàlatailleminimalepouvantêtrecontenue,etcontainàlataillemaximale.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
background-clip:padding-boxborder-boxcontent-box
p{background-clip:content-box;}
Spécifierleslimitesderendudufondd’unélément.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
background-origin:
padding-boxborder-boxcontent-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ésdepositionnementMulticolonnageCSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, àl’instar des journaux papier, via la propriété raccourcie column et sespropriétésdérivées:column-count::nombredecolonnes;column-gap::espaceentrelescolonnes;column-width::largeurdescolonnes;column-span::répartitiond’unélémentsurplusieurscolonnes;column-rule::traitdeséparationentrelescolonnes;break-before::sautdecolonneavantl’élément;break-after::sautdecolonneaprèsl’élément;break-inside::sautdecolonneauseindel’élément.
Exemple:.chapo{
column-count:2;column-gap:10px;column-rule:1pxsolid#ccc;
}
COMPATIBILITÉFirefox Chrome Safari Opera IE
3+ 9+ 3.1+ 10.5+ 10.0+
FlexibleBoxModelLemodèledeboîteflexibleajouteaumodèledeboîteclassiquedenouvellesfonctionnalités, parmi lesquelles les possibilités d’alterner entre unedistribution horizontale ou verticale des éléments, de disposer de largeursfluides dans les deux sens et, surtout, de pouvoir définir l’ordre exact del'affichagedesboîtesàl’écran.Propriétés:display:flex:attributiondumodèleflexible(autrevaleur:inline-flex);flex-direction: : sens d’affichage (valeurs : column, column-reverse,row,row-reverse);order::ordred’affichage(pondération);justify-content: : alignement dans l’axe principal (valeurs : flex-start,flex-end,center,space-between,space-around);align-items::alignementdansl’axesecondaire(valeurs:flex-start,flex-end,center,baseline,stretch).
Exemple:#main{
display:flex;flex-direction:column-reverse;/*distributionencolonneinversée*/
}
NOTE Les spécifications sur Flexible Box Model ont été radicalementmodifié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èresconventionsdenommage.
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 10.0+ 3.2+ 24+ 10.0+
GridLayoutModuleCSS3introduitdenouvellespropriétésparmilesschémasdepositionnement(grid-columns: et grid-rows:), conjointement avec la nouvelle unité demesure"fr":display:grid(ouinline-grid):créeunconteneurdegrille;grid-template-columns:définitlenombredecolonnesetleurtaille;grid-template-rows:définitlenombrederangéesetleurtaille;grid-template-areas:créedeszonesnommées;grid-column, grid-row, grid-area : positionnent un élément dans lagrille;justify-content, justify-items, justify-self, align-content, align-items,align-self:modifientl'alignementdescellulesoudeséléments;grid-gap:génèreunespace(gouttière)entrelescellules;grid-auto-flow:modifiel'ordredeplacementautomatiquedeséléments.
Exempledeconstructionde2colonneset3rangées:body{
display:grid;grid-template-columns:150px1fr;grid-template-rows:50px1fr50px;
}Lesélémentssontensuitedisposésdanslagrilleàl’aidedespropriétésgrid-columnetgrid-row:#item{grid-column:2;grid-row:14;}/*s’étendsurtoutelahauteurdes4lignes*/#item2,#item3{grid-column:1;grid-row:2;}
COMPATIBILITÉFirefox Chrome Safari Opera IE
52+ 55+ 10.1+ 44+ 10.0+
ExclusionsetshapesSurfacesdéfiniesdanslesquelleslecontenupeut(ounon)s’écouler.Exemple:#exclusion{shape-outside:polygon();}/*lecontenus’écouleautourdelaforme*/
#rond{shape-inside:circle();}/*lecontenus’écoulecirculairement*/
COMPATIBILITÉFirefox Chrome Safari Opera IE
non 37+ 7.1+ 24+ non
TransformationsTransform
transform:rotate()rotationdel’élémentscale(),scaleX(),scaleY()zoom(agrandissementouréduction)translate(),translateX(),translateY()translationselonl’axeXet/ouYskewX(),skewY()déformationdel’élémentmatrix()matricemathé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+
Transform3DPropriétés:transform-origintransform-styleperspectiveperspective-originbackface-visibility
Exemple:div{transform-style:preserve-3d;transform:rotateY(10deg)}
COMPATIBILITÉFirefox Chrome Safari Opera IE
10+ 12.0+ 4.0+ non 10.0+
Transitions
transition:estlapropriétéraccourciedontsontdérivéeslespropriétéssuivantes:transition-property::propriété(s)àanimer;transition-duration::duréedelatransition(ensoums);transition-delay::délaiavantdedémarrer(ensoums);transition-timing-function: : accélération de la transition. Valeurs :linear (linéaire), ease/ease-out (rapide puis lent), ease-in (lent puisrapide),ease-in-out(lent-rapide-lent),cubic-bezier().
Les propriétés concernées par les transitions sont toutes celles quipeuvent être définies par une valeur numérique : width, height,min/max-width,min/max-height,position,margin,padding,maisaussibackground,opacity, font-weight, text-shadow, color, line-height,vertical-align,letter-spacing,visibility,z-index,etc.
Exemple:#nava{transition:all0.5sease-in;}
COMPATIBILITÉFirefox Chrome Safari Opera IE
4.0+ 10.0+ 3.2+ 10.6+ 10.0+
Animationsanimation: est la propriété raccourcie dont sont dérivées les propriétéssuivantes:animation-name:nomdel’animation;animation-duration:duréetotale;animation-delay:attenteavantledébutdel’animation;animation-iteration-count:nombred’itérations;animation-timing-function:accélération(voirTransitions);animation-direction:sensdel’animation(normaloualternate);animation-play-state:encoursouenpause(runningoupaused);animation-fill-mode : propriétés conservées par l’élément à la fin del’animation.
Exemple:@keyframesdisparition{0%{opacity:1;}/*opacitécomplète*/50%{opacity:0;}/*opaciténulleàlamoitiédel’animation*/100%{opacity:1;}/*retouràl’étatinitial*/}img{animation:disparition2sinfinite;}
COMPATIBILITÉFirefox Chrome Safari Opera IE
5.0+ 10.0+ 4.0+ 12+ 10+
Chezlemêmeéditeur…MémentoHTML5,2eéd.R.RIMELÉMémentoPHP7etSQL,C.PIERREDEGEYER,G.PONÇONCSSavancées:VersHTML5etCSS3.2eéd.R.GOETTERCSS3:Pratiquedudesignweb.R.GOETTER,H.GIRAUDELCSS3pourleswebdesigners.D.CEDERHOLMHTML5pourleswebdesigners.J.KEITHMémentoMySQL5,4eéd.R.RIMELÉMémentojQuery,3eéd.É.SARRION
Codeéditeur:G67432ISBN:978-2-212-67432-3
Conception:NordCompo©GroupeEyrolles2017
Attention:pourlirelesexemplesdelignesdecode,réduisezlapolicedevotresupportaumaximum.
PoursuivretouteslesnouveautésnumériquesduGroupeEyrolles,retrouvez-noussurTwitteretFacebook
@ebookEyrolles
EbooksEyrolles
Etretrouveztouteslesnouveautéspapiersur
@Eyrolles
Eyrolles