5 projets pour vous aider à maîtriser les CSS modernes –

Beaucoup prétendent que CSS n'est pas un langage de programmation. Je suis d'accord – c'est plus difficile . Une maîtrise du CSS requiert des compétences en conception, détermination, inventivité, expérience, ainsi qu'en codage (en particulier lors de l'utilisation de préprocesseurs tels que Sass ).

CSS suggère des dispositions et des styles pour le navigateur. Un navigateur peut interpréter ces suggestions de la manière qu'il choisit et, même dans ce cas, l'utilisateur ou l'appareil peut ignorer ou remplacer toutes les propriétés. La création de code haute performance qui fonctionne bien sur tous les appareils et toutes les résolutions d'écran est un défi que peu tentent ou réussissent. Cependant, les récompenses peuvent être exaltantes.

Commençant par les plus simples, les suggestions de projets suivantes vous aideront dans votre cheminement vers la maîtrise CSS en utilisant les livres disponibles sur SitePoint Premium .

1. Rendre un site imprimable

Visitez un site sur lequel vous travaillez et essayez d'imprimer (ou de prévisualiser) une page. Êtes-vous satisfait des résultats?

Les pages HTML sont un support continu qui ne fonctionne pas nécessairement bien sur les supports imprimés.

Heureusement, le CSS d'impression peut être développé en quelques heures.

Heureusement, le CSS d'impression peut être développé en quelques heures. Il s'agit généralement de réinitialiser les styles (noir sur blanc), de supprimer les sections inutiles (menus, images de héros, formulaires, widgets de médias sociaux, etc.), de linéariser la mise en page et de réduire les besoins en papier et en encre.

Plongez dans Outils de développement basés sur navigateur (à partir de CSS Master ) et Browser DevTool Secrets pour découvrir comment examiner et modifier les styles après le passage au rendu d'impression.

L'application conditionnelle de CSS décrit comment définir les règles de requête @media y compris les feuilles de style print .

Considérez votre Guide stratégique des propriétés personnalisées CSS (à partir de New Frontiers In Web Design ) pour déterminer si les variables CSS pourraient aider avec les propriétés d'impression. Envisagez également Accessibilité (à partir de Animation CSS 101 ) pour désactiver les animations ou les imprimer dans le meilleur état.

Enfin, Comment créer des pages imprimables avec CSS (de Outils et compétences CSS ) fournit un didacticiel complet d'optimisation d'impression avec des conseils pour économiser les coûts d'encre et de papier.

2. Appliquer Theming à un site existant

Un jeu de couleurs unique est ennuyeux! Tout le monde attend une option de mode sombre dans son système d'exploitation et ses applications, alors pourquoi ne pas en ajouter une à votre site Web?

Jusqu'à récemment, les commutateurs de thème nécessitaient généralement un ensemble supplémentaire de styles avec des commandes de commutation alimentées par JavaScript. Cependant, les navigateurs modernes facilitent la vie avec les propriétés personnalisées CSS (variables) et la règle préfère le jeu de couleurs @media .

Stratégies pour les thèmes (à partir de [1945902020] ] New Frontiers in Web Design ) fournit un éventail d'idées et de considérations lors de la conception de votre nouveau thème.

Application conditionnelle de CSS (de CSS Master ) décrit comment définir @media règles de requête, y compris préfère le jeu de couleurs .

. Enfin, CSS moderne: ajout d'un thème sombre CSS (extrait de CSS moderne ) fournit un didacticiel complet permettant d'activer le thème sombre.

3. Retravailler une disposition de formulaire

Examinez un formulaire sur votre site Web, tel qu'un formulaire de demande ou d'inscription. À moins qu'il n'ait été codé assez récemment, il est susceptible d'être implémenté avec des DIVs de conteneurs et des dispositions basées sur des flottants qui peuvent éventuellement se briser sur des écrans plus petits.

Un formulaire d'enregistrement (de Pattern Design Patterns ) décrit les meilleures façons de concevoir, styliser et coder un formulaire à l'aide de HTML5. .

CSS Grid vous permet d'éradiquer le balisage inutile et de créer des mises en page réactives à l'épreuve des balles sans recourir à des requêtes multimédias. Les didacticiels CSS Grid suivants vous permettront de vous familiariser:

Enfin, Rendre les formulaires parfaits avec CSS Grid (extrait de CSS Grid Layout ) fournit un didacticiel complet qui fournit une grille- mise en page de formulaire basée sur des replis flottants pour les navigateurs plus anciens.

4. Rendez votre site plus rapide

Au début de 2020, la page Web moyenne nécessite un téléchargement de 2 Mo qui prend 20 secondes pour s'afficher pleinement sur un appareil mobile moyen. CSS représente 65 Ko répartis sur sept fichiers. Cela peut ne pas sembler significatif, mais les propriétés des feuilles de style peuvent faire la différence.

Passez quelques heures à examiner votre site existant pour déterminer s'il est possible de remplacer ou d'optimiser des images, des polices et des effets JavaScript avec des CSS plus efficaces. Votre code CSS peut augmenter, mais le poids global diminuera et les performances s'amélioreront sensiblement.

Outils de test (à partir de Jump Start Web Performance ) et Débogage pour la réactivité de l'interface utilisateur (à partir de CSS Master ) explique comment utiliser les navigateurs modernes DevTools pour évaluer les performances et découvrir des cibles d'optimisation.

Chargement des ressources sur le Web (à partir de New Frontiers In Web Design ) décrit comment utiliser des techniques telles que le CSS critique et le chargement CSS progressif pour garantir que les feuilles de style sont chargées efficacement. 20 conseils pour optimiser les performances CSS (de CSS moderne ) fournit une sélection de conseils pratiques.

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

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

Les suggestions de projet ci-dessus peuvent être utilisées pour améliorer un site existant, mais il n'y a aucune limitation ou contrainte lors du démarrage d'un nouveau projet à partir de zéro. Options à considérer:

1. Créez un CV en ligne . Des points bonus pour garantir sa réactivité, sa bonne impression et l'encodage de tous les éléments dans un seul fichier HTML pouvant être envoyé par e-mail. (Astuce: évitez d'ajouter JavaScript pour vous assurer qu'il ne sera pas bloqué par les systèmes de messagerie.)
2. Créez un portfolio interactif . Une liste graphique de tous vos sites avec des informations supplémentaires lorsqu'un élément est cliqué. Une disposition en grille est idéale mais, si vous voulez vraiment relever un défi, essayez une disposition en maçonnerie . (CSS Grid ne peut pas encore implémenter cela, mais réfléchissez à la façon dont cela pourrait être réalisé en utilisant des colonnes CSS ou une disposition de grille ordonnée verticalement.)
3. Codez une conception graphique . Choisissez peut-être une idée attrayante parmi Dribbble ou une communauté de conception similaire et codez HTML5 et CSS3. Points bonus pour le créer sans framework ni JavaScript!
4. Créez des images CSS uniquement . Créez un ensemble d'icônes utiles alimentées par des pseudo-éléments et des formes CSS, ou créez une image en utilisant des dégradés et des ombres.
5. Expérimentez avec les animations SVG et CSS . Essayez de créer des logos, des graphiques, des barres de progression, des filateurs d'activité attrayants, etc.

Outils de développement et de navigateur:

Idées de grille CSS:

Techniques CSS réactives:

Transitions et animations CSS:

Combinaison CSS avec SVG:

Maintenant, arrêtez de lire et commencez à coder!

Craig est un consultant Web indépendant au Royaume-Uni qui a créé sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et les meilleures pratiques Techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et des organisations, notamment le Parlement britannique, le Parlement européen, le Département de l'énergie et du changement climatique, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .