v0.1
Balises
(<Tags>)		 Couleurs
[standards]		 Couleurs
[autres]		 JS
MĂ©thodes		 JS
Events		 JS
=>		 Variables
Types		 CSS
Attributs		 CSS
[défaut]		 Docs
diverses		 Modele
(perso)
CaractĂšres et symboles w3schools webkit w3.org w3docs Tutoriels DĂ©veloppement Web

Tableau des tags HTML

Le tableau inclus une liste catégorisée des éléments HTML avec la courte description des valeurs.

Les tags de base

TagDescription
<!DOCTYPE>DĂ©finit le type du document.
<html>DĂ©finit, que le document est Ă©crit en langage HTML.
<head>Contient d’informations de technique et de systĂšme sur le document. (mĂ©tadonnĂ©es.)
<title>DĂ©finit le titre du document.
<body>DĂ©finit le corps (contenu principal) du document HTML.
<h1> to <h6>DĂ©finit Les titres HTML du premier niveau au sixiĂšme).
<p>DĂ©finit le paragraphe.
<br>DĂ©finit le saut de ligne.
<hr>Crée une ligne horizontale, ou définit la division thématique du contenu sur la page.
<!-- ... --> DĂ©finit les commentaires.

Tags de mise en forme

Les tags de mise en forme sont utilisés pour la sélection visuelle et logique des fragments de texte.

TagDescription
<acronym>DĂ©finit un acronyme.
<abbr>Définit une abréviation ou un acronyme.
<address>Contient les coordonnées de l'auteur / propriétaire du document / article.
<b>DĂ©finit le soulignement en gras du texte.
<bdi>Isole un morceau de texte pouvant ĂȘtre formatĂ© dans une autre direction, ce qui permet aux navigateurs de gĂ©rer correctement le texte bidirectionnel.
<bdo>Redéfinit la direction actuelle du texte.
<big>DĂ©finit une police plus grande.
Non supportĂ© en HTML5  Il est recommandĂ© d’utiliser les styles CSS.
<blockquote>DĂ©finit une longue citation.
<center>Définit le texte aligné au centre.
Non supportĂ© en HTML5  Il est recommandĂ© d’utiliser les styles CSS.
<cite> Marque le texte comme une citation ou une note de bas de page à un autre matériel.
<code>DĂ©finit le fragment du code informatique.
<del>Définit le texte supprimé.
<dfn>Contient la definition des termes ou des mots. Par défaut, en italique.
<em>Utilisé pour accentuer un fragment du texte. En italique.
<font>DĂ©finit la police, le couleur et la taille du texte.
Non supportĂ© en HTML5  Il est recommandĂ© d’utiliser les styles CSS.
<i>Met en Ă©vidence un fragment de texte en italique.
<ins>Définit le texte inséré, qui est souligné.
<kbd>DĂ©finit les frappes de saisie de l'utilisateur ou le texte saisi sur le clavier.
<mark>Contient le texte, qui est mis en évidence/illuminé.
<meter> DĂ©finit une valeur scalaire dans la mĂȘme plage ou une reprĂ©sentation graphique du nombre fractionnaire.
<pre>Définit un texte préformaté.
<progress>Indique des indicateurs de progression pour la tĂąche (progress bar).
<q>DĂ©finit une courte citation.
<rp>Contient un texte alternatif, qui est affiché dans le navigateur, ne supportant le tag <ruby>.
<rt>Contient des annotations au-dessus ou au-dessous du texte contenu dans la balise <ruby> (pour les langues asiatiques occidentales).
<ruby>Contient des annotations au-dessus ou au-dessous du texte contenu dans la balise <ruby> (pour les langues asiatiques orientales).
<s>Contient un texte, qui n’est plus actuel.
<samp>Contient la sortie d'un programme informatique ou d'un script.
<small>DĂ©finit un texte Ă©crit en petit police.
<strike> Contient un texte barré.
Non supportĂ© en HTML5. Il est recommandĂ© d’utiliser le tag <del> ou <s>.
<strong>Souligne l'importance du fragment de texte sélectionné.
<sub>Spécifie le texte avec un index inférieur.
<sup>Spécifié le texte avec l'exposant.
<template>DĂ©finit un modĂšle.
<time>Spécifie l'heure / la date.
<u>Définit le texte qui est stylistiquement différent du texte brut.
<var>Définit les valeurs mathématiques / variables.
<wbr>Indique au navigateur que, si nécessaire, on peut effectuer un saut de ligne.

Tags des formulaires

TagDescription
<form>DĂ©finit le formulaire dans le document.
<input>Définit les contrÎles pour la saisie utilisateur de diverses données dans un formulaire.
<textarea>Définit la zone de texte de l'entrée multiligne.
<button>Utilisé pour placer un bouton dans un formulaire.
<select>Définit une liste déroulante.
<optgroup>Combine les éléments associés dans un seul groupe dans la liste déroulante.
<option>Contient les éléments de la liste déroulante.
<label>Définit les étiquettes de texte pour l'élément <input>.
<fieldset>Regroupe les éléments associés dans un formulaire.
<legend>DĂ©finisse l'en-tĂȘte pour la balise <fieldset>.
<datalist>Contient une liste d'options de saisie prédéfinies.
<keygen>GénÚre une paire de clés (publiques et privées) utilisées pour chiffrer et déchiffrer les données de formulaire.
<output>Spécifie la zone pour la sortie du résultat du calcul.

Tags pour les cadres

TagDescription
<frame>DĂ©finit la zone des cadres.
Non supportĂ© en HTML5 
<frameset>DĂ©finit la structure des cadres.
Non supportĂ© en HTML5 
<noframes>Spécifie le contenu de remplacement à afficher pour les utilisateurs si les cadres sont désactivés ou pas du tout pris en charge.
Non supportĂ© en HTML5 
<iframe>DĂ©finit une zone du document dans laquelle le contenu d'un document unique peut ĂȘtre affichĂ©.

Tags des images

TagDescription
<img>DĂ©finit une image.
<map>DĂ©finit une carte d’image.
<area>Définit une zone interactive à l'intérieur de la carte d'image.
<canvas>Crée une image en deux dimensions raster à l'aide de scripts (généralement en langage JavaScript).
<figcaption>Contient le titre de l’élĂ©ment <figure>
<figure>Contient du contenu qui illustre ou prend en charge une idée de texte spécifique.
<picture>Conteneur pour des éléments <source>, qui contiennent les versions alternatives des images.
<svg>Conteneur pour le graphique SVG.

Tags des fichiers audio / vidéo

TagDescription
<audio>DĂ©finit le contenu audio.
<source>Contient plusieurs formats d'éléments de média (<video>, <audio> et <picture>).
<track>Contient des sous-titres pour les éléments média (<video> et <audio>).
<video>Définit le contenu vidéo.

Tags des liens

TagDescription
<a>DĂ©finit le hyperlien.
<link>Établit un lien entre le document et une ressource externe (principalement pour rĂ©fĂ©rence Ă  des feuilles de style externes).
<nav>DĂ©finit des liens pour la navigation.

Tags des listes

TagDescription
<ul>DĂ©finit une liste Ă  puces.
<ol>Définit une liste numérotée.
<li>Définit un élément de liste.
<dir>Définit une liste de noms de répertoires.
Non supportĂ© en HTML5 
<dl>Définit une liste des définitions.
<dt>Définit un nom/terme dans la liste des définitions.
<dd>Définit une valeur dans la liste des définitions.
<menu>DĂ©finit une liste / un menu des commandes (menus contextuels).
<menuitem>DĂ©finit un Ă©lĂ©ment du menu contextuel, que l’utilisateur peut appeler.

Tags des tableaux

TagDescription
<table>DĂ©finit le tableau.
<caption>DĂ©finit le nom du tableau.
<th>DĂ©finit la cellule d'en-tĂȘte dans la table.
<tr>DĂ©finit une ligne dans une table.
<td>DĂ©finit la cellule dans la table.
<thead>DĂ©finit le titre dans la table, en regroupant le contenu des lignes.
<tbody>DĂ©finit le contenu (corps) de la table.
<tfoot>DĂ©finit le pied de page du tableau.
<col>Définit les propriétés de colonne pour chaque colonne de la balise <colgroup>.
<colgroup>DĂ©finit le groupe de colonnes dans la table.

Tags pour la stylisation, tags sémantiques

TagDescription
<style>Contient un code CSS (style).
<div>DĂ©finit une zone dans le document HTML.
<span>Conteneur pour des éléments inline.
<header>DĂ©finit l'en-tĂȘte, “chapeau” d'une page ou d'une section.
<footer>DĂ©finit le pied de page d'une page ou d'une section.
<main>DĂ©finit le contenu principal du document.
<section>Regroupe le contenu lié de maniÚre logique / crée des sections de page.
<article>Dénote une section de la page qui contient une composition complÚte indépendante avec sa propre signification.
<aside>Définit une section contenant des informations complétant le département principal.
<details>Spécifie des détails supplémentaires que l'utilisateur peut afficher ou masquer.
<dialog>Crée une boßte de dialogue avec laquelle l'utilisateur travaille directement pour effectuer certaines actions.
<data>Contient un analogique informatique du contenu.
<summary>SpĂ©cifie l'en-tĂȘte visible pour la balise <details>.

Tags des métadonnées

TagDescription
<head>Contient des informations techniques sur un document qui n'est pas affiché à l'utilisateur.
<meta>Contient des métadonnées sur le document HTML.
<base>Spécifie l'URL absolue de base pour toutes les URL relatives du document.
<basefont>Définit par défaut le couleur, la taille, la police du texte dans un document.

Tags pour la description des codes et des scripts.

TagDescription
<script>Définit la zone pour entrer des scénarios des clients.
<noscript>Définit le contenu alternatif, qui est affiché dans les navigateurs, ne supportant pas des scripts.
<applet>Il est utilisé pour insérer des applets dans le document, de petits programmes écrits en langage Java.
<embed>Conteneur pour le contenu interactif.
<object>Conteneur de contenu multimédia (vidéo, films Flash, applets, images, etc.)
<param>Définit les paramÚtres des plug-ins intégrés à l'élément <object>.


Name

 Hex
(RGB)		 Red
(RGB)		 Green
(RGB)		 Blue
(RGB)		 Hue
(HSL/HSV)		 Satur.
(HSL)		 Light
(HSL)		 Satur.
(HSV)		 Value
(HSV)		 CGA number
(name); alias
White#FFFFFF 100%100%100%0° 0%100%0%100%15 (white)
Silver#C0C0C0 75%75%75%0° 0%75%0%75%07 (light gray)
Gray#808080 50%50%50%0° 0%50%0%50%08 (dark gray)
Black#000000 0%0%0%0° 0%0%0%0%00 (black)
Red#FF0000 100%0%0%0° 100%50%100%100%12 (high red)
Maroon#800000 50%0%0%0° 100%25%100%50%04 (low red)
Yellow#FFFF00 100%100%0%60° 100%50%100%100%14 (yellow)
Olive#808000 50%50%0%60° 100%25%100%50%06 (brown)
Lime#00FF00 0%100%0%120° 100%50%100%100%10 (high green); green
Green#008000 0%50%0%120° 100%25%100%50%02 (low green)
Aqua#00FFFF 0%100%100%180° 100%50%100%100%11 (high cyan); cyan
Teal#008080 0%50%50%180° 100%25%100%50%03 (low cyan)
Blue#0000FF 0%0%100%240° 100%50%100%100%09 (high blue)
Navy#000080 0%0%50%240° 100%25%100%50%01 (low blue)
Fuchsia#FF00FF 100%0%100%300° 100%50%100%100%13 (high magenta); magenta
Purple#800080 50%0%50%300° 100%25%100%50%05 (low magenta)
Pink colors
MediumVioletRedC71585199, 21, 133
DeepPinkFF1493255, 20, 147
PaleVioletRedDB7093219, 112, 147
HotPinkFF69B4255, 105, 180
LightPinkFFB6C1255, 182, 193
PinkFFC0CB255, 192, 203
Red colors
DarkRed8B0000139, 0, 0
RedFF0000255, 0, 0
FirebrickB22222178, 34, 34
CrimsonDC143C220, 20, 60
IndianRedCD5C5C205, 92, 92
LightCoralF08080240, 128, 128
SalmonFA8072250, 128, 114
DarkSalmonE9967A233, 150, 122
LightSalmonFFA07A255, 160, 122
Orange colors
OrangeRedFF4500255, 69, 0
TomatoFF6347255, 99, 71
DarkOrangeFF8C00255, 140, 0
CoralFF7F50255, 127, 80
OrangeFFA500255, 165, 0
Yellow colors
DarkKhakiBDB76B189, 183, 107
GoldFFD700255, 215, 0
KhakiF0E68C240, 230, 140
PeachPuffFFDAB9255, 218, 185
YellowFFFF00255, 255, 0
PaleGoldenrodEEE8AA238, 232, 170
MoccasinFFE4B5255, 228, 181
PapayaWhipFFEFD5255, 239, 213
LightGoldenrodYellowFAFAD2250, 250, 210
LemonChiffonFFFACD255, 250, 205
LightYellowFFFFE0255, 255, 224
Brown colors
Maroon800000128, 0, 0
BrownA52A2A165, 42, 42
SaddleBrown8B4513139, 69, 19
SiennaA0522D160, 82, 45
ChocolateD2691E210, 105, 30
DarkGoldenrodB8860B184, 134, 11
PeruCD853F205, 133, 63
RosyBrownBC8F8F188, 143, 143
GoldenrodDAA520218, 165, 32
SandyBrownF4A460244, 164, 96
TanD2B48C210, 180, 140
BurlywoodDEB887222, 184, 135
WheatF5DEB3245, 222, 179
NavajoWhiteFFDEAD255, 222, 173
BisqueFFE4C4255, 228, 196
BlanchedAlmondFFEBCD255, 235, 205
CornsilkFFF8DC255, 248, 220
Purple, violet, and magenta colors
Indigo4B008275, 0, 130
Purple800080128, 0, 128
DarkMagenta8B008B139, 0, 139
DarkViolet9400D3148, 0, 211
DarkSlateBlue483D8B72, 61, 139
BlueViolet8A2BE2138, 43, 226
DarkOrchid9932CC153, 50, 204
FuchsiaFF00FF255, 0, 255
MagentaFF00FF255, 0, 255
SlateBlue6A5ACD106, 90, 205
MediumSlateBlue7B68EE123, 104, 238
MediumOrchidBA55D3186, 85, 211
MediumPurple9370DB147, 112, 219
OrchidDA70D6218, 112, 214
VioletEE82EE238, 130, 238
PlumDDA0DD221, 160, 221
ThistleD8BFD8216, 191, 216
LavenderE6E6FA230, 230, 250
Blue colors
MidnightBlue19197025, 25, 112
Navy0000800, 0, 128
DarkBlue00008B0, 0, 139
MediumBlue0000CD0, 0, 205
Blue0000FF0, 0, 255
RoyalBlue4169E165, 105, 225
SteelBlue4682B470, 130, 180
DodgerBlue1E90FF30, 144, 255
DeepSkyBlue00BFFF0, 191, 255
CornflowerBlue6495ED100, 149, 237
SkyBlue87CEEB135, 206, 235
LightSkyBlue87CEFA135, 206, 250
LightSteelBlueB0C4DE176, 196, 222
LightBlueADD8E6173, 216, 230
PowderBlueB0E0E6176, 224, 230
Cyan colors
Teal0080800, 128, 128
DarkCyan008B8B0, 139, 139
LightSeaGreen20B2AA32, 178, 170
CadetBlue5F9EA095, 158, 160
DarkTurquoise00CED10, 206, 209
MediumTurquoise48D1CC72, 209, 204
Turquoise40E0D064, 224, 208
Aqua00FFFF0, 255, 255
Cyan00FFFF0, 255, 255
Aquamarine7FFFD4127, 255, 212
PaleTurquoiseAFEEEE175, 238, 238
LightCyanE0FFFF224, 255, 255
Green colors
DarkGreen0064000, 100, 0
Green0080000, 128, 0
DarkOliveGreen556B2F85, 107, 47
ForestGreen228B2234, 139, 34
SeaGreen2E8B5746, 139, 87
Olive808000128, 128, 0
OliveDrab6B8E23107, 142, 35
MediumSeaGreen3CB37160, 179, 113
LimeGreen32CD3250, 205, 50
Lime00FF000, 255, 0
SpringGreen00FF7F0, 255, 127
MediumSpringGreen00FA9A0, 250, 154
DarkSeaGreen8FBC8F143, 188, 143
MediumAquamarine66CDAA102, 205, 170
YellowGreen9ACD32154, 205, 50
LawnGreen7CFC00124, 252, 0
Chartreuse7FFF00127, 255, 0
LightGreen90EE90144, 238, 144
GreenYellowADFF2F173, 255, 47
PaleGreen98FB98152, 251, 152
White colors
MistyRoseFFE4E1255, 228, 225
AntiqueWhiteFAEBD7250, 235, 215
LinenFAF0E6250, 240, 230
BeigeF5F5DC245, 245, 220
WhiteSmokeF5F5F5245, 245, 245
LavenderBlushFFF0F5255, 240, 245
OldLaceFDF5E6253, 245, 230
AliceBlueF0F8FF240, 248, 255
SeashellFFF5EE255, 245, 238
GhostWhiteF8F8FF248, 248, 255
HoneydewF0FFF0240, 255, 240
FloralWhiteFFFAF0255, 250, 240
AzureF0FFFF240, 255, 255
MintCreamF5FFFA245, 255, 250
SnowFFFAFA255, 250, 250
IvoryFFFFF0255, 255, 240
WhiteFFFFFF255, 255, 255
Gray and black colors
Black0000000, 0, 0
DarkSlateGray2F4F4F47, 79, 79
DimGray696969105, 105, 105
SlateGray708090112, 128, 144
Gray808080128, 128, 128
LightSlateGray778899119, 136, 153
DarkGrayA9A9A9169, 169, 169
SilverC0C0C0192, 192, 192
LightGrayD3D3D3211, 211, 211
GainsboroDCDCDC220, 220, 220
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
Colors of the Year
Colors 2025
Colors 2024
Colors 2021
Colors 2020
Colors 2019
Colors 2018
Colors 2017
Colors 2016
FS 595 - USA
BS 381 - UK
BS 381C - Australia
RAL
ISCC/NBS
NCS
X11
Crayola
Resene
XKCD

MĂ©thodes de gestion des tableaux – Array
 
pop() Supprime le dernier Ă©lĂ©ment d’un tableau
push() Ajoute un nouvel élément à la fin du tableau
sort() Trie les éléments par ordre alphabétique
reverse() Trier les éléments dans un ordre décroissant
shift() Supprime le premier Ă©lĂ©ment d’un tableau
toString() Convertit des éléments en chaßnes de caractÚres
unshift() Ajoute un nouvel Ă©lĂ©ment au dĂ©but d’un tableau
concat() Fusionne plusieurs tableaux en un seul
join() Combine les Ă©lĂ©ments d’un tableau en une seule chaĂźne de caractĂšres et renvoie la chaĂźne
slice() Copie une partie d’un tableau dans un nouveau tableau
splice() Est utilisĂ© pour modifier le contenu d’un tableau en supprimant les Ă©lĂ©ments existants et/ou en ajoutant de nouveaux Ă©lĂ©ments.
valueOf() Retourne la valeur primitive de l’objet spĂ©cifiĂ©
indexOf() Retourne le premier index auquel l’élĂ©ment donnĂ© peut ĂȘtre trouvĂ© dans un tableau, ou -1 s’il n’est pas prĂ©sent dans un tableau.
lastIndexOf() Retourne le dernier index auquel l’élĂ©ment donnĂ© peut ĂȘtre trouvĂ© dans un tableau, ou -1 s’il n’est pas prĂ©sent dans un tableau.
 
Méthodes pour afficher la sortie des données
 
alert() Affiche la sortie sur une boĂźte de dialogue du navigateur
confirm() Ouvre une boüte de dialogue oui/non et renvoie true/false en fonction du clic de l’utilisateur
console Affiche la sortie sur la console du navigateur, utile pour le débogage
document.write() Écrit directement dans le document HTML
 
Fonctions globales
 
isNaN() DĂ©termine si une valeur est NaN((Not a Number) ou non
Number() Convertit l’argument en nombre reprĂ©sentant la valeur de l’objet. Si la valeur ne peut pas ĂȘtre convertie en nombre, NaN est renvoyĂ©.
eval() Évalue le code JavaScript reprĂ©sentĂ© sous forme de chaĂźne
encodeURI() Encode un URI en UTF-8
decodeURI() DĂ©code un URI crĂ©Ă© par encodeURI() ou d’autres fonctions
decodeURIComponent() DĂ©code un composant URI
parseInt() convertit une chaĂźne de caractĂšres en entier
parseFloat() convertit une chaĂźne de caractĂšres en nombre Ă  virgule flottante
isFinite() DĂ©termine si la valeur transmise est un nombre fini
 
MĂ©thodes de l’objet String
 
match() RĂ©cupĂšre les correspondances d’une chaĂźne par rapport Ă  un motif de recherche
search() Recherche dans une chaßne de caractÚres la valeur spécifiée et renvoie la position de la correspondance.
toLowerCase() Convertit une chaĂźne de caractĂšres en minuscules
toUpperCase() Convertit une chaĂźne de caractĂšres en majuscules
indexOf() Fournit la position du premiĂšre occurrence d’un texte spĂ©cifiĂ© dans une chaĂźne
charAt() Retourne le caractÚre à la position spécifiée dans la chaßne
concat() ConcatĂšne deux ou plusieurs chaĂźnes en une seule
charCodeAt() Retourne la valeur unicode d’un caractĂšre Ă  la position spĂ©cifiĂ©e
indexOf() Fournit la position du premiĂšre occurrence d’un texte spĂ©cifiĂ© dans une chaĂźne
lastIndexOf() Fournit la position du derniĂšre occurrence d’un texte spĂ©cifiĂ© dans une chaĂźne
slice() Extrait une partie d’une chaüne et la renvoie sous forme de nouvelle chaüne
split() DĂ©coupe une chaĂźne de caractĂšre en un tableau de sous-chaĂźnes en fonction d’un sĂ©parateur
substr() Comme slice() mais extrait une sous-chaßne en fonction du nombre de caractÚres spécifié
substring() Comme slice() mais ne peut accepter les index négatifs
replace() Recherche et remplace un texte spécifique dans une chaßne
 
Méthodes mathématiques
 
random() Retourne un nombre aléatoire compris entre 0 et 1
round() Arrondie la valeur de x Ă  son entier le plus proche
pow() X Ă  la puissance de y
exp() Exponentielle de x
log() Le logarithme naturel (base E) de x
max(x,y,z,
,n) Retourne le maximum
min(x,y,z,
,n) Retourne le minimum
abs(x) Retourne la valeur absolue de x
sqrt(x) La racine carrée de x
cos(x) Le cosinus de x
sin(x) Le sinus de x
tan(x) La tangente de x
ceil(x) Arrondie la valeur de x à l’entier le plus proche
 
MĂ©thodes pour la manipulation des dates/heures en Javascript
 
getDate() RĂ©cupĂšre le jour du mois sous forme de nombre (1-31)
getDay() Le jour de la semaine sous forme de nombre (0-6)
getFullYear() AnnĂ©e sous la forme d’un nombre Ă  quatre chiffres (aaaa)
getHours() Retourne l’heure (0-23)
getMilliseconds() Retourne les millisecondes (0-999)
getMinutes() Retourne les minutes (0-59)
getMonth() Retourne le mois sous forme de nombre (0-11)
getSeconds() RĂ©cupĂšre les secondes (0-59)
getTime() RĂ©cupĂšre les millisecondes depuis le 1er janvier 1970
getUTCDate() Le jour du mois Ă  la date spĂ©cifiĂ©e selon l’heure universelle.
setDate() DĂ©finit le jour en tant que nombre (1-31)
setFullYear() DĂ©finit l’annĂ©e
setHours() DĂ©finit l’heure (0-23)
setMilliseconds() DĂ©finit les millisecondes (0 Ă  999)
setMinutes() DĂ©finit les minutes (0-59)
setMonth() DĂ©finit le mois (0-11)
setSeconds() DĂ©finit les secondes (0-59)
setTime() Fixe l’heure (en millisecondes depuis le 1er janvier 1970)
setUTCDate() Définit le jour du mois pour une date spécifiée en fonction du temps universel
 
MĂ©thodes de nƓud
 
appendChild() Ajoute un nouveau noeud en tant que dernier enfant d’un noeud parent.
removeChild() Supprime un nƓud enfant
replaceChild() Remplace un nƓud enfant
cloneNode() Clone un élément HTML
isEqualNode() VĂ©rifie si deux noeuds sont Ă©gaux
isSameNode() VĂ©rifie si deux noeuds sont identiques
getAttribute() Retourne la valeur d’attribut spĂ©cifiĂ©e dans un noeud
hasAttribute() Retourne true si l’élĂ©ment a des attributs, sinon false
removeAttribute() Supprime l’attribut de l’élĂ©ment spĂ©cifiĂ©
setAttribute() DĂ©finit ou modifie la valeur de l’attribut spĂ©cifiĂ©
getElementsByTagName() retourne une collection des éléments portant le nom de la balise spécifié.
 
ES 2026
 
Error.isError() Error detection
Array.fromAsync() Asynchronous array creation with
Uint8Array Base64 and hexadecimal encodings for
 
ES 2025
 
union() Returns the union of two sets
intersection() Returns the intersection of two sets
difference() Returns the difference between two sets
symmetricDifference() Returns the symmetric difference between to sets
isSubsetOf() Returns true if this set is a subset of a given set
isSupersetOf() Returns true if this set is a superset of a given set
isDisjointFrom() Returns true if this set has no elements in in a given set
drop() Returns an iterator that skips a specified number of elements before yielding the rest
every() Returns true if all elements satisfy a test function
filter() Returns an iterator containing elements that satisfy a filter function
find() Returns the first element that satisfies a test function
flatMap() Returns an iterator by mapping each element and then flattening the results
forEach() Executes a function once for each element in the iterator.
from() creates an iterator object from an iterable
map() Returns an iterator with all elements transformed by a map function
reduce() Applies a reducer function against each element to reduce it to a single value
some() Returns true if at least one element satisfy a test function
take() Returns an iterator that yields a specified number of elements
RegExp /v flag An "upgrade" to the /u (unicode) flag
RegExp.escape() Returns a string where regex characters are escaped
Float16Array A Typed Array that stores 16-bit floating-point numbers
Math.f16round() Returns the nearest 16-bit floating point number
Promise.try() Starts a promise chain for handling promise rejections
Import Attributes Import attributes allowed in import statements
 
ES 2024
 
Object.groupBy() Groups object elements according to values returned from a callback function
Map.groupBy() Groups map elements according to values returned from a callback function
String isWellFormed() Returns true if a string is well formed
String.toWellFormed() Returns a new string where "lone surrogates" are replaced with Unicode U+FFFD
Promise.withResolvers()
Atomics
waitAsync
 
ES 2023
 
#! (Shebang) Tells the operating system which interpreter to use to execute the script
findLast() Returns the value of the last element that satisfies a condition
findLastIndex() Returns the index of the last element that satisfies a condition
toReversed() Reverses an array without altering the original array
toSorted() Sorts an array without altering the original array
toSpliced() Splices an array without altering the original array
with() Updates array elements without altering the original array
 
ES 2022
 
Array at() Returns an indexed element from an array
String at() Returns an indexed element from an string
RegExp /d Perform substring matches
Object.hasOwn() Check if a property is the own property of an object
error.cause Lets you specify the reason behind an error
await import Lets JavasSript modules wait for resources that require import before running.
Class field declarations Allows for properties to be defined directly within a class
Private methods and fields Allows for private properties (#method and #field)
 
ES 2021
 
Promise.any() Takes promises as input and returns a single promise
String replaceAll() Replaces all occurrences of a substring in a string
Numeric Separator New numeric separator (_) makes numbers more readable
 
ES 2020
 
BigInt Stores values too big to store in a JavaScript number
String matchAll() Searchs for all occurrences of a string in a string
Promise.allSettled() Takes promises as input and returns a single promise
Dynamic Import Loads JavaScript modules at runtime
globalThis Refers to the global object independent of code environment
import.meta Returns an object indicating the base URL of a module
Namespace Exports Export a full namespace from a module without having to import it first
?? Nullish coalescing returns the first argument not nullish
?. Optional chaining returns undefined if an object is undefined or null
&&= Logical AND assignment assigns the second value if the first value is true
||= Logical OR assignment assigns the second value if the first value is false
??= Nullish coalescing assignment assigns the second value if the first value is undefined or null
 
ES 2019
 
String trimStart() Removes whitespace from the start of a string
String trimEnd() Removes whitespace from the end of a string
Object.fromEntries Creates an object from key/value pairs
Optional catch binding Allows to omit the catch parameter if it is not needed
Array flat() Creates a new array by flattening a nested array
Array flatMap() Maps all array elements and creates a new array by flattening the array
Revised Array sort() Browsers must now use a stable sorting algorithm
Revised JSON.stringify() Strings with UTF-8 code points now convert safely
Separator symbols in strings Line and paragraph separators (\u2028 and \u2029) are now allowed in strings
Revised Function.toString() Now returns source code including comments and spaces and syntax details
 
ES 2018
 
Asynchronous Iteration Allows the await keyword in for/of loops
Promise Finally Schedules a function to be executed when a promise has been "fulfilled" or "rejected"
Array Rest Elements Allows to destruct an array and collect the leftovers
Object Rest Properties Allows to destruct an object and collect the leftovers
Shared Memory Allows different parts of a program to access the same memory
/s Allows the . (dot) metacharacter to match line terminators
\p{} Matches character with a Unicode character property
(?<=y) (?<=y)x matches "x" if "x" is preceded by "y"
(?<!y) (?<!y)x matches "x" if "x" is NOT preceded by "y"
(?<name>) Captures text and names (labels) it
 
ES 2017
 
String padStart() Pads the beginning of a string
String padEnd() Pads the end of a string
Object entries() Returns an array of the key/value pairs of an object
Object values() Returns an array of the values of an object
async and await Simplifies the handling of promises
Trailing Commas Allows trailing commas where a comma-separated list of values is accepted
getOwnProperty Returns an object containing all own property descriptors of an object
 
ES 2016
 
** Raises the first operand to the power of the second
**= Raises the value of a variable to the power of the right operand
Array includes() Checks if an element is present in an array
 
Autres
Array[ ] creates a new array object
Array( ) creates an Array object
at() returns an indexed element from an array
constructor returns the function that created the Array prototype
copyWithin() copies array elements to another position in an array
entries() returns an Iterator object with the key/value pairs from an array
every() A documenter
fill() A documenter
filter() A documenter
find() A documenter
findIndex() A documenter
findLast() A documenter
findLastIndex() A documenter
flat() A documenter
flatMap() A documenter
forEach() A documenter
from() A documenter
includes() A documenter
isArray() A documenter
join() A documenter
keys() A documenter
length A documenter
map() A documenter
of() A documenter
pop() A documenter
prototype A documenter
push() A documenter
reduce() A documenter
reduceRight() A documenter
rest (...) A documenter
reverse() A documenter
shift() A documenter
some() A documenter
sort() A documenter
splice() A documenter
spread (...) A documenter
toReversed() A documenter
toSorted() A documenter
toSpliced() A documenter
toString() A documenter
unshift() A documenter
values() A documenter
valueOf() A documenter
with() A documenter
JS Boolean A documenter
Boolean() A documenter
new Boolean() A documenter
constructor A documenter
prototype A documenter
toString() A documenter
valueOf() A documenter
constructor() A documenter
extends A documenter
static A documenter
super A documenter
JS Dates A documenter
new Date() A documenter
constructor A documenter
getTimezoneOffset() A documenter
getUTCDay() A documenter
getUTCFullYear() A documenter
getUTCHours() A documenter
getUTCMilliseconds() A documenter
getUTCMinutes() A documenter
getUTCMonth() A documenter
getUTCSeconds() A documenter
setUTCFullYear() A documenter
setUTCHours() A documenter
setUTCMilliseconds() A documenter
setUTCMinutes() A documenter
setUTCMonth() A documenter
setUTCSeconds() A documenter
now() A documenter
parse() A documenter
prototype A documenter
toDateString() A documenter
toISOString() A documenter
toJSON() A documenter
toLocaleDateString() A documenter
toLocaleTimeString() A documenter
toLocaleString() A documenter
toString() A documenter
toTimeString() A documenter
toUTCString() A documenter
UTC() A documenter
valueOf() A documenter
Function apply() A documenter
Function bind() A documenter
Function call() A documenter
Function length A documenter
Function name A documenter
Function toString() A documenter
Function valueOf() A documenter
JS Error A documenter
new Error() A documenter
isError() A documenter
cause A documenter
name A documenter
message A documenter
JS Global A documenter
encodeURIComponent() A documenter
escape() A documenter
Infinity A documenter
NaN A documenter
String() A documenter
undefined A documenter
unescape() A documenter
JS Iterators A documenter
drop() A documenter
every() A documenter
filter() A documenter
find() A documenter
flatMap() A documenter
forEach() A documenter
from() A documenter
map() A documenter
reduce() A documenter
some() A documenter
take() A documenter
JS JSON A documenter
parse() A documenter
stringify() A documenter
JS Maps A documenter
new Map A documenter
clear() A documenter
delete() A documenter
entries() A documenter
forEach() A documenter
get() A documenter
groupBy() A documenter
has() A documenter
keys() A documenter
set() A documenter
size A documenter
values() A documenter
JS Math A documenter
cbrt() A documenter
clz32() A documenter
cosh() A documenter
E A documenter
acos() A documenter
acosh() A documenter
asin() A documenter
asinh() A documenter
atan() A documenter
atan2() A documenter
atanh() A documenter
expm1() A documenter
f16round() A documenter
floor() A documenter
fround() A documenter
LN2 A documenter
LN10 A documenter
log10() A documenter
log1p() A documenter
log2() A documenter
LOG2E A documenter
LOG10E A documenter
PI A documenter
random() A documenter
sign() A documenter
sinh() A documenter
SQRT1_2 A documenter
SQRT2 A documenter
tanh() A documenter
trunc() A documenter
JS Numbers A documenter
constructor A documenter
EPSILON A documenter
isFinite() A documenter
isInteger() A documenter
isNaN() A documenter
isSafeInteger() A documenter
MAX_SAFE_INTEGER A documenter
MIN_SAFE_INTEGER A documenter
MAX_VALUE A documenter
MIN_VALUE A documenter
NaN A documenter
NEGATIVE_INFINITY A documenter
POSITIVE_INFINITY A documenter
parseFloat() A documenter
parseInt() A documenter
prototype A documenter
toExponential() A documenter
toFixed() A documenter
toLocaleString() A documenter
toPrecision() A documenter
toString() A documenter
valueOf() A documenter
JS Objects A documenter
assign() A documenter
constructor A documenter
create() A documenter
defineProperties() A documenter
defineProperty() A documenter
delete A documenter
entries() A documenter
freeze() A documenter
fromEntries() A documenter
getOwnPropertyDescriptor() A documenter
getOwnPropertyDescriptors() A documenter
getOwnPropertyNames() A documenter
groupBy() A documenter
isExtensible() A documenter
isFrozen() A documenter
isSealed() A documenter
keys() A documenter
preventExtensions() A documenter
prototype A documenter
seal() A documenter
toString() A documenter
valueOf() A documenter
values() A documenter
JS Operators A documenter
JS Assignment A documenter
Assign Simple A documenter
Assign Add A documenter
Assign Subtract A documenter
Assign Multiply A documenter
Assign Divide A documenter
Assign Remainder A documenter
Assign Colon A documenter
Assign AND A documenter
Assign OR A documenter
Assign Nullish A documenter
JS Arithmetic A documenter
Addition A documenter
Subtraction A documenter
Multiplication A documenter
Division A documenter
Exponentiation A documenter
Remainder A documenter
Increment A documenter
Decrement A documenter
Concatenation A documenter
Unary Plus A documenter
Unary Negation A documenter
JS Comparison A documenter
Equal A documenter
Strict Equal A documenter
Not Equal A documenter
Strict Not Equal A documenter
Greater Than A documenter
Less Than A documenter
Greater Equal A documenter
Less Equal A documenter
JS Logical Operators A documenter
Logical AND A documenter
Logical OR A documenter
Logical NOT A documenter
Logical Nullish A documenter
JS Bitwise Operators A documenter
Bitwise AND A documenter
Bitwise OR A documenter
Bitwise NOT A documenter
Bitwise XOR A documenter
Bitwise Left A documenter
Bitwise Right A documenter
Bitwise Signed A documenter
JS Misc Operators A documenter
: A documenter
?. A documenter
... A documenter
() ? x : y A documenter
=> A documenter
delete A documenter
in A documenter
instanceof A documenter
typeof A documenter
void A documenter
JS Precedence A documenter
JS Promises A documenter
all() A documenter
allSettled() A documenter
any() A documenter
catch() A documenter
finally() A documenter
race() A documenter
reject() A documenter
resolve() A documenter
then() A documenter
try() A documenter
withResolvers() A documenter
JS Proxy A documenter
apply() A documenter
construct() A documenter
defineProperty() A documenter
deleteProperty() A documenter
get() A documenter
getOwnPropertyDescriptor() A documenter
getPrototypeOf() A documenter
has() A documenter
isExtensible() A documenter
ownKeys() A documenter
preventExtentions() A documenter
set() A documenter
setPrototypeOf() A documenter
JS Reflect A documenter
apply() A documenter
construct() A documenter
defineProperty() A documenter
deleteProperty() A documenter
get() A documenter
getOwnPropertyDescriptor() A documenter
getPrototypeOf() A documenter
has() A documenter
isExtensible() A documenter
ownKeys() A documenter
preventExtentions() A documenter
set() A documenter
setPrototypeOf() A documenter
JS RegExp Patterns A documenter
/d A documenter
/g A documenter
/i A documenter
/m A documenter
/s A documenter
/u A documenter
/v A documenter
/y A documenter
[a] A documenter
[^a] A documenter
[abc] A documenter
[^abc] A documenter
[A-Z] A documenter
[^A-Z] A documenter
[0-9] A documenter
[^0-9] A documenter
a|b A documenter
. A documenter
\w A documenter
\W A documenter
\d A documenter
\D A documenter
\s A documenter
\S A documenter
[\b] A documenter
\0 A documenter
\n A documenter
\f A documenter
\r A documenter
\t A documenter
\v A documenter
\p A documenter
\P A documenter
\ddd A documenter
\xhh A documenter
\uhhhh A documenter
^ A documenter
$ A documenter
\b A documenter
\B A documenter
x(?=y) A documenter
x(?!y) A documenter
(?<=y)x A documenter
(?<!y)x A documenter
(x) A documenter
(?<name>x) A documenter
(?flags:x) A documenter
+ A documenter
* A documenter
? A documenter
{n} A documenter
{n,m} A documenter
{n,} A documenter
JS RegExp Reference A documenter
compile() A documenter
constructor A documenter
dotAll A documenter
escape() A documenter
exec() A documenter
flags A documenter
global A documenter
hasIndices A documenter
ignoreCase A documenter
lastIndex A documenter
multiline A documenter
source A documenter
sticky A documenter
test() A documenter
toString() A documenter
unicode A documenter
unicodeSets A documenter
JS Sets A documenter
new Set A documenter
add() A documenter
clear() A documenter
delete() A documenter
entries() A documenter
forEach() A documenter
has() A documenter
keys() A documenter
size A documenter
values() A documenter
JS Statements A documenter
break A documenter
class A documenter
const A documenter
continue A documenter
debugger A documenter
do...while A documenter
for A documenter
for...in A documenter
for...of A documenter
function A documenter
if...else A documenter
let A documenter
return A documenter
switch A documenter
throw A documenter
try...catch A documenter
var A documenter
while A documenter
JS Strings A documenter
at() A documenter
codePointAt() A documenter
concat() A documenter
constructor A documenter
endsWith() A documenter
fromCharCode() A documenter
includes() A documenter
isWellFormed() A documenter
lastIndexOf() A documenter
length A documenter
localeCompare() A documenter
matchAll() A documenter
padEnd() A documenter
padStart() A documenter
prototype A documenter
repeat() A documenter
replaceAll() A documenter
slice() A documenter
startsWith() A documenter
toLocaleLowerCase() A documenter
toLocaleUpperCase() A documenter
toString() A documenter
toWellFormed() A documenter
trim() A documenter
trimEnd() A documenter
trimStart() A documenter
valueOf() A documenter
JS Typed Arrays A documenter
Int8Array A documenter
Uint8ClampedArray A documenter
Int16Array A documenter
Uint16Array A documenter
Int32Array A documenter
Uint32Array A documenter
BigInt64Array A documenter
BigUint64Array A documenter
Float16Array A documenter
Float32Array A documenter
Float64Array A documenter
JS Typed Reference A documenter
at() A documenter
byteLength A documenter
byteOffset A documenter
bytesPerElement A documenter
copyWithin() A documenter
entries() A documenter
every() A documenter
fill() A documenter
filter() A documenter
find() A documenter
findIndex() A documenter
findLast() A documenter
findLastIndex() A documenter
forEach() A documenter
from() A documenter
includes() A documenter
indexOf() A documenter
join() A documenter
keys() A documenter
lastIndexOf() A documenter
length A documenter
map() A documenter
name A documenter
of() A documenter
reduce() A documenter
reduceRight() A documenter
reverse() A documenter
set() A documenter
slice() A documenter
some() A documenter
sort() A documenter
subarray() A documenter
toLocaleString() A documenter
toReversed() A documenter
toSorted() A documenter
toString() A documenter
values() A documenter
with() A documenter
Window Object A documenter
addeventlistener() A documenter
alert() A documenter
atob() A documenter
blur() A documenter
btoa() A documenter
clearInterval() A documenter
clearTimeout() A documenter
close() A documenter
closed A documenter
confirm() A documenter
console A documenter
defaultStatus A documenter
document A documenter
focus() A documenter
frameElement A documenter
frames A documenter
history A documenter
getComputedStyle() A documenter
innerHeight A documenter
innerWidth A documenter
length A documenter
localStorage A documenter
location A documenter
matchMedia() A documenter
moveBy() A documenter
moveTo() A documenter
name A documenter
navigator A documenter
open() A documenter
opener A documenter
outerHeight A documenter
outerWidth A documenter
pageXOffset A documenter
pageYOffset A documenter
parent A documenter
print() A documenter
prompt() A documenter
removeEventlistener() A documenter
resizeBy() A documenter
resizeTo() A documenter
screen A documenter
screenLeft A documenter
screenTop A documenter
screenX A documenter
screenY A documenter
scrollBy() A documenter
scrollTo() A documenter
scrollX A documenter
scrollY A documenter
sessionStorage A documenter
self A documenter
setInterval() A documenter
setTimeout() A documenter
status A documenter
stop() A documenter
top A documenter
Window Console A documenter
assert() A documenter
clear() A documenter
count() A documenter
dir() A documenter
error() A documenter
group() A documenter
groupCollapsed() A documenter
groupEnd() A documenter
info() A documenter
log() A documenter
table() A documenter
time() A documenter
timeEnd() A documenter
trace() A documenter
warn() A documenter
Window History A documenter
back() A documenter
forward() A documenter
go() A documenter
length A documenter
Window Location A documenter
assign() A documenter
hash A documenter
host A documenter
hostname A documenter
href A documenter
origin A documenter
pathname A documenter
port A documenter
protocol A documenter
reload() A documenter
replace() A documenter
search A documenter
Window Navigator A documenter
appCodeName A documenter
appName A documenter
appVersion A documenter
cookieEnabled A documenter
geolocation A documenter
javaEnabled() A documenter
language A documenter
onLine A documenter
platform A documenter
product A documenter
taintEnabled() A documenter
userAgent A documenter
Window Screen A documenter
availHeight A documenter
availWidth A documenter
colorDepth A documenter
height A documenter
pixelDepth A documenter
width A documenter
HTML Documents A documenter
activeElement A documenter
addEventListener() A documenter
adoptNode() A documenter
anchors A documenter
applets A documenter
baseURI A documenter
body A documenter
charset A documenter
characterSet A documenter
close() A documenter
cookie A documenter
createAttribute() A documenter
createComment() A documenter
createDocumentFragment() A documenter
createElement() A documenter
createEvent() A documenter
createTextNode() A documenter
defaultView A documenter
designMode A documenter
doctype A documenter
documentElement A documenter
documentMode A documenter
documentURI A documenter
domain A documenter
domConfig A documenter
embeds A documenter
execCommand() A documenter
forms A documenter
getElementById() A documenter
getElementsByClassName() A documenter
getElementsByName() A documenter
hasFocus() A documenter
head A documenter
images A documenter
implementation A documenter
importNode() A documenter
inputEncoding A documenter
lastModified A documenter
links A documenter
normalize() A documenter
normalizeDocument() A documenter
open() A documenter
querySelector() A documenter
querySelectorAll() A documenter
readyState A documenter
referrer A documenter
removeEventListener() A documenter
renameNode() A documenter
scripts A documenter
strictErrorChecking A documenter
title A documenter
URL A documenter
write() A documenter
writeln() A documenter
HTML Elements A documenter
accessKey A documenter
addEventListener() A documenter
after() A documenter
append() A documenter
attributes A documenter
before() A documenter
blur() A documenter
childElementCount A documenter
childNodes A documenter
children A documenter
classList A documenter
className A documenter
click() A documenter
clientHeight A documenter
clientLeft A documenter
clientTop A documenter
clientWidth A documenter
closest() A documenter
compareDocumentPosition() A documenter
contains() A documenter
contentEditable A documenter
dir A documenter
firstChild A documenter
firstElementChild A documenter
focus() A documenter
getAttributeNode() A documenter
getBoundingClientRect() A documenter
getElementsByClassName() A documenter
getElementsByTagName() A documenter
hasAttributes() A documenter
hasChildNodes() A documenter
id A documenter
innerHTML A documenter
innerText A documenter
insertAdjacentElement() A documenter
insertAdjacentHTML() A documenter
insertAdjacentText() A documenter
insertBefore() A documenter
isContentEditable A documenter
isDefaultNamespace() A documenter
isSupported() A documenter
lang A documenter
lastChild A documenter
lastElementChild A documenter
matches() A documenter
namespaceURI A documenter
nextSibling A documenter
nextElementSibling A documenter
nodeName A documenter
nodeType A documenter
nodeValue A documenter
normalize() A documenter
offsetHeight A documenter
offsetWidth A documenter
offsetLeft A documenter
offsetParent A documenter
offsetTop A documenter
outerHTML A documenter
outerText A documenter
ownerDocument A documenter
parentNode A documenter
parentElement A documenter
previousSibling A documenter
previousElementSibling A documenter
querySelector() A documenter
querySelectorAll() A documenter
remove() A documenter
removeAttributeNode() A documenter
removeEventListener() A documenter
scrollHeight A documenter
scrollIntoView() A documenter
scrollLeft A documenter
scrollTop A documenter
scrollWidth A documenter
setAttributeNode() A documenter
style A documenter
tabIndex A documenter
tagName A documenter
textContent A documenter
title A documenter
HTML Attributes A documenter
getNamedItem() A documenter
isId A documenter
item() A documenter
length A documenter
name A documenter
removeNamedItem() A documenter
setNamedItem() A documenter
specified A documenter
value A documenter
HTML Collection A documenter
item() A documenter
length A documenter
namedItem() A documenter
HTML NodeList A documenter
entries() A documenter
forEach() A documenter
item() A documenter
keys() A documenter
length A documenter
values() A documenter
HTML DOMTokenList A documenter
add() A documenter
contains() A documenter
entries() A documenter
forEach() A documenter
item() A documenter
keys() A documenter
length A documenter
remove() A documenter
replace() A documenter
supports() A documenter
toggle() A documenter
value A documenter
values() A documenter
HTML Styles A documenter
alignContent A documenter
alignItems A documenter
alignSelf A documenter
animation A documenter
animationDelay A documenter
animationDirection A documenter
animationDuration A documenter
animationFillMode A documenter
animationIterationCount A documenter
animationName A documenter
animationTimingFunction A documenter
animationPlayState A documenter
background A documenter
backgroundAttachment A documenter
backgroundClip A documenter
backgroundColor A documenter
backgroundImage A documenter
backgroundOrigin A documenter
backgroundPosition A documenter
backgroundRepeat A documenter
backgroundSize A documenter
backfaceVisibility A documenter
border A documenter
borderBottom A documenter
borderBottomColor A documenter
borderBottomLeftRadius A documenter
borderBottomRightRadius A documenter
borderBottomStyle A documenter
borderBottomWidth A documenter
borderCollapse A documenter
borderColor A documenter
borderImage A documenter
borderImageOutset A documenter
borderImageRepeat A documenter
borderImageSlice A documenter
borderImageSource A documenter
borderImageWidth A documenter
borderLeft A documenter
borderLeftColor A documenter
borderLeftStyle A documenter
borderLeftWidth A documenter
borderRadius A documenter
borderRight A documenter
borderRightColor A documenter
borderRightStyle A documenter
borderRightWidth A documenter
borderSpacing A documenter
borderStyle A documenter
borderTop A documenter
borderTopColor A documenter
borderTopLeftRadius A documenter
borderTopRightRadius A documenter
borderTopStyle A documenter
borderTopWidth A documenter
borderWidth A documenter
bottom A documenter
boxShadow A documenter
boxSizing A documenter
captionSide A documenter
caretColor A documenter
clear A documenter
clip A documenter
color A documenter
columnCount A documenter
columnFill A documenter
columnGap A documenter
columnRule A documenter
columnRuleColor A documenter
columnRuleStyle A documenter
columnRuleWidth A documenter
columns A documenter
columnSpan A documenter
columnWidth A documenter
counterIncrement A documenter
counterReset A documenter
cssFloat A documenter
cursor A documenter
direction A documenter
display A documenter
emptyCells A documenter
filter A documenter
flex A documenter
flexBasis A documenter
flexDirection A documenter
flexFlow A documenter
flexGrow A documenter
flexShrink A documenter
flexWrap A documenter
font A documenter
fontFamily A documenter
fontSize A documenter
fontStyle A documenter
fontVariant A documenter
fontWeight A documenter
fontSizeAdjust A documenter
height A documenter
isolation A documenter
justifyContent A documenter
left A documenter
letterSpacing A documenter
lineHeight A documenter
listStyle A documenter
listStyleImage A documenter
listStylePosition A documenter
listStyleType A documenter
margin A documenter
marginBottom A documenter
marginLeft A documenter
marginRight A documenter
marginTop A documenter
maxHeight A documenter
maxWidth A documenter
minHeight A documenter
minWidth A documenter
objectFit A documenter
objectPosition A documenter
opacity A documenter
order A documenter
orphans A documenter
outline A documenter
outlineColor A documenter
outlineOffset A documenter
outlineStyle A documenter
outlineWidth A documenter
overflow A documenter
overflowX A documenter
overflowY A documenter
padding A documenter
paddingBottom A documenter
paddingLeft A documenter
paddingRight A documenter
paddingTop A documenter
pageBreakAfter A documenter
pageBreakBefore A documenter
pageBreakInside A documenter
perspective A documenter
perspectiveOrigin A documenter
position A documenter
quotes A documenter
resize A documenter
right A documenter
scrollBehavior A documenter
tableLayout A documenter
tabSize A documenter
textAlign A documenter
textAlignLast A documenter
textDecoration A documenter
textDecorationColor A documenter
textDecorationLine A documenter
textDecorationStyle A documenter
textIndent A documenter
textOverflow A documenter
textShadow A documenter
textTransform A documenter
top A documenter
transform A documenter
transformOrigin A documenter
transformStyle A documenter
transition A documenter
transitionProperty A documenter
transitionDuration A documenter
transitionTimingFunction A documenter
transitionDelay A documenter
unicodeBidi A documenter
userSelect A documenter
verticalAlign A documenter
visibility A documenter
width A documenter
wordBreak A documenter
wordSpacing A documenter
wordWrap A documenter
widows A documenter
zIndex A documenter
HTML Events A documenter
abort A documenter
afterprint A documenter
animationend A documenter
animationiteration A documenter
animationstart A documenter
beforeprint A documenter
beforeunload A documenter
blur A documenter
canplay A documenter
canplaythrough A documenter
change A documenter
click A documenter
contextmenu A documenter
copy A documenter
cut A documenter
dblclick A documenter
drag A documenter
dragend A documenter
dragenter A documenter
dragleave A documenter
dragover A documenter
dragstart A documenter
drop A documenter
durationchange A documenter
ended A documenter
error A documenter
focus A documenter
focusin A documenter
focusout A documenter
fullscreenchange A documenter
fullscreenerror A documenter
hashchange A documenter
input A documenter
invalid A documenter
keydown A documenter
keypress A documenter
keyup A documenter
load A documenter
loadeddata A documenter
loadedmetadata A documenter
loadstart A documenter
message A documenter
mousedown A documenter
mouseenter A documenter
mouseleave A documenter
mousemove A documenter
mouseover A documenter
mouseout A documenter
mouseup A documenter
offline A documenter
online A documenter
open A documenter
pagehide A documenter
pageshow A documenter
paste A documenter
pause A documenter
play A documenter
playing A documenter
progress A documenter
ratechange A documenter
resize A documenter
reset A documenter
scroll A documenter
search A documenter
seeked A documenter
seeking A documenter
select A documenter
show A documenter
stalled A documenter
submit A documenter
suspend A documenter
timeupdate A documenter
toggle A documenter
touchcancel A documenter
touchend A documenter
touchmove A documenter
touchstart A documenter
transitionend A documenter
unload A documenter
volumechange A documenter
waiting A documenter
wheel A documenter
HTML Event Objects A documenter
Animation Events A documenter
Clipboard Events A documenter
Drag Events A documenter
Events A documenter
Focus Events A documenter
HashChange Events A documenter
Input Events A documenter
Keyboard Events A documenter
Mouse Events A documenter
PageTransition Events A documenter
PopState Events A documenter
Progress Events A documenter
Storage Events A documenter
Touch Events A documenter
Transition Events A documenter
Ui Events A documenter
Wheel Events A documenter
HTML Event Properties A documenter
altKey (Mouse) A documenter
altKey (Key) A documenter
animationName A documenter
bubbles A documenter
button A documenter
buttons A documenter
cancelable A documenter
charCode A documenter
clientX A documenter
clientY A documenter
code A documenter
ctrlKey (Mouse) A documenter
ctrlKey (Key) A documenter
currentTarget A documenter
data A documenter
defaultPrevented A documenter
deltaX A documenter
deltaY A documenter
deltaZ A documenter
deltaMode A documenter
detail A documenter
elapsedTime A documenter
elapsedTime A documenter
eventPhase A documenter
inputType A documenter
isTrusted A documenter
key A documenter
keyCode A documenter
location A documenter
metaKey (Mouse) A documenter
metaKey (Key) A documenter
newURL A documenter
oldURL A documenter
offsetX A documenter
offsetY A documenter
pageX A documenter
pageY A documenter
persisted A documenter
propertyName A documenter
relatedTarget A documenter
relatedTarget A documenter
screenX A documenter
screenY A documenter
shiftKey (Mouse) A documenter
shiftKey (Key) A documenter
target A documenter
targetTouches A documenter
timeStamp A documenter
touches A documenter
type A documenter
which (Mouse) A documenter
which (Key) A documenter
view A documenter
HTML Event Methods A documenter
getModifierState() A documenter
preventDefault() A documenter
stopImmidiatePropagation() A documenter
stopPropagation() A documenter
API Canvas A documenter
API Console A documenter
API Fetch A documenter
API Fullscreen A documenter
exitFullscreen() A documenter
fullscreenElement A documenter
fullscreenEnabled() A documenter
requestFullscreen() A documenter
API Geolocation A documenter
coordinates A documenter
getCurrentPosition() A documenter
position A documenter
API History A documenter
API MediaQueryList A documenter
API Storage A documenter
clear() A documenter
getItem() A documenter
key() A documenter
length A documenter
removeItem() A documenter
setItem() A documenter
API Validation A documenter
API Web A documenter
crypto.getRandomNumber() A documenter
<a> A documenter
<abbr> A documenter
<address> A documenter
<area> A documenter
<article> A documenter
<aside> A documenter
<audio> A documenter
<b> A documenter
<base> A documenter
<bdo> A documenter
<blockquote> A documenter
<body> A documenter
<br> A documenter
<button> A documenter
<canvas> A documenter
<caption> A documenter
<cite> A documenter
<code> A documenter
<col> A documenter
<colgroup> A documenter
<datalist> A documenter
<dd> A documenter
<del> A documenter
<details> A documenter
<dfn> A documenter
<dialog> A documenter
<div> A documenter
<dl> A documenter
<dt> A documenter
<em> A documenter
<embed> A documenter
<fieldset> A documenter
<figcaption> A documenter
<figure> A documenter
<footer> A documenter
<form> A documenter
<head> A documenter
<header> A documenter
<h1> - <h6> A documenter
<hr> A documenter
<html> A documenter
<i> A documenter
<iframe> A documenter
<img> A documenter
<ins> A documenter
<input> button A documenter
<input> checkbox A documenter
<input> color A documenter
<input> date A documenter
<input> datetime A documenter
<input> datetime-local A documenter
<input> email A documenter
<input> file A documenter
<input> hidden A documenter
<input> image A documenter
<input> month A documenter
<input> number A documenter
<input> password A documenter
<input> radio A documenter
<input> range A documenter
<input> reset A documenter
<input> search A documenter
<input> submit A documenter
<input> text A documenter
<input> time A documenter
<input> url A documenter
<input> week A documenter
<kbd> A documenter
<label> A documenter
<legend> A documenter
<li> A documenter
<link> A documenter
<map> A documenter
<mark> A documenter
<menu> A documenter
<menuitem> A documenter
<meta> A documenter
<meter> A documenter
<nav> A documenter
<object> A documenter
<ol> A documenter
<optgroup> A documenter
<option> A documenter
<output> A documenter
<p> A documenter
<param> A documenter
<pre> A documenter
<progress> A documenter
<q> A documenter
<s> A documenter
<samp> A documenter
<script> A documenter
<section> A documenter
<select> A documenter
<small> A documenter
<source> A documenter
<span> A documenter
<strong> A documenter
<style> A documenter
<sub> A documenter
<summary> A documenter
<sup> A documenter
<table> A documenter
<tbody> A documenter
<td> A documenter
<tfoot> A documenter
<th> A documenter
<thead> A documenter
<tr> A documenter
<textarea> A documenter
<time> A documenter
<title> A documenter
<track> A documenter
<u> A documenter
<ul> A documenter
<var> A documenter
<video> A documenter
cssText A documenter
getPropertyPriority() A documenter
getPropertyValue() A documenter
item() A documenter
length A documenter
parentRule A documenter
removeProperty() A documenter
setProperty() A documenter
JS Conversion A documenter
Les fonctions fléchées ont été introduites avec ES6 comme nouvelle syntaxe pour écrire des fonctions JavaScript.
Ils font gagner du temps aux développeurs et simplifient la portée des fonctions.
Regardons l’évolution des syntaxes de fonction en JavaScript.

Fonction réguliÚre :

function sayHello() {
   return "Hello World!";
}

Fonction avec ES5 :

sayHello = function() {
  return "Hello World!";
}
 
Fonction avec ES6 :

sayHello = () => "Hello World!";
NomEvénementDescription
Abort(onAbort)Cet événement a lieu lorsque l'utilisateur interrompt le chargement de l'image
Blur(onBlur)Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif.
Change(onChange)Se produit lorsque l'utilisateur modifie le contenu d'un champ de données.
Click(onClick)Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
dblclick(onDblclick)Se produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement (un lien hypertexte ou un élément de formulaire). Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
dragdrop(onDragdrop)Se produit lorsque l'utilisateur effectue un glisser-dĂ©poser sur la fenĂȘtre du navigateur.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
error(onError)Se déclenche lorsqu'une erreur apparaßt durant le chargement de la page.
Cet événement fait partie du Javascript 1.1.
Focus(onFocus)Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que cet élément est sélectionné comme étant l'élément actif
keydown(onKeydown)Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
keypress(onKeypress)Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
keyup(onKeypress)Se produit lorsque l'utilisateur relùche une touche de son clavier préalablement enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
Load(onLoad)Se produit lorsque le navigateur de l'utilisateur charge la page en cours
MouseOver(onMouseOver)Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément
MouseOut(onMouseOut)Se produit lorsque le curseur de la souris quitte un élément.
Cet événement fait partie du Javascript 1.1.
Reset(onReset)Se produit lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset.
Resize(onResize)Se produit lorsque l'utilisateur redimensionne la fenĂȘtre du navigateur
Select(onSelect)Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea"
Submit(onSubmit)Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire)
Unload(onUnload)Se produit lorsque le navigateur de l'utilisateur quitte la page en cours


Association des événements aux objets

Chaque Ă©vĂ©nement ne peut pas ĂȘtre associĂ© Ă  n'importe quel objet.
Il est évident par exemple qu'un événement OnChange ne pourra pas s'appliquer à un lien hypertexte.
Voici un tableau rĂ©capitulant les objets auxquels peuvent ĂȘtre associĂ©s chaque Ă©vĂ©nement :

EvénementsObjets concernés
abortImage
blurButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
changeFileUpload, Select, Submit, Text, TextArea
clickButton, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclickdocument, Link
dragdropwindow
errorImage, window
focusButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
keydowndocument, Image, Link, TextArea
keypressdocument, Image, Link, TextArea
keyupdocument, Image, Link, TextArea
loadImage, Layer, window
mousedownButton, document, Link
mousemoveAucun spécifiquement
mouseoutLayer, Link
mouseoverArea, Layer, Link
mouseupButton, document, Link
movewindow
resetform
resizewindow
selecttext, Textarea
submitForm
unloadwindow
Type Description
Number A number representing a numeric value
Bigint A number representing a large integer
String A text of characters enclosed in quotes
Boolean A data type representing true or false
Undefined A variable with no assigned value
Null A value representing object absence
Symbol A unique primitive identifier
Object A collection of key-value pairs of data
Type Description
Number let length = 16;
BigInt let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)
Strings let color = "Yellow";
let lastName = "Johnson";
Boolean let x = true;
let y = false;
Undefined let x;
Null let x = null;
Symbol const x = Symbol();
Object const person = {firstName:"John", lastName:"Doe"};
Array const cars = ["Saab", "Volvo", "BMW"];
Date Object const date = new Date("2022-03-25");
Object Description
Array Array of values accessed by a numerical index
Map Array of key-value pairs where the keys can be of any data type
Set Array of values where each value can only appear once
WeakMap A type of Map with weak references to the stored objects.
WeakSet A type of Set with weak references to the stored objects.
Math An object that provides math constants and functions like PI and random()
Date Object for working with dates and times
RegExp Object for working with regular expressions
Error Object represents error conditions during program execution
JSON Object with methods for parsing values between JSON and objects
Promise Object representing the completion or failure of an asynchronous operation
Int8Array Array for storing fixed-size 8-bits integer values
Int16Array Array for storing fixed-size 16-bits integer values
Int32Array Array for storing fixed-size 32-bits integer values
Float16Array Array for storing fixed-size 16-bits floating-point values
Float32Array Array for storing fixed-size 32-bits floating-point values
Float64Array Array for storing fixed-size 64-bits floating-point values
BigInt64Array Array for storing fixed-size 64-bits big integer values

Javascript dispose de types de données primitifs :

Il existe 8 types de données de base en JavaScript.
string (chaĂźnes de caractĂšres)
number (nombres)
boolean (booléen)
undefined (indéfini)
null (nul)
object (objet)
function (fonction)
array (tableau)

L'opérateur typeof

typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object" (1)
typeof null // "object" (2)
typeof alert // "function" (3)

Déclarer une variable et sa portée :

var

 PortĂ©e : Le mot-clĂ© var permet de dĂ©finir une variable globale. Ces variables ont une portĂ©e de fonction, c’est-Ă -dire qu’elles sont accessibles dans la fonction dans laquelle elles sont dĂ©finies, ou Ă  l’ensemble global si elles sont dĂ©clarĂ©es en dehors de toute fonction. Une variable dĂ©clarĂ©e avec var peut ĂȘtre redĂ©clarĂ©e dans la mĂȘme portĂ©e. Il est possible de modifier la valeur ou la rĂ©fĂ©rence d’une variable dĂ©clarĂ©e avec var.

let

 PortĂ©e : Le mot-clĂ© let permet de dĂ©finir une variable locale. Ces variables ont une portĂ©e de bloc, c’est-Ă -dire qu’elles ne sont accessibles qu’au sein du bloc de code dans lequel elles sont dĂ©finies. Un bloc est dĂ©limitĂ© par des accolades {} (if, for, function
). La portĂ©e d’une variable est aussi communĂ©mment dĂ©finie par le terme «scope».

const

 PortĂ©e : Le mot-clĂ© const permet de dĂ©finir une constante, c’est-Ă -dire une variable dont la valeur ou la rĂ©fĂ©rence ne change pas. Ces constantes ont une portĂ©e de bloc, c’est-Ă -dire qu’elles ne sont accessibles qu’au sein du bloc de code dans lequel elles sont dĂ©finies. Un bloc est dĂ©limitĂ© par des accolades {} (if, for, function
). Une constante dĂ©clarĂ©e avec const ne peut pas ĂȘtre redĂ©clarĂ©e dans la mĂȘme portĂ©e. Il n’est pas possible de modifier la valeur/la rĂ©fĂ©rence d’une constante dĂ©clarĂ©e avec const. S’il n’est pas possible de rĂ©assigner une variable, il est nĂ©anmoins possible d’en modifier les composantes (mais pas la nature) s’il s’agit d’un objet ou d’un tableau. Choisir entre let, var ou const dĂ©pend donc de la portĂ©e, des mĂ©caniques de redĂ©claration et rĂ©assignation que vous envisagez pour vos variables. Voici un tableau rĂ©capitulant ces caractĂ©ristiques.

Commentaires Zone
// ou /* */ CSS / JS
<!-- --> Html
<head><link rel="stylesheet" href="mystyle.css"></head>

Exemples

Différentes mesures :
Recommandé : em, cm, mm, in, pt, pc, % - Occasionnel : px, ex - Non recommandé : pt, cm, mm, in, pc
1in = 2.54cm = 25.4mm = 72pt = 6pc 
<p style="color:red;">This is a paragraph.</p>

-

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

/*
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003-2025 Apple Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Library General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  If not, write to
 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */

@namespace "http://www.w3.org/1999/xhtml";

html {
    display: block;
    color: CanvasText;
}

/* children of the <head> element all have display:none as below */
area, base, basefont, datalist, head, link, meta, noembed, noframes,
param, rp, script, style, template, title {
    display: none;
}

/* generic block-level elements */

body {
    display: block;
    margin: 8px;
}

p {
    display: block;
    margin-block: 1__qem;
    margin-inline: 0;
}

address, article, aside, div, footer, header, hgroup, main, nav, search, section {
    display: block;
}

marquee {
    display: inline-block;
    text-align: initial;
    overflow: hidden !important;
}

blockquote {
    display: block;
    margin-block: 1__qem 1em;
    margin-inline: 40px;
}

figcaption {
    display: block;
}

figure {
    display: block;
    margin-block: 1em;
    margin-inline: 40px;
}

q {
    display: inline;
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center;
}

hr {
    display: block;
    overflow: hidden;
    color: gray;
    margin-block: 0.5em;
    margin-inline: auto;
    border-style: inset;
    border-width: 1px;
}

abbr[title], acronym[title] {
    text-decoration: dotted underline;
}

/* ::backdrop */

::backdrop {
    display: block;
    position: fixed;
    inset: 0;
}

/* dialog */

dialog {
    position: absolute;
    inset-inline: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background-color: Canvas;
    color: CanvasText;
    display: none;
}

dialog[open] {
    display: block;
}

dialog:modal {
    position: fixed;
    overflow: auto;
    inset-block: 0;
    max-width: calc(100% - 6px - 2em);
    max-height: calc(100% - 6px - 2em);
    visibility: visible;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.1);
}

/* media elements */

body:-internal-media-document {
    background-color: rgb(38, 38, 38);
}

video {
    object-fit: contain;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    -webkit-tap-highlight-color: transparent;
#endif
    content: normal !important;
}

audio {
    width: 200px;
    height: 25px;
}

audio:not([controls]) {
    display: none !important;
}

/* heading elements */

h1 {
    display: block;
    font-size: 2em;
    margin-block: 0.67__qem 0.67em;
    margin-inline: 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block: 0.83__qem 0.83em;
    margin-inline: 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block: 1__qem 1em;
    margin-inline: 0;
    font-weight: bold;
}

h4 {
    display: block;
    margin-block: 1.33__qem 1.33em;
    margin-inline: 0;
    font-weight: bold;
}

h5 {
    display: block;
    font-size: .83em;
    margin-block: 1.67__qem 1.67em;
    margin-inline: 0;
    font-weight: bold;
}

h6 {
    display: block;
    font-size: .67em;
    margin-block: 2.33__qem 2.33em;
    margin-inline: 0;
    font-weight: bold;
}

/* tables */

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    text-indent: initial;
    box-sizing: border-box;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}

/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
    vertical-align: middle;
}

col {
    display: table-column;
}

colgroup {
    display: table-column-group;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
}

th {
    font-weight: bold;
    text-align: -internal-th-center;
}

caption {
    display: table-caption;
    text-align: -webkit-center;
}

/* for table elements with form inside following rules should apply */
:is(table, thead, tbody, tfoot, tr) > form:-internal-html-document {
    display: none !important;
}

/* lists */

ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block: 1__qem 1em;
    padding-inline-start: 40px;
}

ol {
    display: block;
    list-style-type: decimal;
    margin-block: 1__qem 1em;
    padding-inline-start: 40px;
}

li {
    display: list-item;
    text-align: match-parent;
}

/* The rightmost selector is written explicitly rather than with :is() to help with RuleSet bucketing.*/
:is(dir, dl, menu, ol, ul) dir,
:is(dir, dl, menu, ol, ul) dl,
:is(dir, dl, menu, ol, ul) menu,
:is(dir, dl, menu, ol, ul) ol,
:is(dir, dl, menu, ol, ul) ul {
    margin-block: 0;
}

:is(dir, menu, ol, ul) dir,
:is(dir, menu, ol, ul) menu,
:is(dir, menu, ol, ul) ul {
    list-style-type: circle;
}

:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) dir,
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) menu,
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) ul {
    list-style-type: square;
}

dd {
    display: block;
    margin-inline-start: 40px;
}

dl {
    display: block;
    margin-block: 1__qem 1em;
}

dt {
    display: block;
}

/* FIXME: this should also match ::before::marker and ::after::marker but we don't support
   this yet. When we do, we can remove the code specific to ::before and ::after in
   RenderListItem::computeMarkerStyle(), see bugs.webkit.org/b/218897. */
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    text-transform: none;
    text-indent: 0px !important;
}

/* form elements */

form {
    display: block;
    margin-top: 0__qem;
}

label {
    cursor: default;
}

legend {
    padding-inline: 2px;
    border: none;
}

fieldset {
    display: block;
    margin-inline: 2px;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;
    border: 2px groove ThreeDFace;
    min-inline-size: min-content;
}

button {
    appearance: auto;
}

::-internal-writing-suggestions {
    color: color-mix(in srgb, currentColor 50%, transparent);
}

input, textarea, select, button {
    margin: 0__qem;
#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
    font: -webkit-small-control;
#endif
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

input[type="hidden"] {
    display: none;
}

#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
textarea,
#endif
input {
    appearance: auto;
    color: CanvasText;
    background-color: Canvas;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border: 1px solid -apple-system-secondary-label;
    font: 11px system-ui;
    padding-block: 0.2em 0.3em;
    padding-inline: 0.5em;
#else
    border: 2px inset gray;
    padding: 1px;
#endif
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}

@media (prefers-dark-interface) {
    input {
        background-color: transparent;
    }

    input::-internal-loading-auto-fill-button {
        background-image: url('data:image/svg+xml,<svg width="22" height="12" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path fill="rgb(55,55,55)" d="M19.36,12.64L19.36,12.64c-0.88-0.88-0.88-2.3,0-3.18l4.6-4.6c0.88-0.88,2.3-0.88,3.18,0l0,0c0.88,0.88,0.88,2.3,0,3.18l-4.6,4.6C21.66,13.52,20.24,13.52,19.36,12.64z"><animate attributeName="fill" begin="0s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(76,76,76)" d="M20.75,16L20.75,16c0-1.24,1.01-2.25,2.25-2.25l6.5,0c1.24,0,2.25,1.01,2.25,2.25v0c0,1.24-1.01,2.25-2.25,2.25l-6.5,0C21.76,18.25,20.75,17.24,20.75,16z"><animate attributeName="fill" begin="0.125s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(97,97,97)" d="M27.14,27.14L27.14,27.14c-0.88,0.88-2.3,0.88-3.18,0l-4.6-4.6c-0.88-0.88-0.88-2.3,0-3.18l0,0c0.88-0.88,2.3-0.88,3.18,0l4.6,4.6C28.02,24.83,28.02,26.26,27.14,27.14z"><animate attributeName="fill" begin="0.25s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(118,118,118)" d="M16,31.75L16,31.75c-1.24,0-2.25-1.01-2.25-2.25l0-6.5c0-1.24,1.01-2.25,2.25-2.25h0c1.24,0,2.25,1.01,2.25,2.25l0,6.5C18.25,30.74,17.24,31.75,16,31.75z"><animate attributeName="fill" begin="0.375s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(138,138,138)" d="M4.86,27.14L4.86,27.14c-0.88-0.88-0.88-2.3,0-3.18l4.6-4.6c0.88-0.88,2.3-0.88,3.18,0l0,0c0.88,0.88,0.88,2.3,0,3.18l-4.6,4.6C7.17,28.02,5.74,28.02,4.86,27.14z"><animate attributeName="fill" begin="0.5s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(159,159,159)" d="M0.25,16L0.25,16c0-1.24,1.01-2.25,2.25-2.25l6.5,0c1.24,0,2.25,1.01,2.25,2.25v0c0,1.24-1.01,2.25-2.25,2.25l-6.5,0C1.26,18.25,0.25,17.24,0.25,16z"><animate attributeName="fill" begin="0.625s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(180,180,180)" d="M12.64,12.64L12.64,12.64c-0.88,0.88-2.3,0.88-3.18,0l-4.6-4.6c-0.88-0.88-0.88-2.3,0-3.18l0,0c0.88-0.88,2.3-0.88,3.18,0l4.6,4.6C13.52,10.34,13.52,11.76,12.64,12.64z"><animate attributeName="fill" begin="0.75s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(201,201,201)" d="M16,11.25L16,11.25c-1.24,0-2.25-1.01-2.25-2.25l0-6.5c0-1.24,1.01-2.25,2.25-2.25h0c1.24,0,2.25,1.01,2.25,2.25l0,6.5C18.25,10.24,17.24,11.25,16,11.25z"><animate attributeName="fill" begin="0.875s" dur="1s" values="rgb(201,201,201);rgb(55,55,55)" calcMode="linear" repeatCount="indefinite" /></path></svg>');
    }
}

input[type="search"] {
    box-sizing: border-box;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border: 1px solid -webkit-control-background;
    background-color: -apple-system-opaque-tertiary-fill;
#endif
}

input::-webkit-textfield-decoration-container {
    display: flex;
    align-items: center;
    content: none !important;
    writing-mode: inherit !important;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-decoration {
    appearance: auto;
    display: block;
    flex: none;
    align-self: flex-start;
    margin-block: auto;
    margin-inline: 0;
}

input[type="search"]::-webkit-search-results-button {
    appearance: auto;
    display: block;
    flex: none;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    align-self: flex-start;
    margin-block: auto;
    margin-inline: 0;
#endif
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
    align-items: center;
    display: inline-flex;
    overflow: hidden;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border: 1px solid -webkit-control-background;
    font-family: system-ui;
    padding-block: 0.2em;
    padding-inline: 0.5em;
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: rgba(0, 0, 0, 0.04);
    color: CanvasText;
#else
    background-color: -apple-system-opaque-secondary-fill;
    color: -apple-system-blue;
#endif /*defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#else
    outline: none;
    font-variant-numeric: tabular-nums;
    /* FIXME: Font features should be defined in a @font-feature-values rule, so that the feature setting is only applied to the system font. */
    /* "ss03" enables the raised colon separator on the system font. */
    font-feature-settings: "ss03";
#endif
}

#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):disabled {
    background-color: -apple-system-opaque-secondary-fill-disabled;
    color: -apple-system-tertiary-label;
    opacity: initial;
}
#endif

input::-webkit-date-and-time-value {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    margin: 0px;
    text-align: center;
    inline-size: 100%;
#else
    margin-block: 1px;
    margin-inline-start: 4px;
    margin-inline-end: 24px;
    white-space: pre;
#endif
}

/* FIXME: Styling inner elements of the date control should be specific to input[type="date"]. */

input::-webkit-datetime-edit {
    display: inline-block;
    overflow: hidden;
    padding: 1px;
}

input::-webkit-datetime-edit-fields-wrapper {
    display: inline-block;
    white-space: pre;
}

input::-webkit-datetime-edit-year-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-second-field,
input::-webkit-datetime-edit-millisecond-field,
input::-webkit-datetime-edit-meridiem-field {
    display: inline-block;
    font: inherit !important;
    padding: 1px;
    text-align: center;
}

input::-webkit-datetime-edit-year-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-second-field:focus,
input::-webkit-datetime-edit-millisecond-field:focus,
input::-webkit-datetime-edit-meridiem-field:focus {
#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
    background-color: -apple-system-control-accent;
    border-radius: 3px;
    color: white;
#else
    background-color: highlight;
    color: highlighttext;
#endif
    outline: none;
}

input[disabled]::-webkit-datetime-edit-year-field,
input[disabled]::-webkit-datetime-edit-month-field,
input[disabled]::-webkit-datetime-edit-day-field,
input[disabled]::-webkit-datetime-edit-hour-field,
input[disabled]::-webkit-datetime-edit-minute-field,
input[disabled]::-webkit-datetime-edit-second-field,
input[disabled]::-webkit-datetime-edit-millisecond-field,
input[disabled]::-webkit-datetime-edit-meridiem-field,
input[disabled]::-webkit-datetime-edit-text {
    color: GrayText;
}

input::-webkit-datetime-edit-text {
    display: inline;
}

input::-webkit-inner-spin-button {
    appearance: auto;
    display: block;
    position: relative;
    cursor: default;
    /* This height property is ignored for input type "number" and others which
     * use RenderTextControlSingleLine as renderer which sets height of spin
     * button in layout(). */
    height: 1.5em;
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-strong-password-auto-fill-button {
    flex-shrink: 1 !important;
    font-family: -apple-system !important;
    -webkit-text-security: none !important;
    -webkit-user-select: none !important;
    pointer-events: none !important;
    text-align: right !important;
    color: rgba(0, 0, 0, 0.8) !important;
    padding-inline-start: 6px !important;
    white-space: nowrap !important;
}

input::-webkit-credentials-auto-fill-button {
#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
    background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 26 26"%3E%3Cpath d%3D"m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z" fill%3D"%23e5e5e5" opacity%3D".64"%2F%3E%3Cpath d%3D"m9.838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327z" opacity%3D".78"%2F%3E%3Cpath d%3D"m19.091 15.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073-.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z" opacity%3D".75"%2F%3E%3C%2Fsvg%3E');
    width: 24px;
    height: 24px;
    margin-inline: 2px 1px;
    mix-blend-mode: luminosity;
#else
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M 16 3.5 C 16 2.672 16.672 2 17.5 2 C 18.3 2 19 2.7 19 3.5 C 19 4.3 18.3 5 17.5 5 C 16.7 5 16 4.3 16 3.5 Z M 11 6.5 C 11 10.1 13.9 13 17.5 13 C 21.1 13 24 10.1 24 6.5 C 24 2.9 21.1 0 17.5 0 C 13.9 0 11 2.9 11 6.5 Z"/><path d="M 20 17.3 L 20 18.6 L 20.9 19.9 C 21 20 21 20 21 20 L 17.7 23.8 C 17.7 23.8 17.7 23.8 17.7 23.8 C 17.5 23.9 17.4 23.9 17.3 23.8 L 15 21 L 15 11 L 20 11 L 20 14.8 L 21 15.9 C 21 16 21 16 20.9 16.1 L 20 17.3 Z M 17 13 L 17 21.3 L 17.5 21.8 L 18 21.3 L 18 13 L 17 13 Z"/></svg>');
    mask-size: 22px 12px;
    width: 22px;
    height: 12px;
    margin-inline: 3px 2px;
    background-color: black;
#endif
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-credentials-auto-fill-button:hover {
#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
    background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 26 26"%3E%3Cpath d%3D"M8.692 1h8.617c2.675 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.622.801H8.692c-2.675 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978 1.29-1.745 2.268-2.268.978-.523 1.948-.801 4.622-.801V1Z" fill%3D"%23e5e5e5" fill-opacity%3D".7"%2F%3E%3Cpath fill-opacity%3D".15" d%3D"M17.309 1c2.675 0 3.644.278 4.622.801.978.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.622.801H8.692c-2.675 0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978 1.29-1.745 2.268-2.268.978-.523 1.948-.801 4.622-.801L17.309 1ZM9.692 2l-1 .001c-2.28768403 0-3.2042805.17686116-4.15042927.68282824-.80370939.42979551-1.42794698 1.0540331-1.85774249 1.85774249C2.17772202 5.48797969 2.001 6.40369128 2.001 8.692v8.616c0 2.287684.17686116 3.2042805.68282824 4.1504293.42979551.8037094 1.0540331 1.4279469 1.85774249 1.8577425C5.48797969 23.822278 6.40369128 23.999 8.692 23.999h8.617c2.287684 0 3.2042805-.1768612 4.1504293-.6828282.8037094-.4297956 1.4279469-1.0540331 1.8577425-1.8577425C23.823278 20.5120203 24 19.5963087 24 17.308V8.691c0-2.28768403-.1768612-3.2042805-.6828282-4.15042927-.4297956-.80370939-1.0540331-1.42794698-1.8577425-1.85774249C20.5130203 2.17672202 19.5973087 2 17.309 2H9.692Z" fill%3D"%23e6e6e6"%2F%3E%3Cpath d%3D"M9.838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327zm9.253 11.096c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073-.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z"%2F%3E%3C%2Fsvg%3E');
#else
    background-color: rgb(0, 122, 255);
#endif
}

input::-webkit-credentials-auto-fill-button:active {
#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20fill%3D%22%23B2B2B2%22%20fill-opacity%3D%22.6%22%20d%3D%22M8.692%201h8.617c2.675%200%203.644.278%204.622.801.978.523%201.745%201.29%202.268%202.268.523.978.801%201.948.801%204.622v8.617c0%202.675-.278%203.644-.801%204.622-.523.978-1.29%201.745-2.268%202.268-.978.523-1.948.801-4.622.801H8.692c-2.675%200-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978%201.29-1.745%202.268-2.268.978-.523%201.948-.801%204.622-.801V1Z%22%2F%3E%3Cpath%20fill%3D%22%23B2B2B2%22%20fill-opacity%3D%22.15%22%20d%3D%22M17.309%201c2.675%200%203.644.278%204.622.801.978.523%201.745%201.29%202.268%202.268.523.978.801%201.948.801%204.622v8.617c0%202.675-.278%203.644-.801%204.622-.523.978-1.29%201.745-2.268%202.268-.978.523-1.948.801-4.622.801H8.692c-2.675%200-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622V8.692c0-2.675.278-3.644.801-4.622.523-.978%201.29-1.745%202.268-2.268.978-.523%201.948-.801%204.622-.801L17.309%201ZM9.692%202l-1%20.001c-2.28768403%200-3.2042805.17686116-4.15042927.68282824-.80370939.42979551-1.42794698%201.0540331-1.85774249%201.85774249C2.17772202%205.48797969%202.001%206.40369128%202.001%208.692v8.616c0%202.287684.17686116%203.2042805.68282824%204.1504293.42979551.8037094%201.0540331%201.4279469%201.85774249%201.8577425C5.48797969%2023.822278%206.40369128%2023.999%208.692%2023.999h8.617c2.287684%200%203.2042805-.1768612%204.1504293-.6828282.8037094-.4297956%201.4279469-1.0540331%201.8577425-1.8577425C23.823278%2020.5120203%2024%2019.5963087%2024%2017.308V8.691c0-2.28768403-.1768612-3.2042805-.6828282-4.15042927-.4297956-.80370939-1.0540331-1.42794698-1.8577425-1.85774249C20.5130203%202.17672202%2019.5973087%202%2017.309%202H9.692Z%22%2F%3E%3Cpath%20d%3D%22M9.838%208.318c-.308%200-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303%200%20.564.109.782.327s.327.48.327.785c0%20.306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59%200-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904%201.341-.326%201.055-.326%201.641c0%20.571.106%201.112.317%201.622s.51.961.896%201.352.841.698%201.366.918v6.082c0%20.101.018.196.054.287s.092.173.167.247l1.122%201.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083%201.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411%201.644-.964%202.142-1.66.499-.696.748-1.472.748-2.329%200-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327zM19.091%2015.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46%200-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187%200-.352.073-.495.22l-2.165%202.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122%200-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34%200%20.09.015.173.046.248s.078.146.14.212l2.467%202.521c.171.171.36.256.565.256z%22%2F%3E%3C%2Fsvg%3E');
#else
    background-color: rgb(0, 60, 219);
#endif
}

input::-webkit-contacts-auto-fill-button {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M 12 24 C 18.5647 24 24 18.5529 24 12 C 24 5.4353 18.553 0 11.9883 0 C 5.4353 0 0 5.4353 0 12 C 0 18.5529 5.4471 24 12 24 Z M 12 16.0118 C 8.4706 16.0118 5.7412 17.2706 4.5529 18.6823 C 2.9647 16.9176 2.0118 14.5765 2.0118 12 C 2.0118 6.447 6.4353 2 11.9883 2 C 17.5412 2 21.9883 6.447 22 12 C 22.0119 14.5765 21.0471 16.9176 19.4589 18.6941 C 18.2706 17.2823 15.5412 16.0118 12 16.0118 Z M 12 14.0118 C 14.2588 14.0353 16.0353 12.1059 16.0353 9.5765 C 16.0353 7.2 14.2588 5.2235 12 5.2235 C 9.7412 5.2235 7.9529 7.2 7.9647 9.5765 C 7.9765 12.1059 9.7412 13.9882 12 14.0118 Z"/></svg>');
    mask-size: 22px 12px;
    width: 22px;
    height: 12px;
    margin-inline: 3px 2px;
    background-color: black;
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-contacts-auto-fill-button:hover {
    background-color: rgb(0, 122, 255);
}

input::-webkit-contacts-auto-fill-button:active {
    background-color: rgb(0, 60, 219);
}

input::-webkit-credit-card-auto-fill-button {
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="4" width="22" height="16" rx="2" fill="none" stroke="black" stroke-width="2"/><rect x="2" y="8" width="20" height="3"/><rect x="3" y="12" width="5" height="4" rx="1"/></svg>');
    mask-size: 22px 12px;
    width: 22px;
    height: 12px;
    margin-inline: 3px 2px;
    background-color: black;
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-credit-card-auto-fill-button:hover {
    background-color: rgb(0, 122, 255);
}

input::-webkit-credit-card-auto-fill-button:active {
    background-color: rgb(0, 60, 219);
}

input::-internal-loading-auto-fill-button {
    background-image: url('data:image/svg+xml,<svg width="22" height="12" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path fill="rgb(55,55,55)" d="M19.36,12.64L19.36,12.64c-0.88-0.88-0.88-2.3,0-3.18l4.6-4.6c0.88-0.88,2.3-0.88,3.18,0l0,0c0.88,0.88,0.88,2.3,0,3.18l-4.6,4.6C21.66,13.52,20.24,13.52,19.36,12.64z"><animate attributeName="fill" begin="0s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(76,76,76)" d="M20.75,16L20.75,16c0-1.24,1.01-2.25,2.25-2.25l6.5,0c1.24,0,2.25,1.01,2.25,2.25v0c0,1.24-1.01,2.25-2.25,2.25l-6.5,0C21.76,18.25,20.75,17.24,20.75,16z"><animate attributeName="fill" begin="0.125s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(97,97,97)" d="M27.14,27.14L27.14,27.14c-0.88,0.88-2.3,0.88-3.18,0l-4.6-4.6c-0.88-0.88-0.88-2.3,0-3.18l0,0c0.88-0.88,2.3-0.88,3.18,0l4.6,4.6C28.02,24.83,28.02,26.26,27.14,27.14z"><animate attributeName="fill" begin="0.25s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(118,118,118)" d="M16,31.75L16,31.75c-1.24,0-2.25-1.01-2.25-2.25l0-6.5c0-1.24,1.01-2.25,2.25-2.25h0c1.24,0,2.25,1.01,2.25,2.25l0,6.5C18.25,30.74,17.24,31.75,16,31.75z"><animate attributeName="fill" begin="0.375s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(138,138,138)" d="M4.86,27.14L4.86,27.14c-0.88-0.88-0.88-2.3,0-3.18l4.6-4.6c0.88-0.88,2.3-0.88,3.18,0l0,0c0.88,0.88,0.88,2.3,0,3.18l-4.6,4.6C7.17,28.02,5.74,28.02,4.86,27.14z"><animate attributeName="fill" begin="0.5s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(159,159,159)" d="M0.25,16L0.25,16c0-1.24,1.01-2.25,2.25-2.25l6.5,0c1.24,0,2.25,1.01,2.25,2.25v0c0,1.24-1.01,2.25-2.25,2.25l-6.5,0C1.26,18.25,0.25,17.24,0.25,16z"><animate attributeName="fill" begin="0.625s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(180,180,180)" d="M12.64,12.64L12.64,12.64c-0.88,0.88-2.3,0.88-3.18,0l-4.6-4.6c-0.88-0.88-0.88-2.3,0-3.18l0,0c0.88-0.88,2.3-0.88,3.18,0l4.6,4.6C13.52,10.34,13.52,11.76,12.64,12.64z"><animate attributeName="fill" begin="0.75s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path><path fill="rgb(201,201,201)" d="M16,11.25L16,11.25c-1.24,0-2.25-1.01-2.25-2.25l0-6.5c0-1.24,1.01-2.25,2.25-2.25h0c1.24,0,2.25,1.01,2.25,2.25l0,6.5C18.25,10.24,17.24,11.25,16,11.25z"><animate attributeName="fill" begin="0.875s" dur="1s" values="rgb(86,86,86);rgb(207,207,207)" calcMode="linear" repeatCount="indefinite" /></path></svg>');
    width: 22px;
    height: 12px;
    margin-inline: 3px 2px;
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-caps-lock-indicator {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill="black" fill-opacity="0.4" d="M12.5 0.5A 4 4 0 0 1 16.5 4.5L 16.5 12.5A 4 4 0 0 1 12.5 16.5L 4.5 16.5A 4 4 0 0 1 0.5 12.5L 0.5 4.5A 4 4 0 0 1 4.5 0.5L 12.5 0.5M 8.5 2L 4 7L 6.25 7L 6.25 10.25L 10.75 10.25L 10.75 7L 13 7L 8.5 2M 10.75 12L 6.25 12L 6.25 14.25L 10.75 14.25L 10.75 12"/></svg>');
    max-width: 17px;
    align-self: stretch;
    flex: none;
    -webkit-user-select: none;
}

input::-webkit-list-button {
    appearance: auto;
    display: block;
    position: relative;
    cursor: default;
    align-self: stretch;
    flex: none;
    -webkit-user-select: none;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    /* Make it easier to hit the button on iOS */
    padding: 7px;
    margin: -7px;
#else
    block-size: 100%;
#endif
}

textarea {
    appearance: auto;
#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
    color: CanvasText;
    background-color: Canvas;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    padding: 2px;
#else
    -webkit-nbsp-mode: space;
    line-break: after-white-space;

    /* On iOS we want to inherit the left and right padding for consistency with
     other form controls (e.g. <input type="text">). We want to override the top
     and bottom padding to ensure we have a symmetric look for text areas. */
    padding-block: 2px;
#endif
    resize: -internal-textarea-auto;
    cursor: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

::placeholder {
    -webkit-text-security: none;
    color: darkGray;
    direction: inherit !important;
    pointer-events: none !important;
    text-orientation: inherit !important;
    writing-mode: inherit !important;
    position: static !important;
}

input::placeholder {
    white-space: pre;
    word-wrap: normal;
    overflow: hidden;
    line-height: initial !important;
}

input:disabled, textarea:disabled {
    color: color-mix(in hsl, CanvasText 66%, Canvas);
}

input:is([type="hidden"], [type="image"], [type="file"]) {
    appearance: initial;
    padding: initial;
    background-color: initial;
    border: initial;
}

input[type="file"] {
    align-items: baseline;
    color: inherit;
    text-align: start !important;
}

input:-webkit-autofill-and-obscured {
    -webkit-text-security: disc !important;
}

input:-webkit-autofill-strong-password {
    -webkit-user-select: none !important;
}

input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable {
    input-security: none !important;
    cursor: default !important;
    font-family: monospace;
}

input:-webkit-autofill, input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable, input:-webkit-autofill-and-obscured {
    background-color: #FAFFBD !important;
    background-image: none !important;
    color: #000000 !important;
}

input:autofill {
    field-sizing: fixed !important;
}

input:is([type="radio"], [type="checkbox"]) {
    margin: 3px 2px;
    box-sizing: border-box;
    border: initial;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    width: -internal-auto-base(16px, 1em);
    height: -internal-auto-base(16px, 1em);
    padding: -internal-auto-base(0px, unset);
    /* We want to be as close to background:transparent as possible without actually being transparent */
    background-color: rgba(255, 255, 255, 0.01);
#else
    width: -internal-auto-base(unset, 1em);
    height: -internal-auto-base(unset, 1em);
    padding: initial;
    background-color: initial;
#endif
}

input[type="checkbox"] {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border-radius: 5px;
#endif
}

input[type="radio"] {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border-radius: 50%;
#else
    border-radius: -internal-auto-base(unset, 50%);
#endif
}

input[type="checkbox"]:indeterminate {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    background: rgba(0, 0, 0, 0.8);
#endif
}

input[type="checkbox"]:indeterminate:disabled {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    opacity: initial;
    background: rgba(0, 0, 0, 0.8);
#endif
}

input:is([type="checkbox"], [type="radio"]):checked {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border-color: rgba(255, 255, 255, 0.0);
#endif
}

input:is([type="checkbox"], [type="radio"]):disabled {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    opacity: initial;
#endif
}

input:is([type="checkbox"], [type="radio"]):checked:disabled {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    opacity: initial;
    background: rgba(0, 0, 0, 0.8);
#endif
}

input[type=checkbox]:not([switch]):checked::checkmark {
    content: "\2713" / "";
}

input[type=radio]:checked::checkmark {
    background-color: currentColor;
    display: inline-block;
    border-radius: inherit;
    height: 100%;
    width: 100%;
}

input:is([type=checkbox]:not([switch]), [type=radio]):not(:checked)::checkmark {
    display: none;
}

input:is([type="button"], [type="submit"], [type="reset"]) {
    white-space: pre;
}

input[type="file"]::file-selector-button {
    white-space: nowrap;
    margin: 0;
    font-size: inherit;
}

input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, button {
    text-align: center;
    cursor: default;
    padding-inline: 6px;
#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
    color: ButtonText;
    padding-block: 2px 3px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
#else
    padding-block: 0; /* override input padding */
    border: 1px solid -webkit-control-background;
    font: 11px system-ui;
    color: -apple-system-blue;
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: rgba(0, 0, 0, 0.05);
#else
    background-color: -apple-system-opaque-secondary-fill;
#endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#endif /* (defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) */
    box-sizing: border-box;
}

input:is([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active {
#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
    color: ActiveButtonText;
#else
    color: -apple-system-blue;
#endif
}

#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY

input[type="submit"], input[type="submit"]:active,
button[type="submit"], button[type="submit"]:active,
button[type="menu"], button[type="menu"]:active {
    background-color: -apple-system-blue;
    color: white;
}

#endif

input[type="range"] {
    padding: initial;
    border: initial;
    margin: 2px;
    color: #909090;
}

input[type="range"]::-webkit-slider-container {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    min-width: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    flex: 1;
    align-self: center;

    box-sizing: border-box;
    display: block;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: auto;
    box-sizing: border-box;
    display: block;
}

#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb:active {
    background-color: white;
    border: initial;
    box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.2), 0px 0.5px 4px rgba(0, 0, 0, 0.2);
}

input:disabled, textarea:disabled {
    opacity: 0.4;
}

input[readonly], textarea[readonly] {
    border-color: rgb(188, 188, 188);
}
#endif

#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)

input:is([type="button"], [type="submit"], [type="reset"]):disabled,
input[type="file"]:disabled::file-selector-button, button:disabled,
select:disabled, optgroup:disabled, option:disabled,
select[disabled]>option {
    color: GrayText;
}

input:is([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]:active::file-selector-button, button:active {
    border-style: inset;
}

input:is([type="button"], [type="submit"], [type="reset"]):active:disabled,
input[type="file"]:active:disabled::file-selector-button, button:active:disabled {
    border-style: outset;
}

#else

input[type="file"]:disabled {
    color: rgba(60, 60, 67, 0.3);
    opacity: initial;
}

input:is([type="button"], [type="submit"], [type="reset"]):disabled,
input[type="file"]:disabled::file-selector-button,
button:disabled,
select:-internal-uses-menulist:disabled {
    background-color: -apple-system-opaque-secondary-fill-disabled;
    color: -apple-system-tertiary-label;
    opacity: initial;
}

#endif

input[type="color"] {
    appearance: auto;
    box-sizing: border-box;
    outline: none;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    width: 28px;
    height: 28px;
    padding: 3px;
    border: initial;
    border-radius: 50%;
#else
    inline-size: 44px;
    block-size: 23px;
#endif
}

input[type="color"]::-internal-color-swatch-overlay {
    appearance: auto;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    appearance: auto;
    display: flex;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border-radius: inherit;
    padding: 2px;
#else
    padding-inline: 2px;
    padding-block: 4px 5px;
#endif
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

input[type="color"]::-webkit-color-swatch {
    appearance: auto;
    background-color: #000000;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    border-radius: inherit;
#else
    border-radius: 2px;
#endif
    flex: 1;
}

select {
    box-sizing: border-box;
    appearance: auto;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
}

/* FIXME: Implement revert-rule CSS keyword so we can de-duplicate some of this. */

select:-internal-uses-menulist {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    padding-inline: -internal-auto-base(0.4em, 0.5em);
    color: -internal-auto-base(-apple-system-blue, inherit);
    font: -internal-auto-base(11px system-ui, inherit);
    border-color: -internal-auto-base(-webkit-control-background, initial);
    border-radius: -internal-auto-base(initial, 0.5em);
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: -internal-auto-base(rgba(0, 0, 0, 0.04), transparent);
#else
    background-color: -internal-auto-base(-apple-system-opaque-secondary-fill, transparent);
#endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#else
    padding-inline: -internal-auto-base(0, 0.5em);
    color: -internal-auto-base(CanvasText, inherit);
    background-color: -internal-auto-base(Canvas, transparent);
    border-radius: -internal-auto-base(5px, 0.5em);
    font: -internal-auto-base(-webkit-small-control, inherit);
#endif /* defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY */
    padding-block: -internal-auto-base(0, 0.25em);
    align-items: -internal-auto-base(center, unset);
    white-space: -internal-auto-base(pre, initial);
    cursor: -internal-auto-base(default, inherit);
    gap: -internal-auto-base(initial, 0.5em);

    -webkit-rtl-ordering: -internal-auto-base(logical, inherit);
    text-shadow: -internal-auto-base(none, inherit);
    text-transform: -internal-auto-base(none, initial);
    letter-spacing: -internal-auto-base(normal, inherit);
    word-spacing: -internal-auto-base(normal, inherit);
}

select:-internal-uses-menulist:enabled:hover {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: -internal-auto-base(rgba(0, 0, 0, 0.04), color-mix(in lab, currentColor 10%, transparent));
#else
    background-color: -internal-auto-base(-apple-system-opaque-secondary-fill, color-mix(in lab, currentColor 10%, transparent));
#endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#else
    background-color: -internal-auto-base(Canvas, color-mix(in lab, currentColor 10%, transparent));
#endif /* defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY */
}

select:-internal-uses-menulist:enabled:active {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: -internal-auto-base(rgba(0, 0, 0, 0.04), color-mix(in lab, currentColor 20%, transparent));
#else
    background-color: -internal-auto-base(-apple-system-opaque-secondary-fill, color-mix(in lab, currentColor 20%, transparent));
#endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#else
    background-color: -internal-auto-base(Canvas, color-mix(in lab, currentColor 20%, transparent));
#endif /* defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY */
}

select:-internal-uses-menulist:disabled {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    background-color: -internal-auto-base(-apple-system-opaque-secondary-fill-disabled, transparent);
    color: -internal-auto-base(-apple-system-tertiary-label, color-mix(in lab, currentColor 50%, transparent));
#else
    color: -internal-auto-base(GrayText, color-mix(in lab, currentColor 50%, transparent));
#endif
}

select:-internal-uses-menulist:not([popover]) {
    display: -internal-auto-base(inline-block, inline-flex);
}

select:not(:-internal-uses-menulist) {
    background-color: Canvas;
    border-style: inset;
    border-color: gray;
}

select:not(:-internal-uses-menulist):enabled {
    color: CanvasText;
}

select:not([multiple]):-internal-uses-menulist > button:first-child {
    all: unset;
    /* FIXME: add display: contents; once it works as expected */
}

select::picker-icon {
    /* FIXME: Switch to disclosure-open counter once it works */
    content: "\25BC" / "";
    display: block;
    margin-inline-start: auto;
}

:-internal-select-popover {
    box-sizing: border-box;
    border: -internal-auto-base(none, 1px solid);
    padding: 0;
    color: -internal-auto-base(inherit, CanvasText);
    background-color: -internal-auto-base(transparent, Canvas);
    margin: 0;
    inset: auto;
    min-inline-size: -internal-auto-base(unset, anchor-size(self-inline));
    min-block-size: 1lh;
    /* Go to the edge of the viewport, and add scrollbars if needed. */
    max-block-size: stretch;
    overflow: auto;
    /* Below and span-right, by default. */
    position-area: -internal-auto-base(unset, block-end span-inline-end);
    position-try-order: -internal-auto-base(unset, most-block-size);
    position-try-fallbacks: -internal-auto-base(unset,
        block-start span-inline-end,   /* First try above and span-right. */
        block-end span-inline-start,   /* Then below but span-left. */
        block-start span-inline-start); /* Then above and span-left. */

    display: -internal-auto-base(contents, none);
}

:-internal-select-popover:popover-open {
    display: block;
}

select:-internal-uses-menulist option {
    min-inline-size: 24px;
    min-block-size: max(24px, 1lh);
    padding-inline: 0.5em;
    padding-block-end: 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

select option {
    white-space: nowrap;
}

select option:enabled:hover {
    background-color: color-mix(in lab, currentColor 10%, transparent);
}

select option:enabled:active {
    background-color: color-mix(in lab, currentColor 20%, transparent);
}

select option:disabled {
    color: color-mix(in lab, currentColor 50%, transparent);
}

select optgroup {
    font-weight: bolder;
}

select optgroup option {
    font-weight: normal;
}

output {
    display: inline;
}

/* form validation message bubble */

::-webkit-validation-bubble {
    display: inline-block;
    z-index: 2147483647;
    position: absolute;
    opacity: 0.95;
    line-height: 0;
    margin: 0;
    -webkit-text-security: none;
    transition: opacity 05.5s ease;
}

::-webkit-validation-bubble-message {
    display: flex;
    position: relative;
    top: -4px;
    font: message-box;
    color: black;
    min-width: 50px;
    max-width: 200px;
    border: solid 2px #400;
    background: linear-gradient(#f8ecec, #e8cccc);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
        inset -2px -2px 1px #d0c4c4,
        inset 2px 2px 1px white;
    line-height: normal;
    white-space: normal;
    z-index: 2147483644;
}

::-webkit-validation-bubble-text-block {
    flex: 1;
}

::-webkit-validation-bubble-heading {
    font-weight: bold;
}

::-webkit-validation-bubble-arrow {
    display: inline-block;
    position: relative;
    left: 32px;
    width: 16px;
    height: 16px;
    background-color: #f8ecec;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #400;
    box-shadow: inset 2px 2px 1px white;
    transform-origin: 0 0;
    transform: rotate(45deg);
    z-index: 2147483645;
}

::-webkit-validation-bubble-arrow-clipper {
    display: block;
    overflow: hidden;
    height: 16px;
}

/* meter */

meter {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 5em;
    vertical-align: -0.2em;
}

/* progress */

progress {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 10em;
    vertical-align: -0.2em;
}

progress::-webkit-progress-inner-element {
    box-sizing: inherit;
    height: 100%;
    width: 100%;
}

progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

progress::-webkit-progress-value {
    background-color: green;
    block-size: 100%;
    inline-size: 50%; /* should be removed later */
    box-sizing: border-box;
}

/* inline elements */

u, ins {
    text-decoration: underline;
}

strong, b {
    font-weight: bolder;
}

i, cite, em, var, address, dfn {
    font-style: italic;
}

tt, code, kbd, samp {
    font-family: monospace;
}

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin-block: 1__qem;
    margin-inline: 0;
}

mark {
    background-color: Mark;
    color: MarkText;
}

big {
    font-size: larger;
}

small {
    font-size: smaller;
}

s, strike, del {
    text-decoration: line-through;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

nobr {
    white-space: nowrap;
}

/* states */

:focus-visible {
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    outline: auto 3px -webkit-focus-ring-color;
#else
    outline: auto 5px -webkit-focus-ring-color;
#endif
}

/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus-visible, body:focus-visible, input[readonly]:focus, embed:focus-visible, iframe:focus-visible, object:focus-visible {
    outline: none;
}

#if !defined(WTF_PLATFORM_IOS_FAMILY) || !WTF_PLATFORM_IOS_FAMILY
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline-offset: -2px;
}
#endif

input:is([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus-visible,
input[type="file"]:focus-visible::file-selector-button {
    outline-offset: 0;
}

a:any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

a:any-link:active {
    color: -webkit-activelink;
}

area:any-link {
    cursor: pointer;
}

/* HTML5 ruby elements */
/* Note that text-tracks.css contains a subset of this ruby styling for WebVTT elements. It should be kept in sync. */
ruby {
    display: ruby;
}

ruby, rt {
    text-indent: 0;
}

ruby > rt {
    display: ruby-text;
    font-size: -webkit-ruby-text;
    text-align: start;
    line-height: normal;
    text-emphasis: none;
}

ruby > rp {
    display: none;
}

/* Avoid wrapping children of implicit ruby bases. We don't support <rb> or <rbc>, avoid giving them any behaviors. */
ruby > :not(rb, rbc, ruby) {
    white-space: nowrap;
}

/* https://html.spec.whatwg.org/#the-details-and-summary-elements */

details, summary {
    display: block;
}

details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: disclosure-closed inside;
}

details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
}

/* other elements */

frameset, frame {
    display: block;
}

frameset {
    border-color: inherit;
}

iframe {
    border: 2px inset;
}

hr, bdi, output {
    unicode-bidi: isolate;
}

input[type=tel i]:dir(ltr) { direction: ltr; }

bdo, bdo[dir] {
    unicode-bidi: isolate-override;
}

slot {
    display: contents;
}

#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
embed, object, img {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:any-link img {
    -webkit-tap-highlight-color: inherit;
}
#endif

/* page */

@page {
    /* FIXME: Define the right default values for page properties. */
    size: auto;
    margin: auto;
    padding: 0px;
    border-width: 0px;
}

/* noscript support */

@media (scripting) {
    noscript {
        display: none !important;
    }
}

/* Default support for "Smart Invert" where all content color except media is inverted. */
/* https://drafts.csswg.org/mediaqueries-5/#inverted */
@media (inverted-colors) {
    img:not(picture>img), picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
}

/* https://drafts.csswg.org/css-text-decor-4/#text-decoration-skipping */
ins, del {
    text-decoration-skip: none;
}

/* https://drafts.csswg.org/css-text-decor-4/#default-stylesheet */
/* set language-appropriate default emphasis mark position */
:root:lang(zh), [lang|=zh] {
    text-emphasis-position: under right;
}
[lang|=ja], [lang|=ko] {
    text-emphasis-position: over right;
}

/* set language-appropriate default underline position */
:root:lang(ja), [lang|=ja],
:root:lang(mn), [lang|=mn],
:root:lang(ko), [lang|=ko] {
    text-underline-position: right;
}
:root:lang(zh), [lang|=zh] {
    text-underline-position: left;
}

:root::spelling-error {
    text-decoration-line: spelling-error;
}

:root::grammar-error {
    text-decoration-line: grammar-error;
}
Qu’est-ce que la POO ?

Les fonctions fléchées en Javascript

Différence entre Node.js et AngularJS

Différence entre == et === en JavaScript

Apprendre JSON

Bouton Javascript pour faire revenir à la page précédente

Comment détecter un appareil mobile avec JavaScript

Fermer l’onglet actuel dans une fenĂȘtre avec Javascript

Forcer la saisie en majuscule dans une input avec JavaScript

Afficher un message de confirmation avant suppression en JavaScript

Comment détecter la fermeture du navigateur en JavaScript

Comment rĂ©cupĂ©rer le hash Ă  la fin d’une URL avec JavaScript

Comment rĂ©cupĂ©rer le nom, taille et type d’un fichier en JavaScript

Exécuter javascript en ligne de commande

Afficher un message d’erreur Ă  cotĂ© d’un input en Javascript

Formulaire de contact avec HTML, CSS et Javascript

Écrivez votre premier script Hello, World! en JavaScript

Comment rĂ©cupĂ©rer les paramĂštres d’URL en JavaScript

Calculer le PGCD de deux nombres en Javascript

Comment calculer la racine carrĂ©e d’un nombre en Javascript

Convertir décimal en binaire, octal ou hexadécimal en Javascript

Anagramme en javascript

Comment fusionner des objets en javascript

Suite de Fibonacci en Javascript

Comment rafraĂźchir/actualiser une page en Javascript

Créer un tableau associatif en Javascript

Format monĂ©taire d’un nombre en Javascript

Comment désactiver le clic droit en JavaScript

Comment ouvrir un lien dans un nouvel onglet en Javascript

Comment parcourir un objet en Javascript

Comment inverser une chaĂźne de caractĂšres en Javascript

Chiffrement de césar en Javascript

Générer une ID unique en Javascript

MĂ©thodes setInterval() et setTimeout() en Javascript

Arrondir Ă  2 chiffres aprĂšs la virgule en Javascript

Supprimer un Ă©lĂ©ment d’un tableau en Javascript

Tri par Fusion en Javascript

Tri par sélection en Javascript

Tri par insertion en Javascript

Tri Ă  bulle en Javascript

MĂ©langer un tableau en Javascript

Comment vĂ©rifier si l’objet est un tableau(array) en Javascript

Convertir int en string en Javascript

Récupéré tout les éléments unique dans un tableau en Javascript

Comment copier un tableau en Javascript

Comment générer un nombre aléatoire en Javascript

Framework Javascript les plus utilisés

Liste des fonctions Javascript

Afficher une variable Javascript dans une page HTML

Afficher une DIV pendant X secondes en Javascript

Afficher/Masquer plusieurs DIV en Javascript

Comment changer le contenu d’un DIV en JavaScript

RĂ©cupĂ©rer le texte d’une balise HTML en Javascript

Afficher du texte dans une div avec Javascript

Calculer l’age à partir d’une date de naissance en Javascript

Comment comparer deux dates en Javascript

Calculer la différence entre deux dates en Javascript

Imprimer un fichier PDF en Javascript

Validation du mot de passe en Javascript

VĂ©rifier si un champ est un nombre en Javascript

VĂ©rifier si un champ est vide en JavaScript

VĂ©rifier la validitĂ© d’un email avec Javascript

Supprimer le dernier caractùre d’une chaüne en Javascript

RĂ©cupĂ©rer le dernier caractĂšre d’une chaĂźne en Javascript

Redirection automatique en JavaScript

Horloge digital en Javascript

Comment afficher la date et l’heure actuelles en Javascript

Somme de deux nombres en Javascript

Calculer la factorielle d’un nombre en Javascript

Fonction pour vérifier si un nombre est premier en Javascript

Inverser les chiffres d’un nombre en Javascript

VĂ©rifier l’ñge d’une personne en Javascript

Convertir une chaĂźne de caractĂšre en minuscule en Javascript

Convertir une chaĂźne de caractĂšre en majuscule en Javascript

VĂ©rifier si un nombre est un palindrome en JavaScript

Nombre pair ou impair en Javascript

Nombre d’Armstrong en Javascript

Différence entre PHP et Javascript

Comment passer une variable de JavaScript Ă  PHP

Comment réinitialiser un formulaire avec JavaScript

Comment dĂ©tecter l’évĂ©nement de redimensionnement d’une fenĂȘtre en JavaScript

Appeler deux fonction sur le mĂȘme Ă©vĂ©nement onClick en JavaScript

Ajuster la hauteur d’iFrame en fonction de son contenu en JavaScript

Comment rĂ©cupĂ©rer la valeur d’un input texte en Javascript

Comment ajouter un Ă©lĂ©ment au dĂ©but d’un tableau en JavaScript

Comment convertir un objet JavaScript en JSON

Comment générer un timestamp en JavaScript

Comment ajouter des valeurs Ă  un tableau en JavaScript

Comment parser JSON en JavaScript

Comment dĂ©tecter la rĂ©solution de l’écran en JavaScript

Comment inclure un fichier JavaScript dans un autre fichier JavaScript

Comment rĂ©cupĂ©rer l’url de la page courante avec JavaScript

Comment retourner plusieurs valeurs avec une fonction en JavaScript

Comment trier un tableau de nombres avec Javascript

Comment vérifier si une chaßne est vide en JavaScript

Convertir une liste de mots séparés par virgule en un tableau en JavaScript

Comment changer la classe d’un Ă©lĂ©ment HTML avec JavaScript

Différence entre encodeURIComponent() et encodeURI() en JavaScript

Comment décoder une URL en JavaScript

Comment encoder une URL en JavaScript

Comment créer des chaßnes multilignes en JavaScript

Comment changer la couleur du background avec JavaScript

Comment vérifier si une variable existe ou définie en JavaScript

Comment vérifier si une variable est undefined ou null en JavaScript

Comment détecter un clic dans iframe en JavaScript

DĂ©clencher/arrĂȘter une animation CSS via Javascript

Comment agrandir ou diminuer une image en JavaScript

Comment modifier la taille d’une image en JavaScript

Comment rĂ©cupĂ©rer la taille de l’image actuelle avec Javascript

Comment concaténer deux tableaux de chaßnes de caractÚres en JavaScript

Comment définir une fonction en JavaScript ?

Commentaires en JavaScript

Supprimer un Ă©lĂ©ment d’un tableau en JavaScript

Comment supprimer les doublons d’un tableau – JavaScript

Comment vérifier si une valeur existe dans un tableau en JavaScript

Comment parcourir un tableau en JavaScript

DĂ©couper une chaĂźne de caractĂšres en JavaScript

Les principales nouveautés de JavaScript ES6

Comment vérifier si une chaßne contient une sous-chaßne en JavaScript

Comment remplacer un caractĂšre dans une chaĂźne de caractĂšres en JavaScript

Comment remplacer plusieurs espaces par un seul espace en JavaScript

Comment remplacer toutes les occurrences d’une chaüne de caractùres en JavaScript?

Fonctions Callback en JavaScript

Itérateurs en JavaScript

Programmation fonctionnelle en javascript – map, filter et reduce

Qu’est-ce que la programmation rĂ©active en Javascript ?

Qu’est-ce qu’une fermeture en JavaScript ?

Fonctions pures en JavaScript

Comment créer un tableau 2D en JavaScript ?

Inverser un tableau en JavaScript

Comment trier un tableau en JavaScript

10 Bonnes pratiques de codage en Javascript

Frameworks de tests unitaires en javascript

HĂ©ritage en JavaScript

Programmation orientée objet en JavaScript

Comment utiliser DOM et les événements en JavaScript

10 méthodes de gestion des tableaux dans JavaScript à connaßtre

Les tableaux – JavaScript

Les variables – JavaScript

Boütes de dialogue alert(), confirm() et prompt() – JavaScript

Balise script – JavaScript

Différence entre Undefined et Null en Javascript

Différence entre JSON et XML

Différence entre Websockets et Ajax

Différence entre JavaScript et VBScript

Différence entre AJAX et JSON

Différence entre JQuery et JQuery UI

Différence entre Bootstrap et Angular

Différence entre let et var en JavaScript

Différence entre JavaScript et TypeScript

Différence entre JavaScript et jQuery

Différence entre AngularJS, Angular 2, Angular 4 et Angular 5

Différence entre Angular, React, Ember, Backbone et Node.js

Différence entre Angular et React

Différence entre React.js et React Native

Différence entre HTML, CSS et JavaScript

Différence entre Javascript et Python

Différence entre java et javascript

Comment fonctionne Javascript et comment créer une calculatrice simple avec 
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<style>

	div	{position:absolute;}
	#id	{left:0;}
	.class	{background-color:white;}

</style>

<script>

	function initPage()	{
		// passe ici aprĂšs le chargement de la page
	}

	function resizeWindow()	{
		// passe ici aprĂšs redimensionnement de la fenĂȘtre
	
		w=window.innerWidth,h=window.innerHeight;
	}

	function ClicSurMoi()	{
		// passe ici aprĂšs clic souris
		
		alert("Pourquoi t'as fait cela ?");
	}

</script>

<body onload="initPage()" onresize="resizeWindow()">

<div id="exemple" onclick="ClicSurMoi();">Je suis dans un <div> et j'attends qu'on clique sur moi
<div>

</body>
</html>

Version 1 :

	function resizeWindow()	{
		var w=window.innerWidth;var h=window.innerHeight;
		SetStyle("H",[["ID1",h-25],["ID2",h-25]]);
		SetStyle("T",[["ID1",h-70]]);
		function SetStyle(e,t){for(var l=0;l<t.length;l++){var el=document.getElementById(t[l][0]).style,v=t[l][1]+"px";switch(e){case"T":el.top=v;break;case"L":el.left=v;break;case"W":el.width=v;break;case"H":el.height=v;break;}}}
	}

Version 2 :

	!function(){var t={SetStyle:function(t,n){for(var e=0;e<n.length;e++){var i=document.getElementById(n[e][0]).style,o=n[e][1]+"px";switch(t){case"T":i.top=o;break;case"L":i.left=o;break;case"W":i.width=o;break;case"H":i.height=o}}},ObjetFind:function(){var t,n=this,e="inputFind",i="Recherche",o=cherche,u=200,c=12,d=-45,s=-1,l=!1;function h(t){var n=document.createElement(t);return document.body.appendChild(n),n}function r(t){document.getElementById(t).style.position="fixed",document.getElementById(t).style.zIndex=100}function f(t){m().style.top=loupe.style.top=t+"px",c=t}function p(t){m().style.width=t+"px",u=t}function a(t){m().placeholder=t,i=t}function y(){var n,e,i;n=window.innerWidth,1==l?(e="inline",i=n+d-u):(e="none",i=n+d),i!=s&&(s=i,loupe.style.left=i+"px",(t=m()).style.display=e,"none"!=e&&(t.style.left=i+25+"px",t.focus()))}function m(){return document.getElementById(e)}(t=h("div")).id="loupe",t.innerHTML="🔍",r(t.id),t.onclick=this.showHide=function(){l=!l,n.drawFind()},(t=h("input")).type="search",t.id=e,t.oninput=o,r(t.id),f(c),p(u),a(i),y(),this.setIDfind=function(t){m().id=t,e=t},this.setHolder=function(t){a(t)},this.onInput=function(t){m().oninput=t,o=t},this.setWidth=function(t){p(t)},this.setTop=function(t){f(t)},this.setLeft=function(t){d=t},this.getIDElem=function(){var t=[];return t.push("loupe"),t.push(e),t},this.getInFind=function(){return m().value},this.drawFind=function(){y()}}};window.$=t}();
	
	function resizeWindow()	{
		w=window.innerWidth,h=window.innerHeight;
		$.SetStyle("W",[["ID1",w-20],["ID2",w-20]]);
		$.SetStyle("H",[["ID1",h-90],["I2",h-90]]);
	}

	setTimeout(fctTime,0);
	function fctTime()	{;}


/*********************************************************
*					INIT EVENTS
**********************************************************/

	function initEvents()	{
		window.addEventListener("touchstart", myFunctionMouse);function myFunctionMouse() {ajouteTime();}
		window.addEventListener("keydown", myFunction);
		function myFunction(event) {
			if (event.defaultPrevented) {return;}			// Ne devrait rien faire si l'événement de la touche était déjà consommé.
			// alert(event.key);
			switch (event.key) {
				case "PageUp":		fPageUp();	break;	// Faire quelque chose pour la touche "up page" pressée.
				case "PageDown":	fPageDown();	break;	// Faire quelque chose pour la touche "down page" pressée.
				case "ArrowUp":				break;	// Faire quelque chose pour la touche "up arrow" pressée.
				case "ArrowDown":			break;	// Faire quelque chose pour la touche "flÚche vers le bas" pressée.
				case "ArrowLeft":	fgoBegin();	break;	// Faire quelque chose pour la touche "left arrow" pressée.
				case "ArrowRight":			break;	// Faire quelque chose pour la touche "right arrow" pressée.
				case "Enter":		fEnter();	break;	// Faire quelque chose pour les touches "enter" ou "return" pressées.
				case "Escape":		fEscape();	break;	// Faire quelque chose pour la touche "esc" pressée.
				case " ":		fSpace();	break;	// Espace - te.innerHTML='" "';return;
				case "+":				break;	// + te.innerHTML='" "';return;
				case "-":				break;	// + te.innerHTML='" "';return;
				default:		return;			// Quitter lorsque cela ne gÚre pas l'événement touche.
			}
			event.preventDefault();					// Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
		}
		function fPageUp()		{}
		function fPageDown()	{}
		function fArrowDown()	{}
		function fArrowUp()		{}
		function fArrowLeft()	{}
		function fArrowRight()	{}
		function fEnter()		{}
		function fEscape()		{}
		function fSpace()		{}
		function fEnter()		{}
		function fgoBegin()		{}
	}