Memento Css3

mmento
CSS3
2 e d it io n
Ra p ha l G o e t t e r
Gnralits
CSS 3 est une volution des langages CSS 1 et CSS 2 prsente sous forme dune
trentaine de modules distincts, dont une partie est encore ltat de brouillon.
Compatibilit avec les navigateurs

Parmi les 130 proprits et 35 slecteurs nouveaux, une majorit est dj
reconnue par les navigateurs actuels, savoir Firefox 4+, Opera 11+,
Chrome 10+, Safari 5+ et Internet Explorer 10.
IE
IE
IE
IE
IE
SAVOIR Prise en charge de CSS 3 par les diffrentes versions dInternet Explorer
6 reconnat environ 4 % des nouvelles proprits et 0 % des slecteurs.
7 reconnat environ 5 % des proprits et 5 % des slecteurs.
Prfixes propritaires
Le W3C propose depuis CSS 2.1 une alternative qui a le mrite de ne pas
bloquer lvolution des agents utilisateurs : partir des informations dispenses
dans les spcifications, chaque navigateur a carte blanche pour construire ses
proprits personnelles drives en les faisant prcder dun prfixe vendeur
propritaire. Lorsque la spcification atteint le stade de Recommandation
Candidate (CR), le prfixe doit tre supprim. Cela concerne :
les proprits encore non finalises (ex. -moz-animation , -webkitregions) ;
les lments propritaires (ex. -ms-filter, -ms-zoom, -webkit-mask).
LISTE
DES PRFIXES
-moz-ms-o-webkit-khtml-xv-
Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird

Microsoft Internet Explorer
Opera
Moteurs WebKit (ex. Safari et Chrome)
Moteurs KHTML (ex. Linux KDE)
Proprits auditives sur Opera
Syntaxe des pseudo-lments

Depuis CSS 3, une convention dcriture propose par le W3C distingue les
pseudo-classes des pseudo-lments. Ceux-ci scrivent dornavant laide dun
double deux-points (::), mais restent rtrocompatibles avec lcriture CSS 2.
:first-line [CSS 2]
::first-line [CSS 3]
:first-letter [CSS 2]
:after [CSS 2]
:before [CSS 2]
::first-letter [CSS 3]
::after [CSS 3]
::before [CSS 3]
Units de valeur
DFINITION Le viewport reprsente la partie visible au sein de la fentre du navigateur.
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 conserve).
vmin : hauteur ou largeur du viewport (la valeur la + petite est conserve).
fr : fraction.
Gnralits
gr : grid (valeur de grille, dfinie dans le Grid Positionning Module).

deg, rad, s, ms : degr, radian, seconde, milliseconde.
Fonctions
calc() introduit les fonctions de calcul au sein dune valeur.

Ex. div {width: calc(100%-20px)}
:matches() introduit la notion de factorisation au sein du slecteur.
Ex. :matches(div, p) a {font-size: 2em} dsigne uniquement les liens
descendants dun <div> ou dun <p>.
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+.
Slecteurs
:lang : cible un lment selon sa langue ou celle du document.

:last-child : dernier enfant dun lment.
:nth-child : nime enfant dun lment.
:nth-last-child : nime enfant en commenant par la fin.
:first-of-type : 1er enfant du type dsign.
:nth-of-type : nime du type dsign.
:last-of-type : dernier du type dsign.
:nth-last-of-type : nime enfant dun type en commenant par la fin.
:only-child : enfant unique.
:only-of-type : lment unique du type dsign.
:empty : lment sans enfants.
:target : cible dune ancre.
Ex. <a href="#cible">... <h1 id="cible">
:not : ngation dun slecteur.

Ex. p:not(.bloc) dsigne tous les paragraphes, sauf les lments de classe
bloc.
Slecteur adjacent gnral

E ~ F cible tous les frres (F) suivant, directement ou non, un lment dsign (E).
Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent
un bloc de citation.
Slecteurs dattributs
attr^="kiwi"] : slection si lattribut attr dbute par la chane kiwi .

attr$="kiwi"] : si lattribut finit par la chane kiwi .
attr*="kiwi"] : si lattribut contient la sous-chane kiwi au sein de
la chane contenant la valeur.
attr~="kiwi"] : si lattribut contient exactement kiwi au sein de

valeurs spares par des espaces.
attr|="kiwi"] : si lattribut dbute par kiwi au sein de valeurs
spares par des traits-dunion.
COMPATIBILIT Slecteurs CSS 3

Firefox
Chrome
Safari
Opera
IE
3.5+
9.0+
3.2+
10.5+
9.0+
Exception : les slecteurs dattributs sont compatibles depuis Internet Explorer 7.
Gnralits
Slecteurs de formulaires
:enabled : lment actif.

:disabled : lment inactif.
:checked : lment coch.
:required : lment requis pour la soumission.
:optional : lment optionnel lors de la soumission.
:valid : lment qui remplit les exigences de son type.
:invalid : lment qui ne remplit pas (encore) les exigences.
COMPATIBILIT Slecteurs de formulaires

Firefox
Chrome
Safari
Opera
4.0+
10+
5.0+
10.5+
IE
10.0+
9+ pour :checked
Media Queries
Grce aux requtes de mdia CSS, il devient possible de limiter la porte
de styles un environnement dfini par un (ou plusieurs) des critres suivants :
width, height : dimension (largeur, hauteur) de la zone daffichage ;
device-width, device-height : dimension du priphrique ;

orientation : orientation du priphrique (portait ou paysage) ;
device-pixel-ratio : densit de pixels du priphrique de sortie ;
resolution : rsolution du priphrique (en dpi) ;
color : prise en charge de la couleur (en bits/pixel) ;
color-index : nombre dentres dans la table de couleurs indexes ;
aspect-ratio : ratio du priphrique de sortie (ex. 16/9) ;
monochrome : nombre de bits par pixel sur un priphrique monochrome
(chelle de gris) ;
scan : dcrit le processus de balayage des priphriques de sortie de type

tlvision.
grid : dtermine si le priphrique de sortie est un priphrique en grille

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

La couleur de <body> devient verte lorsque la largeur du mdia est infrieure
ou gale 480 pixels.
COMPATIBILIT
Firefox
Chrome
Safari
Opera
MSI Explorer
3.5+
9.0+
4.0+
10.5+
9.0+
Proprits de botes et contenu
box-sizing:
content-box
border-box
inherit
Les composantes de padding et

border sont incluses lintrieur de
la bote. Elles ne sajoutent plus
la largeur gnrale de llment ; la
largeur du contenu (width) en est par
consquent rduite.
p {box-sizing: content-box;}

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.0+
9+
3.1+
10.5+
8.0+
normal
break-word
word-wrap:
#aside {word-wrap: break-word;}
Csure dun 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+
clip
ellipsis
chane
text-overflow:
#intro {text-overflow: ellipsis;}
Ajout dun signe pour indiquer que le

contenu dun lment est rogn.
Ex. La valeur ellipsis affichera des points
de suspension () lendroit o le terme
est masqu. Il est galement possible dindiquer une chane de caractres prdfinie
(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 spcifiques de la proprit CSS 2 overflow, qui agissent sur

un seul axe la fois : overflow-x gre les dbordements horizontaux et
overflow-y les dpassement 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;}
Diffrentes possibilits de dbordements de contenu : scroll, dfilement

automatique (marquee) ou dplacement manuel (move).
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
non
non
non
non
normal
icon
window
button
menu
field
appearance:
div {appearance: button;}
Donner un rendu dlment dinterface utilisateur standard du navigateur.

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
1+
1+
3.0+
non
non
resize:
none
both
horizontal
vertical
textarea {resize: vertical;}
Dfinir si llment doit tre redimensionnable ou non par lutilisateur.

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 crnelage des caractres 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;
}
Dfinir un contour autour de chaque lettre dun texte.

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
9.0+
3.1+
non
non
auto
inter-word
inter-ideograph
inter-cluster
distribute
kashida
trim
newsletter
text-justify:
div {
text-align:justify;
text-justify:inter-word;
}
Affiner le calcul de linterlettrage sur les contenus de textes justifis. Par

exemple, la valeur newsletter justifie les lignes en distribuant un espace
de remplissage entre les mots et entre les caractres.
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
non
non
non
non
normal
pre
nowrap
pre-wrap
pre-line
white-space:
div {white-space: pre;}
Comment traiter les espaces blancs entre les mots ou les lments.
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.5+
3+
3+
9+
8+
text-wrap:
normal
none
unrestricted
suppress
footer {text-wrap: suppress;}
Spcifier les rgles de csure.

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
non
non
non
non
Proprits dcoratives
@font-face
Afficher une police exotique embarque sur le serveur.
NOTE Les diffrents formats de polices actuels sont :
.ttf : TrueType Font

.otf : OpenType Font
.eot : Embedded OpenType (propritaire Microsoft)
.svg, .svgz : SVG Font
.woff : Web Open Font Format
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+
Proprits dcoratives
Formats @font-face reconnus
Firefox
Chrome
.ttf
Safari
.ttf
Opera
.ttf
.ttf
.otf
.otf
.otf
.otf
.woff
.woff
.woff
.woff
.svg
.svg
.svg
.svg
IE 9+
IE 6, IE 7, IE 8
.eot
.eot
.ttf
.woff
Valeurs RGBa et HSLa

RGBa et HSLa ne sont pas des proprits mais des valeurs qui ajoutent de
la transparence ou semi-transparence une couleur dfinie pour les proprits
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
inherit
#nav a {opacity: 0.6;}
Agir sur lopacit dun lment, cest--dire son degr de transparence.

0 rend llment (et ses descendants) entirement invisible, tandis quavec
la valeur par dfaut 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 limage
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 dun lment et jouer sur diffrents aspects de limage tels que ltirement ou la rptition. round (rptition) et stretch
(tirement) indiquent le mode de distribution des parties latrales de limage.
border-image: est la proprit raccourcie, dont sont drives les proprits
suivantes :
border-image-source: : URL de limage ;
border-image-slice: : valeurs des traits de coupe ;
border-image-width: : largeur de la bordure ;
border-image-outset: : dcalage de limage par rapport la bordure ;
border-image-repeat: : type de rptition de limage.
Proprits dcoratives
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.5+
9.0+
3.1+
10.5+
non
nombre
inherit
outline-offset:
Pre {
outline: solid 1px orange;
outline-offset: 5px;
}
Dfinir lespacement entre un contour (outline) et le ct ou la bordure (border) dun lment. Un contour est une ligne dessine autour des lments,
en dehors de la bordure.
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.5+
9.0+
4.0+
10.5+
non
box-shadow:
dcalage horizontal droite

dcalage 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 porte sur nimporte quel lment HTML. La valeur
optionnelle inset diffuse lombre lintrieur de la bote.
COMPATIBILIT
Firefox
Chrome
Safari
Opera
MSI Explorer
3.5+
9.0+
3.1+
10.5+
9.0+
text-shadow:
dcalage horizontal droite

dcalage vertical en bas
fondu
couleur
h1 {text-shadow:
2px 2px 4px
#999;}
Crer une ombre porte sous un texte de contenu.

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.5+
9.0+
3.1+
10.5+
10.0+
Arrire-plans
Images multiples
CSS 3 rend possible laffichage de plusieurs images darrire-plan sur un
mme lment, en cumulant les valeurs au sein des proprits backgroundimage, background-position et background-repeat, ces valeurs tant
simplement spares 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+
Proprits dcoratives
background-position: Il est possible de prciser 4 valeurs de position, laide dun nombre associ aux mots-cls 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+
Dgrad linaire
La valeur linear-gradient de la proprit background-image permet de
gnrer des arrire-plans de couleur dgrade, dune couleur lautre ou
via plusieurs couleurs intermdiaires (dites couleurs stop ).
back-groundimage:
orientation du dgrad :
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+
Dgrad radial
La valeur radial-gradient de la proprit background-image permet
de gnrer des arrire-plans de couleur dgrade radiale, dune couleur
lautre ou via plusieurs couleurs intermdiaires (couleurs stop).
backgroundimage:
orientation du dgrad :
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%;
}
Spcifier les dimensions des images darrire-plan dans le but de les adapter
celles de llment sur lequel elles sont appliques. cover (optionnelle) redimensionne limage 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+
Proprits dcoratives
background-clip:
padding-box
border-box
content-box
p {background-clip:
content-box;}
Spcifier les limites de rendu du fond dun lment.

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 darrire-plan (daprs lorigine de limage darrire-plan).

COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
3.6+
9.0+
4.0+
10.5+
9.0+
Proprits de positionnement
Multicolonnage
CSS 3 offre la possibilit de prsenter un texte sur plusieurs colonnes,
linstar des journaux papier, via la proprit raccourcie column et ses
proprits drives :
column-count: : nombre de colonnes ;
column-gap: : espace entre les colonnes ;

column-width: : largeur des colonnes ;
column-span: : rpartition dun lment sur plusieurs colonnes ;
column-rule: : trait de sparation entre les colonnes ;
break-before: : saut de colonne avant llment ;
break-after: : saut de colonne aprs llment ;
break-inside: : saut de colonne au sein de llment ;
column-fill: : rpartition du contenu (na deffet que sur un mdia 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 modle de bote flexible ajoute au modle de bote classique de nouveaux
potentiels, parmi lesquels la possibilit dalterner entre une distribution horizontale ou verticale des lments, de disposer de largeurs fluides dans les deux
sens et, surtout, de pouvoir dfinir lordre exact daffichage des botes lcran.
Proprits :
display: flex : attribution du modle flexible (autre valeur : inline-flex) ;

flex-direction: : sens daffichage (valeurs : row column, reverse-raw,
reverse-column) ;
order: : ordre daffichage (pondration) ;
justify-content: : alignement dans laxe principal (valeurs : flex-start,
flex-end, center, space-between, space-around) ;
align-items: : alignement dans laxe secondaire (valeurs : flex-start,
flex-end, center, baseline, stretch).
Exemple :
#main {
display: flex;
flex-direction: reverse-column; /* distribution en
colonne inverse */
}
NOTE Les spcifications sur Flexible Box Model ont t radicalement modifies en
mars 2012. Un certain nombre de proprits ont t renommes et leurs fonctions
prcises. Nous adoptons ici les dernires 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 proprits parmi les schmas de positionnement,
grid-columns: et grid-rows:, conjointement deux nouvelles units de
mesure, la grille (gr) et la fraction (fr).
Exemple de construction de 2 colonnes et 3 ranges :
body {
display: grid;
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
Les lments sont ensuite disposs dans la grille laide des proprits
grid-column et grid-row :
#item {grid-column: 2; grid-row: 1 4;}
/*stend 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
Modle de positionnement destin rpartir du contenu au sein de zones
distinctes.
Exemple :
article {
flow-into: article_flow;
}
#region1, #region2, #region3, #region4 {
flow-from: article_flow;
}
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
non
non
non
10.0+
Exclusions et Shapes
Surfaces dfinies dans lesquelles le contenu peut (ou ne pas) scouler.
Exemple :
#exclusion { wrap-flow: both; } /* le contenu scoule autour
de la forme */
#rond { shape-inside: circle; } /* le contenu scoule dans
une forme circulaire */
COMPATIBILIT
Firefox
Chrome
Safari
Opera
IE
non
non
non
non
non
Transformations
Transform
rotate() rotation de llment
scale(), scaleX(), scaleY()
zoom (agrandissement ou rduction)
transform:
translate(), translateX(), translateY()

translation selon laxe X et/ou Y
skewX(), skewY() dformation de llment

matrix() matrice mathmatique
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
Proprits :
transform-origin
transform-style
perspective
perspective-origin
backface-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: est la proprit raccourcie, dont sont drives les proprits :
transition-property: : proprit(s) animer ;
transition-duration: : dure de la transition (en s ou ms) ;
transition-delay: : dlai avant de dmarrer (en s ou ms) ;
transition-timing-function: : acclration de la transition. Valeurs : linear
(linaire), ease/ease-out (rapide puis lent), ease-in (lent puis rapide), easein-out (lent-rapide-lent), cubic-Bezier.
Les proprits concernes par les transitions sont toutes celles qui peuvent
tre dfinies par une valeur numrique : 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 proprit raccourcie, dont sont drives les proprits :
animation-name : nom de lanimation ;
animation-duration : dure totale ;
animation-delay : attente avant le dbut de lanimation ;
animation-iteration-count : nombre ditrations ;
animation-timing-function : acclration (voir Transitions) ;
animation-direction : sens de lanimation (normal ou alternate).
Exemple :
@keyframes disparition {
0% {opacity: 1;} /* opacit complte */
50% {opacity: 0;} /* opacit nulle la moiti de
lanimation */
100% {opacity: 1;} /* retour ltat initial */
}
img {animation: disparition 2s infinite;}
Safari
Opera
IE
10.0+
4.0+
non
non
Chez le mme diteur

Mmento HTML5, R. RIMEL
Mmento CSS 2, 3e d. R. GOETTER
CSS avances : 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
Mmento XHTML, 2e d. R. GOETTER
Mmento Sites web, 3e d. E. SLOM
Code diteur : G13665
Chrome
5.0+
ISBN : 978-2-212-13665-4
Firefox
Conception : Nord Compo
COMPATIBILIT
Merci
davoir achet
ce mmento.
Vous pouvez le retrouver

ainsi que toute la collection
en version papier dans toutes
les bonnes librairies !
HTML5
mmento mmento
Dcouvrez toute la collection mmento

sur : www.eyrolles.com
Ergonomie
web
Rodolphe Rimel
2e
dition
Amlie Boucher
Rodolphe Rimel
Mmento HTML5
978-2-212-13420-9
Amlie Boucher
Mmento - Ergonomie web
978-2-212-12698-3
mmento mmento
Sites
web
Les bonnes pratiques
3 e d i t i on
lie S l o m
I n d ust r ia lisa t ion
PHP5
et les contributeurs Opquast
Outils &
bonnes pratiques
Jean-Fran ois L p in e
Elie Slom , Opquast

Mmento Sites web Les bonnes pratiques
978-2-212-12802-4
Jean-Franois Lpine
Mmento Industrialisation PHP 5
978-2-212-13480-3
Chez le mme diteur :
Raphal Goetter
CSS avances
978-2-212-13405-6
Rodolphe Rimel
HTML5
978-2-212-12982-3
Tous les livres informatiques sont sur
www.editions-eyrolles.com
Et pour toutes les nouveauts numriques,

retrouvez-nous sur Twitter et Facebook
@ebookEyrolles
EbooksEyrolles

Memento Css3

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Memento Css3

Hochgeladen von

Copyright:

Verfügbare Formate

mmento

Compatibilit avec les navigateurs

les lments propritaires (ex. -ms-filter, -ms-zoom, -webkit-mask).

Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird

Syntaxe des pseudo-lments

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

gr : grid (valeur de grille, dfinie dans le Grid Positionning Module).

calc() introduit les fonctions de calcul au sein dune valeur.

:lang : cible un lment selon sa langue ou celle du document.

:not : ngation dun slecteur.

Slecteur adjacent gnral

attr^="kiwi"] : slection si lattribut attr dbute par la chane kiwi .

attr~="kiwi"] : si lattribut contient exactement kiwi au sein de

COMPATIBILIT Slecteurs CSS 3

Exception : les slecteurs dattributs sont compatibles depuis Internet Explorer 7.

:enabled : lment actif.

COMPATIBILIT Slecteurs de formulaires

device-width, device-height : dimension du priphrique ;

scan : dcrit le processus de balayage des priphriques de sortie de type

grid : dtermine si le priphrique de sortie est un priphrique en grille

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

Proprits de botes et contenu

Les composantes de padding et

Proprits de botes et contenu

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

Csure dun mot long un endroit

#intro {text-overflow: ellipsis;}

Ajout dun signe pour indiquer que le

Variantes spcifiques de la proprit CSS 2 overflow, qui agissent sur

Diffrentes possibilits de dbordements de contenu : scroll, dfilement

Proprits de botes et contenu

div {appearance: button;}

Donner un rendu dlment dinterface utilisateur standard du navigateur.

textarea {resize: vertical;}

Dfinir si llment doit tre redimensionnable ou non par lutilisateur.

Adoucir les effets de crnelage des caractres de texte.

tirer ou condenser une famille de police.

Dfinir un contour autour de chaque lettre dun texte.

Proprits de botes et contenu

Affiner le calcul de linterlettrage sur les contenus de textes justifis. Par

div {white-space: pre;}

footer {text-wrap: suppress;}

Spcifier les rgles de csure.

Afficher une police exotique embarque sur le serveur.

NOTE Les diffrents formats de polices actuels sont :

.ttf : TrueType Font

Valeurs RGBa et HSLa

#nav a {opacity: 0.6;}

Agir sur lopacit dun lment, cest--dire son degr de transparence.

longueur (ventuellement par

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

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

border-image-outset: : dcalage de limage par rapport la bordure ;

border-image-repeat: : type de rptition de limage.

dcalage horizontal droite

dcalage horizontal droite

Crer une ombre porte sous un texte de contenu.

.button { background-image: lineargradient(to right,

Dimensions, limites et origine

Spcifier les limites de rendu du fond dun lment.

Position de la zone darrire-plan (daprs lorigine de limage darrire-plan).

column-gap: : espace entre les colonnes ;

Flexible Box Model

display: flex : attribution du modle flexible (autre valeur : inline-flex) ;