mémento 2 e édition Raphaël Goetter CSS 3 Généralités CSS 3 est une évolution d
mémento 2 e édition Raphaël Goetter CSS 3 Généralités CSS 3 est une évolution des langages CSS 1 et CSS 2 présentée sous forme d’une trentaine de modules distincts, dont une partie est encore à l’état de brouillon. Compatibilité avec les navigateurs Parmi les 130 propriétés et 35 sélecteurs nouveaux, une majorité est déjà reconnue par les navigateurs actuels, à savoir Firefox 4+, Opera 11+, Chrome 10+, Safari 5+ et Internet Explorer 10. Préfixes propriétaires Le W3C propose depuis CSS 2.1 une alternative qui a le mérite de ne pas bloquer l’évolution des agents utilisateurs : à partir des informations dispensées dans les spécifications, chaque navigateur a carte blanche pour construire ses propriétés personnelles dérivées en les faisant précéder d’un préfixe vendeur propriétaire. Lorsque la spécification atteint le stade de Recommandation Candidate (CR), le préfixe doit être supprimé. Cela concerne : ■ les propriétés encore non finalisées (ex. -moz-animation, -webkit- regions) ; ■ les éléments propriétaires (ex. -ms-filter, -ms-zoom, -webkit-mask). Syntaxe des pseudo-éléments Depuis CSS 3, une convention d’écriture proposée par le W3C distingue les pseudo-classes des pseudo-éléments. Ceux-ci s’écrivent dorénavant à l’aide d’un double deux-points (::), mais restent rétrocompatibles avec l’écriture CSS 2. ■ :first-line [CSS 2] ■ ::first-line [CSS 3] ■ :first-letter [CSS 2] ■ ::first-letter [CSS 3] ■ :after [CSS 2] ■ ::after [CSS 3] ■ :before [CSS 2] ■ ::before [CSS 3] Unités de valeur ■ rem : comme em mais uniquement relatif à la racine (<html>). ■ vw : pourcentage de largeur du viewport. Le viewport est égal à 100 vw. ■ vh : pourcentage de hauteur du viewport. Le viewport est égal à 100 vh. ■ vmax : hauteur ou largeur du viewport (la valeur la plus grande est conservée). ■ vmin : hauteur ou largeur du viewport (la valeur la + petite est conservée). ■ fr : fraction. À SAVOIR Prise en charge de CSS 3 par les différentes versions d’Internet Explorer IE 6 reconnaît environ 4 % des nouvelles propriétés et 0 % des sélecteurs. IE 7 reconnaît environ 5 % des propriétés et 5 % des sélecteurs. IE 8 reconnaît environ 6 % des propriétés et 5 % des sélecteurs. IE 9 reconnaît environ 16 % des propriétés et 50 % des sélecteurs. IE 10 reconnaît environ 80 % des propriétés et 80 % des sélecteurs. LISTE DES PRÉFIXES -moz- Moteur de rendu Gecko de Mozilla Firefox ou Thunderbird -ms- Microsoft Internet Explorer -o- Opera -webkit- Moteurs WebKit (ex. Safari et Chrome) -khtml- Moteurs KHTML (ex. Linux KDE) -xv- Propriétés auditives sur Opera DÉFINITION Le viewport représente la partie visible au sein de la fenêtre du navigateur. Généralités ■ gr : grid (valeur de grille, définie dans le Grid Positionning Module). ■ deg, rad, s, ms : degré, radian, seconde, milliseconde. Fonctions ■ calc() introduit les fonctions de calcul au sein d’une valeur. Ex. div {width: calc(100%-20px)} ■ :matches() introduit la notion de factorisation au sein du sélecteur. Ex. :matches(div, p) a {font-size: 2em} désigne uniquement les liens descendants d’un <div> ou d’un <p>. Sélecteurs ■ :lang : cible un élément selon sa langue ou celle du document. ■ :last-child : dernier enfant d’un élément. ■ :nth-child : nième enfant d’un élément. ■ :nth-last-child : nième enfant en commençant par la fin. ■ :first-of-type : 1 er enfant du type désigné. ■ :nth-of-type : nième du type désigné. ■ :last-of-type : dernier du type désigné. ■ :nth-last-of-type : nième enfant d’un type en commençant par la fin. ■ :only-child : enfant unique. ■ :only-of-type : élément unique du type désigné. ■ :empty : élément sans enfants. ■ :target : cible d’une ancre. Ex. <a href="#cible">... <h1 id="cible"> ■ :not : négation d’un sélecteur. Ex. p:not(.bloc) désigne tous les paragraphes, sauf les éléments de classe bloc. Sélecteur adjacent général E ~ F cible tous les frères (F) suivant, directement ou non, un élément désigné (E). Ex. blockquote ~ p {font-style: italic;} cible tous les paragraphes qui suivent un bloc de citation. Sélecteurs d’attributs ■ attr^="kiwi"] : sélection si l’attribut attr débute par la chaîne « kiwi ». ■ attr$="kiwi"] : si l’attribut finit par la chaîne « kiwi ». ■ attr*="kiwi"] : si l’attribut contient la sous-chaîne « kiwi » au sein de la chaîne contenant la valeur. ■ attr~="kiwi"] : si l’attribut contient exactement « kiwi » au sein de valeurs séparées par des espaces. ■ attr|="kiwi"] : si l’attribut débute par « kiwi » au sein de valeurs séparées par des traits-d’union. COMPATIBILITÉ Ces fonctions ne sont actuellement prises en charge que par un faible nombre de navigateurs : Firefox 4+, Chrome 12+, et, dans certains cas, Internet Explorer 9+. COMPATIBILITÉ Sélecteurs CSS 3 Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.2+ 10.5+ 9.0+ Exception : les sélecteurs d’attributs sont compatibles depuis Internet Explorer 7. Généralités Sélecteurs de formulaires ■ :enabled : élément actif. ■ :disabled : élément inactif. ■ :checked : élément coché. ■ :required : élément requis pour la soumission. ■ :optional : élément optionnel lors de la soumission. ■ :valid : élément qui remplit les exigences de son type. ■ :invalid : élément qui ne remplit pas (encore) les exigences. Media Queries Grâce aux « requêtes de média » CSS, il devient possible de limiter la portée de styles à un environnement défini par un (ou plusieurs) des critères suivants : ■ width, height : dimension (largeur, hauteur) de la zone d’affichage ; ■ device-width, device-height : dimension du périphérique ; ■ orientation : orientation du périphérique (portait ou paysage) ; ■ device-pixel-ratio : densité de pixels du périphérique de sortie ; ■ resolution : résolution du périphérique (en dpi) ; ■ color : prise en charge de la couleur (en bits/pixel) ; ■ color-index : nombre d’entrées dans la table de couleurs indexées ; ■ aspect-ratio : ratio du périphérique de sortie (ex. 16/9) ; ■ monochrome : nombre de bits par pixel sur un périphérique monochrome (échelle de gris) ; ■ scan : décrit le processus de balayage des périphériques de sortie de type télévision. ■ grid : détermine si le périphérique de sortie est un périphérique en grille ou bitmap. Exemple : @media (max-width:480px) {body {background: green;}} La couleur de <body> devient verte lorsque la largeur du média est inférieure ou égale à 480 pixels. Propriétés de boîtes et contenu ■ box-sizing: content-box border-box inherit ; p {box-sizing: content-box;} Les composantes de padding et border sont incluses à l’intérieur de la boîte. Elles ne s’ajoutent plus à la largeur générale de l’élément ; la largeur du contenu (width) en est par conséquent réduite. COMPATIBILITÉ Sélecteurs de formulaires Firefox Chrome Safari Opera IE 4.0+ 10+ 5.0+ 10.5+ 10.0+ 9+ pour :checked COMPATIBILITÉ Firefox Chrome Safari Opera MSI Explorer 3.5+ 9.0+ 4.0+ 10.5+ 9.0+ Propriétés de boîtes et contenu COMPATIBILITÉ Firefox Chrome Safari Opera IE 3.0+ 9+ 3.1+ 10.5+ 8.0+ ■ word-wrap: normal break-word ; #aside {word-wrap: break-word;} Césure d’un mot long à un endroit arbitraire afin de provoquer un retour à la ligne. COMPATIBILITÉ Firefox Chrome Safari Opera IE 3.5+ 9.0+ 3.1+ 10.5+ 6.0+ ■ text-overflow: clip ellipsis chaîne ; #intro {text-overflow: ellipsis;} Ajout d’un signe pour indiquer que le contenu d’un élément est rogné. Ex. La valeur ellipsis affichera des points de suspension (…) à l’endroit où le terme est masqué. Il est également possible d’indi- quer une chaîne de caractères prédéfinie (ex. text-overflow: ‟etc.”;). COMPATIBILITÉ Firefox Chrome Safari Opera IE 5.0+ 9.0+ 3.1+ 10.5+ 6.0+ ■ overflow-x: ■ overflow-y: visible hidden scroll auto no-display no-content ; p {overflow-x: auto; overflow-y: hidden;} Variantes spécifiques de la propriété CSS 2 overflow, qui agissent sur un seul axe à la fois : overflow-x gère les débordements horizontaux et overflow-y les dépassement verticaux. COMPATIBILITÉ Firefox Chrome Safari Opera IE 3.0+ 9.0+ 3.1+ 10.5+ 6.0+ ■ overflow-style: auto scrollbar panner move marquee ; #advert {overflow-style: marquee;} Différentes possibilités de débordements de contenu : scroll, défilement automatique (marquee) ou déplacement manuel (move). COMPATIBILITÉ Firefox Chrome Safari Opera IE non non non non non Propriétés de boîtes et contenu ■ appearance: normal icon window button menu field ; div {appearance: button;} Donner un rendu d’élément d’interface utilisateur standard du navigateur. COMPATIBILITÉ Firefox Chrome Safari Opera IE 1+ 1+ 3.0+ non non ■ resize: none both horizontal vertical ; textarea {resize: vertical;} Définir si l’élément doit être redimensionnable ou non par l’utilisateur. COMPATIBILITÉ Firefox Chrome Safari Opera IE 4+ 9+ 4.0+ non non ■ font-smoothing: none subpixel-antialiased antialiased ; body {font-smoothing: antialiased;} Adoucir les effets de crénelage des caractères de texte. COMPATIBILITÉ Firefox Chrome Safari Opera IE non 10 Mac 5.0+ Mac non non ■ font-stretch: wider narrower ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded inherit ; h1 {font-stretch: expanded;} Étirer ou condenser une famille de police. COMPATIBILITÉ Firefox Chrome Safari Opera IE 9+ non non non 9.0+ ■ text-stroke: text-fill-color text-stroke-color text-stroke-width ; #stroke { text-fill-color: #fff; text-stroke-color: lightblue; text-stroke-width: 2px; } Définir un contour autour de chaque lettre d’un texte. COMPATIBILITÉ Firefox Chrome Safari Opera IE non 9.0+ 3.1+ non non Propriétés de boîtes et contenu ■ uploads/Marketing/ memento-css3-pdf.pdf
Documents similaires
-
36
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Jui 16, 2021
- Catégorie Marketing
- Langue French
- Taille du fichier 2.3059MB