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

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.


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.


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.


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).


non non non non non

appearance:normaliconwindowbuttonmenufield

div{appearance:button;}

Donner un rendu d’élément au sein de l'interface utilisateur standard dunavigateur.


1+ 1+ 3.0+ 24+ non

resize:nonebothhorizontalvertical

textarea{resize:vertical;}

Définirsil’élémentdoitêtreredimensionnableounonparl’utilisateur.


4+ 9+ 4.0+ 12.1+ non

font-smoothing:

nonesubpixel-antialiasedantialiased

body{font-smoothing:antialiased;}

Adoucirleseffetsdecrénelagedescaractèresdetexte.


non 10Mac 5.0+Mac non non

font-stretch:widernarrowerultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expandedinherit

h1{font-stretch:expanded;}

Étireroucondenserunefamilledepolices.


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.


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.


12+ 25+ 7+ non 6

white-space:normalprenowrappre-wrappre-line

div{white-space:pre;}

Traiterlesespacesblancsentrelesmotsouleséléments.


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.


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”);

}


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%.


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.


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*/


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.


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.


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.


3.5+ 9.0+ 3.1+ 10.5+ 9.0+

text-shadow:décalagehorizontalàdroitedécalageverticalenbasfonducouleur

h1{text-shadow:2px2px4px#999;}

Créeruneombreportéesousuntextedecontenu.


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;}


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)


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);}


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%)


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.


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.


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).


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;

}


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.


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;}


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*/


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);}


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)}


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;}


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;}


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

https://twitter.com/ebooksEyrolles

http://www.facebook.com/EbooksEyrolles

https://twitter.com/Eyrolles

http://www.facebook.com/Eyrolles

Documents

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