Memento css3 PDF

CSS3
mémento
2 e é d it io n
Ra p ha ë l G o e t t e r
Généralités
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une
trentaine de modules distincts, dont une partie est encore à l’état de brouillon.
Compatibilité avec les navigateurs

Parmi les 130 propriétés et 35 sélecteurs nouveaux, une majorité est déjà
reconnue par les navigateurs actuels, à savoir Firefox 4+, Opera 11+,
Chrome 10+, Safari 5+ et Internet Explorer 10.
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs.

IE 7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
Préfixes propriétaires
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
dans les spécifications, chaque navigateur a carte blanche pour construire ses
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur
propriétaire. Lorsque la spécification atteint le stade de Recommandation
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask).
LISTE DES PRÉFIXES
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird

-ms- Microsoft Internet Explorer
-o- Opera
-webkit- Moteurs WebKit (ex. Safari et Chrome)
-khtml- Moteurs KHTML (ex. Linux KDE)
-xv- Propriétés auditives sur Opera
Syntaxe des pseudo-éléments

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

■ :after [CSS 2] ■ ::after [CSS 3]
■ :before [CSS 2] ■ ::before [CSS 3]
Unités de valeur
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre 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 conservée).
■ vmin : hauteur ou largeur du viewport (la valeur la + petite est conservée).
■ fr : fraction.
Généralités
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module).

■ deg, rad, s, ms : degré, radian, seconde, milliseconde.
Fonctions
■ calc() introduit les fonctions de calcul au sein d’une valeur.
Ex. div {width: calc(100%-20px)}
■ :matches() introduit la notion de factorisation au sein du sélecteur.
Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens
descendants d’un <div> ou d’un <p>.
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+.
Sélecteurs
■ :lang : cible un élément selon sa langue ou celle du document.
■ :last-child : dernier enfant d’un élément.
■ :nth-child : nième enfant d’un élément.
■ :nth-last-child : nième enfant en commençant par la fin.
■ :first-of-type : 1er enfant du type désigné.
■ :nth-of-type : nième du type désigné.
■ :last-of-type : dernier du type désigné.
■ :nth-last-of-type : nième enfant d’un type en commençant par la fin.
■ :only-child : enfant unique.
■ :only-of-type : élément unique du type désigné.
■ :empty : élément sans enfants.
■ :target : cible d’une ancre.
Ex. <a href="#cible">... <h1 id="cible">
■ :not : négation d’un sélecteur.
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe
bloc.
Sélecteur adjacent général

E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E).
Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent
un bloc de citation.
Sélecteurs d’attributs
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
■ attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
■ attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
la chaîne contenant la valeur.
■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
valeurs séparées par des espaces.
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3

Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 9.0+
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7.

Généralités
Sélecteurs de formulaires
■ :enabled : élément actif.
■ :disabled : élément inactif.
■ :checked : élément coché.
■ :required : élément requis pour la soumission.
■ :optional : élément optionnel lors de la soumission.
■ :valid : élément qui remplit les exigences de son type.
■ :invalid : élément qui ne remplit pas (encore) les exigences.
COMPATIBILITÉ Sélecteurs de formulaires
10.0+
4.0+ 10+ 5.0+ 10.5+
9+ pour :checked
Media Queries
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
de styles à un environnement défini par un (ou plusieurs) des critères suivants :
■ width, height : dimension (largeur, hauteur) de la zone d’affichage ;
■ device-width, device-height : dimension du périphérique ;

■ orientation : orientation du périphérique (portait ou paysage) ;
■ device-pixel-ratio : densité de pixels du périphérique de sortie ;
■ resolution : résolution du périphérique (en dpi) ;
■ color : prise en charge de la couleur (en bits/pixel) ;
■ color-index : nombre d’entrées dans la table de couleurs indexées ;
■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ;
■ monochrome : nombre de bits par pixel sur un périphérique monochrome
(échelle de gris) ;
■ scan : décrit le processus de balayage des périphériques de sortie de type
télévision.
■ grid : détermine si le périphérique de sortie est un périphérique en grille
ou bitmap.
Exemple : @media (max-width:480px) {body {background: green;}}
La couleur de <body> devient verte lorsque la largeur du média est inférieure
ou égale à 480 pixels.
COMPATIBILITÉ
Firefox Chrome Safari Opera MSI Explorer
3.5+ 9.0+ 4.0+ 10.5+ 9.0+
Propriétés de boîtes et contenu

■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
Les composantes de padding et

border sont incluses à l’intérieur de
la boîte. Elles ne s’ajoutent plus à
la largeur générale de l’élément ; la
largeur du contenu (width) en est par
conséquent réduite.
COMPATIBILITÉ
3.0+ 9+ 3.1+ 10.5+ 8.0+
■ word-wrap:
normal
break-word
Césure d’un mot long à un endroit

; #aside {word-wrap: break-word;}
arbitraire afin de provoquer un retour à

la ligne.
COMPATIBILITÉ
3.5+ 9.0+ 3.1+ 10.5+ 6.0+
■ text-overflow:
clip
ellipsis
chaîne
; #intro {text-overflow: ellipsis;}
Ajout d’un signe pour indiquer que le

contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points
de suspension (…) à l’endroit où le terme
est masqué. Il est également possible d’indi-
quer une chaîne de caractères prédéfinie
(ex. text-overflow: ‟etc.”;).
COMPATIBILITÉ
5.0+ 9.0+ 3.1+ 10.5+ 6.0+
visible
;
hidden
■ overflow-x: scroll p {overflow-x: auto;
■ overflow-y: auto overflow-y: hidden;}
no-display
no-content
Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur
un seul axe à la fois : overflow-x gère les débordements horizontaux et
overflow-y les dépassement verticaux.
COMPATIBILITÉ
3.0+ 9.0+ 3.1+ 10.5+ 6.0+
auto
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
Différentes possibilités de débordements de contenu : scroll, défilement

automatique (marquee) ou déplacement manuel (move).
COMPATIBILITÉ
non non non non non
normal
;
icon
window
■ appearance: button
div {appearance: button;}
menu
field
Donner un rendu d’élément d’interface utilisateur standard du navigateur.
COMPATIBILITÉ
1+ 1+ 3.0+ non non
none
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
Définir si l’élément doit être redimensionnable ou non par l’utilisateur.

COMPATIBILITÉ
4+ 9+ 4.0+ non non
■ font-smoothing:
none
subpixel-antialiased
antialiased
; body {font-smoothing:
antialiased;}
Adoucir les effets de crénelage des caractères de texte.

COMPATIBILITÉ
non 10 Mac 5.0+ Mac non non
wider
narrower
ultra-condensed
extra-condensed
;
condensed
semi-condensed
■ font-stretch: normal
h1 {font-stretch: expanded;}
semi-expanded
expanded
extra-expanded
ultra-expanded
inherit
Étirer ou condenser une famille de police.
COMPATIBILITÉ

9+ non non non 9.0+
#stroke {
■ text-stroke:
text-fill-color
text-stroke-color
text-stroke-width
; text-fill-color: #fff;
text-stroke-color: lightblue;
text-stroke-width: 2px;
}
Définir un contour autour de chaque lettre d’un texte.

COMPATIBILITÉ
non 9.0+ 3.1+ non non
auto
inter-word
inter-ideograph div {
■ text-justify:
inter-cluster
distribute
kashida
; text-align:justify;
text-justify:inter-word;
}
trim
newsletter
Affiner le calcul de l’interlettrage sur les contenus de textes justifiés. Par
exemple, la valeur newsletter justifie les lignes en distribuant un espace
de remplissage entre les mots et entre les caractères.
COMPATIBILITÉ
non non non non non
normal
■ white-space:
pre
nowrap
pre-wrap
pre-line
; div {white-space: pre;}
Comment traiter les espaces blancs entre les mots ou les éléments.
COMPATIBILITÉ

3.5+ 3+ 3+ 9+ 8+
normal
■ text-wrap:
none
unrestricted
suppress
; footer {text-wrap: suppress;}
Spécifier les règles de césure.

COMPATIBILITÉ
non non non non non
Propriétés décoratives
■ @font-face Afficher une police exotique embarquée sur le serveur.
NOTE Les différents formats de polices actuels sont :

.ttf : TrueType Font
.otf : OpenType Font
.eot : Embedded OpenType (propriétaire 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É
3.5+ 9.0+ 3.2+ 10.5+ 6.0+
Formats @font-face reconnus

Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
.eot .eot
.ttf .ttf .ttf .ttf .ttf
.otf .otf .otf .otf
.woff .woff .woff .woff .woff
.svg .svg .svg .svg
Valeurs RGBa et HSLa

RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
la transparence ou semi-transparence à une couleur définie pour les propriétés
color, background-color, border-color, box-shadow et text-shadow.
Ex. border-color: rgba(0,255,0,0.8) indique une bordure de couleur verte
opaque à 80 %.
COMPATIBILITÉ
3.0+ 1.0+ 3.0+ 10.5+ 9.0+
■ opacity:
valeur entre 0 et 1
inherit ; #nav a {opacity: 0.6;}
Agir sur l’opacité d’un élément, c’est-à-dire son degré de transparence.

0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
la valeur par défaut de 1, il est totalement opaque.
COMPATIBILITÉ
3.0+ 9.0+ 3.1+ 10.5+ 9.0+
.bloc {
border-radius: 15px 0 15px 0 /
■ border-
radius:
longueur (éventuellement par
paires : longueur 1/longueur 2)
pourcentage
; 30px 0 30px 0;
/* angle 1,2,3,4 horizontal /
1,2,3,4 vertical */
}
COMPATIBILITÉ
3.0+ 9.0+ 3.1+ 10.5+ 9.0+
largeur de la bordure .border {

■ border-
image:
chemin vers l’image
valeur de chacun des traits de
coupe
round / stretch / repeat / space
; border-width: 7px 7px 16px 7px;
border-image: url(block.png)
7 7 16 7 stretch;
}
Afficher une image au sein des bordures d’un élément et jouer sur différents as-
pects de l’image tels que l’étirement ou la répétition. round (répétition) et stretch
(étirement) indiquent le mode de distribution des parties latérales de l’image.
border-image: est la propriété raccourcie, dont sont dérivées les propriétés
suivantes :
■ border-image-source: : URL de l’image ;
■ border-image-slice: : valeurs des traits de coupe ;

■ border-image-width: : largeur de la bordure ;
■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ border-image-repeat: : type de répétition de l’image.
COMPATIBILITÉ
3.5+ 9.0+ 3.1+ 10.5+ non
Pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor-

der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
3.5+ 9.0+ 4.0+ 10.5+ non
décalage horizontal à droite

img {box-shadow:
;
décalage vertical en bas
8px 8px 10px #aaa;}
fondu
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
couleur
et couleur #aaa */
(inset / outset)
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur
optionnelle inset diffuse l’ombre à l’intérieur de la boîte.
COMPATIBILITÉ
Firefox Chrome Safari Opera MSI Explorer
3.5+ 9.0+ 3.1+ 10.5+ 9.0+
;
décalage horizontal à droite
h1 {text-shadow:
décalage vertical en bas
■ text-shadow: fondu
2px 2px 4px
#999;}
couleur
Créer une ombre portée sous un texte de contenu.
COMPATIBILITÉ
3.5+ 9.0+ 3.1+ 10.5+ 10.0+
Arrière-plans
Images multiples
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un
même élément, en cumulant les valeurs au sein des propriétés background-
image, background-position et background-repeat, ces valeurs étant
simplement séparées par une virgule.
Exemple :
div {
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
right bottom no-repeat;
}
COMPATIBILITÉ
3.6+ 9.0+ 3.1+ 10.5+ 9.0+
■ background-position: Il est possible de préciser 4 valeurs de po-

sition, à l’aide d’un nombre associé aux mots-clés top, right, bottom et left.
Exemple : background-position: left 3px bottom 10% (à 3 px de la gauche
et à 10 % du bas)
COMPATIBILITÉ

13+ non non 12 9.0+
Dégradé linéaire
La valeur linear-gradient de la propriété background-image permet de
générer des arrière-plans de couleur dégradée, d’une couleur à l’autre ou
via plusieurs couleurs intermédiaires (dites « couleurs stop »).
orientation du dégradé :
to top / to right / to
.button { back-
■ back-ground-
image:
bottom / to left
ou angle
couleurs
(position des couleurs stop
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
en pourcentage)
COMPATIBILITÉ
3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Dégradé radial
La valeur radial-gradient de la propriété background-image permet
de générer des arrière-plans de couleur dégradée radiale, d’une couleur à
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop).
orientation du dégradé :
to top / to right / to
;
bottom / to left
div {background-image:
■ background- ou angle
radial-gradient(to right,
image: forme : circle / ellipse
blue, orange 25%)}
couleurs
(position des couleurs stop
en pourcentage)
COMPATIBILITÉ
3.6+ 10.0+ 5.1+ 11.1+ 10.0+
Dimensions, limites et origine

div {
background:
;
longueur
pourcentage url(background.jpg)
■ background-size: cover left top no-repeat;
contain background-size: 80% 80%;
}
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi-
mensionne l’image à la taille minimale pouvant être contenue, et contain à la
taille maximale.
COMPATIBILITÉ
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Spécifier les limites de rendu du fond d’un élément.

COMPATIBILITÉ
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan).

COMPATIBILITÉ
3.6+ 9.0+ 4.0+ 10.5+ 9.0+
Propriétés de positionnement
Multicolonnage
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à
l’instar des journaux papier, via la propriété raccourcie column et ses
propriétés dérivées :
■ column-count: : nombre de colonnes ;
■ column-gap: : espace entre les colonnes ;

■ column-width: : largeur des colonnes ;
■ column-span: : répartition d’un élément sur plusieurs colonnes ;
■ column-rule: : trait de séparation entre les colonnes ;
■ break-before: : saut de colonne avant l’élément ;
■ break-after: : saut de colonne après l’élément ;
■ break-inside: : saut de colonne au sein de l’élément ;
■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé).

Exemple :
.chapo {
column-count: 2;
column-gap: 10px;
column-rule: 1px solid #ccc;
}
COMPATIBILITÉ

3+ 9+ 3.1+ 10.5+ 10.0+
Flexible Box Model

Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon-
tale ou verticale des éléments, de disposer de largeurs fluides dans les deux
sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran.
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : row column, reverse-raw,
reverse-column) ;
■ order: : ordre d’affichage (pondération) ;
■ justify-content: : alignement dans l’axe principal (valeurs : flex-start,

flex-end, center, space-between, space-around) ;
■ align-items: : alignement dans l’axe secondaire (valeurs : flex-start,
flex-end, center, baseline, stretch).
Exemple :
#main {
display: flex;
flex-direction: reverse-column; /* distribution en
colonne inversée */
}
NOTE Les spécifications sur Flexible Box Model ont été radicalement modifiées en
mars 2012. Un certain nombre de propriétés ont été renommées et leurs fonctions
précisées. Nous adoptons ici les dernières conventions de nommage.
COMPATIBILITÉ
3.5+ 10.0+ 3.2+ non 10.0+
Grid Layout Module

CSS 3 introduit de nouvelles propriétés parmi les schémas de positionnement,
grid-columns: et grid-rows:, conjointement à deux nouvelles unités de
mesure, la grille (gr) et la fraction (fr).
Exemple de construction de 2 colonnes et 3 rangées :
body {
display: grid;
grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px;
}
Les éléments sont ensuite disposés dans la grille à l’aide des propriétés
grid-column et grid-row :
#item {grid-column: 2; grid-row: 1 4;}
/*s’étend sur toute la hauteur de 4 lignes */
#item2, #item3 {grid-column: 1; grid-row: 2;}
COMPATIBILITÉ
non non non non 10.0+
Regions
Modèle de positionnement destiné à répartir du contenu au sein de zones
distinctes.
Exemple :
article {
flow-into: article_flow;
}
#region1, #region2, #region3, #region4 {

flow-from: article_flow;
}
COMPATIBILITÉ
non non non non 10.0+
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
#exclusion { wrap-flow: both; } /* le contenu s’écoule autour
de la forme */
#rond { shape-inside: circle; } /* le contenu s’écoule dans
une forme circulaire */
COMPATIBILITÉ
non non non non non
Transformations
Transform
rotate() rotation de l’élément
scale(), scaleX(), scaleY()
;
zoom (agrandissement ou réduction)
■ transform: translate(), translateX(), translateY()
translation selon l’axe X et/ou Y
skewX(), skewY() déformation de l’élément
matrix() matrice mathématique
Exemple :
a:hover , a:focus {
transform: scale(2) rotate(15deg) translate(5px,10px);
}
COMPATIBILITÉ
3.5+ 10.0+ 3.2+ 10.6+ 9.0+
Transform 3D
Propriétés :
■ transform-origin ■ perspective-origin
■ transform-style ■ backface-visibility
■ perspective
Exemple :
div {transform-style: preserve-3d; transform: rotateY(10deg)}
COMPATIBILITÉ

10+ 12.0+ 4.0+ non 10.0+
Transitions
transition: est la propriété raccourcie, dont sont dérivées les propriétés :
■ transition-property: : propriété(s) à animer ;
■ transition-duration: : durée de la transition (en s ou ms) ;
■ transition-delay: : délai avant de démarrer (en s ou ms) ;
■ transition-timing-function: : accélération de la transition. Valeurs : linear

(linéaire), ease/ease-out (rapide puis lent), ease-in (lent puis rapide), ease-
in-out (lent-rapide-lent), cubic-Bezier.
Les propriétés concernées par les transitions sont toutes celles qui peuvent
être définies par une valeur numérique : width, height, min/max-width,
min/max-height, position, margin, padding, mais aussi background,
opacity, font-weight, text-shadow, color, line-height, vertical-align,
letter-spacing, visibility, z-index, etc.
Exemple :
#nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
4.0+ 10.0+ 3.2+ 10.6+ 10.0+
Animations
animation: est la propriété raccourcie, dont sont dérivées les propriétés :
■ animation-name : nom de l’animation ;
■ animation-duration : durée totale ;
■ animation-delay : attente avant le début de l’animation ;
■ animation-iteration-count : nombre d’itérations ;
■ animation-timing-function : accélération (voir Transitions) ;
■ animation-direction : sens de l’animation (normal ou alternate).

Exemple :
@keyframes disparition {
0% {opacity: 1;} /* opacité complète */
50% {opacity: 0;} /* opacité nulle à la moitié de
l’animation */
100% {opacity: 1;} /* retour à l’état initial */
}
img {animation: disparition 2s infinite;}
COMPATIBILITÉ
5.0+ 10.0+ 4.0+ non non
Chez le même éditeur…

ISBN : 978-2-212-13665-4
Code éditeur : G13665
Mémento HTML5, R. RIMELÉ

Mémento CSS 2, 3e éd. R. GOETTER
Conception : Nord Compo
CSS avancées : Vers HTML 5 et CSS 3. R. GOETTER

CSS 2 : Pratique du design web, 3e éd. R. GOETTER
CSS 3 pour les web designers. D. CEDERHOLM
HTML 5 pour les web designers. J. KEITH
Mémento XHTML, 2e éd. R. GOETTER
Mémento Sites web, 3e éd. E. SLOÏM
Merci
d’avoir acheté
ce mémento.
Vous pouvez le retrouver

ainsi que toute la collection
en version papier dans toutes
les bonnes librairies !
Découvrez toute la collection mémento

sur : www.eyrolles.com
HTML5
mémento mémento
Rodolphe Rimelé
Rodolphe Rimelé
Mémento HTML5
978-2-212-13420-9
Ergonomie
web
Amélie Boucher
2eédition
Mémento - Ergonomie web
Amélie Boucher
978-2-212-12698-3
mémento mémento
web
Les bonnes pratiques
Sites
Elie Sloïm , Opquast

Mémento Sites web -
Les bonnes pratiques
3 e éd i t i on
É lie S l o ïm
et les contributeurs Opquast
978-2-212-12802-4
PHP5 I n d ust r ia lisa t ion
Jean-François Lépine
Outils &
bonnes pratiques Mémento -
Jean-Franç ois L ép in e
Industrialisation PHP 5
978-2-212-13480-3
Chez le même éditeur :
Raphaël Goetter
CSS avancées
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 nouveautés numériques,
retrouvez-nous sur Twitter et Facebook
@ebookEyrolles
EbooksEyrolles

Memento css3 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Memento css3 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Memento css3 PDF

Transféré par

Droits d'auteur :

Formats disponibles

CSS3

Compatibilité avec les navigateurs

IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs.

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

Syntaxe des pseudo-éléments

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

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

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

Sélecteur adjacent général

COMPATIBILITÉ Sélecteurs CSS 3

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

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

Propriétés de boîtes et contenu

Les composantes de padding et

Césure d’un mot long à un endroit

arbitraire afin de provoquer un retour à

Ajout d’un signe pour indiquer que le

Différentes possibilités de débordements de contenu : scroll, défilement

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

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

Firefox Chrome Safari Opera IE

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

Firefox Chrome Safari Opera IE

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

NOTE Les différents formats de polices actuels sont :

Formats @font-face reconnus

Valeurs RGBa et HSLa

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

largeur de la bordure .border {

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

Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor-

décalage horizontal à droite

■ background-position: Il est possible de préciser 4 valeurs de po-

Firefox Chrome Safari Opera IE

Dimensions, limites et origine

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

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

■ column-gap: : espace entre les colonnes ;

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

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

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

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

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

Firefox Chrome Safari Opera IE

Flexible Box Model

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

Grid Layout Module

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

Firefox Chrome Safari Opera IE

■ transition-timing-function: : accélération de la transition. Valeurs : linear

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

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

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

Chez le même éditeur…

Mémento HTML5, R. RIMELÉ

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

Vous pouvez le retrouver

Découvrez toute la collection mémento

Elie Sloïm , Opquast