À mesure que les navigateurs deviennent plus uniformes aujourd’hui, il devient essentiel de vérifier rapidement la compatibilité de nos éléments, pour laquelle plusieurs services sont disponibles.
:hover {}/*passage de la souris*/
:active {} /*activé par clique*/
:focus {}/* élément focus */
:first-child {}/*1er enfant*/
:last-child {}/* dernier enfant*/
:not(selector) {}/*tous éléments sauf indiqué*/
/* Pseudo-éléments pour la création de contenu */
::before {content: "a";} /*ajoute contenu avant */
::after {content: "a";} /*ajoute contenu après */
::first-letter {} /*première lettre*/
::first-line {} /*première ligne*/
/* Pseudo-classes pour la navigation */
:link {}/*lien non visité*/
:visited {}/*lien visité*/
:active {}/* liens au clique */
px | Pixels, une unité de mesure fixe qui ne change pas avec la taille de la police ou l’écran. |
% | Pourcentage, se réfère à une proportion par rapport à une valeur parente (souvent l’élément parent). |
em | L’unité « em » est relative à la taille de la police de l’élément parent. Un « em » équivaut à la taille de la police de base de l’élément parent. |
rem | L’unité « rem » est similaire à « em », mais elle est relative à la taille de la police de la racine (généralement la taille de la police de base de l’élément <html>). |
vw | Unité relative à la largeur de la fenêtre du navigateur (1 vw équivaut à 1 % de la largeur de la fenêtre). |
vh | Unité relative à la hauteur de la fenêtre du navigateur (1 vh équivaut à 1 % de la hauteur de la fenêtre). |
vmin | L’unité « vmin » est relative à la plus petite des dimensions de la fenêtre (largeur ou hauteur). |
vmax | L’unité « vmax » est relative à la plus grande des dimensions de la fenêtre (largeur ou hauteur). |
pt | Points, une unité de mesure couramment utilisée pour les impressions, où 1 pt est équivalent à environ 1/72 de pouce. |
cm | Centimètres, une unité de mesure métrique couramment utilisée pour les impressions (1 cm est équivalent à 1/100 de mètre). |
@media screen and (max-width: 768px) {
/* jusqu'à 768px de largeur */
}
@media (orientation: landscape) {
/* quand orientation paysage */
}
@media print {
/* l'impression */
}
/* Couleur et image de fond */
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
/* Position du fond */
background-position: center;
background-attachment: fixed;
/* Effets de superposition du fond */
background-blend-mode: overlay;
/* Propriétés spécifiques au dégradé */
background: linear-gradient(to bottom, #f0f0f0, #333);
/* Propriétés pour le fond répété */
background-repeat: repeat-x;
background-origin: padding-box;
/* Propriétés pour plusieurs images de fond */
background-image: url('image1.jpg'), url('image2.jpg');
background-position: top left, top right;
background-size: 50% auto, cover;
/* Propriétés de base de la transition */
transition-property: width, height;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
/* Transition raccourcie */
transition: width 0.5s ease-in-out 0.2s;
/* Autres propriétés de transition */
transition-property: all;
transition-duration: 1s, 2s;
transition-timing-function: ease-in, ease-out;
transition-delay: 0.5s, 1s;
/* Animation de base */
animation-name: monAnimation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
/* Keyframes */
@keyframes monAnimation {
0% {
opacity: 0;
transform: translateY(-20px);
}
50% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
/* Autres propriétés d'animation */
animation-play-state: running;
animation-play-state: paused;
animation-fill-mode: both;
animation-delay: 1s, 2s;
animation-duration: 1s, 2s;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 3, infinite;
/* Fonctions de couleur */
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 255, 0.5);
hsl(120, 100%, 50%);
/* Fonctions de texte */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-family: 'Arial', sans-serif;
font-size: calc(16px + 2vw);
/* Fonctions de transformation */
transform: translate(50px, 20px) scale(1.2) rotate(45deg);
linear-gradient(to bottom, #f0f0f0, #333);
/* Fonctions de transition */
transition: all 0.3s ease-in-out;
cubic-bezier(0.25, 0.1, 0.25, 1);
steps(4, end);
/* Fonctions personnalisées (exemple) */
my-custom-function(param1, param2);
p {} /* Sélecteur type */
.ma-classe {} /* Sélecteur classe */
#mon-id {} /* Sélecteur d'ID */
* {} /* Sélecteur universel */
ul a {} /* Sélecteur descendant */
ul > li {} /* Sélecteur enfant direct */
a[href] {} /* Sélecteur d'attribut */
a:hover {} /* Sélecteur d'état */
li:first-child {} /* Sélecteur de pseudo-classe */
p::first-line {} /* Sélecteur de pseudo-élément */
[type="text"] {} /* attribut de type */
:checked {} /* éléments cochés */
:disabled {} /* éléments désactivés */
:valid {} /* éléments valides */
:invalid {} /* éléments non valides */
:focus {} /* Sélecteur éléments en focus */
::placeholder {} /* le texte pré-affiché */
/* Dimensions et modèle de boîte */
width: 300px;
height: 200px;
box-sizing: border-box;
/* Marge et remplissage */
margin: 10px;
padding: 20px;
/* Bordure et coins arrondis */
border: 1px solid #000;
border-radius: 5px;
/* Couleur et arrière-plan */
background-color: #f0f0f0;
color: #333;
/* Alignement */
text-align: center;
vertical-align: middle;
/* Affichage et position */
display: block;
position: relative;
/* Flottement et effacement de flottement */
float: left;
clear: both;
/* Ombre portée */
box-shadow: 3px 3px 5px #888888;
/* Transformations et transitions */
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
/* Autres propriétés spécifiques */
pointer-events: none;
user-select: none;
cursor: pointer;
/* Texte et typographie */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
color: #333;
/* Gestion du texte qui déborde */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Décoration du texte */
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 2px;
/* Transformations 2D */
transform: translate(50px, 20px) scale(1.2) rotate(45deg);
transform-origin: center center;
/* Transformations 3D */
transform: perspective(1000px) rotateX(45deg) rotateY(30deg);
transform-style: preserve-3d;
backface-visibility: hidden;
/* Transformation d'origine */
transform-origin: center center;
transform-origin: top left;
/* Autres propriétés de transformation */
transform-box: fill-box;
transform-origin-x: 50%;
transform-origin-y: 50%;
/* Transformations 3D */
transform: perspective(1000px) rotateX(45deg) rotateY(30deg) translateZ(50px);
transform-style: preserve-3d;
backface-visibility: hidden;
/* Transformation d'origine */
transform-origin: center center;
transform-origin: top left;
/* Autres propriétés de transformation 3D */
transform-box: fill-box;
transform-origin-x: 50%;
transform-origin-y: 50%;