Outils HTML, CSS et JavaScript
Ces outils couvrent le quotidien du développement front : mettre en forme ou compacter HTML, CSS, JS, JSX, TS et TSX en repérant les erreurs de syntaxe, dessiner une mise en page Grid ou Flexbox avec un aperçu du rendu mobile, ou convertir entre HTML, Markdown et entités HTML. Côté visuel, on y trouve les générateurs de dégradés, d'ombres, de clip-path et de courbes cubic-bezier avec rendu en direct.
Le calculateur de spécificité CSS compare les scores A-B-C de plusieurs sélecteurs et montre le rôle particulier de :is() et :where(), qui n'ajoutent pas de spécificité contrairement à ce qu'on croit souvent. Le générateur de mise en page Grid/Flexbox laisse dessiner visuellement la grille avant de prévisualiser son rendu mobile. Tout se calcule dans le navigateur.
12 outils
Formater HTML, CSS et JS
-
Formateur HTML et vérification
Indenter du HTML exporté tout en préservant espaces du contenu textuel
-
Formateur CSS
Mettez en forme, compactez et diagnostiquez votre CSS côté à côté
-
Formateur JavaScript et TypeScript
Mettez en forme JS, JSX, TS, TSX avec retraits et guillemets
-
Convertisseur HTML et Markdown
Convertissez HTML et Markdown en conservant titres, liens, code et tableaux GFM sans perte
-
encodeur d’entités HTML
Encoder les entités HTML en noms, décimal ou représentation hexadécimale
Grid, Flexbox et responsive
-
Mise en page CSS Grid / Flexbox
Dessinez vos Grid et Flexbox, prévisualisez le rendu mobile
-
Unités CSS responsives et clamp
Convertissez unités CSS et générez des expressions clamp() responsives
-
Calculateur de spécificité CSS
Comparez les scores A-B-C de vos sélecteurs CSS et le rôle de :is() et :where()
Dégradés, effets et courbes
-
générateur de dégradé CSS
Créer les gradients CSS visuellement avec éditeur interactif
-
Générateur CSS
Superposez ombres, bordures, transformations et filtres CSS avec aperçu en direct
-
Générateur de clip-path CSS
Créer des clip-path CSS en déplaçant les sommets du polygone visuellement
-
Générateur cubic-bezier
Construire une courbe cubic-bezier et voir le mouvement en temps réel
FAQ des outils HTML / CSS Dev Tools
Le calculateur de spécificité CSS décompose un sélecteur en son score A-B-C, correspondant aux identifiants, classes/attributs et éléments, ce qui permet de comparer directement deux règles pour comprendre laquelle l'emportera dans la cascade en cas de conflit.
:is() prend la spécificité de son argument le plus fort, tandis que :where() n'ajoute jamais aucune spécificité, ce qui le rend utile pour des styles faciles à surcharger. Le calculateur de spécificité CSS affiche ce comportement pour vos propres sélecteurs.
Le générateur cubic-bezier permet de placer les points de contrôle visuellement et de voir le mouvement résultant en temps réel, plutôt que de deviner les quatre valeurs numériques d'un timing-function à l'aveugle sans retour visuel immédiat.