Vidéo: (16/44) Adding Image Placeholders and the YUI CSS Reset - UCLA Extension 2025
Le langage CSS est flexible, puissant et cohérent. Cependant, ce n'est pas parfait. Deux idées circulent dans la communauté de développement Web / CSS que vous pourriez trouver intéressante.
Le premier concept s'appelle les CSS reset styles . Il s'agit d'un document CSS spécial qui définit explicitement les spécifications de mise en page pour chaque élément, en remplaçant les valeurs par défaut du navigateur. L'idée est d'intégrer d'abord le style de réinitialisation, puis d'ajouter votre propre feuille de style CSS. Cela élimine théoriquement les paramètres par défaut du navigateur, rendant tous les navigateurs de la même manière.
La réinitialisation CSS la plus utilisée a été publiée dans le domaine public par Eric Meyer, et peut être trouvée sur meyerweb. com.
Un certain nombre d'autres outils de réinitialisation CSS sont disponibles en ligne et sont souvent inclus dans les frameworks Web. Les réinitialisations CSS ont été très populaires pendant un certain temps, mais elles ne sont pas utilisées universellement. Il y a deux raisons principales pour cela. Les navigateurs modernes font généralement un bien meilleur travail d'affichage du contenu que par le passé.
De plus, les développeurs s'entendent de plus en plus sur le fait que la duplication au pixel près n'est pas vraiment un objectif important et que les navigateurs devraient avoir une certaine flexibilité pour afficher du contenu.
Les réinitialisations CSS sont une bonne idée lorsque vous voulez vraiment être certain qu'un style CSS est le même pour plusieurs navigateurs, ce qui n'est peut-être pas un objectif important pour vous.
L'autre tendance que vous voyez parfois dans les CSS est les préprocesseurs CSS. Ce sont des interpréteurs spéciaux qui vous permettent d'ajouter des fonctionnalités non présentes dans CSS. Par exemple, vous pouvez définir une variable appelée bgColor et l'utiliser dans votre style CSS. Ensuite, vous pouvez changer toutes les références à la couleur d'arrière-plan une fois. Par exemple:
$ bgColor: bleu; body {background-color: $ bgColor;} h1 {couleur de fond: blanc; color: $ bgColor;}
Ceci est très utile lorsque vous utilisez la même couleur à plusieurs endroits, surtout si vous devez changer la couleur plusieurs fois.
Outre les variables, la plupart des préprocesseurs offrent d'autres fonctionnalités communes aux langages de programmation complets, tels que les mixins (blocs de code nommés) et les fonctions (une série d'instructions de code avec un nom et des fonctionnalités d'entrée et de sortie).
Le préprocesseur est un petit langage de programmation qui convertit le code spécial en CSS. Le convertisseur est souvent écrit dans un langage tel que JavaScript ou PHP. En règle générale, le développeur compile les instructions en CSS simple ou invoque le code côté client pour convertir automatiquement le code en CSS avant que le navigateur tente de rendre la page.
Les préprocesseurs les plus populaires sont SASS (Syntactically Awesome StyleSheets) et LESS (ce qui semble être le reprocesseur CSS p sans acronyme ).
Les préprocesseurs CSS se trouvent généralement dans des frameworks Web et des systèmes de gestion de contenu plus importants. Ils peuvent être utilisés sans ces outils, mais ils peuvent poser plus de problèmes qu'ils n'en valent, sauf pour les grands projets.
Les préprocesseurs CSS sont une bonne idée, et ils deviennent très populaires auprès des développeurs professionnels, en particulier pour les grandes applications. Cependant, ils pourraient ne pas valoir l'effort pour un débutant.
