11 conseils pour commencer avec le CSS moderne

Depuis ses débuts à la fin des années 1990, CSS a largement élargi. C'est maintenant une technologie mature et robuste, largement prise en charge par les navigateurs de bureau et mobiles, mais il y a beaucoup à apprendre. Que vous ayez été laissé pour les développements récents ou que vous cherchiez à apprendre le CSS pour la première fois, cette liste de contrôle devrait aider, avec des conseils pratiques, des conseils généraux et des ressources de qualité supérieure.

1

Assurez-vous de connaître le HTML en premier

La première chose que vous devez savoir avant de commencer à apprendre CSS est le HTML. Cela peut sembler évident, mais il y a des concepts importants à consolider avant de plonger dans le style de votre contenu.

Votre parcours d'apprentissage mettra l'accent sur la séparation entre la sémantique (HTML) et le style (CSS). Assurez-vous que vous utilisez un bon balisage propre et déposez toutes les balises HTML stylistiques comme auquel vous pourriez être habitué.

La documentation HTML de Mozilla est excellente (tout comme tous ses matériaux couvrant la plate-forme Web), alors commencez-y si vous n'êtes pas confiant dans votre capacité HTML.

2

Commencez par les bases absolues de CSS

Restez sur le site de Mozilla et plongez dans leur introduction à CSS.

À ce stade, il y a deux éléments clés à apprendre: comment écrire des CS de base et le connecter à vos fichiers HTML. Les documents Mozilla commencent par une simple introduction à CSS en utilisant cet exemple:

Même si vous ne pouvez pas écrire CSS, vous pouvez probablement comprendre ce que fait cet extrait: il rend les éléments H1 rouge et définit une taille de police spécifique.

Le démarrage de Mozilla avec l'article CSS décrit la deuxième partie du puzzle, expliquant comment vous appliquez CSS comme ce qui précède à vos fichiers HTML. Les feuilles de style interne sont probablement le moyen le plus rapide et le plus simple de commencer, mais les feuilles de style externe ont de nombreux avantages, c'est donc une bonne idée d'essayer les deux.

3

Jouer à des jeux

Bien qu'il existe de nombreux grands jeux pour vous aider à apprendre le CSS, ils ont tendance à couvrir des techniques plus avancées comme la mise en page de la grille. CSS Diner est plus approprié pour les débutants, et cela devrait vous aider à comprendre les sélecteurs CSS qui identifient des parties spécifiques de votre document pour le style. L'exemple ci-dessus montre un simple sélecteur «H1», mais ils peuvent devenir beaucoup plus compliqués:

        a#selected > .icon,
.box h2 + p {
    font-weight: bold;
}

    

CSS Speedrun est un autre bon test de vos compétences de sélecteur, bien que – comme le nom le suggère – cela peut être une expérience plus stressante!

Une fois que vous connaissez les bases, vous êtes sur le point de commencer à écrire vos propres feuilles de style. Cependant, vous pouvez commencer à expérimenter CSS directement dans votre navigateur, en évitant la nécessité d'ouvrir un éditeur de texte et de commencer à jouer avec des fichiers.

Par exemple, l'inspecteur d'éléments dans les outils de développeur de Google vous permet de visualiser le CSS qui s'applique à tout sur n'importe quelle page que vous regardez:

De plus, vous pouvez utiliser le panneau Styles pour modifier n'importe quel CSS – ou même créer de nouveaux styles – et voir les résultats en temps réel.

Ces outils fonctionnent légèrement différemment dans chaque navigateur, mais vous devriez pouvoir les utiliser pour renforcer votre apprentissage. Chrome a un excellent support automatique pour suggérer à la fois les noms de propriétés et les valeurs acceptables. Avec l'expérimentation, vous pouvez en apprendre davantage sur diverses propriétés et en savoir plus sur eux via des liens directs vers la documentation du réseau de développeurs Mozilla (MDN):

5

Essayez un éditeur en ligne

Avant d'éclater cet éditeur de texte, il y a une autre façon d'essayer vos compétences CSS sans traiter avec des fichiers locaux. Il existe plusieurs applications Web, comme Codepen ou JSFiddle. Ces outils sont un peu comme certains des jeux que vous avez vus plus tôt, moins la partie du jeu. Ils présentent des zones de texte que vous pouvez utiliser pour modifier HTML et CSS, avec un aperçu montrant le résultat final.

Bien que ces outils incluent généralement une section JavaScript pour que vous puissiez fléchir vos compétences de codage, elle est entièrement facultative. Ignorez simplement toutes les sections «JS» ou «JavaScript» et concentrez-vous à la place sur le HTML et le CSS.

Ces éditeurs incluent des fonctionnalités utiles telles que la mise en évidence de la syntaxe et le formatage de code. JSFiddle a une bonne rapport d'erreur, attirant votre attention sur les valeurs CSS invalides, par exemple. Ils vous permettent également d'enregistrer votre travail pour une utilisation ultérieure, et vous pouvez toujours copier et coller votre HTML ou CSS dans un fichier local si vous souhaitez l'utiliser dans vos propres projets.

6

Utilisez le meilleur matériel de référence

Comme vous l'avez vu, beaucoup de ces ressources font référence au MDN. Cette source d'informations sur la plate-forme Web est de premier ordre et complète; Ce devrait être votre premier port d'appel lorsque vous devez rechercher des détails sur tout problème CSS:

Vous pouvez rencontrer le site W3Schools lors de la recherche de sujets CSS – ou tout autre sujet lié au Web. Le nom du site donne l'impression qu'il est affilié à W3C, les créateurs de normes pour les technologies Web. Mais ce n'est pas le cas; C'est un ensemble de documents d'un tiers. Bien que la qualité se soit améliorée, elle est encore loin d'être parfaite et MDN est une source beaucoup plus fiable.

Il y a une richesse de matériel CSS sur MDN, des tutoriels aux tests interactifs. Tous les aspects du CSS sont couverts, y compris les sélecteurs, le modèle de boîte, les couleurs et le débogage. Chaque propriété CSS a une page de référence correspondante qui vous indique à peu près tout ce que vous devez savoir:

Chaque page de référence de propriété comprend des explications de différentes valeurs, des exemples de comment les utiliser et une table de compatibilité du navigateur. Ce dernier est vital pour distinguer les propriétés bien soutenues et les propriétés plus expérimentales qui ne peuvent fonctionner que dans certains navigateurs spécifiques.

Si vous recherchez une alternative de qualité, les ressources CSS de W3C font autorité. Méfiez-vous, cependant, ils sont loin des débutants et vous ne devriez vraiment les consulter qu'une fois que vous avez épuisé les excellentes informations chez MDN.

7

Se tenir au courant

Bien qu'il s'agisse d'une technologie mature et stable, CSS change toujours. Les membres de diverses organisations continuent de proposer des modifications, des correctifs et de nouvelles fonctionnalités.

En tant que concepteur, votre défi va souvent au-delà de savoir comment faire quelque chose et, plutôt, se concentre sur ce que vous pouvez réellement réellement réellement. Vous pouvez modifier la couleur du texte, mais pouvez-vous modifier son contour, ou pouvez-vous utiliser un dégradé au lieu d'une couleur?

Pour rester à la pointe et répondre à ce genre de questions, vous devriez trouver une bonne source de nouvelles CSS, qu'il s'agisse d'un podcast, d'un blog ou d'un compte de médias sociaux particulièrement compétent.

CSS-Tricks est l'une des meilleures sources de nouvelles de CSS de pointe. Il présente des articles sur tous les aspects de CSS et possède également un excellent matériau de référence, en particulier sur des fonctionnalités comme Flexbox et Grid.

Le podcast CSS est une émission saisonnière qui se déroule maintenant depuis cinq ans. Ses deux co-hôtes sont suffisamment engageants pour pouvoir plonger dans les détails de CSS sans rendre le sujet trop sec ou inaccessible.

Le Dr Lea Verou, un expert de l'industrie, publie régulièrement sur X sur CSS et la plate-forme Web. Jen Simmons travaille pour Apple sur le navigateur Safari et publie sur Bluesky sur les problèmes CSS. Le compte du groupe de travail CSS est aussi officiel que possible. Il ne publie qu'occasionnellement, pour promouvoir les mises à jour des spécifications et autres articles pertinents de W3.org, mais le suivre est un excellent moyen de suivre les développements de saignement.

8

Valider votre CSS

Maintenant que vous créez des feuilles de style par la douzaine, il est sage de vous assurer qu'ils sont sans erreur. Les erreurs dans CSS peuvent facilement se cacher et sont notoirement difficiles à déboguer, alors assurez-vous d'obtenir toute l'aide que vous pouvez.

Le validateur W3C est depuis longtemps l'étalon-or dans la vérification des erreurs CSS. Vous pouvez fournir une URL, un fichier ou une copie de texte de vos styles pour vérifier leur validité.

Si vos feuilles de style sont sans erreur, vous verrez un message amical de félicitations et un badge que vous pouvez utiliser sur vos pages Web pour annoncer leur exactitude. Il n'est plus de rigueur de les afficher, mais vous êtes les bienvenus si vous souhaitez montrer vos compétences sur un portefeuille ou un site Web personnel.

Si, en revanche, il y a des problèmes avec votre style, le validateur affichera des messages d'erreur détaillés les expliquant. Comme la plupart des erreurs, ils peuvent être difficiles à comprendre si vous ne les connaissez pas, alors passez en revue le code affecté pour déterminer ce qui ne va pas avant de tenter de le réparer.

9

Vérifier la compatibilité du navigateur

Un autre aspect important de l'exactitude des feuilles de style est la compatibilité du navigateur. C'est beaucoup moins un problème qu'autrefois, mais des mises à jour plus récentes de CSS – y compris les fonctionnalités expérimentales – ne sont pas toujours largement prises en charge. Heureusement, Caniuse vous dira exactement quelles propriétés CSS fonctionneront dans chaque navigateur.

Les informations ici sont denses, mais présentées d'une manière facile à consommer. Vous devrez décider quels navigateurs vous êtes prêt à soutenir, y compris la vie antérieure d'Edge en tant qu'Internet Explorer et la distinction mobile / bureau. La bonne nouvelle est que la plupart des CSS sont facultatifs et que vous pouvez concevoir vos pages afin qu'elles se dégradent gracieusement si elles sont vues sur des navigateurs non soutenus.

10

Typographie Master CSS

Élément important de toute conception, la typographie n'a pas été prise trop au sérieux sur le Web avant l'arrivée des polices CSS. La langue a toujours été flexible, soutenant une pile de polices qui vous permet d'exprimer un ordre préféré de polices à utiliser, selon ce qui est disponible. Mais de vraies polices Web vous donnent plus de contrôle de l'expérience et laissez tous les téléspectateurs voir votre police même s'ils ne l'ont pas installé.

Google Fonts est l'un des meilleurs fournisseurs de polices gratuites et la sélection disponible est vaste: près de 2 000 familles de polices au moment de la rédaction du présent document.

Il existe de nombreuses variations et configurations disponibles, de différents poids à la prise en charge multiple et des polices d'icônes. Une fois que vous avez personnalisé une police à votre goût, copiez simplement le code intégré et ajoutez-le à votre HTML. Alternativement, vous pouvez télécharger les fichiers de police et les héberger localement si vous préférez.