Syntaxe HTML et Métadonnées SEO
Traduit par
ScribdTranslationsSyntaxe HTML et Métadonnées SEO
Traduit par
ScribdTranslationsCréépar@Manz([Link]
dev/)
S Syntaxe HTML Structure de balise
HTML C Syntaxe de commentaire Annotations de développement
LENGUAJE DE MARCADO
[Link]
#JOURDELAPROGRAMMATION
S Météadonnées sociales pour les réseaux sociaux
SYNTAXE DES BALISES/ATTRIBUTS HTML SYNTAXE DES COMMENTAIRES HTML GRAPHIQUE OUVERT FACEBOOK
<tag attribut="valeur"> contenu </tag> <!-- text without effects on webpage --> <meta> balisedemétadonnéespourlegraphiqueouvert
propriété type de métadonnées open graph
D Balises de document structure principale HTML H Balises de tête En-tête & métadonnées du document contenu valeur des métadonnées open graph
ÉTIQUETTES PRINCIPALES RELATIONS PROPRIÉTÉS MÉTADATA REQUISES
<!DOCTYPE html> Document HTML5 <lien> document relation og:title title of your object
<html> balise racine du contenu du document href lien vers le document lié og:type type de votre objet
<tête> métadonnées en-tête docs connexes hreflang code doc langueen, es... music video article book
<corps> contenu de la page contenu visible type mime type d'indice pour le navigateur site de profil
title définir le titre sur la feuille de style og:image URL de l'image pour l'aperçu
G Attributs globaux pour tous les éléments sizes hintsizeforfavicon64x64,96x96 og:url canonical & absolute url
DOM / ATTRIBUTS DE STYLE rel type de relation avec un autre document PROPRIÉTÉS MÉTADONNÉES OPTIONNELLES
id identifiant d'élément unique par page RELATION DE BASE
og:audio url audio complémentaire
classe élément classe multiple par page alternatif lien vers une version alternative og:description Description de 1 à 2 phrases.
élément slotreference à
créneau <slot> auteur lien vers l'URL de l'auteur déterminant wordauto, the, a, an, ...
style inline CSS stylescss properties aide lien vers l'URL d'aide og:locale languagedefault: en_US
ATTRIBUTS GLOBAUX icône lien vers l'URL du favicon (icône de l'onglet) og:locale:alternative autres langarray
clé d'accès touche de raccourci pour se concentrer licence module de récupération og:site_name nom du site général
contenteditable autoriser l'édition de l'élément pingback lien vers le serveur de pingback og:vidéo URL de la vidéo complémentaire
dir ltr rtl auto direction du texte chercher lien vers l'URL de la page de recherche
TWITTER CARDS
auto déplaçable activer le glisser-déposer feuille de styleimporte une feuille de style CSS
<meta> balise méta pour les cartes Twitter
caché cacher l'élément non pertinent STRUCTURE D'URL RELATION
name métadonnées type cartes twitter
est un élément personnaliséélément intégré sur mesure canonique lien vers l'URL préférée contenu metadata valuetwitter cards
code de langue set content langen, es, fr... URL de la partie précédente de la série doc
précédent PROPRIÉTÉS DE MÉTADONNÉES DE BASE
hash nonce script/style sur liste blanche [CSP] suivantprochaine partie URL de la série doc
désactiver la vérification grammaticale twitter:title titre de votre objet
vérification orthographique INDICES DE RESSOURCES
twitter:card type de votre objet
numéro tabindex définir l'ordre des éléments
dns-prefetch résoudre le domaine dns résumé résumé_large_image
title set tooltip textmouse hover
préconnecter pré-connexion au domaine lecteur d'application
translate yes no désactiver la traduction
précharger lien de récupération/mise en cache pour le futur PROPRIÉTÉS MÉTADONNÉES OPTIONNELLES
data-* métadonnées personnalisées sur l'élément lien de récupération/cache pour l'instant
préchargement twitter:site nom du site de compte
INDICATION AU NAVIGATEUR
module de récupération
préchargement de module twitter:creator nom de compte@manz
enterkeyhint enter done go search pré-rendu page de rendu d'arrière-plan
next previous send virtual keyb label
twitter:description description
comme
script font image audio video fetch twitter:image URL d'image absolue
mode d'entréeaucun texte documenter intégrer objet style suivre PROPRIÉTÉS DES MÉTADONNÉES DE L'APPLICATION
recherche numérique décimale
travailleur twitter:app:country code pays
ATTRIBUTS MICRODONNÉES
MÉTADONNÉES DU DOCUMENT
twitter:app:name: **** nom de l'application
itemid définir l'identifiant urnunique globalfière
nouvel élément de métadonnées <meta> métadonnées du document twitter:app:id: **** identifiant de l'application
itemscope
encodageutf-8,iso-8859-1...
jeu de caractères enc twitter:app:url: **** url de l'application store
type d'articledéfinir l'url du genre de microdonnées
name name of metadata iphone ipad googleplay id pour ****
itemref id liste référence à "id"
propriété et valeur de l'élément de jeu des jetons application-name nom de l'application web courte PLAYER METADATA PROPERTIES
auteur nom de l'auteur de la page twitter:player urlhttpsverslelecteuriframe
description description de la page seo
S Style en ligne CSS en ligne RECOMMANDATIONS SEO GOOGLE
générateur logiciel utilisé pour construire des sites web
STYLES EN LIGNE <title> premier - deuxième | marque 50-60 caractères
mots-clés tags séparés par des virgules
<style> embed du style css dans un document <meta> métadonnées soutenues par Google
parrain politique de référent par défaut
title définir le titre sur la feuille de style name metadata name
theme-color couleur thème principal css
type mime type d'indice pour le navigateur description text snippet50-160 chars
indice pour la taille initiale de la fenêtre d'affichage
zone d'affichage
SEULEMENT POUR<LIEN>, IMAGE<SOURCE>&<STYLE> robots googlebot setbotsbehaviour
http-equiv directive pragma (héritée) tout noindex nofollow aucun
média apply to specific devices type de contenu héritage alt. au charset
tous les appareils, ordinateurs, mobiles... noarchive nosnippet noodp
style par défaut feuille de style par défaut définie
dispositifs imprimables notranslate noimageindex
imprimer rafraîchir htmlredirection10;URL=fi[Link] unavailable_after: date
écran all devices - (print + speech) x-ua-compatible meilleurecompatIE=edge google désactiverlesfonctionnalitésdegoogle
discours dispositifs qui lisent une page politique de sécurité du contenu appliquer CSP notranslate nositelinkssearchbox
LÉGENDE DE LA FICHE DE TRICHE
contenu valeur des métadonnées évaluation adulte exclurelarecherchesécurisée
<title> titre du document seo
balise html balise html sans balise de fermeture obsolète page mobile optimisée
zone d'affichage
<base> définir une URL de base de document content="width=device-width,initial-scale=1.0"
attribut attribut sans valeur
href lienverslU
' RLdebaseàutiliser
value default value values set
valeur pour la valeur du contenu partie contexte cible endroit pour ouvrir le lien
[Link]
Créépar@Manz([Link]
F FormesTags liés aux formulaires
HTML S Sélectionnez des balises de données Combo interactif
LENGUAJE DE MARCADO
[Link]
#JOURDELAPROGRAMMATION
Je Étiquettes interactives Autres éléments
ÉLÉMENTS PRINCIPAUX SELECTIONNER DES ÉLÉMENTS AUTRES ÉLÉMENTS DE FORMULAIRE
<form> collection d'éléments de formulaire <sélectionner> collection d'éléments de formulaire résultat du calcul
name formulaire [Link] api name formulaire nommé [Link] api nameelement [Link] api
méthode GET POST dialogue méthode d'envoi associerl'entréeavecunformulaire
formulaire forme associerl'entréeavecunformulaire
action url pour la soumission du formulaire backend size tailledel'élémentencaractères pour associer le résultat à un autre élément
accept-charset enc forceencodageutf-8 autocomplétion on off remplissage automatique pour entrée <progress>afficher une barre de progression
complétion automatique on off remplissage automatique pour misetous mettre
les formulaires
au point l'
a
automatiqueccent sur l'
e ntrée lors du chargement value valeuractuelledelabarredeprogression
novalidate contourner la validation du formulaire handicapé évitezd'
a ppuyer surlebouton max valeurmaximale delaprogressiondelabarre
contexte cible endroit pour mettre la réponse required requiredfielddefault: optional <mètre>afficher un mètre de plage connu
enctype application/x-www-form-urlencoded multiple permettre de sélectionner plusieurs valeurs value valeuractuelledumètre
multipart/form-data texte/plain typed'encodage <datalist> liste de données prédéfinies et ouvertes bas limitedeplagebasse
<label> associer l'élément avec la légende SÉLECTIONNER LES ÉLÉMENTS ENFANTS haut limite de haute gamme
pour référence à d'élément id connexe <option> élémentde <select> ou <datalist> min borneinférieuredel'intervalle
FORMES DE GROUPE textevisibleparl'utilisateuraulieudecontenu
étiquette max bornesupérieuredel'intervalle
optimal valeuroptimaledanslemanomètre
<fieldset> groupe d'éléments de formulaire value valeurdel'élémentpourlasoumissionduformulaire
name nomdel'élé[Link] sélectionné optionssélectionnéespardéfaut AUTRES ÉLÉMENTS INTERACTIFS
associerunchampàunformulaire
formulaire handicapé éviterdesélectionnercetteoptiond'article <details>widget de divulgation html accordéon
disabled éviterdesélectionnerlesarticlesdecegroupe <optgroup> groupede <option> ouvert laisserl'accordéonouvert
<légende> captiontextforfieldset textedegroupevisibleparl'utilisateur
étiquette <summary> légendeoutitrepour <détails>
handicapé évitezdesélectionnercesarticles <dialog> boîtedefenêtreboîtededialogue
Je Input elements User input types
ouvrir maintenirledialogueouvert
DONNÉES D'ENTRÉE UTILISATEUR
B Bouton générique HTML
<input> <textarea> texte spécifique et large HTML GÉNÉRIQUE<BOUTON> V {"Validations":"Validations","HTML validations":"validations HTML"}
name element [Link] api USER INPUT DATA
<bouton> conteneurdeboutongénérique
auto-complétion marche arrêtremplissage automatique pour l'entrée VALIDATIONS DE TEXTE <INPUT>&<TEXTAREA>
name élément [Link] api
mise au point focus sur l'entrée lors du chargement
automatique minlength maxlength min/max length
type soumettre réinitialiser le bouton typedebouton
soumettreladirectionnalitédel'élément
nom_du_répertoire VALIDATIONS GÉNÉRALES <ENTREE>&<ZONE_DE_TEXTE>
valeur valeurduboutonpourl'envoiduformulaire
associeruneentréeavecunformulaire
formulaire nécessaire requiredfielddefault: optional
forme associeruneentréeavecunformulaire
espace réservé indicevisuelutilisateur mise au point mettre leboutonaupointlorsduchargement
automatique handicapé éviterchampsàmodifiernepasenvoyer
SEUL <INPUT> ÉLÉMENT handicapé éviterd'appuyersurlebouton lecture seuleavoid editfieldsend
<input> entrée de texte spécifique texte court VALIDATIONS DE NUMÉRO SEULEMENT<INPUT>
type texte caché recherche tel url email D Deprecated tags Obsolete elements min max valeurminimale/maximale
number range colorfile password
TAG DÉPRÉCIÉ TAG RECOMMANDÉ
étape étapedegranularitéentrelesvaleurs
datetime-local date time week month VALIDATIONS PUISSANTES SEULEMENT<ENTRÉE>
case à cocher bouton radio soumettre image réinitialiser bouton
<applet> widgetsjava <intégrer> <objet>
motif REGEXP modèlepourlavalidationdestests
<acronyme> abréviation <abbr>
valeur valeuractuelledel'élémentd'entrée
<basefont> policeprincipaleutilisezCSSàlaplace
size tailledel'élémentencaractères A ARIA Attributes Accesible elements
<grand>texteplusgrandutilisezCSSfont-size
liste associer à id de <liste de données>
<bgsound> sondefond <audio> APPLICATIONS INTERNET RICHES ACCESSIBLES
accepter indicepourlefichierattendulorsdutéléchargement rôle spécifiezlerôleaccessiblepourl'élément
activerdansradiooucaseàcocher <blink> utilisez l'animation CSS de clignotement
vérifié complementary list listitem main navigation
<center> centrerletexteutilisezCSStext-align
multiple autoriser plusieurs valeurs bannière d'article d'application d'alerte d'onglet région
<dir> listederépertoireutilisezdeslistesàlaplace <ul>
SEULE IMAGE<INPUT>ÉLÉMENT {"button":"bouton","cell":"cellule","checkbox":"case à cocher","contentinfo":"informations de contenu","dialog":"dialogue"}
<font> utilisezCSSàlaplacepourdéfinirlescaractéristiquesdelapolice
src url ou nom du bouton d'image <cadre> <ensemble de cadres> cadres document alimentationfigure forme grille cellulegrille
<iframe>
alternatif alternative text to image <marquee> déplacerletexteutiliserl'animationCSS heading img listbox row rowgroup search
width height tailledelargeur/hauteurd'image switch table tabpanel textbox timer
<multicol> disposition de colonnes CSS
SEULEMENT<ZONE_DE_TEXTE>ÉLÉMENT
<noframes> cadresfallbacknonprisencharge aria-checked vrai faux mélangé
<textarea> entréedetextemultilignetextevolumineux <isindex> chercher sur la page <input> aria-sélectionné définirl'étatactuel
rows cols nombredelignesetdecolonnes <keygen> keypair genuse webcryptoAPI LABELS
envelopper envelopper le texte
<annonce> texte préformaté <pre> <code> aria-label spécifiezunechaînecommeétiquette
MODIFIER LA SOUMISSION DU FORMULAIRE SOUMETTRE UNIQUEMENT <INPUT> & <BUTTON> <menuitem>
contexte menuno soutenu aria-labelledby spécifiez identifiant entantqué' lémentdé' tiquete
formaction formtarget formnovalidate <nextid> auto id generatedno supported RELATIONS
formenctype formmethod <nobr> pasderupture,utilisezplutôtCSS aria-possède ensemble id élémententantqu'enfant
atributspourmodifierlasoumissionduformulaireprincipal <noembed> pasd'incorporationdesecours <objet> aria-descendantactif ensemble
id commeactif
<plaintext> fragment de texte brut <pre> aria-describedby ensemble id comme description
R Balises Ruby Balises de balisage Ruby <rb> <rtc> base ruby & conteneur <ruby> aria-posinset spécifierlapositiondansl'ensemble
ÉLÉMENTS RUBIS
<espace> utilisez plutôt CSS aria-setsize spécifiezlatailledel'ensemble
<ruby> [Link]èresd'aspectasiatique <strike> texte barré <s> <del>
<rp> ruby fallback parenthesiswrapper
<rt> prononciationdutexteruby,traduction...
<tt> textedetélétypeutilisezCSSàlaplace
<xmp> code blockuse < <pre> <code> [Link]
G
Créépar@Manz([Link]
Éléments de bloc des groupes d'étiquettes
HTML T Étiquettes de texte Éléments en ligne
LENGUAJE DE MARCADO
[Link]
#JOURDELAPROGRAMMATION
Je Étiquettes d'image contenu de l'image
ÉTIQUETTES GÉNÉRALES DE GROUPE ÉTIQUETTES SÉMANTIQUE DE TEXTE IMAGES
<div> division générique ou couche bloc <em> texte emphatisé remplacement pour <i> JPG PNG SVG WEBP JPGXR JPG2000 GIF APNG
<p> paragraphe de texte <strong> texte important à remplacer pour <b> <img> imagesimple ou fallback hérité
<hr> pause thématique <mark> mettre en évidence le remplacement de texte <u>pour src lien vers l'URLde l'image requise
<pre> texte préformaté <i> tag d'héritage de voix/humeur alternée texte alternatif si aucune image requise
alternative
<main> contenus dominants <b> spansansobjectifssupplémentairesétiquettehéritée width height taillehorizontaleetverticale
<blockquote> section avec citation <u> données non textuelles spanlegacy tag chargement définirlastratégiedechargementparesseux
citer link to url with quotation source <sub> <sup> indice et exposant auto lenavigateurdécide
LISTES & TERMES <petit> remarques en marge petits caractères candidatpourlechargementparesseux
paresseux
<ul> <ol> </ol>unorderer
</ul> & orderer list <var> variable mathématique ou de programmation avide chargeztoutdesuite
première valeur de la liste
commencer <samp> exemple de système informatique nomdelacarted'imageàutiliser
carte d'utilisation
inversé liste à l'envers <kbd> raccourci clavier ismap l'
i magefaitpartiedelacartecôtéserveur
type 1 a A i I genre de marqueur <dfn> définir l'instance d'un terme décodage sync async auto indicepourdécoder
<li> élément de <ul> ou <ol> liste title terme complet optionnel <carte> carteimageutiliséeavec <a> & <zone>
value valeur ordinale de l'article <abbr> abréviation ou acronyme nom carte d'image utilisée dans carte d'utilisation
<dl> conteneurdelistededescription title expansion de l'abréviation optionnelle IMAGES DE NOUVELLE GÉNÉRATION
<dt> <dd> descriptiontermname&value <cite> title of a workbook,film, chanson... <picture> conteneur d'images multiples
FIGURE & LEGENDES
<q> groupe cité d'une autre source <source> nouvelle source d'image alternative
citer lien vers l'URL de source optionnelle src lienversl'URLdel'imagemodesimple
<figure> figure ou concept
<br> saut de ligne entrée visuelle taper Type MIME optionnel
<figcaption> légende pour la figure
<wbr> opportunité de rupture de ligne mots longs média requêtemédiademédiaderessource
ÉTIQUETTES SÉMANTIQUES
<s> plusprécis/relevantbarrerletexte
IMAGE <SOURCE>&<ATTRIBUTS D'IMAGE>
<article> entité contenu publication, commentaire... <data> associer des données machine au texte
<section> groupe thématique de contenu srcset listedim
' agescandidatsséparéspardesvirgules
valeur valeur lisible par machine
<nav> section avec des liens de navigation largeur a1.jpg300w,a2.jpg600w,...
<temps> associer machine-date à date
<aside> secondarycontentsidebar,menu [Link] 1x, [Link] 2x, ...
dateheure date-heure lisible par machine
<h1> <h2> ... <h6> sectiond'en-tête sizes largeur finale rendue liste 640w
<code> fragment de code informatique
<en-tête> groupe d'en-tête introductif
M Étiquettes multimédias
section pied de page groupe
<footer> </footer> H HyperliensLien vers une autre ressource
ÉLÉMENTS DE CONTENEUR VIDÉO OU AUDIO
<adresse> informations de contact groupe LIENS HYPERTEXTES & CARTE DE LA ZONE
MP4 WEBM HEVC AV1 OGV ←VIDÉO
<a> <area> hyperlien/zonedecarteimage
MP3 AAC OGG OPUS FLAC WAV ←AUDIO
T Tables tags Tabular data href lien vers l'url ou nom de fichier
ÉLÉMENTS DE TABLE hreflang code doc langueen, es... <video> <audio> conteneurmultimédia
télécharger télécharger nom vide valide src lien vers l'URL de la source audio vidéo
<table> conteneur de table
rel auteur alternatif marque-page licence externe préchargerindicessurlaquantiédemiseenmémoiretamponnécessaire
<caption> title of tableoptional
prev next search tag opener help noopener auto lenavigateurdécide
<thead> l'en-têtedutableauinclutdesen-têtes
récupéreruniquementlesmétadonnées
métadonnées
<tbody> corpsdetableinclutdesdonnéesdecorps noreferrer nofollow sponsorisé ugc
contexte cible lieu pour ouvrir le lien aucun économiserdelabandepassanteetpasdetéléchargement
<tfoot> pied de table comprend le résumé
lectureautomatiqueuniquementsil'utilisateurinteragit
lecture automatique
COLONNES
ping liste d'urls séparées par des espaces à pinger
mode de politique de référencecomportement de référent boucle redémarrerunefoisterminé
<col> <colgroup> colonneetgroupedecolonnes
ATTRIBUTS UNIQUEMENT POUR L'ÉLÉMENT <AREA> muet silencedesmédiaspardéfaut
span nombre de colonnes à couvrir
forme rectangle cercle poly contrôles showplay,pause...controls
ARTICLES
liste des coordonnées pour la forme
coordonnées UNIQUEMENT POUR<VIDEO>ÉLÉMENT
<tr> conteneurdelignedetablehorizontale
alt texte de remplacement lorsqu'il n'y a pas d'images affiche imagedecouvertureavantlalecture
<th> <td> table header & table cell data
width height taillehorizontaleetverticale
colspan nombre de colonnes à couvrir
E Modifier les balises Modifier les éléments lecturesinline navigateuressayezdelirelavidéoenmodeintégré
rowspan nombredelignesàfusionner
ÉTIQUETTES SÉMANTIQUES DE TEXTE ÉLÉMENT AUDIO OU VIDÉO ENFANTS
headers unouplusieurs de id <th> éléments
UNIQUEMENT POUR<TH>ÉLÉMENT ajoutousuppressiondedoc <source> nouvelle source de médias alternatifs
portée auto row col rowgroup colgroup citer lien vers la source optionnelle src lienverslasourcemédia
abrév. description abrégée courte date et heuredate/heuredechangementoptionnelle type type MIME video/mp4; codecs='...'
<track> sous-titres ou pistes externes
T Destination cible S Sécurité et confidentialité Modifier les éléments src lienverslaressourcedesous-titresURL
MOTS CLÉS & DESTINATION CIBLE POLITIQUES <IMG>, <VIDEO>, <AUDIO>, <LINK> ou <SCRIPT> langue srclang du texte d'affichage
cible destination du navigateur crossorigin SupportCORS étiquettenomvisibleparlu' tilisateurdelapistedetexte
_selfcurrent placesame page utilisation anonyme des identifiants gentil subtitles captions descriptions
_blank new placenew tab page définir comment fonctionne le référent
politique de référent méta-données des chapitres
_parent parent placeelse _self pas de référence pas de référence-lors de la rétrogradation défaut définirlapistepardéfautactivée
_haut racine parent endroit ailleurs _même same-origin origin strict-origin unsafe-url
name iframe de lieu personnalisé ou autre origine-lorsque-origine-croisée stricte-origine-lorsque-origine-croisée
[Link]
Créépar@Manz([Link]
E Balises intégrées Contenu externe
HTML S SVG tags Scalar Vectorial Graphics
LENGUAJE DE MARCADO
[Link]
#JOURDELAPROGRAMMATION
S Éléments de balisage Javascript
CONTENU EXTERNE (IFRAME) ÉTIQUETTES PRINCIPALES ÉLÉMENTS DE SCRIPTING
<iframe> contenu intégré <svg> conteneur svg autonome svg <script> inclure un script dynamique
src lienverslaressourcedusiteweb,fichier, ... viewBox minx miny width height src [Link]
srcdoc contenududocumentsyntaxehtml width height tailledelafenêtred'affichage associer le champ avec un formulaire
name nomducontextepour cible attribut option d'alignement preserveAspectRatio texte/javascript [Link]
chargement auto lazy eager chargementparesseuxiframe aligner aucun x***Y*** Min Midi Max application/json BlocdedonnéesJSONfile .json
autoriserpleinécranpermettrelemodepleinécranpouriframe option rencontrer
tranche module [Link]
permettreDemandeDePaiement autoriserlespaiements <g> groupe de conteneurs associé nomodule replipourlesanciensnavigateurs
width height tailleshorizontalesetverticales MÉTADONNÉES SVG différer l'exécution du script
<IFRAME>ATTRIBUTS DE SÉCURITÉ, DE CONFIDENTIALITÉ ET DE POLITIQUE script d'exécution asynchrone lorsque disponible
<title> titre alternatif de texte court
bac à sableallow-forms allow-modals
<desc> informations textuelles détaillées SÉCURITÉ ET CONFIDENTIALITÉ
allow-orientation-lock allow-pointer-lock
<metadata> éléments de métadonnées. conteneur mode de politique de référencecomportement de référence
permettre-popups-de-s'échapper-sandbox permettre-scripts
CONTENU À RÉUTILISER crossorigin mode CORS support
autoriser-même-origine autoriser-présentation vérifier li'ntégrité du hachage de li'ntégrité du fichier source
autoriser-la-navigationsuperieure-par-lactivation-utilisateur
<defs> conteneur d'éléments référencés
allow-top-navigation allow-popups
<symbole> définirlaréutilisationdumodèlenepasrendre MODES DE TÉLÉCHARGEMENT ET D'ANALYSE DE SCRIPT
ANALYSE HTML RAPPELEREXÉCUTER
activer la fonctionnalitéautoriserl'accèsàlafonctionnalité faireréférenceàunautreélément
<utiliser>
SCRIPTS
ambient-light-sensor autoplay accelerometer
href un lien URLà cloner pour le rendu NORMAL
caméra affichage-capture document-domaine
<commutateur> référencer un autre élément
média chiffré plein écran géolocalisation
<***> enfant direct de <commutateur>
DIFFER
gyroscope magnétomètre microphone midi
systemLanguage code
paiement image dans l'image synchronisation du haut-parleur-xhr FORMES DE BASE
ASYNC
verrouillage USB réveil webauthn vr <rect> définir un rectangle
politique de référent mode comportement de référent x y position horizontale et verticale MODULES
TAGS EMBED/OBJECT ANCIENS width height tailleshorizontalesetverticales NORMAL
<embed> contenu externe non-html rx ry rayon horizontal et vertical
src lienversuneressourceURL <cercle> définir un cercle ASYNC
type type de ressource intégrée cx cy coordonnéescentraleshorizontalesetverticales
width height horizontal & vertical sizes r rayon du cercle
<objet> ressource externe multifonction <ellipse> définir une ellipse S D'autres balises de script éléments Javascript
data lienverslaressourceurl rx ry rayon horizontal et vertical ÉTIQUETTES RELATIVES À JAVASCRIPT
type type de ressource intégrée cx cy coordonnéesdecentrehorizontaletvertical <noscript> montrez si aucun script n'est activé
name nom contexte pour cible attribut <line> définir un segment de droite <modèle> fragments HTML inertes à cloner
nomdelacarteimageàutiliser
carte d'utilisation x1 y1 pointdedépart(x,y)dusegmentdeligne <fente> créer des arbres DOM séparés
associel'élémentavecleformulaire
formulaire id x2 y2 pointd'extrémité(x,y)dusegmentdedroite name nomdel'emplacementdel'arbred'ombre
width height tailleshorizontalesetverticales pathLength longueur totale du chemin <toile> rendu de graphiques, art, etc...
<param> ressource externe multifonction <polyline> <polygone> ligne / forme fermée width height taillehorizontaleetverticale
name value name&valueofparameter points ensembledecoordonnéesséparéespardesespaces balise d'élément personnalisé
<élément-personnalisé>
ÉTIQUETTES EXPÉRIMENTALES
pathLength longueur totale du chemin
ÉLÉMENTS DE TEXTE ET D'IMAGE
S Attributs SVG Style attributs SVG
<portail> contenuintégréinvité~iframe ATTRIBUTS SVG DE STYLE
src lienverslesitewebderessourcefile, ... <tspan> textlayer&textcontainer REMPLIR LA FORME
referrerpolicy mode comportement de référence x y position de départ du texte
couleur noire fills shape with a color
remplir
dx dy position relative du descendant
non nul pair impair algorithmeàl'intérieur
règle de remplissage
S Chemins SVG Graphiques Vectoriels Scalaires lengthAdjust spacing spacingAndGlyphs
1 opacité canal alpha
opacité-de-remplissage
CHEMINS PUISSANTS
nombre degrés par glyphe
faire pivoter
LIGNE (TRAIT)
<chemin>définir un contour d'une forme textLength nombre longueur par glyphe
AVC aucune couleur définirlacouleurdelaligne
d commande/coordonéesséparéespardesespaces <textPath> mettredutextesurunchemin
pathLength longueur totale du chemin cheminéquivalent de d attribut <chemin> largeur du trait 1 largeur définirlalargeurdelaligne
GUIDE DES COMMANDES PATH lien référenced'urlà <chemin> stroke-opacity 1 opacité canal alpha
M m Déplacezvers chemin commence · M10,30 debutOffset longueurdécalageàpartirduchemindedépart stroke-linecap fesses rondes carrées typedelimite
Z z Fermerlechemin lecheminsetermine·Z méthode étirer l'alignement commentrendreunglyphe jointure-de-ligne coupe en onglet clip en onglet arcs biseautés ronds
traceruneligne·L90,90 limite de miter de trait 4 numéro limitesurleratio
L l Ligneà espacementauto exacte espaceentrelesglyphes
trait-dasharray tableau de nombres nuls motif
H h Lignehorizontalevers ligne horizontale · H40 côté gauche droitecôté du chemin à rendre
offset de traînée 0 numéro décalagedetableau
V v Lignevertevers ligne verticale · V20 lengthAdjust spacing spacingAndGlyphs
C c Béziercubique C30,90 25,10 50,10 textLength nombre longueur par glyphe AUTRES (ATTRIBUTS CSS)
S s Lisse C. B. S70,90 90,90 <image> définirlaréférenceàl'image transformer appliquer transform
Q q Bézier quadratique Q90,60 50,90 href unlienurlversuneimageàrendre classe id stylehtml attributs hériter
T t Lisse Q. B.T30,0 30,0 30,0 30,0 option d'alignement preserveAspectRatio
A a EllipticalArc A20,20 0,0,1 50,30 crossorigin PriseenchargedeCORS
[Link]
Créépar@Manz([Link]
C Syntaxe CSS
CSS LENGUAJE DE ESTILOS
#JOURDELAPROGRAMMATION
C Couleurs CSS
[Link]
EXEMPLE DE COULEUR
SYNTAXE GÉNÉRALE PROPRIÉTÉS DES COULEURS
étiquette
[attributes] #id .class :pseudoclass ::pseudoelement{ color:color RGB 237 +63+0=RGB(237, 63, 0)
HSL 11 +255+119=HSL(11, 255, 119)
selector : value ; opacity:1 alpha
} COMMENTAIRES (ANNOTATIONS)
MODÈLES DE COULEUR
/* commentaire */ MOT CLÉS
S Sélecteurs CSS EXEMPLE/* IE craint */
SÉLECTEURS & COMBINATEURS
clé de couleur
transparent currentColor
FORMAT NUMÉRIQUE EXEMPLES
# élément avec id="unique" #unique
.éléments avec la classe="c1" .c1 RGB(red,green,blue) RGB(65,106,225)
* tous les éléments à l'intérieur du div (universel) div * #red_hex green_hex blue_hex #416AE1forme abrégée:#46E
éléments div internes à l'intérieur d'un div (descendant) div div HSL(hue,saturation,lightness) HSL(159,185,145)
>enfants directs de div (enfant) div > div AVEC CANAL ALPHA EXEMPLES
+ éléments adjacents (frère adjacent) div + div RGBA(rouge,vert,bleu,alpha) RGBA(65,106,225,0.5)
~ éléments frères et sœurs au même niveau (frère et sœur général) div ~ div HSLA(teinte, saturation, luminosité, alpha) HSLA(159,185,145,1)
ATTRIBUTS IGNORE CASE SENSITIVE [attr="..."] COMPOSANTS DE COULEUR
éléments avecattribuerattribut présent rouge vert bleu valeur numérique entre [0 ... 255]
[attr="val"]éléments avecattr= attribut avec valeurval val red_hex green_hex blue_hex valeur hexadécimale [00 ... FF]
[attr~="val"]éléments avecattr~= qui contientval abcvalxyz valeur numérique (degrés) entre [0 ... 360deg]
éléments avecattr|=qui contientes-* en-USes-ES saturation lightness percentage values [0%...100%]
[attr*="val"] éléments avecattr*=cela inclutval équivalent-est- valeur alphanumérique entre [0.0 ... 1.0]
[attr^="val"] éléments avecattr^=cela commence parval valeur-est-...
[attr$="val"] éléments avec attr$= cela se termine parval dans l'intervalle Valeurs et unités VCSS IMPORTANT
PSEUDOCLASSES RÉINITIALISATION DE TOUTES LES PROPRIÉTÉS propriété:valeur !important
tout: initial hériter unset EXEMPLEcouleur:rouge!important;
liens qui n'ont pas encore été visités
:liensvisités qui ont été visités VALEURS COMMUNES
EXPRÉSSIONS MATHEMATIQUES
:survoler l'utilisateur déplace la souris/le pointeur sur l'élément valeur initiale de la propriété initiale
calc( valeur1 op valeur2 ... )
:activeelement est activé par l'utilisateur valeur héritée calculée sur parent
EXEMPLEcalc(200px + 10%)
:focuselement a le focus (premplan) unsetinitial ou hériter (selon)
:enabled :disabledon/off input state FONT-RELATIVE SIZES TAUX DE VUE
éléments vérifiés activés "on" par l'utilisateur valeur calculée sur le courant vw largeur de la fenêtre %
:entréeindéterminée sur état indéterminé hauteur ex de la minuscule « x » vh hauteur de la fenêtre %
:lecture seule :lecture-écriture lecture seule entrée ou modifiable mesure de chadvance du glyphe "0" vminsmaller (vw ou vh)
:placeholder-showninputs qui affiche le placeholder maintenant valeur rem recalculée sur l'élément racine vmaxlarger (vw or vh)
éléments par défaut pour le formulaire (entrée, option, ...) TAILLES ABSOLUES ANGLES DURATIONS
:valid :invaliduserdata pass/not pass check validation px pixels degrés [0..360] s secondes
:in-range :out-of-rangeuserdata in range/out of range cm centimeters gradgradiens0..400] ms millisecondes
:required :optionalelements required/optional for submit mm millimètres radradians [0..6,28] PERCENTAGES
:premier-enfantpremier enfant d'un groupe d'éléments ~ :nth-child(1) Q quart-mm tours de rad0,0..1.0] value %
dernier enfant du groupe d'éléments ~ :nth-last-child(1) en pouces PROPRIÉTÉS PERSONNALISÉES (VARIABLES CSS) EXEMPLE75%
:nth-child(n)n thenfant de groupe d'éléments n même
impair pc picas DÉCLARATION UTILISANT
:nth-last-child(n) dernier n thenfant de groupe d'éléments expr pt points -- varname :valeur;var( -- varname ,repli...)
EXEMPLE--taille: 100px; EXEMPLEcalc(var(--size, 50px) * 2);
:enfant unique seulement enfant ~ :premier-enfant:dernier-enfant
:premier-de-son-typepremier enfant du même type Fonctionnalités des médias MCSS
:dernier-de-typedernier enfant du même type VIEWPORT SIZE DEVICE SIZE
th
:nth-of-type(n)n enfant du même type MIN MAX largeur tailleMIN MAX largeur de l'appareil taille
:nth-last-of-type(n) dernier n thenfant (même type) MIN MAX hauteur tailleMIN MAX hauteur-d'appareil size
:seul-de-type enfant unique (même type)
legend RAPPORT D'ASPECT
:racine élément racine du document
mot-clé optionnel MIN MAX aspect-ratioratio MIN MAX device-aspect-ratioratio
:élément vide sans contenu
non(x) ne correspond pas parxsélecteur keyword COLORS
:target est la cible de l'URL d'ancre
large non pris en charge MIN MAX couleur numéroMIN MAX index-des-couleurs nombre
éléments dansxlangue valeur abrégée AUTRES
valeurdesdonnéesutilisateur EXEMPLES
PSEUDÉLÉMENTS MIN MAX numéro monochrome device-min-width: 640px
::première-lignepremière ligne de l'élément de textevaleur détaillée MIN MAX résolution dpi/dpcm device-aspect-ratio: 16/9
valeur par défaut
::lettre-initialepremière lettre de l'élément de texte orientation portrait landscape max-color-index:256
pseudoclasse min-résolution:300dpi
numériser entrelacement progressif
[Link] pseudélément grille nombre
min-monochrome:2
grid:1
Créépar@Manz([Link]
POLICE GÉNÉRIQUE
CSS LENGUAJE DE ESTILOS
#JOURDELAPROGRAMMATION
[Link]
TCSS Texte L3
serif sans-serif cursive fantasy monospace
F Polices TRANSFORMER LE TEXTE
EXEMPLEpolice: Verdana, Arial, sans-serif;
POLICES (TYPOGRAPHIE) text-transform:none capitalize uppercase lowercase full-width
font1,font2,font3,genericfont
police de caractères : ... ESPACES BLANCS
font-size: taille % espace blanc : normal pré maintenant, rap pré-emballage pré-ligne
smaller larger tab-size:8 nombre taille
xx-small x-small small medium large x-large xx-large SÉPARATION DE LIGNE ET LIMITES DE MOTS
font-size-adjust: aucun numéro line-break:auto loose normal strict
font-style: normal italic oblique coupure de motnormal
: keep-all break-all
font-synthesis: aucun poids style MOTS EN RUPTURE
font-variant: aucune petite majuscule tirets:aucun manuel voiture
poids de policenormal
: bold word-wrap: normal casser-le-mot
lighter bolder débordement-wrap: normal mot-casse
100 200 300 400 500 600 700 800 900 ALIGNEMENT & JUSTIFICATION
font:style variant weight stretch size/ line-height family text-align:left right center justify start end match-parent
caption icon menu message-box small-caption status-bar
text-align-last:auto start end left right center justify
[Link] texte-justifier:auto none inter-mot distribuer
SSpeech Media SPACING
VOLUME/PARLER word-spacing: normal taille
volume:number % silent x-soft soft medium loud x-loud espacement-des-lettres:normal taille
parler : normal aucun énoncé EFFETS DE BORD
PAUSE SIGNAL indentation-de-texte: taille suspendue chaque-ligne
pause-avant:0 temps % indice-avant:none url( snd.mp3 ) hanging-punctuation:none first last force-end allow-end
pause-après:0 temps % indice-après:none url( snd.mp3 )
Décoration de texte TCSS
pause: before after cue: before after
NIVEAU 2 (HÉRITAGE)
MIXAGE/SPATIAL
jouer-partout:auto aucun url( snd.mp3 ) mélanger répéter text-decoration:none underline overline line-through
NIVEAU 3
azimuth:angle center left-side far-left left center-left
text-decoration-line:none
{"right-side":"côté droit","far-right":"extrême droite","right":"droite","center-right":"centre-droit"} underline overline line-through blink
couleur-de-décoration-du-texte:currentColor couleur
behind leftwards rightwards
style-de-décoration-de-texte : solide double pointillé en tirets ondulés
elevation:angle below level above lower higher
décoration-du-texte-saut:aucun objets espaces encre bords
CARACTÉRISTIQUES DE LA VOIX
décoration de boîte
speech-rate:number x-slow slow medium fast x-fast
slower faster texte-décoration:none ligne couleur de style
STATUS
famille-de-voix:voix1 ,voice2,voice3,genericvoice
... position-soulignement:auto sous gauche droite
ouvert rempli
pitch:frequency x-low low medium high x-high SIGNES D'EMPLOI
EXEMPLEcercle ouvert;
pitch-range:50 number style-d'emphase-texte:aucun
VOIX GÉNÉRIQUE
richness:50 number status dot circle double-circle triangle sesame
male female child
stress:50 number texte-emphase-couleur: couleurActuelle couleur
EXEMPLEvoix-famille : Romeo, masculin ;
DISCOURS text-emphasis-position:over under left right
parler-ponctuation:aucune code text-emphasis: style couleur
parler-numeral:chiffres continus Ombre de texte
speak-header:once always text-shadow: none pos-x pos-y couleur floue
@ Règles CSS serif font police à largeur fixe
CHARGEMENT DE POLICE REQUÊTES MÉDIATIQUES (DESIGN RESPONSIF)
police sans empattement police de fantaisie
@font-face { @média tous les écrans imprimés et (...) {
police;
police de caractères: property:value; CALCULS DE HAUTEUR DE LIGNE (HÉRITAGE)
Fonctionnalités multimédias
src: url([Link]) format("woff") , } interligne : nombre % taille normale
url(fi[Link] ) format("truetype") ; EXEMPLE@media screen and (max-width: 640px) { ...} vertical-align:size % baseline middle sub super
plage-unicode: U+000-27FF; RÈGLES D'IMPORTATION CSS
text-top text-bottom top bottom
}
@import "[Link]";
FORMATS DE POLICE
CSS CONDITIONNEL
@import url("[Link]");
embedded-opentype truetype opentype svg woff woff2 @supports pas ( caractéristique
) ou et ...{
@import url("[Link]") print;
EXEMPLEurl([Link]) format("truetype");
property:value;
}
[Link] EXEMPLE@supports not ( display:flexbox ) { .nav { display:block } }
Createdby@Manz([Link]
Modèle de boîte BCSS
CSS LENGUAJE DE ESTILOS
#JOURDESPROGRAMMATION
[Link]
Frontières BCSS
ABRÉVIATIONS SPÉCIFIQUES
DIMENSIONS FRONTIÈRES
border-top-*
largeur:auto taille % hauteur:auto taille % border-width:size thin medium thick border-right-*
largeur minimale: 0 taille % min-hauteur:0 taille % border-style : aucun; border-style : caché; bordure-inférieure-*
bord-gauche-*
largeur-max:aucune taille % hauteur-max : aucun taille % couleur-de-bordure:currentColor couleur
MARGES/REMISE ABRÉVIATION DE LA MARGE LATÉRALE BORDER STYLES
MARGES SPÉCIFIQUES REMBOURRAGES SPÉCIFIQUES
border-top: style de largeur couleur solide
marge-haut : 0 taille % padding-top: 0 taille % border-right: st
y l
e de lar
geur couleur pointillé
marge-droite : 0 taille % padding-right: 0 taille % border-bottom: style de largeur couleur
marge inférieure : 0 taille % marge inférieure : 0 taille % tiraillé
border-left: style de largeur couleur
marge-gauche :0 taille % rembourrage-gauche
0 taille: % SHORTHAND PRINCIPAL double
ABRÉGÉ DE MARGE RACCOURCI DE REMPLISSAGE
border: style de largeur couleur groove
marge : haut droite bas gauche padding: top right bottom left crête
top left right bottom top left right bottom
Coins Arrondis inserer
top bottom left right top bottom left right
COINS SPÉCIFIQUES
haut droite bas gauche haut droite bas gauche début
bordure-haut-gauche-rayon:0 taille %
DÉBORDEMENT/VISIBILITÉ
bordure-haut-droite-rayon:0 taille % FORMAT À 2 PARAMÈTRES
overflow-x:visible hidden scroll auto no-display no-content
bordure-bas-droite-rayon : 0 taille % size-h size-v
débordement-y : visible caché défilement automatique pas d'affichage pas de contenu taille-v
rayon-bas-gauche:0 taille % 1-PARAMETER
size-h
overflow:overflux-x débordement-y size-h = size-v
SHORTHAND PRINCIPAL
visibility:visible hidden collapse border-radius: top-left top-right bottom-right bottom-left
top-left top-right bottom-left bottom-right
TYPES DE BOÎTES (AFFICHAGE) BOÎTE MODÈLE CSS
top-left bottom-right top-right bottom-left
affichage:inline aucun en cours
top-left top-right bottom-right bottom-left
inline-block bloc
STÉNO PRINCIPALE AVEC RAYON HORIZONTAL/VERTICAL
élément de liste en ligne élément de liste
contenu border-radius:
table en ligne table cellule de table border-radius / border-radius
ligne de tableau légende de tableau remplissage haut
BORDER IMAGE WIDTH
grille en ligne sous-grille taille automatique nombre %
TRANCHE D'IMAGE
marge gauche centredroite
inline-flexflex nombre %
Image de bordure BCSS bas
Images ICSS DÉPART D'IMAGE
TAILLE DE DÉPART
BORDER IMAGE
GRADIENTS taille du numéro
GRADIENTS LINÉAIRES size % border-image-source:none url( [Link] )
répéter-linéaire-*
background-image: border-image-slice:100% haut droite bas gauche remplir
dégradé-linéaire( direction couleur1 début, couleur2 début,...) border-image-width:1 top right bottom left
GRADIENTS RADIAUX border-image-outset:0 top right bottom left
radial-répétitif-*
background-image: border-image-repeat: étirer répéter rond espace
dégradé radial( forme taille à position couleur1 début,couleur2...) border-image: source slice /width outset repeat
OPTIONS DE GRADIENT DIRECTION
PARAMÈTRES DE STYLE DE RÉPÉTITION
forme rsize enhaut
enhaut enhaut répéter espace rond sans répétition
rayon du cercle au pos ... gauche 360 degrés droit B Arrières-plans EXEMPLErépéter pas répéter(ourépétition-x)
ellipse rh rv à pos... 325° 35° NIVEAU 2
EXEMPLE(ellipse55px45pxenhaut,rouge,bleu) à à couleur de fond:transparent couleur
270deg 90 degrés
LA TAILLE DU RAYON (RSIZE) ACCEPTE ÉGALEMENT... gauche droit image-arrière-plan:none url( [Link] ),url( [Link]), ...
215degr 145degr background-repeat:répéter repeat-x repeat-y repeat-style
closest-side farthest-side à à
closest-corner farthest-corner fond
180 degrés
bas répéter répéter style-répéter-h style-répéter-v
IMAGES ET OBJETS gauche verslebas droite background-attachment:scroll local fixe
DIMENSIONNEMENT position-arrière-plan: pos-x pos-y
object-fit:remplir contenir couverture aucune réduction d'échelle background:color image repeat attachment position
position-objet:50% 50% position-arrière-plan NIVEAU 3
TRAITEMENT D'IMAGE découpe-arrière-planborder-box
: padding-box content-box
orientation-d'image:0deg taille origine-arrière-plan: border-box padding-box content-box
résolution-d'image:1dppx de la résolution d'image snap taille-de-fond : largeur automatique contenuhauteur
couverture
rendu-d'image:auto bords nets pixelisé background:color pos size repeat origin clip attach image
[Link]
EFFECTS: SHADOWS
DÉVELOPPEURWEB/STREAMER
ombre de boîte: none pos-x pos-y blur size color inset
Créépar@Manz([Link]
Filtres FCSS
CSS VALeurs de FILTRE
LENGUAJE DE ESTILOS
#JOURDELAPROGRAMMATION
Compositage
[Link]
FILTRER LA PROPRIÉTÉ COMPOSITION ET MÉLANGE
nombre0,0XXX1.0
filter:nonefilter1filter2 XXX mode_de_mélange_de_fond:normal mélanger
% 0%XXX100 %
FILTRES isolation:auto isoler
flou( flou ) 0px = original >0px=blur mode-de-mélange:normal mélange
brightness( number % ) 0%=black100%=original >100%AUTORISÉ
MODES DE FUSION
SÉPARABLE
contraste( pourcentage de nombre ) 0%=grey100%=original >100%AUTORISÉ
normal superposition d'écran multiple
saturer( nombre % ) 0%=N&B 100%=original >100%AUTORISÉ
darken lighten color-dodge color-burn
niveaux de gris( pourcentage % ) 0%=original100%=N&B 0 différence entre lumière dure et lumière douce exclusion
inverser( nombre % ) 0%=original100%=invert
NON SÉPARABLE
sépia( nombre % ) 0%=original100%=sepia 270degré90
hue saturation color luminosity
opacity( number % ) 0%=transparent100%=original 180
teinte-rotation( angle ) 0deg=original360deg=max
Listes
ombre-portée( pos-x pos-y flou couleur )(identique à text-shadow) LISTES
BOÎTE DE RÉFÉRENCE image-de-liste:aucune url( [Link] )
geometry-box=shape-boxfill-box stroke-box view-box list-style-position:inside outside
type-de-liste: disque cercle carré alpha majuscule alpha minuscule
shape-box=box margin-box
box=content-box padding-box border-box upper-roman lower-roman decimal decimal-leading-zero
lower-greek armenian georgian none
Formes SCSS style-liste:type position de li'mage
FORME DE ZONE FLOTTANTE
CONTENU GÉNÉRÉ
forme-extérieure : aucun url( imgXpng) content:normal none url( [Link] ) attr( attribuer
) ' chaîne '
boîte de géométrie de forme de base
open-quote close-quote no-open-quote no-close-quote
shape-image-threshold: 0X0 nombre compteur nom liste-type-style
, ) PSEUDOCLASSES
shape-margin: 0 size % contenu-incrément:aucun nom ::avantélément avant
FORMES DE BASE
content-reset:none name ::après-après élément
RECTANGLE
quotes:' open-str ' ' close-str ' none EXEMPLEp::before { contenu: "-"; }
inserer(coin supérieur droit, coin inférieur gauche, rayon de bordure rond ) MARQUEURS
CERCLE/ELLIPSE
::l'élément de marque a été généré par l'élément de liste (puce, numéro...)
cercle rayon de forme à la position marker-side: list-item list-container
ellipse( rayon_x rayon_y à la position
UUser Interface
POLYGONE
RAYON DE LA FORME MODÈLE DE BOÎTE
polygone( x0 y0 , XXX
, xi yi ) taille % côté le plus éloigné côté le plus proche box-sizing:content-box border-box
Masques MCSS PLAN
FORME DE DÉCOUPE outline-width:size thin medium thick
clip-path:none url( imgXpng) géométrie-boîte forme de base outline-style:none auto hidden dotted dashed solid
MASQUES POSITIONNÉS double rainure crête encastré saillant
url( imgXsvg#masque) dégradé couleur-de-contour : inverser la couleur
masque-image:none
mode-masque:auto alpha luminance outline-offset:0 size
mask-repeat:no-repeat background-repeat outline:color style largeur
mask-position: centre position d'arrière-plan REDIMENSIONNER/DÉBORDEMENT
mask-clip:boîte-de-liaison aucune-clip boîte-géométrique redimensionner:none à la fois horizontal et vertical
masque-origine:boîte-de-bord géométrie-boîte texte-de-dépassement: clip chaîne ellipse
mask-size: auto taille de l'arrière-plan DISPOSITIFS DE POINTAGE ET CLAVIERS
mask-composite:add subtract intersect exclude curseur:auto par défaut aucun url( imgXpng) x y
mask:image mode position / size repeat clip composite context-menu help pointer progress wait
MASQUE DE BORDURE texte
masque-bord-source:none url( imgXsvg#masque) alias copy move no-drop not-allowed grab grabbing
mode-de-bordure-de-masque: alpha luminance n-redimensionner ne-redimensionner e-redimensionner se-redimensionner s-redimensionner sw-redimensionner
masque-bord-tranchant:0 tranche-image-bord w-resize nw-resize ew-resize ns-resize nesw-resize
redimensionner nwse redimensionner col redimensionner ligne défilement tout
mask-border-width:auto border-image-width
mask-border-outset:0 border-image-outset couleur du curseur:auto couleur
mask-border-repeat:stretch border-image-repeat nav-up:auto id cible racine actuelle
masque-bord: source découpe / largeur / début mode de répétition nav-down:auto id current root target
nav-left:auto id current root target
[Link] nav-right:auto id current root target
Créépar@Manz([Link]
Transitions TCSS
CSS LENGUAJE DE ESTILOS
#JOURDELAPROGRAMMATION
Transformations TCSS
[Link]
TRANSITIONS PROPRIÉTÉ DE TRANSFORMATION
transition-property:all none propriété1,propriété2, ... transformer:none transformer1 transformer2 ...
durée-de-transition:0s temps 2D TRANSFORMS
fonction de transition : facilité fonction de timing transformer translateX( taille % ) Y
délai-de-transition:0s temps transformer translateY( taille % )
transition:propriété durée délai de fonction t transformer:traduire( taille %, taille % )
fonction-de-temps étapes()
transform: scaleX( number )
fonction de synchronisation cubic-bezier()
transformer échelleY( nombre )
s f saisir (0.25, 0.1, 0.25, 1) début-étape (1, commencer)
n n n linéaire (0.00,0.0, 1.00, 1) étape-finale (1, fin) transform:scale( nombre , nombre )
s n n facilité (0.42,0.0, 1.00, 1) étapes(n) (n, fin) transformer skewX( angle ) X
n n s facilité-diminution transform: skewY( angle ) Z
(0.00,0.0, 0.58, 1) étapes(a,b) (a,b)
s n s ease-in-out(0,42,0,0, 0,58, 1) transformer: incliner( angle , angle )
SLOW NORMAL FAST transformer:rotation( angle )
Animations ACSS
ANIMATIONS
transforme:matrice( n1,n2 , n3,n4 , n5 , n6 )
TRANSFORMATIONS 3D
animation-name:none name1 ,name2, ...
animation-duration:0s temps transform: translateZ( size )
animation-timing-function: facilité fonction de timing transformer:translate3d( taille % , taille % , taille )
délai-animation:0s temps transform: scaleZ( nombre )
animation-iteration-count:1 numéro dans fini transforme: échelle3d( nombre , nombre , nombre )
direction-d'animation:normal inverse transform: rotateX( angle )
alternatif alternatif-inversé transform: faire pivoterY( angle )
animation-fill-mode:none forwards backwards both transform: rotateZ( angle )
animation-play-state: en cours pausing
transform:rotate3d( nombre , nombre , nombre , angle )
animation:name duration fonction t délai il-c dir f-m p-s
transformer:perspective( taille )
CHAÎNÉ (PROPRIÉTÉ D'ANIMATION) TRAMES CLÉS D'ANIMATION transform:matrix3d(n1,n2,n3,n4,n5,n6,,n16) ...
OPTIONS DE TRANSFORMATION
animname1 5s linéaire , @keyframesanimname{
animname2 5s linéaire 5s, 0%{ property: value; ... } transform-origin: 50% 50% pos-x pos-y pos-z
animname3 6s linéaire 10s ; ... transform-style: préserver à plat-3D
100%{ propriété: valeur; ... } backface-visibility: visible hidden
0%=de } @-vendor-keyframes OPTIONS DE PERSPECTIVE
Chemins de mouvement MCSS 100%=à
TRAJECTOIRE DE MOUVEMENT
perspective aucune taille
aucun : url( [Link] )
chemin de mouvement perspective-origin: 50% 50% pos-x pos-y pos-z
forme de base cheminboîte-géométrique Colonnes Multiples CCSS
motion-offset: 0 taille % COLONNES
motion-rotation: auto angle inversé largeur-de-colonne:auto taille
mouvement: chemin décalage rotation
colonne-compte:auto numéro
VERROUILLAGE DE DÉFILEMENT/ACCROCHAGE colonnes : largeur compteur
SCSS Défilement d'accrochage
SNAP MARGIN/PADDING RÈGLES DES COLONNES
CAPTURER LES ZONES DE SNAP DÉFILEMENT
*-top:0 size % column-rule-width:size thin medium thick
scroll-snap-type:none x y *-droite:0 size % column-rule-style: style none
bloquer en ligne les deux proximité obligatoire
*-bas:0 size % couleur-de-règle-de-colonne:couleur
ALIGNEMENT ET LIMITES -gauche:0 size % largeur
règle-de-colonne : style color
alignement de défilement : axe en ligne axe de bloc
*: en haut à droite en bas à gauche SAUT DE COLONNE
scroll-snap-stop:normal toujours EN LIGNE/BLOC saut-avant/saut-après:auto toujours éviter gauche droite
SNAP DE DÉFILEMENT/SNAPPORT
*-inline-start:0 taille % page colonne éviter-page éviter-colonne
scroll-padding*: *-inline-end:0 size % rupture-à-l'intérieur : auto éviter éviter-page éviter-colonne
scroll-snap-margin*:
*-en ligne:start end ÉTENDU, REMPLISSAGE ET ESPACES
AXE colonne-étendue:aucune tout
*-block-start:0 taille %
aucun start center end remplissage-de-colonne:auto équilibrage
EXEMPLEalignement de défilement : début fin
*-block-fin:0 taille %
écart-colonne: taille normale
-bloc : start end
[Link]
Créépar@Manz([Link]
FCSS Flexbox
CSS LENGUAJE DE ESTILOS
#JOURDELAPROGRAMMATION
Positionnement
[Link]
PROPRIÉTÉS DU CONTENEUR POSITIONNEMENT
COMMANDE ET ORIENTATION
position: statique relative absoluefixed sticky
flex-direction:rang rang-inversé colonne colonne-inversée POSITIONNEMENT (PAS UNE POSITION STATIQUE)
FLOTTANT
flex-wrap:nowrap wrap wrap-reverse
float: aucun gauche droite haut:auto taille %
flex-flow:direction envelopper gauche:taille automatique %
clear: aucun gauche droite les deux
AXE PRINCIPAL
droite:auto taille %
justify-content: flex-start centerflex-end bas:taille automatique %
space-between space-around 15 5 z-index:auto numéro
AXE SECONDAIRE Grilles GCSS -5
align-items :flex-start centerflex-end baseline stretch GRILLES DE CONTENEURS
GRILLE EXPLICITE
MULTI-LINE CONTAINER PROPERTIES
colonnes-modèle-grille : aucune piste1 piste2 ...
align-content :flex-start centerflex-end stretch
grid-template-rows:none track1 track2 ...
space-between space-around
PISTES
ITEM PROPERTIES
FLEXIBILITÉ
auto size % fr taille automatique ou taille/unité de fraction spécifique
flex-grow:0 numéro [ linename ] auto size % fr lignes de grille nommées + taille spécifique
flex-shrink:0 nombre minmax( min, max ) min <= plage de taille <= max
flex-basis :contenu automatique taille % répéter( nombre , pistes ) répéter des fragmentsnheures
répéter(auto-remplissage, pistes) repeated fragments andfill space
flexcroître rétrécir la base
repeat(auto-fit, tracks ) fragments répétés et ajuster l'espace
ALIGNEMENT ET ORDRE
max-content min-content plus grand contenu de suivi max/min
align-self:auto flex-start centerflex-end baseline stretch
ajuster-contenu( taille %~) min(max-contenu, max(auto, arg))
order:0 number
GRILLE DE ZONE
Alignement ACSS
zones-modèle-grille : zone1 zone2 ... zoneY zoneZ
CONTAINER PROPERTIES
DOMAINES EXEMPLE
DISTRIBUTION DE CONTENU
nom de la zone de la grille (zone de la grille) #grid { display:grid;
justifier le contenu / aligner le contenu : grille-modèle-zones:" tête tête"
.zone de grille vide cellule
normal baseline-position navigation principale
none aucune zone de grille n'est définie
space-between space-around space-evenly stretch pied pied
débordement-pos auto-position POSITION DE DÉBORDEMENT
SHORTHAND TEMPLATE GRID
AUTO-POSITION modèle de grille : aucun
safe unsafe template-rows / colonnes-modèle
début centre fin (soi, contenu)
zones-de-modèle + rangées/colonnes-de-modèle
flex-startflex-endidem (seulementflex)
IMPLICIT GRID
auto-début auto-fin(self)
colonnes automatiques de grille : taille automatique %
left right (self, content) fallback: start
grille-auto-rangs: taille automatique %
POSITION DE BASE
baseline last-baseline flux-auto-de-grille: ligne colonne dense
RIVIÈRES (ESPACES)
AXE PRINCIPAL
écart-de-colonne-de-grille:0 taille %
justifier-éléments:auto normal étirer position de la ligne de base
débordement-pos position self grid-row-gap:0 size %
legacy left center right row-gap column-gap
écart-de-grille:
AXE SECONDAIRE GRILLE DE STÉNOGRAPHIE
align-items:normal étirement position de base grid: modèle
débordement-pos auto-position lignes-modèle / flux automatique dense colonnes-auto-de-grille
ITEM PROPERTIES grille-auto-rows
flux automatique dense modèle-colonnes
/
AXE PRINCIPAL GRILLES D'ARTICLES
justifier-soi: auto position de base pour un étirement normal PLACEMENT PAR LIGNE
positio d'overflow auto début-de-colonne/de-fin-de-colonne:auto ligne
AXE SECONDAIRE ligne de début/ligne de fin de grille : auto
align-self : auto position de base normale étendue colonne-de-grille: démarrer-colonne fin-colonne
auto-positionnement overflow-pos ligne-grille:début-ligne fin-ligne
LIGNES
TABLES
le nom de numéro fait référence à une ligne de grille numérotée ou nommée
border-collapse:separate collapse caption-side:top bottom
numéro de span nom span à travers jusqu'à la ligne de grille
border-spacing:size-h size-v empty-cells:show hide
ABRÉGE DE PLACEMENT
disposition-des-tableaux:auto fixé
zone-grille : zone-modèle
[Link] début de ligne
/ début de colonne / fin de ligne/ fin de colonne
LANGAGE DE PROGRAMMATION [Link]
Créépar@Manz([Link]
JAVASCRIPT #DIADELAPROGRAMACION
n Numéro() = 42 s texte a Array()= [1, 2, 3]
PROPERTIES PROPRIÉTÉS PROPRIÉTÉS
n .POSITIVE_INFINITY+∞équivalent n .longueurchaîne taille n .longueur nombre d'éléments
n .INFINI_NÉGATIF-∞équivalent METHODS MÉTHODES
n .MAX_VALUEvaleur positive la plus grande s .charAt(index) caractère à la position [i] b .isArray(obj)Vérifiez si obj est un tableau
n .MIN_VALUEplus petite valeur positive n .charCodeAt(index) unicode à la position. b inclut(obj, à partir de) inclure l'élément ?
n .EPSILONdiff entre 1 et le plus petit >1 n .codePointAt(index)cp à la position n .indexOf(obj, from)trouver l'indice de l'élément
n .NaNvaleur-non-un-nombre s .fromCharCode(n1,n2...)code à char n .lastIndexOf(obj,from)trouver depuis la fin
MÉTHODES s .fromCodePoint(n1,n2...)cp à char s .join(sep) joindre les éléments avec un séparateur
s .toExponential(déc) notation exp. s .concat(str1,str2...)combiner du texte + [Link](ini,end) renvoie une portion de tableau
s .toFixed(déc)notation à point fixe b .commencePar(str,taille) vérifier le début [Link](obj1,obj2...) retourne un tableau joint
s .toPrecision(p) changer la précision a .plat(profondeur)retourtableau à plat à une profondeur n
b .endsWith(str, taille) vérifier la fin
b .isFinite(n) vérifier si le nombre estfini b .includes(str, from) inclut-il une sous-chaîne ?
MODIFIER LES MÉTHODES DU TABLEAU SOURCE
b .isInteger(n) vérifier si le nombre est un int. n .indexOf(str,from)trouver l'index de la sous-chaîne [Link](pos,ini,end)copier des éléments
b .isNaN(n) vérifier si le nombre est NaN a .fill(obj,ini,end)remplir le tableau avec un objet
n .lastIndexOf(str,from)trouver depuis la fin
n .recherche(regex)recherche et retourne l'index un
n .parseInt(s,radix) chaîne en entier .reverse() inverser le tableau et le retourner
n .parseFloat(s,base)chaîne àflotte a .sort(cf(a,b))trier tableau (tri unicode)
n .localeCompare(str, locale, options)
a .splice(ini,del,o1,o2...)supprimer&ajouter elem
[Link](regex) correspond à une chaîne
r Regexp()= /.+/ig a .matchAll(regex) renvoie un itérateur avec tout
MÉTHODES D'ITÉRATION
un .entries()
je itère un tableau de paires clé/valeur
PROPRIÉTÉS s .normalize(form)normaliser unicode
n .lastIndexindex to start global regexp s .padEnd(len,pad) ajouter un remplissage à la fin aje .keys() itère uniquement le tableau des clés
s .flagsactivesdrapeaux de l'expression régulière actuelle
s .padStart(len,pad) aje .valeurs() itérer uniquement les valeurs du tableau
ajoute un rembourrage de début
b .globaldrapeau g (rechercher toutes les correspondances)s .répéter(n) répéter la chaîne n fois APPEL DE RETOUR POUR CHAQUE MÉTHODE
b .ignorerLaCassedrapeau i (correspondre à minuscule/majuscule)
s .remplacer(str|regex,nouveauStr|fonction) b .chaque(cb(e,i,a),arg)tester jusqu'à faux
b .multiligneflag m (faire correspondre plusieurs lignes)
s .slice(ini,end) chaîne entre ini/end b .certain(cb(e,i,a),arg)test jusqu'à ce que ce soit vrai
b .collantdrapeau y (rechercher à partir de lastIndex)
s .substr(ini,len) sous-chaîne de longueur len a .map(cb(e,i,a),arg) créer un tableau
b .unicodedrapeau u (activer la fonctionnalité unicode) a .filtrer(cb(e,i,a),arg) faire un tableau avec vrai
s .sourcecurrent regexp (sans barres obliques) s .substring(ini,end) fragment substr
[Link](sep|regex,limit)diviser chaîne o .trouver(cb(e,i,a),arg) retourne elem w/true
MÉTHODES
s n .trouverIndex(cb(e,i,a),arg)return index
[Link](str)exec recherche d'une correspondance .toLowerCase()chaîne en minuscules
s .toUpperCase() chaîne en majuscules a .flatMap(cb(e,i,a),arg)map +plat(1)
b .test(str) vérifier si l'expression régulière correspond à str
s .trim()supprimer les espaces au début/à la fin .pourChaque(cb(e,i,a),arg)exécute pour chaque
CLASSES
.n'importe quel caractère
s .trimEnd()supprime l'espace à la fin o .reduce(cb(p,e,i,a),arg)accumulatif
tabulateur o .reduceRight(cb(p,e,i,a),arg)de la fin
s .trimStart() supprime l'espace au début
\ddigit[0-9] \retour à la ligne
\Dpas de chiffre[^0-9] retour à la ligne s .raw``chaînes de modèle avec${vars} AJOUTER/ENLEVER MÉTHODES
\wany caractère alphanumérique[A-Za-z0-9_] o .pop() supprime et retourne le dernier élément
d Date()
\Wpas de caractère alphanumérique[^A-Za-z0-9_] n .push(o1,o2...)ajoute un élément et retourne la longueur
\saucun caractère d'espace (espace, tabulation, entrée...) MÉTHODES
o .shift() supprimer & retournerpremier élément
Aucun caractère d'espace (espace, tabulation, entrer...) n .UTC(y,m,d,h,i,s,ms)timestamp
n .unshift(o1,o2...) ajoute un élément et renvoie la longueur
Nchar avec codeN retour arrière n .now()timestamp de l'heure actuelle
uNchar avec unicodeN NUL char n .parse(str)convertir str en horodatage DÉSHIVER
[1,2,3]
POUSSEZ
ENSEMBLES DE CARACTÈRES OU ALTERNANCE n .setTime(ts)set l'horodatage UNIX DÉPLACER POP
[abc]correspondre à tout ensemble de caractères n .getTime() renvoie un horodatage UNIX f Fonction()= fonction(a, b) { ... }
[^abc]correspondre à tout caractère. ensemble non fermé/ SETTEURS D'UNITÉ (AUSSI .getUTC*() / .setUTC*())
GETTEURS PROPRIÉTÉS
a|bcorrespondre à a ou b n .get / .setFullYear(y,m,d) (aaaa) o .longueurretourner le nombre d'arguments
LIMITES n .get / .setMonth(m,d) (0-11) s .nomretourner nom de fonction
^début de l'entrée $fin de l'entrée n .get / .setDate(d) (1-31) o .prototypeobjet prototype
frontière de mot de largeur nulle n .get / .setHeures(h,m,s,ms) (0-23) MÉTHODES
Blimite de largeur nulle non-mot n .get / .setMinutes(m,s,ms) (0-59) o .appel(nouveauthis,arg1,arg2...)changethis
GROUPAGE n .get / .setSeconds(s, ms) (0-59) o .appliquer(nouveauthis, arg1) avec tableau d'arguments
(x)capture group (?:x)no capture group n .get / .setMilliseconds(ms) (0-999) o .bind(nouveauthis,arg1,arg2...)fonctionliée
référence au groupe capturé n .getDay()return day of week (0-6)
QUANTIFICATEURS MÉTHODES DE LOCALE ET DE FUSEAU HORAIRE
n nombre date
x*précédentx0 ou plus de fois{0,} .getTimezoneOffset() décalage en minutes n NaN (pas un nombre) r expressionrégulière
n
x+précédentx1 ou plusieurs fois{1,} s .toLocaleDateString(locale, options) s chaîne f fonction
x?précédentx0 ou 1 fois{0,1} b boolean (true/false) o objet
s .toLocaleTimeString(locale, options)
x{n}occurrences de x s .toLocaleString(locale, options) a tableau non défini
x{n,}au moins n occurrences de x s .toUTCString()return UTC date available on ECMAScript 2015 or higher
x{n,m} entre n & m occurrences de x s .toDateString() renvoie la date américaine n statique(ex:[Link]())
ASSERTIONS s .toTimeString()return American time n non-statique (ex : new Date().getDate())
x(?=y)x(uniquement si x est suivi de y) s .toISOString() retourne la date ISO8601
argumentrequis
x(?!y)x(uniquement si xis n'est pas suivi par y) s .toJSON() retour date prête pour JSON
argumentoptionnel [Link]
LANGAGEDEPROGRAMMATION [Link]
Créépar@Manz([Link]
JAVASCRIPT #JOURDELAPROGRAMMATION
Mathématiques o Object()= {key: value, key2: value2} s Ensemble() WeakSetuniquementdesobjetscommeéléments
PROPRIÉTÉS PROPRIÉTÉS PROPRIÉTÉS
n La constante d'Euler o .constructorreturn ref. to object func. n .sizereturn nombre d'articles
n ln(2) logarithme naturel de 2 MÉTHODES MÉTHODES
n .LN10natural logarithm of 10 o .assign(dst,src1,src2...)copier les valeurs s .ajouter(l'article)ajouter l'article au jeu ws
n .LOG2Elogarithme de E en base 2 o .créer(proto,prop)créer obj avc prop .has(item)vérifiez si l'élément existe ws
n .LOG10E logarithme en base 10 de E o .définirPropriétés(obj,prop) b .supprimer(item)supprimer item & retourner si supprimer ws
n [Link] circonférence/diamètre o .defineProperty(obj, prop, desc) .clear()supprime tous les éléments de l'ensemble
n √(1/2) o .freeze(obj)avoid properties changes MÉTHODES D'ITÉRATION
n racine carrée de 2 o .getOwnPropertyDescriptor(obj,prop) sje .entries() itérer les éléments
MÉTHODES
[Link](obj) sje .values() itère uniquement sur la valeur des éléments
n .abs(x)absolute value o .getPrototypeOf(obj) retourne le prototype
APPEL DE RETOUR POUR CHAQUE MÉTHODE
n .cbrt(x)racine cubique b .is(val1,val2)check if are same value .forEach(cb(e,i,a),arg)exec for each
n .clz32(x) retourne les bits zéro de tête (32) b .isExtensible(obj)check if can add prop
n .exp(x) retourne ex m Carte() WeakMapna'cceptequedesobjetscommeclés
b .isFrozen(obj) vérifier si obj est gelé
n .expm1(x) retourne ex-1 b .isSealed(obj)check if obj is sealed
PROPERTIES
n
n .hypot(x1,x2...)longueur de l'hypoténuse a .keys(obj) retourne uniquement les clés de l'[Link] nombre d'éléments
n .imul(a,b) multiplication signée o .preventExtensions(obj) éviter d'étendre MÉTHODES
n .log(x) logarithme naturel (base e) o .seal(obj)prop sont non-conconfigurable m .set(clé,valeur)ajouter paire clé=valeurwm
n .log1p(x) logarithme naturel (1+x) o .setPrototypeOf(obj, prot) change prot o .get(clé) retourne la valeur de la clé wm
n .log10(x) logarithme en base 10 MÉTHODES D'INSTANCE .has(cle) vérifier si la clé existe wm
n .log2(x) logarithme en base 2 b .hasOwnProperty(prop) Vérifiez si cela existe b .supprimer(clé)supprimer elem. & retourner si ok wm
n .max(x1,x2...) retourne le nombre maximum .clear() enlève tous les éléments de la carte
b .isPrototypeOf(obj)test dans un autre obj
n .min(x1,x2...) renvoie le nombre minimum b .propertyIsEnumerable(prop) METHODES D'ITÉRATION
n .pow(base, exp) retourne base exp ** s .toString() retourne une chaîne équivalente [Link]() itérer des éléments
n .aléatoire()nombre aléatoire flottant [0,1) s .toLocaleString()return locale version [Link]() itère uniquement les clés
n .sign(x) retourne le signe du nombre o .valueOf() retourne la valeur primitive [Link]() n'itère que sur les valeurs
n .sqrt(x)square root of number APPELER POUR CHAQUE MÉTHODE
MÉTHODES DE RONDE p Promesse() async/await fonctions asynchrones
.pourChaque(cb(e,i,a),arg)exécuter pour chacun
METHODS
n .ceil(x)arrondi supérieur (le plus petit)
n plancher(x) inférieur rond (plus grand) p .tout(obj) retourne une promesse g Générateur()= fonction* () { ... }
n .fround(x) proche de la précision simple p .catch(onRejected(s))= .then(undef,s) METHODS
n .arrondir(x)arrondir (entier le plus proche) p Enfin (onFinish()) exécute toujours le rappel o .next(valeur) retourner objet w/{valeur, terminé}
n .trunc(x) supprime les chiffres fractionnaires p .alors(onFulrempli(v), surRejeté(s)) o .retourner(valeur)retourner valeur & vrai fait
p .course(obj)return promesse avide (res/rej)
Méthodes trigonométriques MÉTHODES HYPERBOLIQUES
.lancer(exception)lancer une erreur
n .acosh(x) p .resolve(obj) retourne une promesse résolue
n .acos(x)arccosinus
n .asinh(x) p .rejeter(raison) retourne une promesse rejetée globaux comprend isFinite, isNaN, parseInt et parseFloat
n .asin(x)arcsine
p .allSettled(obj) retourne tout completfill/rejectMÉTHODES
n .atan(x)arctangent n .atanh(x)
n .cos(x)cosinus n .cosh(x) p Proxy() o évaluer(code JavaScript)
Refléter les mêmes méthodes (pas de fonction)
n .sin(x)sine n .sinh(x) MÉTHODES s encodeURIComponent(URI)= à %3D
n .tan(x)tangent n .tanh(x) o .apply(obj,arg,arglist)trapfunctioncall s décodeURIComponent(URI)%3D à =
n .atan2(x,y)arctangente du quotient x/y o .construct(obj,arglist)piège nouvel opérateur
Autres
o .définirPropriété(obj, prop, desc)
BigInt() =9007199254740992n DÉCLARATIONS DE VARIABLES / CONSTANTES
o .deleteProperty(obj,prop)trap delete
modules var déprécié portée de bloc de variablelet
ES Modules o .enumerate(obj) piège pour...dans
constdéclarer constant (lecture seule)
MÉTHODES o .get(obj, prop, rec) piège pour obtenir une propriété
OPÉRATEURS
import {m1,m2asname} from "./fi[Link]" o .getOwnPropertyDescriptor(obj,prop)
importobjdepuis "./[Link] par défaut o .getPrototypeOf(obj) opérateur de coalescence null
exporter {m1,m2} exporter objs en tant que modules o .has(obj,prop)piège dans l'opérateur ?.chaînageoptionnel
p importer("./fi[Link])importation dynamique o .ownKeys(obj) FAST TIPS
o .preventExtensions(obj) func(a=1) valeur par défaut du paramètre
JSON manipulationdefichierjson o .set(obj,prop,value)piège de propriété définie fonction(..a)argumentderepos(opérateurdediffusion)
MÉTHODES o .setPrototypeOf(obj, proto) (a)=>{...}fonctionfléchée(sansthis)
n .parse(str,tf(k,v))parse chaîne en objet chaîne ${a} modèle avec des variables
n .stringify(obj,repf|wl,sp)convertir en str Symbole()
0bnbinaire (2) nombre en décimal
PROPRIÉTÉS
0onoctal (8) nombre en décimal
e Erreur() s .itérateurspeciitérateur par défaut 0xnhexadécimal (16) nombre en décimal
PROPRIÉTÉS s .matchspecifichiers correspondant à l'expression régulière
pour (iinarray) { ... } itérer le tableau, i = index
s .namereturn name of error s .espèceespècefonction constructeur
pour (eofarray) { ... } itérer tableau, e = valeur
s .messageretour description de l'erreur MÉTHODES
classe B étend A() { } syntaxe de sucre
EvalError(),InternalError(), RangeError(), URIError(),
s .pour(clé)chercher des symboles existants
ReferenceError(),SyntaxError(),TypeError() s .keyFor(sym) retourne la clé de l'enregistrement global [Link]
LANGAGEDEPROGRAMMATION [Link]
Créépar@Manz([Link]
JAVASCRIPT #JOURDELAPROGRAMMATION
fenêtre Objet global du navigateur screen= info about screen / resolution performance= info about performance
PROPRIÉTÉS PROPERTIES PROPRIÉTÉS
b .fermévérifiez si la fenêtre est fermée n .availToptop-de l'espace disponible o .navigationinfo à propos de redir/type nav.
n .devicePixelRatio taille verticale pix n .disponibleGauchegauche-de l'espace disponible o .informationsdechronométrage sur la latence-tâche perf.
b .pleinÉcran vérifier si la fenêtre est en plein écran n .availWidthwidth space available MÉTHODES
n .innerWidthlargeur(ycomprislabarrededéfilement) n .availHeightheight space available n .maintenant()horodatage haute précision
n .innerHeighthauteurtaille(ycomprislabarrededéfilement) n .largeur d'écran résolution
n .outerWidthlargeurtaille(ycomprislenavigateur) n hauteur de l'écran résolution navigator= info about browser
n .outerHeighthauteurtaille(ycomprislenavigateur) n profondeur de couleur de l'écran (bits) PROPERTIES
n .longueurnombredecadres n .profondeurDePixel profondeur de pixel de l'écran (bits)
b .cookieEnabled navigateur cookies activés ?
s nom interne de la fenêtre MÉTHODES n Fonction de non suivi DNT activée ?
s .statusbottom texte de la barre d'état b .lockOrientation(mode|tableaumode) o .geolocationuser-info geolocation
PROPRIÉTÉS D'API/OBJETS b .déverrouillerOrientation() enlever les verrous s .langue langue dans le navigateur
o .applicationCacheoAPI de ressources hors ligne n .maxTouchPointsmax sur l'appareil
o .consoleconsole browser API b .onLinebrowser fonctionne-t-il en mode en ligne ?
console= unoAPI officielle de la console du navigateur
o .cryptographie API MÉTHODES s .userAgent identifier le navigateur de l'utilisateur
o .histoire session page histoire API assert(cond,str1|obj1...) définit une assertion Méthodes
o informations de localisation sur l'API URL .count(str)compte (montre le nombre de fois) n .vibrate(n|pattern)use device vibration
o stockage .localStorage pour le domaine du site .dir(obj) montre l'objet (débogage étendu)
o sessionStoragestorage jusqu'à la fermeture .groupe()ouvrir un nouveau groupe de messages location= info about current URL
o .navigatorinformation sur le navigateur .groupCollapsed()ouvrir un nouveau groupe coll. PROPRIÉTÉS
o .donnéesdeperformancesurlaperformance .groupEnd()fermer le groupe précédent s .href document complet url
SCREEN PROPERTIES .table(array|obj,colnames)afficher table s .protocole[Link]
.trace()afficher la trace du code s .nomdutilisateur[Link]
o .screeninformation about screen
.screenXposition horizontale navigateur / écran s .password[Link]
.timeStamp(str)mettez le temps sur la chronologie
n
s .hôte[Link]
n .screenYvertical pos navigateur/écran MÉTHODES DE PERFORMANCE
s .hostname[Link]
n .pageXOffset pixels horizontaux défilés .profil(nom)démarrer performance profichier
s .port[Link]
n .pageYOffsetpixels verticaux défilés .profilFin(nom)arrêter perf. profichier
s .pathname[Link]
PROPRIÉTÉS DE FENÊTRE .temps(nom)démarrer le chronomètre de performance
s .hash[Link]
o .openerwindowquiaouvertcettefenêtre .timeEnd(nom)arrêter le chronomètre de performance
s .recherche[Link]
o .parentparent de la fenêtre/cadre actuel METHODES DE NIVEAU DE JOURNAL
o objet des paramètres de recherche
o .selfthis window (equal [Link]) .log(str1|obj1...)message de sortie s .originesource origine du document url
o .toptop fenêtre de la fenêtre actuelle/cadre .info(str1|obj1...)sortied'information
METHODS .warn(str1|obj1...)sortiewarning onClick="..."(HTML).onclick =(JS fonction) 'click'(Écouteur)
s .btoa(str)encode string to base64 .error(str1|obj1...)outputerror e events(only popular events)
s .atob(str) décode la chaîne base64 en texte ÉVÉNEMENTS DE SOURIS
.focus() demande d'envoyer la fenêtre au premier plan fenêtre = fonction d'interaction mondiale.
e .onClick e .onDblClick
.blur() retirer le focus de la fenêtre MÉTHODES
e .onMouseDown e .onMouseUp
o .getSelection(id)return Selection object MÉTHODES D'INTERACTION AVEC L'UTILISATEUR
e .onMouseEnter e .onMouseLeave
.postMessage(msg,dst,transf)send .alerte(str) afficher le message (bouton ok) e .surSourisDéplacer e .onMouseOver
o .ouvrir(url,nom,options)ouvrir popup s .prompt(str,def)ask answer to user e e
.surSourisSort .surMolette
.stop() arrêter le chargement de la fenêtre b .confirmer(str) afficher le message (ok, annuler)
ÉVÉNEMENTS DE CLAVIER
[Link](str,case,back,wrap,word,fr,d) e .onKeyDown e .onKeyUp
.print()open print document window history= page history on tab e .onKeyPress
PROPERTIES
MÉTHODES D'ANIMATION ÉVÉNEMENTS DE CHARGEMENT/OBJET
n .requestAnimationFrame(cb(n)) n .longueur nombre de pages dans l'historique
e .onDOMContentLoaded e .onLoad
n .statereturn état pile d'historique supérieur
.cancelAnimationFrame(reqID) e .onAbort e .enErreur
MÉTHODES
TIMER METHODS e .onResize e .surDéfilement
n .setTimeout(f(a...),ms,a...)délayer&exécuter .back()go prev page (same [Link](-1)) e .onBeforeUnload e .onUnload
.forward() aller à la page suivante (identique à .go(1)) ÉVÉNEMENTS DE FORMULAIRE/CHAMPS
.clearTimeout(id)retirer le délai d'attente
n .setInterval(f(a...),ms,a...)exécuter toutes les
.go(n)gonpage (positif ou négatif) e .onBlur e .surFocalisation
.pushState(obj,titre,url)insérer l'état e .onChange e .surEntrée
.clearInterval(id) supprimer l'intervalle .replaceState(obj,titre,url)état repl. e .surInvalide e .onSelect
MÉTHODES D'ÉCRAN
e .onReset e .surSoumettre
.scrollBy(x,y) fait défiler x,y pixels (relatif) storagelocalStorage / sessionStorage ÉVÉNEMENTS D'ANIMATION/TRANSITION
.scrollTo(x,y) fait défiler x,y pixels (absolus) PROPRIÉTÉS e .onDragEnter e .surDragSortie
.déplacerPar(x,y) déplacer la fenêtre de x,y (rel)n longueur nombre d'articles en stockage e .onDragStart e .surFinDeGlissement
.deplacerVers(x,y) deplacer la fenêtre à x,y (absolu)
MÉTHODES e .onDragOver e .onDrag e .onDrop
.resizeBy(x,y)redimensionner la fenêtre de x,y (rel)
s .clé(n) retourne le nom de la clé à la position nÉVÉNEMENTS D'ANIMATION/DE TRANSITION
.resizeTo(w,h) redimensionner la fenêtre à WxXs (abs)
.getItem(clé) retourne la valeur de l'élément clée .onAnimationStart e .onAnimationEnd
MÉTHODES DE FEUILLE DE STYLE
.setItem(clé, valeur) définir ou mettre à jour la eclé
.surAnimationItération e .transitionEnd
o .getComputedStyle(elem, pseudoelem) .removeItem(clé) supprimer l'élément avec la clé
a .matchMedia(mediaq) match CSSMQ .clear()supprimertouslesélémentspourlesiteactuel [Link]
LANGAGE DE PROGRAMMATION [Link]
Créépar@Manz([Link]
JAVASCRIPT #JOURDELAPROGRAMMATION
document = Objet document e Élément() = Objet élément un Attr()= objet Attribut
PROPRIÉTÉS PROPRIÉTÉS PROPRIÉTÉS
s .caractèreSetdocument charset s .accessKey s'il existe, touche de raccourci s .nomnom de l'attribut d'élément
s .compatModequirks ou mode standard o tableau d'attributs d'objetsAttr s valeur de l'attribut élément
s .cookieRetourne tous les cookies doc string o .classListDOMTokenList des classes
s .designModereturn design mode status s ClasseListeNomChaînes en chaîne t DOMTokenList()= Liste de classes
s .dirreturn direction text: "rtl" or "ltr" s .idid chaîne d'élément PROPRIÉTÉS
s .doctypereturn type de document (DTD) s .nomnom chaîne d'élément n longueurnombre d'articles
s .domainretourner document domaine s .tagNameÉlément de balise HTML METHODS
s .documentURIretourner l'URL du document PROPRIÉTÉS DE POSITION, DE TAILLE ET DE DÉFILEMENT
b .contains(item) vérifier si l'élément existe
s .dernièreModification date/heure modifiéefic. n .clientToptop largeur de bord élément .ajouter(élément)ajouter l'élément à la liste
s .origin retour d'origine du document n .clientLeftleft border width element s .item(n) retourne l'élément numéro n
s .readyStateretourne l'état de chargement actuel
n .clientWidthlargeur intérieure élément .remove(item) supprimer item de la liste
s renvoyer la page précédente (référent) n .clientHeight hauteurs intérieures élément b .toggle(item) supprimer l'élément s'il existe, ajouter sinon
s .titleretournerletitredudocument
n .scrollToptop-position dans le document
s .URLretourner URL du document HTML .scrollLeft position gauche dans le document n Nœud() = Élément mineur (élément ou texte)
n
o informations de localisation sur l'URL .scrollWidth largeur de l'élément
n PROPERTIES
PROPRIÉTÉS DES ÉLÉMENTS n .scrollHeight hauteur de l'élément s .baseURI URL de base absolue du nœud
o .élémentActif élément focalisé GET/SET PROPRIÉTÉS DE CODE HTML s .namespaceURInamespace de nœud
o .bodyretour élément de corps s .innerHTML obtenir/définir HTML à l'intérieur de l'élément s .nodeNamename of node
o .currentScriptreturn active script s .outerHTML obtenir/ définir HTML (y compris elem) s .nodeType1=element, 2=text, 9=doc
o .defaultViewRetourfenêtreélément MÉTHODES
s valeur de [Link]
o .documentElementpremier élément (racine) s .préfixnamespace préréparation de nœud
o .closest(selec) ancêtre le plus proche
o .têteretournerélémenttête s texte .textContent du nœud et des enfants
a .getElementsByClassName(class)
o .élémentDéfilantpremier élément défilable. PROPRiÉTÉS DE NAVIGATION
[Link](tag)
PROPRIÉTÉS DU TABLEAU DE DOCUMENTS
o .querySelector(selec)returnpremier élément o .childNodes collection de nœuds enfants
a .ancres tableau d'images éléments a .querySelectorAll(sélect)return elems o .premierEnfantpremiers enfants (inclure le texte)
a .applets tableau d'éléments d'applets b .matches(selec) correspondre à cet élément ? o .dernierEnfant derniers enfants (inclure le texte)
a .embeds tableau d'éléments intégrés .insertAdjacentHTML(posstr,html) o .nextSibling nœud immédiat suivant
untableau des éléments de formulaire Méthodes d'attribut
o .précédentFrère immeuble nœud précédent
a .imagesarray d'éléments d'images o .parentElementélément parent immédiat
a .linksarray of links elements b .hasAttributes() existe-t-il des attributs ?
o .nœudParent immédiat
a .plugins tableau d'éléments de plugins b .hasAttribute(name)existe attribut?
o .ownerDocumentrenvoie document
a .scriptsarray d'éléments de scripts s .getAttribute(nom) renvoie la valeur
MÉTHODES
.removeAttribute(nom) supprimer l'attribut
PROPRIÉTÉS DE FEUILLE DE STYLE
.setAttribute(nom, valeur)set attrib. o .appendChild(nœud) ajouter un nœud à la fin
a .styleSheetsarray of stylefiles elem o .cloneNode(enfant)dupliquer le nœud
METHODES CLIENTRECT (POSITION ET TAILLES)
o .feuilleDeStylePréféréeDéfinirCss o .comparerLaPositionDuDocument(nœud)
o .selectedStyleSheetSetselected css o .getBoundingClientRect() retourne pos.
b .contient(nœud)nœud est un descendant?
a .getClientRects()retourneuntableaudeposition/taille .hasChildNodes() le nœud a des enfants ?
MÉTHODES b
o .adoptNode(nœud) adopter depuis le doc externe Événement()= Événement sur action o .insertBefore(nouveaunœud, nœud)
e
o .créerAttribut(nom)créer objet Attribut b .isDefaultNamespace(nsURI)
PROPRIÉTÉS
o .createDocumentFragment() b .isEqualNode(node)check if are equal
o .createElement(tag) créer l'objet Element b .bubblestrue=bubble, false=captures s .lookupNamespaceURI()ret noms de l'espace.
o .createEvent(type) créer un objet Event b .cancelableevent est annulable ? s .lookupPréfixe()renvoie préréparation pour un ns
o .createRange()create Range object o .currentTargetélément courant .normalize()normaliser-forme enfants
o .createTextNode(text)createTextNode b .defaultPreventedpreventDefault() appel o .removeChild(noeud) supprimer le noeud et retourner
o .enableStyleSheetsForSet(name) n .détailsinformationssupplémentairessurl'événement o .remplacerEnfant(nouveaunoeud, anciennoeud)
o .importNode(noeud, desc)importer copie n .eventPhasecurrent stage (0-3)
o .getElementById(id)trouver l'élément avec l'id b .isUtilisateurDeConfiance action ou dispatché c ChildNode()
a .getElementsByName(nom)w/ nom o .référencecible à l'objet expédié METHODS
o .getSelection(id) retourne un objet de sélectionn .timeStamptime when was created o .remove()supprimer spécifinœud fixe
s type d'événement
r ClientRect() = Coordonnées de l'élément MÉTHODES
p ParentNode()
PROPRIÉTÉS
PROPRIÉTÉS .preventDefault() annuler l'événement
n .toptop coord du rectangle environnant .stopImmediatePropagation() n .childElementCount nombre d'enfants
n .droite coordonnée du rectangle environnant .stopPropagation() empêche d'être appelé o .enfants enfants éléments
n .coord de fond du r environnant. o .premierEnfantElementpremiers enfants élém.
n .gauche coord de la rect autour o .dernierEnfantDernier élément enfant.
t EventTarget (utiliser des éléments)
n .largeur coordonnée du rectangle environnant
Méthodes n NonDocumentTypeChildNode()
n .hauteurcoordonnéedel'entourager.
.addEventListener(ev,cb(ev),capt) PROPERTIES
[Link]
DÉVELOPPEURWEB/STREAMER
.removeEventListener(ev, cb(ev), capt)
b .dispatchEvent(ev)
o .nextElementSiblingprochain élément
o .précédentElementSiblingélément précédent