mémento css3 (french edition)meslivres.site/livref/f6/f006082.pdf · 2018-06-07 · compatibilité...
TRANSCRIPT
![Page 1: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/1.jpg)
![Page 2: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/2.jpg)
GénéralitésCSS3estuneévolutiondeslangagesCSS1etCSS2présentéesousformed’unetrentainedemodulesdistincts,dontunepartieestencoreàl’étatdebrouillon.
![Page 3: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/3.jpg)
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.
![Page 4: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/4.jpg)
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).
![Page 5: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/5.jpg)
LISTEDESPRÉFIXES
-moz- MoteurderenduGeckodeMozillaFirefoxouThunderbird
-ms- MicrosoftInternetExplorer
-webkit- MoteursWebKit(ex.:SafarietChrome)
![Page 6: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/6.jpg)
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]
![Page 7: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/7.jpg)
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
![Page 8: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/8.jpg)
Fonctionsdecalculcalc()introduitlesfonctionsdecalculauseind’unevaleur.ex.:div{width:calc(100%-20px)}
![Page 9: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/9.jpg)
COMPATIBILITÉCes fonctions ne sont actuellement prises en charge que par lesnavigateursrécents(àpartird’InternetExplorer9,parexemple).
![Page 10: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/10.jpg)
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.
![Page 11: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/11.jpg)
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.
![Page 12: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/12.jpg)
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
![Page 13: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/13.jpg)
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.
![Page 14: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/14.jpg)
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.
![Page 15: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/15.jpg)
COMPATIBILITÉSélecteursdeformulairesFirefox Chrome Safari Opera IE
4.0+ 10+ 5.0+ 10.5+ 10.0+9+pour:checked
![Page 16: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/16.jpg)
@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;
}
}
![Page 17: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/17.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera Edge
22+ 28+ 9+ 12+ Toutesversions
![Page 18: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/18.jpg)
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.
![Page 19: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/19.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera MSIExplorer
3.5+ 9.0+ 4.0+ 10.5+ 9.0+
![Page 20: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/20.jpg)
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.
![Page 21: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/21.jpg)
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.
![Page 22: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/22.jpg)
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.
![Page 23: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/23.jpg)
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.
![Page 24: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/24.jpg)
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).
![Page 25: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/25.jpg)
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.
![Page 26: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/26.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
1+ 1+ 3.0+ 24+ non
resize:nonebothhorizontalvertical
textarea{resize:vertical;}
Définirsil’élémentdoitêtreredimensionnableounonparl’utilisateur.
![Page 27: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/27.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
4+ 9+ 4.0+ 12.1+ non
font-smoothing:
nonesubpixel-antialiasedantialiased
body{font-smoothing:antialiased;}
Adoucirleseffetsdecrénelagedescaractèresdetexte.
![Page 28: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/28.jpg)
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.
![Page 29: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/29.jpg)
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.
![Page 30: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/30.jpg)
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.
![Page 31: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/31.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
12+ 25+ 7+ non 6
white-space:normalprenowrappre-wrappre-line
div{white-space:pre;}
Traiterlesespacesblancsentrelesmotsouleséléments.
![Page 32: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/32.jpg)
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.
![Page 33: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/33.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
6+ non 5.1+ non 10+
![Page 34: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/34.jpg)
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”);
}
![Page 35: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/35.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+
![Page 36: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/36.jpg)
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
![Page 37: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/37.jpg)
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%.
![Page 38: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/38.jpg)
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.
![Page 39: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/39.jpg)
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*/
![Page 40: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/40.jpg)
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.
![Page 41: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/41.jpg)
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.
![Page 42: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/42.jpg)
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.
![Page 43: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/43.jpg)
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.
![Page 44: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/44.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 9.0+ 3.1+ 10.5+ 10.0+
![Page 45: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/45.jpg)
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;}
![Page 46: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/46.jpg)
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)
![Page 47: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/47.jpg)
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);}
![Page 48: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/48.jpg)
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%)
![Page 49: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/49.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 10.0+ 5.1+ 11.1+ 10.0+
![Page 50: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/50.jpg)
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.
![Page 51: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/51.jpg)
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.
![Page 52: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/52.jpg)
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).
![Page 53: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/53.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
![Page 54: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/54.jpg)
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;
}
![Page 55: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/55.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3+ 9+ 3.1+ 10.5+ 10.0+
![Page 56: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/56.jpg)
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.
![Page 57: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/57.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 10.0+ 3.2+ 24+ 10.0+
![Page 58: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/58.jpg)
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;}
![Page 59: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/59.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
52+ 55+ 10.1+ 44+ 10.0+
![Page 60: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/60.jpg)
ExclusionsetshapesSurfacesdéfiniesdanslesquelleslecontenupeut(ounon)s’écouler.Exemple:#exclusion{shape-outside:polygon();}/*lecontenus’écouleautourdelaforme*/
#rond{shape-inside:circle();}/*lecontenus’écoulecirculairement*/
![Page 61: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/61.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
non 37+ 7.1+ 24+ non
![Page 62: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/62.jpg)
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);}
![Page 63: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/63.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
3.5+ 10.0+ 3.2+ 10.6+ 9.0+
![Page 64: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/64.jpg)
Transform3DPropriétés:transform-origintransform-styleperspectiveperspective-originbackface-visibility
Exemple:div{transform-style:preserve-3d;transform:rotateY(10deg)}
![Page 65: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/65.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
10+ 12.0+ 4.0+ non 10.0+
![Page 66: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/66.jpg)
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;}
![Page 67: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/67.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
4.0+ 10.0+ 3.2+ 10.6+ 10.0+
![Page 68: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/68.jpg)
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;}
![Page 69: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/69.jpg)
COMPATIBILITÉFirefox Chrome Safari Opera IE
5.0+ 10.0+ 4.0+ 12+ 10+
![Page 70: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/70.jpg)
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
![Page 71: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/71.jpg)
Codeéditeur:G67432ISBN:978-2-212-67432-3
Conception:NordCompo©GroupeEyrolles2017
Attention:pourlirelesexemplesdelignesdecode,réduisezlapolicedevotresupportaumaximum.
![Page 72: Mémento CSS3 (French Edition)meslivres.site/LIVREF/F6/F006082.pdf · 2018-06-07 · Compatibilité avec les navigateurs Parmi la centaine de propriétés et les dizaines de sélecteurs](https://reader033.vdocuments.site/reader033/viewer/2022041800/5e509334664fe67cb07b50bb/html5/thumbnails/72.jpg)
PoursuivretouteslesnouveautésnumériquesduGroupeEyrolles,retrouvez-noussurTwitteretFacebook
@ebookEyrolles
EbooksEyrolles
Etretrouveztouteslesnouveautéspapiersur
@Eyrolles
Eyrolles