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
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.
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.
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:
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 âgés.
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.
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:
OUTILS DE DÉVELOPPEMENT ET DE NUSSER:
CSS Grid Concept:
Technologie CSS réactive:
transition et animation CSS:
Utilisez CSS avec SVG:
Arrêtez de lire maintenant et commencez à coder!
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.
Améliorez vos compétences de codage CSS grâce à 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.
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.
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.
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.
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.
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.
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.
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.
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!
Solution d'erreur 3004 inconnue
Comment vérifier la mémoire vidéo de Win11
Comment commenter le code en HTML
Comment importer un ancien téléphone dans un nouveau téléphone à partir d'un téléphone mobile Huawei
Commandes communes OGG
Pilote de carte son pour ordinateur portable HP
mot en ppt
Comment utiliser le groupe par
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
