Eyrolles Memento CSS 3
Transféré par
freud33Eyrolles Memento CSS 3
Transféré par
freud33Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+ CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE 7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
IE 8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE 7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
IE 8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE
IE
7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE 7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
IE 8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE
IE
7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE
IE
7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Généralités Généralités Généralités Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés de boîtes et contenu Propriétés décoratives
CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une Fonctions Sélecteurs de formulaires COMPATIBILITÉ normal auto (valeur initiale) Formats @font-face reconnus
;
trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Firefox Chrome Safari Opera IE icon start
■ calc() introduit les fonctions de calcul au sein d’une valeur. ■ :enabled : élément actif. window end p{
Firefox Chrome Safari Opera IE 9+ IE 6, IE 7, IE 8
Compatibilité avec les navigateurs Ex. div {width: calc(100% - 20px)}
:matches() introduit la notion de factorisation au sein du sélecteur.
■ :disabled : élément inactif.
3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ appearance: button
menu
div {appearance: button;}
■ text-align-last:
left
right ; text-align:justify;
text-align-last:center; .ttf .ttf .ttf .ttf
.eot
.ttf
.eot
Parmi les 150 propriétés et 40 sélecteurs nouveaux, une majorité est déjà
;
■
■ :checked : élément coché.
reconnue par les dernières versions des navigateurs Firefox, Opera, Chrome, Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens normal field center } .otf .otf .otf .otf
Safari et Internet Explorer. descendants d’un <div> ou d’un <p>.
■ :required : élément requis pour la soumission. ■ word-wrap: break-word
#aside {word-wrap: break-word;}
Donner un rendu d’élément d’interface utilisateur standard du navigateur. justify
.woff .woff .woff .woff .woff
■ :optional : élément optionnel lors de la soumission. inherit
À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer Césure d’un mot long à un endroit COMPATIBILITÉ .svg .svg .svg .svg
COMPATIBILITÉ Spécifie l’alignement des contenus de la dernière ligne de texte, ou avant un
IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. Ces fonctions ne sont actuellement prises en charge que par les navigateurs récents ■ :valid : élément qui remplit les exigences de son type. arbitraire afin de provoquer un retour à Firefox Chrome Safari Opera IE saut de ligne forcé. Écrase la valeur globale de text-align.
IE
IE
7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs.
8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs.
(à partir d’Internet Explorer 9 par exemple). ■ :invalid : élément qui ne remplit pas (encore) les exigences. la ligne. 1+ 1+ 3.0+ 24+ non COMPATIBILITÉ
Valeurs RGBa et HSLa
IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. COMPATIBILITÉ Sélecteurs de formulaires RGBa et HSLa ne sont pas des propriétés mais des valeurs qui ajoutent de
IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. Sélecteurs none Firefox Chrome Safari Opera IE la transparence ou semi-transparence à une couleur définie pour les propriétés
Préfixes propriétaires
■
■
:lang : cible un élément selon sa langue ou celle du document.
:last-child : dernier enfant d’un élément.
Firefox
4.0+
Chrome
10+
Safari
5.0+
Opera
10.5+
IE
10.0+
9+ pour :checked
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ resize:
both
horizontal
vertical
; textarea {resize: vertical;}
12+ 25+
normal
7+ non 6 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 %.
;
Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas :nth-child() : nième enfant d’un élément. 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ pre
■ Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ
bloquer l’évolution des agents utilisateurs : à partir des informations dispensées
■ :nth-last-child() : nième enfant en commençant par la fin. COMPATIBILITÉ ■ white-space: nowrap div {white-space: pre;}
;
dans les spécifications, chaque navigateur a carte blanche pour construire ses pre-wrap Firefox Chrome Safari Opera IE
propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur ■ :first-of-type : 1er enfant du type désigné. Media Queries ■ text-overflow:
clip
ellipsis #intro {text-overflow: ellipsis;} Firefox Chrome Safari Opera IE pre-line 3.0+ 1.0+ 3.0+ 10.5+ 9.0+
propriétaire. Lorsque la spécification atteint le stade de Recommandation ■ :nth-of-type() : nième du type désigné. chaîne 4+ 9+ 4.0+ 12.1+ non Comment traiter les espaces blancs entre les mots ou les éléments.
Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée
Candidate (CR), le préfixe doit être supprimé. Cela concerne :
■ les propriétés encore non finalisées (ex. -moz-animation , -webkit-
regions) ;
■
■
: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.
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 ;
Ajout d’un signe pour indiquer que le
contenu d’un élément est rogné.
Ex. La valeur ellipsis affichera des points ■ font-smoothing:
none
subpixel-antialiased
; body {font-smoothing:
antialiased;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
■ 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.
■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). de suspension (…) à l’endroit où le terme antialiased 3.5+ 3+ 3+ 9+ 8+
:only-of-type : élément unique du type désigné. ■ orientation : orientation du périphérique (portait ou paysage) ; 0 rend l’élément (et ses descendants) entièrement invisible, tandis qu’avec
■ est masqué. La déclaration overflow: Adoucir les effets de crénelage des caractères de texte.
la valeur par défaut de 1, il est totalement opaque.
;
LISTE DES PRÉFIXES
:empty : élément sans enfants. ■ resolution : résolution du périphérique (en dpi, dpcm et dppx) ; hidden est nécessaire pour appliquer
■ COMPATIBILITÉ none
p {hyphens: auto;
-moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird :target : cible d’une ancre. ■ color : prise en charge de la couleur (en bits/pixel) ; text-overflow. ■ hyphens: manual (valeur initiale) COMPATIBILITÉ
■ Firefox Chrome Safari Opera IE /* césure autorisée */}
auto Firefox Chrome Safari Opera IE
-ms- Microsoft Internet Explorer Ex. <a href="#cible">... <h1 id="cible"> ■ color-index : nombre d’entrées dans la table de couleurs indexées ; COMPATIBILITÉ non 10 Mac 5.0+ Mac non non
Communique au navigateur la méthode à utiliser pour appliquer la césure 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
-webkit- Moteurs WebKit (ex. Safari et Chrome) ■ :not() : négation d’un sélecteur. ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; Firefox Chrome Safari Opera IE
Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ des mots. La valeur auto confère au navigateur la possibilité de couper les
■ monochrome : nombre de bits par pixel sur un périphérique monochrome wider mots selon les règles typographiques de la langue du document. .bloc {
bloc. (échelle de gris) ; narrower border-radius: 15px 0 1em 50%;
;
longueur (éventuellement
Syntaxe des pseudo-éléments ■ scan : décrit le processus de balayage des périphériques de sortie de type visible ultra-condensed COMPATIBILITÉ
■ border- par paires : longueur 1/ }
Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les Sélecteur adjacent général extra-condensed
radius: /* arrondi de 15px en haut à gauche,
;
télévision. hidden Firefox Chrome Safari Opera IE longueur 2)
;
condensed
pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). ■ grid : détermine si le périphérique de sortie est un périphérique en grille ■ overflow-x: scroll p {overflow-x: auto;
semi-condensed 6+ non 5.1+ non 10+ pourcentage de zéro en haut à droite, puis dans
double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent ou bitmap. ■ overflow-y: auto overflow-y: hidden;} ■ font-stretch: normal
h1 {font-stretch: expanded;} le sens des aiguilles d’une montre */
■ :first-line [CSS 2] ■ ::first-line [CSS 3] un bloc de citation. no-display semi-expanded
Exemple : @media (max-width:480px) {body {background: green;}} COMPATIBILITÉ
no-content expanded
■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] Firefox Chrome Safari Opera IE
Sélecteurs d’attributs La couleur de <body> devient verte lorsque la largeur de fenêtre est inférieure Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur extra-expanded
■ :after [CSS 2] ■ ::after [CSS 3]
■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ».
ou égale à 480 pixels. un seul axe à la fois : overflow-x gère les débordements horizontaux et ultra-expanded Propriétés décoratives 3.0+ 9.0+ 3.1+ 10.5+ 9.0+
:before [CSS 2] ::before [CSS 3] overflow-y les dépassement verticaux. inherit
■ ■
attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ».
COMPATIBILITÉ ■ @font-face Afficher une police exotique embarquée sur le serveur.
■ Étirer ou condenser une famille de police.
Firefox Chrome Safari Opera MSI Explorer COMPATIBILITÉ largeur de la bordure .border {
Unités de valeur attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de
;
■ COMPATIBILITÉ NOTE Les différents formats de polices actuels sont :
3.5+ 9.0+ 4.0+ 10.5+ 9.0+ chemin vers l’image border-width: 7px 7px 16px 7px;
la chaîne contenant la valeur. Firefox
3.0+
Chrome
9.0+
Safari
3.1+
Opera
10.5+
IE
6.0+ Firefox Chrome Safari Opera IE .ttf : TrueType Font ■ border- valeur de chacun des traits border-image: url(block.png)
DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de
9+ non non non 9.0+ .otf : OpenType Font image: de coupe 7 7 16 7 stretch;
valeurs séparées par des espaces. .eot : Embedded OpenType (propriétaire Microsoft) round / stretch / repeat / space }
rem : comme em mais uniquement relatif à la racine (<html>). auto .svg, .svgz : SVG Font
Propriétés de boîtes et contenu
■
■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs
■
■
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 selon
séparées par des traits-d’union.
COMPATIBILITÉ Sélecteurs CSS 3
Firefox Chrome Safari Opera IE
■ box-sizing:
content-box
border-box
inherit
; p {box-sizing: content-box;}
■ overflow-style:
scrollbar
panner
move
marquee
; #advert {overflow-style:
marquee;}
■ text-stroke:
text-fill-color
text-stroke-color
;
#stroke {
text-fill-color: #fff;
text-stroke-color: lightblue;
.woff, .woff2 : Web Open Font Format
Exemple :
@font-face {
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.
text-stroke-width text-stroke-width: 2px; border-image: est la propriété raccourcie, dont sont dérivées les propriétés
l'orientation). 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Les composantes de padding et Différentes possibilités de débordements de contenu : scroll, défilement } font-family: “Kiwi”; suivantes :
■ vmin : hauteur ou largeur du viewport (la valeur la + petite selon border sont incluses à l’intérieur de automatique (marquee) ou déplacement manuel (move). src: url(‘Kiwi-Regular.ttf’) format(“truetype”), url(‘Kiwi-Regular.
■ border-image-source: : URL de l’image ;
Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Définir un contour autour de chaque lettre d’un texte. woff’) format(“woff”);
l'orientation). la boîte. Elles ne s’ajoutent plus à COMPATIBILITÉ border-image-slice: : valeurs des traits de coupe ;
■ fr : fraction de l’espace restant (ex. Flexbox). la largeur générale de l’élément ; la COMPATIBILITÉ } ■
largeur totale de l’élément correspond Firefox Chrome Safari Opera IE
■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). Firefox Chrome Safari Opera IE COMPATIBILITÉ
■ border-image-width: : largeur de la bordure ;
par conséquent à width. non non non non non
non 9.0+ 3.1+ 24+ non ■ border-image-outset: : décalage de l’image par rapport à la bordure ;
■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Firefox Chrome Safari Opera IE
3.5+ 9.0+ 3.2+ 10.5+ 6.0+ ■ border-image-repeat: : type de répétition de l’image.
G14137_memento_CSS3-3ed_01.indd 1 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+
CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+ CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+
CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+
CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+
CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
5€
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Propriétés décoratives Propriétés décoratives Propriétés décoratives Propriétés de positionnement Propriétés de positionnement Transitions
CSS3
mémento
COMPATIBILITÉ
Firefox
3.5+
Chrome
9.0+
Safari
3.1+
Opera
10.5+ 11+
IE
■ 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)
■ background-clip:
padding-box
border-box
content-box
; p {background-clip:
content-box;}
Propriétés :
■ display: flex : attribution du modèle flexible (autre valeur : inline-flex) ;
■ flex-direction: : sens d’affichage (valeurs : column, column-reverse,
row, row-reverse) ;
COMPATIBILITÉ
Firefox
non
Chrome
non
Safari
non
Opera
non
IE
10.0+
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) ;
Spécifier les limites de rendu du fond d’un élément. ■ transition-delay: : délai avant de démarrer (en s ou ms) ;
COMPATIBILITÉ ■ order: : ordre d’affichage (pondération) ;
pre {
■ outline-offset:
nombre
inherit ; outline: solid 1px orange;
outline-offset: 5px;
}
Firefox
13+
Chrome
27+
Safari
7+
Opera
12
IE
9.0+
COMPATIBILITÉ
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
■ 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,
Exclusions et Shapes
Surfaces définies dans lesquelles le contenu peut (ou ne pas) s’écouler.
Exemple :
■ 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().
flex-end, center, baseline, stretch).
Définir l’espacement entre un contour (outline) et le côté ou la bordure (bor- #exclusion { shape-outside: polygon(); } /* le contenu s’écoule Les propriétés concernées par les transitions sont toutes celles qui peuvent
Dégradé linéaire Exemple :
der) d’un élément. Un contour est une ligne dessinée autour des éléments,
en dehors de la bordure.
COMPATIBILITÉ
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 »).
■ background-
origin:
padding-box
border-box
content-box
; p {background-origin:
padding-box;}
#main {
display: flex;
flex-direction: column-reverse; /* distribution en
autour de la forme */
#rond { shape-inside: circle(); } /* le contenu s’écoule dans
une forme circulaire */
ê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.
Position de la zone d’arrière-plan (d’après l’origine de l’image d’arrière-plan). colonne inversée */ COMPATIBILITÉ
Firefox Chrome Safari Opera IE orientation du dégradé :
} Exemple :
3.5+ 9.0+ 4.0+ 10.5+ non to top / to right / to COMPATIBILITÉ Firefox Chrome Safari Opera IE
.button { back-
décalage horizontal à droite
img {box-shadow:
■ background-
image:
bottom / to left
ou angle
couleurs
; ground-image: linear-
gradient(to right,
#D3DAE9, #576E94);}
Firefox
3.6+
Chrome
9.0+
Safari
4.0+
Opera
10.5+
IE
9.0+
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.
non 37+ 7.1+ 24+ non #nav a {transition: all 0.5s ease-in;}
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
;
décalage vertical en bas (position des couleurs stop
8px 8px 10px #aaa;}
fondu 4.0+ 10.0+ 3.2+ 10.6+ 10.0+
■ box-shadow: (taille)
/* 8px à droite et en
bas, 10px de diffusion
en pourcentage) COMPATIBILITÉ Transformations
couleur
(inset / outset)
et couleur #aaa */
COMPATIBILITÉ
Firefox Chrome Safari Opera IE
Propriétés de positionnement Firefox
3.5+
Chrome
10.0+
Safari
3.2+
Opera
24+
IE
10.0+ Transform
Ajouter une ombre portée sur n’importe quel élément HTML. La valeur 3.6+ 9.0+ 4.0+ 11.1+ 10.0+
Multicolonnage
Animations
optionnelle inset diffuse l’ombre à l’intérieur de la boîte. rotate() rotation de l’élément
CSS 3 offre la possibilité de présenter un texte sur plusieurs colonnes, à animation: est la propriété raccourcie, dont sont dérivées les propriétés :
COMPATIBILITÉ l’instar des journaux papier, via la propriété raccourcie column et ses
Grid Layout Module scale(), scaleX(), scaleY()
■ animation-name : nom de l’animation ;
Dégradé radial
;
zoom (agrandissement ou réduction)
propriétés dérivées : CSS 3 introduit de nouvelles propriétés parmi les schémas de positionne-
Firefox Chrome Safari Opera IE La valeur radial-gradient de la propriété background-image permet ■ animation-duration : durée totale ;
3.5+ 9.0+ 3.1+ 10.5+ 9.0+ de générer des arrière-plans de couleur dégradée radiale, d’une couleur à ■ column-count: : nombre de colonnes ;
ment, grid-columns: et grid-rows:, conjointement à la nouvelle unité de ■ transform: translate(), translateX(), translateY()
■ animation-delay : attente avant le début de l’animation ;
mesure "fr". translation selon l’axe X et/ou Y
l’autre ou via plusieurs couleurs intermédiaires (couleurs stop). ■ column-gap: : espace entre les colonnes ; ■ animation-iteration-count : nombre d’itérations ;
Exemple de construction de 2 colonnes et 3 rangées : skewX(), skewY() déformation de l’élément
■ column-width: : largeur des colonnes ;
; ■ animation-timing-function : accélération (voir Transitions) ;
décalage horizontal à droite orientation du dégradé : body {
h1 {text-shadow: matrix() matrice mathématique
décalage vertical en bas forme (ellipse, circle) et display: grid;
text-shadow: 2px 2px 4px div {background-image: ■ column-span: : répartition d’un élément sur plusieurs colonnes ; ■ animation-direction : sens de l’animation (normal ou alternate) ;
;
■ fondu point de départ (top, grid-columns: 150px 1fr; Exemple :
couleur
#999;} ■ background- right, bottom, left, center)
radial-gradient(circle ■ column-rule: : trait de séparation entre les colonnes ;
grid-rows: 50px 1fr 50px;
■ animation-play-state : en cours ou en pause (running ou paused) ;
a:hover , a:focus {
Créer une ombre portée sous un texte de contenu. image: ou angle
at center, blue, orange
■ break-before: : saut de colonne avant l’élément ; } transform: scale(2) rotate(15deg) translate(5px,10px); ■ animation-fill-mode : propriétés conservées par l’élément à la fin de
25%)
(position des couleurs stop l’animation.
■ break-after: : saut de colonne après l’élément ; Les éléments sont ensuite disposés dans la grille à l’aide des propriétés }
COMPATIBILITÉ en pourcentage) Exemple :
Firefox Chrome Safari Opera IE ■ break-inside: : saut de colonne au sein de l’élément ; grid-column et grid-row : COMPATIBILITÉ @keyframes disparition {
COMPATIBILITÉ #item {grid-column: 2; grid-row: 1 4;}
3.5+ 9.0+ 3.1+ 10.5+ 10.0+ ■ column-fill: : répartition du contenu (n’a d’effet que sur un média paginé). 0% {opacity: 1;} /* opacité complète */
Firefox Chrome Safari Opera IE Firefox Chrome Safari Opera IE
Exemple : /*s’étend sur toute la hauteur de 4 lignes */ 50% {opacity: 0;} /* opacité nulle à la moitié de
3.6+ 10.0+ 5.1+ 11.1+ 10.0+ 3.5+ 10.0+ 3.2+ 10.6+ 9.0+
.chapo { #item2, #item3 {grid-column: 1; grid-row: 2;} l’animation */
column-count: 2; 100% {opacity: 1;} /* retour à l’état initial */
Arrière-plans column-gap: 10px;
COMPATIBILITÉ }
Images multiples
Dimensions, limites et origine column-rule: 1px solid #ccc; Firefox Chrome Safari Opera IE Transform 3D img {animation: disparition 2s infinite;}
CSS 3 rend possible l’affichage de plusieurs images d’arrière-plan sur un div { } non 29+ non non 10.0+ Propriétés :
COMPATIBILITÉ
même élément, en cumulant les valeurs au sein des propriétés background- background:
;
longueur
url(background.jpg) COMPATIBILITÉ ■ transform-origin ■ perspective-origin
image, background-position et background-repeat, ces valeurs étant pourcentage Firefox Chrome Safari Opera IE
simplement séparées par une virgule.
■ background-size: cover left top no-repeat; Firefox Chrome Safari Opera IE ■ transform-style ■ backface-visibility 5.0+ 10.0+ 4.0+ 12+ 10+
Regions
Exemple :
div {
contain background-size: 80% 80%;
}
3+ 9+ 3.1+ 10.5+ 10.0+
Modèle de positionnement destiné à répartir du contenu au sein de zones
■ perspective
3 e é dit io n
distinctes. Exemple :
Chez le même éditeur…
ISBN : 978-2-212-14137-5
background: url(“first.jpg”) left top no-repeat, url(“second.jpg”)
Ra p ha ë l Go e t t e r
Code éditeur : G14137
Spécifier les dimensions des images d’arrière-plan dans le but de les adapter div {transform-style: preserve-3d; transform: rotateY(10deg)}
right bottom no-repeat; Exemple :
à celles de l’élément sur lequel elles sont appliquées. cover (optionnelle) redi- Flexible Box Model Mémento HTML5, 2e éd. R. RIMELÉ
} article {
mensionne l’image à la taille minimale pouvant être contenue, et contain à la COMPATIBILITÉ Mémento PHP5 et SQL, 3e éd. C. PIERRE DE GEYER,
Conception : Nord Compo
Le modèle de boîte flexible ajoute au modèle de boîte classique de nouveaux flow-into: article_flow;
COMPATIBILITÉ taille maximale. Firefox Chrome Safari Opera IE
G. PONÇON
potentiels, parmi lesquels la possibilité d’alterner entre une distribution horizon- }
10+ 12.0+ 4.0+ non 10.0+ CSS avancées : Vers HTML 5 et CSS 3. 2e éd. R. GOETTER
Firefox Chrome Safari Opera IE COMPATIBILITÉ tale ou verticale des éléments, de disposer de largeurs fluides dans les deux CSS 3 : Pratique du design web. R. GOETTER, H. GIRAUDEL
3.6+ 9.0+ 3.1+ 10.5+ 9.0+ Firefox Chrome Safari Opera IE sens et, surtout, de pouvoir définir l’ordre exact d’affichage des boîtes à l’écran. #region1, #region2, #region3, #region4 { CSS 3 pour les web designers. D. CEDERHOLM
3.6+ 9.0+ 4.0+ 10.5+ 9.0+ flow-from: article_flow;
HTML 5 pour les web designers. J. KEITH
} Mémento MySQL5, 4e éd. R. RIMELÉ
Mémento jQuery, 2e éd. É. SARRION
G14137_memento_CSS3-3ed_01.indd 2 18/11/14 14:52
Vous aimerez peut-être aussi
- Le Guide de La Transformation Digitale - La Vincent80% (5)Le Guide de La Transformation Digitale - La Vincent283 pages
- Memento - CSS3 - 4e Édition - Raphaël Goetter PDFPas encore d'évaluationMemento - CSS3 - 4e Édition - Raphaël Goetter PDF72 pages
- 7-Langage CSS Part 1 Mise en Forme 2025Pas encore d'évaluation7-Langage CSS Part 1 Mise en Forme 202549 pages
- Programmation Avancée Pour Le Web: Les Feuilles de Styles CSS3 (Cascading Style Sheets)Pas encore d'évaluationProgrammation Avancée Pour Le Web: Les Feuilles de Styles CSS3 (Cascading Style Sheets)21 pages
- Veille Technologique Web - HTML-CSSPas encore d'évaluationVeille Technologique Web - HTML-CSS76 pages
- Langage HTML-css - Modele de Boites - Part-4Pas encore d'évaluationLangage HTML-css - Modele de Boites - Part-435 pages
- Support Du Cours Dev Web Partie 2 CssPas encore d'évaluationSupport Du Cours Dev Web Partie 2 Css46 pages
- 7-Langage CSS Part 1 Mise en Forme 2023-2024Pas encore d'évaluation7-Langage CSS Part 1 Mise en Forme 2023-202447 pages
- Cours - Les - Feuilles - de - Styles - CSS - Cascading - Style - SheetPas encore d'évaluationCours - Les - Feuilles - de - Styles - CSS - Cascading - Style - Sheet47 pages
- Cours - CSS 1. Présentation Générale Du LangagePas encore d'évaluationCours - CSS 1. Présentation Générale Du Langage8 pages
- Programmation Web: Survol Du Langage CssPas encore d'évaluationProgrammation Web: Survol Du Langage Css18 pages
- Fiche N°3 Rappels CSS3, Box Model Et AnnexePas encore d'évaluationFiche N°3 Rappels CSS3, Box Model Et Annexe5 pages
- Pearson Cscharp Lessentiel Du Code Et Des ClassesPas encore d'évaluationPearson Cscharp Lessentiel Du Code Et Des Classes362 pages
- Ediscience Des Equations Differentielles Aux Systemes Dynamiques Tome 2Pas encore d'évaluationEdiscience Des Equations Differentielles Aux Systemes Dynamiques Tome 2329 pages
- Dunod Architectures Logicielles Et MateriellesPas encore d'évaluationDunod Architectures Logicielles Et Materielles587 pages
- Exercices Et Problèmes Dalgorithmique - Dunod (Ktooba - Com)100% (2)Exercices Et Problèmes Dalgorithmique - Dunod (Ktooba - Com)228 pages
- Pygmalion Dictionnaire Des Grandes Batailles Dans Le Monde EuropeenPas encore d'évaluationPygmalion Dictionnaire Des Grandes Batailles Dans Le Monde Europeen711 pages
- L' Ordre Etrange Des Choses La - Antonio DamasioPas encore d'évaluationL' Ordre Etrange Des Choses La - Antonio Damasio749 pages
- Prat Indépendant Auto Entrepreneur Micro Entrepreneur 2022Pas encore d'évaluationPrat Indépendant Auto Entrepreneur Micro Entrepreneur 2022247 pages
- Demain 12ème Année No. 7, 11 1937 01 1938Pas encore d'évaluationDemain 12ème Année No. 7, 11 1937 01 193856 pages
- TD N°1 TETE ET COU Par DR Petit CHATIGREPas encore d'évaluationTD N°1 TETE ET COU Par DR Petit CHATIGRE7 pages
- Devoir 1 Physique Et Chimie 1college 1er Semestre Sections Internationales Option Francais Modele 16Pas encore d'évaluationDevoir 1 Physique Et Chimie 1college 1er Semestre Sections Internationales Option Francais Modele 162 pages
- Pretérito Indefinido - Le Passé Simple. Ficha de Español N 17Pas encore d'évaluationPretérito Indefinido - Le Passé Simple. Ficha de Español N 176 pages
- Capture D'écran . 2025-05-03 À 21.06.33Pas encore d'évaluationCapture D'écran . 2025-05-03 À 21.06.33254 pages
- La Cinétique Chimique Chapitre 1 PagesPas encore d'évaluationLa Cinétique Chimique Chapitre 1 Pages51 pages
- Bio20230721 C30721e0124 MesanalysesPas encore d'évaluationBio20230721 C30721e0124 Mesanalyses3 pages
