Beaucoup de gens pensent que CSS n'est pas un langage de programmation, et je suis d'accord - il est plus difficile de ma?triser. La ma?trise du CSS nécessite la capacité de conception, la détermination, la créativité, l'expérience et les compétences de codage (en particulier lors de l'utilisation de préprocesseurs tels que SASS).

CSS suggère disposition et style au navigateur. Le navigateur peut expliquer ces suggestions à volonté, et même les utilisateurs ou les appareils peuvent ignorer ou écraser tous les attributs. La création de code haute performance qui fonctionne bien sur tous les appareils et résolutions d'écran est un défi et peu de gens essaient ou réussissent avec succès. Cependant, les récompenses peuvent être excitantes.

De la manière la plus simple de commencer, les suggestions de projet suivantes vous aideront à vous lancer dans le chemin de ma?trise CSS avec les livres fournis par SitePoint Premium.

Points clés

La ma?trise du CSS nécessite des capacités de conception, de détermination, de créativité, d'expérience et de codage. La création de code haute performance qui fonctionne bien sur tous les appareils et résolutions d'écran peut être difficile, mais les récompenses peuvent être passionnantes.
Cinq projets qui peuvent aider à améliorer les compétences CSS, notamment la facilité des sites Web plus faciles à imprimer, l'application des thèmes CSS modernes aux sites Web existants, la refonte des dispositions de formulaires, l'augmentation de la vitesse du site Web et le démarrage d'un nouveau projet ou d'un composant CSS à partir de zéro.
L'utilisation d'outils de développeur de navigateur moderne peut aider à évaluer les performances et à découvrir des objectifs d'optimisation. Des techniques telles que le CSS critique et le chargement CSS progressif garantissent que les feuilles de style sont chargées efficacement.
La ma?trise des projets CSS modernes nécessite de comprendre les bases du CSS et les meilleures pratiques, y compris l'utilisation de réinitialisations CSS, les approches mobiles pour la conception réactive, les préprocesseurs CSS comme SASS, CSS Grid et Flexbox, et garder CSS organisé et ajouter de bons commentaires.

1. Rendez le site Web plus facile à imprimer

Obtenez le site Web sur lequel vous travaillez et essayez d'imprimer (ou d'imprimer une page d'aper?u). êtes-vous satisfait des résultats?

Les pages HTML sont des supports continus et ne fonctionnent pas nécessairement bien sur l'imprimerie. Les chapitres inappropriés, la mise à l'échelle, la taille du texte, la taille de la colonne et le contenu manquant ou recadré peuvent tous conduire à un mauvais accès aux expériences d'impression, et peu de développeurs considéreront ce problème.

Heureusement, l'impression CSS peut être développée en quelques heures. Il s'agit généralement de réinitialiser les styles (texte blanc sur le noir), de supprimer des chapitres inutiles (menu, des images de héros, des formes, des widgets de médias sociaux, etc.), des dispositions linéaires et de la réduction de l'utilisation du papier et de l'encre.

Creusez dans les outils de développeur basés sur le navigateur (à partir de CSS Master) et le navigateur Devtool secrets pour apprendre à vérifier et à modifier les styles après le passage à l'impression.

L'application de CSS conditionnellement (du ma?tre CSS) décrit comment définir les règles de requête @media, y compris les feuilles de style d'impression.

Considérons votre guide de stratégie sur les propriétés personnalisées CSS (à partir de nouvelles frontières dans la conception Web) pour déterminer si les variables CSS peuvent aider avec les propriétés d'impression. Considérez également l'accessibilité (à partir de l'animation CSS 101) pour désactiver les animations ou les imprimer au mieux.

Enfin, comment créer des pages conviviales avec CSS (à partir des outils et compétences CSS) fournit un tutoriel complet d'optimisation d'impression avec des conseils pour économiser des co?ts d'encre et de papier.

2. Appliquer les thèmes CSS modernes aux sites Web existants

Une palette de couleurs unique est ennuyeuse! Tout le monde s'attend à des options de mode noir dans ses systèmes d'exploitation et ses applications, alors pourquoi ne pas en ajouter un à votre site Web?

Jusqu'à récemment, les commutateurs de thème nécessitaient souvent un ensemble supplémentaire de styles et de commandes d'interrupteur JavaScript. Cependant, les navigateurs modernes utilisent des propriétés personnalisées CSS (variables) et des règles prefers-color-scheme @media pour faciliter la vie.

Stratégies pour le thème (des nouvelles frontières dans la conception Web) fournit une gamme d'idées et de notes lors de la conception de nouveaux thèmes.

L'application de CSS conditionnellement (du ma?tre CSS) décrit comment définir les règles de requête @media, y compris prefers-color-scheme.

Enfin, le CSS moderne: l'ajout d'un thème sombre CSS (du CSS moderne) fournit un tutoriel complet sur l'activation des thèmes sombres.

3. repenser la disposition du formulaire

Vérifiez les formulaires de votre site Web, tels que des formulaires de requête ou d'inscription. à moins qu'il ne soit récemment codé, il est susceptible d'être mis en ?uvre à l'aide de DIV Container et de dispositions flottantes qui peuvent se casser sur des écrans plus petits. Les formulaires plus anciens peuvent utiliser JavaScript inutile ou avoir une mauvaise accessibilité.

Un formulaire d'enregistrement (à partir de modèles de conception de formulaire) décrit la meilleure fa?on de concevoir, de style et de codent les formulaires à l'aide de HTML5.

La grille CSS vous permet d'éliminer les balises inutiles et de créer une disposition pare-balles et réactive sans utiliser de requêtes multimédias. Le tutoriel CSS Grid suivant vous aidera à démarrer rapidement:

• Disposages de grille CSS prêts pour la production (à partir de nouvelles frontières dans la conception Web)
• Création de dispositions avec la grille CSS (de Master CSS) et
• "Disposition de la grille CSS" (de "Jump Start Reactive Web Design")

Enfin, Make Forms Great avec CSS Grid (à partir de la disposition de la grille CSS) fournit un tutoriel complet qui fournit une disposition de formulaire basée sur la grille et des bases flottantes pour les navigateurs plus agés.

4. Améliorer la vitesse du site Web

Au début de 2020, la page Web moyenne a nécessité 2 Mo de téléchargements, ce qui a pris 20 secondes pour afficher pleinement sur un appareil mobile ordinaire. CSS représente 65 Ko et est distribué dans sept fichiers. Cela ne semble pas avoir d'importance, mais les propriétés des feuilles de style ont un impact.

Passez quelques heures pour vérifier votre site Web existant pour déterminer si vous pouvez remplacer ou optimiser les images, les polices et les effets JavaScript par des CSS plus efficaces. Votre code CSS peut augmenter, mais le poids global baissera et les performances seront considérablement améliorées.

Les outils de test (à partir des performances Web de Jump Start) et le débogage de la réactivité de l'interface utilisateur (de CSS Master) expliquent comment utiliser les outils de développeur de navigateur moderne pour évaluer les performances et découvrir les objectifs d'optimisation.

Chargement des actifs sur le Web (à partir de nouvelles frontières dans la conception Web) décrit comment utiliser des technologies telles que le CSS critique et le chargement CSS progressif pour s'assurer que les feuilles de style sont chargées efficacement. 20 conseils pour optimiser les performances CSS (du CSS moderne) fournit quelques conseils pratiques.

Enfin, Jump Start WEB Performance contient des dizaines de suggestions de développement rapides, plus profondes et qui changent la vie pour vous assurer que votre site Web reste rapide pour tout le monde.

5. Démarrer un nouveau projet ou un composant CSS

Les recommandations de projet ci-dessus peuvent être utilisées pour améliorer les sites Web existants, mais il n'y a pas de restrictions ou de contraintes lors du démarrage d'un nouveau projet à partir de zéro. Options à considérer:

1. Créer un CV en ligne. Points supplémentaires: assurez-vous qu'il est réactif, imprime bien et code toutes les ressources dans un seul fichier HTML qui peut être envoyé par e-mail. (Conseil: évitez d'ajouter JavaScript pour vous assurer qu'il n'est pas bloqué par le système de messagerie.)
2. Créez un portefeuille interactif. Une liste graphique de tous les sites Web, des informations supplémentaires seront affichées lors du clic sur un élément. Les dispositions de grille sont idéales, mais si vous voulez vraiment la défier, essayez les dispositions de ma?onnerie. (La grille CSS n'est pas encore en mesure d'y parvenir, mais considérez comment procéder à l'aide de colonnes CSS ou de disposition de grille triée verticalement.)
3. CODING Graphic Design. Vous pouvez peut-être choisir une idée attrayante de Dribbble ou une communauté de conception similaire et la coder en utilisant HTML5 et CSS3. Points supplémentaires: créez-le sans framework ou javascript!
4. Créer des images CSS uniquement. Créez un ensemble utile d'ic?nes à l'aide de pseudo-éléments et de formes CSS, ou créez une image avec des gradients et des ombres.
5. Essayez les animations SVG et CSS. Essayez de créer des logos, des graphiques, des barres de progression attrayantes, des filateurs d'activité, etc.

OUTILS DE DéVELOPPEMENT ET DE NUSSER:

• 《Le DOM, CSS et Animations》 (de "Browser Devtool Secrets")
• "Comment utiliser Gulp.js pour automatiser vos taches CSS" (de "CSS: Tools & Skills")
• 《Jump start sass》
• "Débogage et optimisation CSS: outils de qualité de code" (à partir de "CSS: Tools & Skills")
• "Débogage et optimisation du CSS: outils du développeur" (à partir de "CSS: Tools & Skills")
• 《Régimes qui changent la vie》 (à partir des performances Web de Jump Start)
• 《Code Visual Studio: outils d'édition et de débogage de bout en bout pour les développeurs Web》

CSS Grid Concept:

• 《Redesignage d'un site pour utiliser la disposition de la grille CSS》 (de "CSS Grid Layout")
• "Disposition de grille CSS moderne facile et réactive" (de "CSS Grid Layout")
• Amélioration progressive des dispositions CSS des flotteurs à Flexbox à la grille》 (à partir de la disposition de la grille CSS)
• 《Redisant une disposition Tumblr basée sur la carte avec la grille CSS》 (à partir de "CSS Grid Dayout")
• de meilleures structures réactives avec des systèmes de grille (à partir de la conception Web réactive du démarrage)

Technologie CSS réactive:

• 《14 techniques CSS réactives essentielles》
• 《Conception réactive》
• 《Jump Démarrer la conception Web réactive》

transition et animation CSS:

• 《Animation CSS 101》
• "Transitions et animations" (de "CSS Master")
• 《Utilisation des transformations CSS dans le monde réel》 (à partir de CSS moderne)

Utilisez CSS avec SVG:

• "Animer SVG" (de "SVG pratique")
• 《Utilisation de CSS avec SVG》 (de "CSS Master")
• 《Utilisation du monde réel de CSS avec SVG》 (du CSS moderne)

Arrêtez de lire maintenant et commencez à coder!

FAQ sur la ma?trise des projets CSS modernes (FAQ)

Quelles sont les meilleures pratiques pour ma?triser les projets CSS modernes?

La ma?trise des projets CSS modernes nécessite une bonne compréhension des bases du CSS et des meilleures pratiques. Il s'agit notamment de l'utilisation de la réinitialisation CSS pour assurer la cohérence entre les différents navigateurs, l'utilisation d'une approche axée sur le mobile pour une conception réactive et l'utilisation de préprocesseurs CSS comme SASS ou moins pour rendre votre CSS plus facile à maintenir. De plus, la compréhension de CSS Grid et Flexbox peut vous aider à créer des dispositions complexes avec moins de code. Enfin, garder votre CSS organisé et ajouter de bons commentaires peut faciliter la compréhension de votre code.

Comment améliorer mes compétences de codage CSS?

Améliorez vos compétences de codage CSS grace à une pratique continue et à l'apprentissage. Comprenez d'abord les bases du CSS, puis passez progressivement à des sujets plus avancés. Les tutoriels en ligne, les défis de codage et les projets open source peuvent offrir une expérience pratique. De plus, suivre les experts de l'industrie et rejoindre la communauté CSS peut vous aider à conna?tre les dernières tendances et technologies.

Quels sont les défis courants que vous rencontrez lors de l'utilisation de CSS? Comment surmonter ces défis?

Certains défis courants lors de l'utilisation de CSS incluent la manipulation des incohérences du navigateur, la compréhension des modèles de bo?tes et la gestion des dispositions complexes. Cela peut être surmonté en réinitialisant ou en normalisant avec CSS, en comprenant les propriétés box-sizing et en disposition à l'aide de la grille CSS ou de Flexbox. De plus, l'utilisation d'un préprocesseur CSS peut aider à gérer de grands fichiers CSS et à rendre votre code plus facile à maintenir.

Comment créer une conception réactive à l'aide de CSS?

Des conceptions réactives peuvent être créées à l'aide de CSS en utilisant des requêtes multimédias, qui vous permettent d'appliquer différents styles pour différentes tailles d'écran. De plus, la grille CSS et Flexbox peuvent être utilisées pour créer des dispositions flexibles qui correspondent à la taille de l'écran. L'approche mobile axée sur le mobile (à commencer par la plus petite taille d'écran et à ajouter progressivement des styles à des écrans plus grands) peut également aider à créer des conceptions réactives efficaces.

Quelles techniques CSS avancées dois-je apprendre?

Certaines techniques CSS avancées que vous devez apprendre comprennent les animations et transitions CSS, les variables CSS et les propriétés personnalisées CSS. De plus, comprendre comment utiliser les pseudo-éléments et les pseudo-classes peut vous aider à créer des styles plus complexes. Il est également avantageux d'apprendre des préprocesseurs CSS comme Sass ou moins.

Comment optimiser mon CSS pour de meilleures performances?

CSS peut être optimisé pour de meilleures performances en minimisant le nombre de CSS utilisés, en utilisant des propriétés scolaristes et en réduisant l'utilisation de propriétés CSS co?teuses. De plus, l'utilisation d'un compresseur CSS peut aider à réduire la taille du fichier du CSS, accélérant ainsi le temps de chargement.

Quelles sont les ressources pour apprendre CSS avancé?

Il existe de nombreuses ressources en ligne pour apprendre le CSS avancé, y compris les tutoriels en ligne, les défis de codage et la documentation. Des sites Web tels que CSS-Tricks, MDN Web Docs et Smashing Magazine fournissent des articles et des guides approfondis sur une variété de sujets CSS. De plus, se concentrer sur les experts de l'industrie et rejoindre la communauté CSS peut fournir des informations précieuses et des opportunités d'apprentissage.

Comment déboguer les problèmes CSS?

Vous pouvez utiliser des outils de développeur de navigateur pour déboguer les problèmes CSS, qui vous permettent de vérifier les éléments, de visualiser le style de votre application et d'expérimenter différents styles en temps réel. De plus, la compréhension des cascades, de la spécificité et de l'héritage CSS peut vous aider à comprendre pourquoi certains styles ne sont pas appliqués comme prévu.

Comment garder CSS organisé et facile à entretenir?

CSS peut être maintenu organisé et facile à maintenir en suivant les conventions de dénomination cohérentes, en utilisant des commentaires pour décrire votre code et en organisant CSS en pièces logiques ou en fichiers séparés. De plus, l'utilisation d'un préprocesseur CSS peut aider à gérer de grands fichiers CSS et à rendre votre code plus facile à maintenir.

Quel est le r?le du CSS dans le développement Web?

CSS joue un r?le crucial dans le développement Web en contr?lant l'apparence et la sensation d'un site Web. Il vous permet d'appliquer des styles aux éléments HTML, de créer des conceptions réactives et même de créer des animations et des transitions. Sans CSS, les pages Web seront simples et sans styles, ce qui en fait un outil important pour tout développeur Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!