Tester un bloc HTML/CSS sur plusieurs tailles
Collez un extrait HTML et son CSS associé pour vérifier instantanément son rendu sur mobile, tablette et desktop, dans un cadre isolé (iframe sandboxée) qui ne peut pas exécuter de script ni accéder à votre page.
Comment ça marche
Le HTML et le CSS que vous saisissez sont assemblés dans un mini-document autonome, injecté dans une balise <iframe> via l'attribut srcdoc. Cette iframe est en mode « sandbox », c'est-à-dire isolée du reste de la page : elle ne peut pas exécuter de script (aucun <script> n'est autorisé), ni accéder au reste du site, ce qui protège contre tout risque d'injection malveillante depuis le contenu collé. Choisissez un format prédéfini (mobile, tablette, desktop) ou saisissez une largeur et une hauteur personnalisées pour observer le comportement responsive de votre bloc.
Le JavaScript est-il exécuté dans l'aperçu ?
Non, volontairement : l'iframe est en sandbox sans l'autorisation allow-scripts, donc tout <script> présent dans le HTML collé sera ignoré. Seuls le rendu HTML et l'application du CSS sont prévisualisés.
Puis-je tester des media queries CSS ?
Oui : les règles @media incluses dans votre CSS s'appliquent normalement en fonction de la largeur définie pour l'aperçu (préréglage ou valeur personnalisée), exactement comme dans un vrai navigateur redimensionné.
Votre HTML et votre CSS ne sont jamais envoyés à un serveur : le rendu est généré entièrement dans votre navigateur, localement.