Et si aujourd’hui, on parlait un peu de l’extension CSS Compatibility Checker pour Visual Studio Code ? Un outil juste dingue qui va vous aider à voir en un clin d’œil si votre code est compatible avec tous les navigateurs. Plus besoin de passer des heures à éplucher la doc ou de croiser les doigts en espérant que ça passe, cette petite merveille va vous changer la vie !

Imaginez un peu le topo : vous êtes tranquillou en train de tapoter votre CSS, vous balancez une propriété backdrop-filter pour flouter votre background avec classe et là bim 💥, l’extension vous remonte direct que c’est pas compatible avec certaines vieilles versions de navigateurs.

Ou alors vous utilisez un mot-clé un peu exotique genre unset et hop, elle vous alerte que c’est potentiellement casse-gueule. C’est ti pas beau ça ?

CSS Compatibility Checker s’adresse donc aux développeurs frontend un peu soucieux de la compatibilité de son code. Je sais, ils ne sont pas nombreux ^^. En un survol de souris, vous avez accès à toutes les infos dont vous avez besoin : si telle syntaxe, fonction ou propriété est dépréciée, non-standard, expérimentale ou pas supportée partout. Et c’est valable pour un tas de versions de navigateurs différentes !

Pour en profiter, vous devrez installer l’extension depuis la marketplace de VS Code , et ensuite il vous suffit d’ouvrir un fichier CSS, SCSS ou LESS et de laisser le curseur survoler l’élément qui vous intéresse. Et là, magie, une petite bulle s’affiche avec toutes les infos de compatibilité. De quoi prendre les bonnes décisions pour votre projet !

Alors certes, CSS Compatibility Checker ne va pas non plus révolutionner le monde du développement web du jour au lendemain mais pour tous ceux qui en ont un peu ras la casquette de se farcir des heures de tests sur 15 versions d’Internet Explorer, c’est définitivement une extension à avoir sous la main. Et puis c’est gratuit et open-source en plus, alors que demande le peuple ?

Merci à Lorenper pour le partage !

— En partenariat avec Penpot —

Aujourd’hui, je vous invite à découvrir avec moi un outil de design que certains d’entre vous connaissent peut-être déjà : Penpot .

Si ce nom ne vous dit rien, ne vous en faites pas, je vais tout reprendre depuis le début et vous montrer pourquoi il est devenu un incontournable pour de nombreux designers et développeurs.

L’outil se présente comme une solution libre et open source que vous pouvez auto-héberger, mais qui est également accessible en ligne via votre navigateur. Conçu pour aider à la conception de designs pour les applications, les sites web et bien plus encore, il s’avère être un outil extrêmement intuitif. En quelques clics, vous placez vos éléments de design, des boutons, des images et d’autres composants, puis vous laissez Penpot générer le rendu du prototype et même le code CSS pour vous. Oui, directement du code CSS à intégrer dans vos projets web sans forcement avoir besoin de maitriser tous les paramètres de CSS.

L’une des grosses mises à jour récente de Penpot c’est son support du « flex layout ». Pour ceux qui ne sont pas familiers avec le terme, le flex layout (ou flexbox) est une norme CSS qui permet aux éléments de s’adapter automatiquement à la taille de l’écran ou de la fenêtre. Imaginez un bouton dont le texte change : au lieu de déborder, avec flexbox, le bouton s’agrandit. Penpot vous permet ainsi de créer des designs responsives, qui s’adaptent à toutes les tailles d’écran.

Evidemment, pour vous faire découvrir tout ça en détails, je vous ai concocté une vidéo tutoriel très détaillée de Flex Layout , pour que vous puissiez bien comprendre son fonctionnement et l’utiliser ensuite dans vos propres projets de sites web ou d’applications mobiles. J’espère que ça vous plaira !

A découvrir ici !

Cet article a été réalisé en collaboration avec O'clock

Abonnez-vous aux newsletters Numerama pour recevoir l’essentiel de l’actualité https://www.numerama.com/newsletter/

Cet article a été réalisé en collaboration avec O'clock

Il s’agit d’un contenu créé par des rédacteurs indépendants au sein de l’entité Humanoid xp. L’équipe éditoriale de Numerama n’a pas participé à sa création. Nous nous engageons auprès de nos lecteurs pour que ces contenus soient intéressants, qualitatifs et correspondent à leurs intérêts.

En savoir plus

Si vous êtes concepteur de site web et que vous partez souvent à la recherche d’inspiration pour votre prochaine création, voici un article qui va vous plaire.

Plutôt que de lancer l’inspecteur web de votre navigateur à chaque fois que vous tombez en émoi devant une magnifique mise en page, il existe un outil formidable qui va totalement changer votre façon de travailler avec les styles CSS et surtout de vous inspirer.

Ça s’appelle Designr et c’est une extension open-source pour Chrome que vous pouvez retrouver gratuitement sur GitHub . Conçue pour inspecter et enregistrer les styles CSS sur les pages web, elle permet aux designers et développeurs web de facilement sauvegarder des références CSS pour une utilisation ultérieure.

Le point fort de Designr réside dans sa simplicité d’utilisation. Une fois l’extension installée, l’icône de Designr apparaît à côté de la barre d’adresse de votre navigateur. En cliquant simplement dessus, vous verrez apparaitre une fenêtre qui vous présentera alors toutes les informations relatives à l’élément CSS sur lequel vous avez cliqué. Vous pourrez alors non seulement consulter en détail les styles présents sur la page, mais aussi les copier, les modifier et les enregistrer selon vos besoins.

Comme un chimiste qui mélange différents éléments pour obtenir la formule parfaite, vous pourrez, à l’aide de Designr, enregistrer les formules CSS que vous glanerez lors de vos séances de surf, pour ensuite les remixer à votre sauce et les utiliser dans vos propres créations.

Plus besoin de se rappeler comment tel site a appliqué telle animation ou comment une palette de couleurs était organisée puisque Designr s’en occupe pour vous.

Pour celles et ceux qui souhaitent installer Designr, voici un petit tuto :

1. Rendez-vous sur la page du projet.
2. Clonez le dépôt sur votre machine en utilisant la commande git clone https://github.com/ANG13T/designr.git (vous pouvez également télécharger le code source sous forme de fichier zip).
3. Une fois le dépôt récupéré, rendez-vous sur la page des extensions de votre navigateur. Par exemple, la page du gestionnaire d’extensions pour Chrome ( chrome://extensions ) qui vous permettra de télécharger l’extension non empaquetée comme ceci : Sur la page du gestionnaire d’extensions, activez le mode développeur, cliquez sur Charger l’extension non empaquetée , et sélectionnez le dossier de l’extension téléchargée.
4. Une fois l’extension installée, allez sur n’importe quel site web.
5. Cliquez sur l’icône Designr dans la barre d’outils pour l’activer.
6. Maintenant, lorsque vous cliquez sur un élément de la page, l’extension affichera les styles CSS associés. Vous pourrez alors copier, modifier et enregistrer ces styles dans votre propre « palette ».

Il ne vous restera plus, en bonne feignasse, qu’à utiliser les ressources CSS sauvegardées pour créer un site web magnifique totalement « inspiré » par le travail des autres !

Amusez-vous bien !

Source