Repères
Profil
Technologie
Thème
Technologie : CSS
Openweb.eu.org > Technologie : CSS
Des approches en vogue confrontées aux principes
Après avoir posé – huit articles durant – les principes modernes de construction des feuilles de styles, Nicolas Hoffmann vous propose d’y confronter diverses méthodes en vogue pour la conception de CSS.
Accrochez-vous, l’avant-dernier article de cette série ne manque pas de densité !
« N’y revenez pas ! »
« N’y revenez pas », voici encore un titre étrange pour un article sur CSS. Pourtant il illustre parfaitement une problématique de production : éviter de perdre du temps en revenant sur une intégration.
Autrement dit, gagner du temps sur la maintenance et la vie du site.
L’approche DRY : don’t repeat yourself
DRY – don’t repeat yourself – est un des principes de base en informatique. Les deux principaux outils qui permettent d’éviter de se répéter en informatique sont les variables et les fonctions.
La question se pose alors : comment penser DRY avec un langage qui n’a à la base ni variables ni fonctions ?
Accessibility is good for the planet
Preserving environment through Web accessibility? Unusual idea, even possibly incongruous… Yet, not so much if one realises that some of the flagship good practices in accessibility can reduce the carbon footprint of a Website.
Explanations.
L’accessibilité, c’est bon pour la planète
Préserver l’environnement grâce à l’accessibilité du Web ? Proposition surprenante, voire incongrue… Mais pas tant que ça si l’on réalise que certaines bonnes pratiques phares de l’accessibilité ont pour effet de réduire l’empreinte carbone d’un site Web. Explications.
« Penser en dehors de la boîte »
« Penser en dehors de la boîte » – think outside of the box en anglais : voici un titre énigmatique ! Il porte pourtant notre plus grand défi en tant que développeurs de CSS : nous abstraire de notre environnement et même de nos propres sens qui peuvent nous tendre… des pièges parfois vicieux.
Les performances vues des CSS
Il est inutile de se le cacher : la contrainte des performances est devenue vitale et probablement une des contraintes les plus critiques des sites internet modernes.
La production de CSS n’échappe pas à cette quête de rapidité.
Prendre des conventions en CSS et les documenter
Si la sémantique se définit comme « un ensemble de règles et de conventions dans le but de permettre à un groupe de personnes de se comprendre », pourquoi ne pas appliquer ce concept… à la conception même des CSS ?
L’orthogonalité en CSS
Dans l’article précédent, nous avons rappelé le concept de séparation structure/présentation.
Toutefois ce principe n’est en fait qu’un sous-principe d’un ensemble plus vaste qui s’appelle l’orthogonalité.
Les principes de base en CSS
À tout seigneur tout honneur, avant de parler de problématiques récentes des CSS, il est de bon ton de rappeler quelques bases ainsi que quelques principes. Même si l’utilisation qui est faite de CSS a beaucoup évolué, ces principes restent justes et sont parfois légèrement oubliés.
Les CSS désormais supportées par les navigateurs modernes sont l’outil de présentation des pages Web standards.
A la différence des méthodes employées dans les années 90, les CSS permettent une stricte séparation du contenu HTML et des informations de mise en page. Le gain réalisé est considérable :
- gestion simplifiée et économique de la présentation d’un site à l’aide d’une seule feuille de style pour toutes les pages, aisément modifiable ;
- allègement des coûts de développement et de maintenance : il n’est plus nécessaire de mettre en place un système (hasardeux) de discrimination des navigateurs pour servir aux différents navigateurs un document adapté aux technologies propriétaires qui balkanisent le Web ;
- allègement du code-source des pages Web, et donc économie de bande passante : une feuille de style n’est chargée qu’une fois par un navigateur, qui l’applique sans délai si nécessaire aux pages visitées par la suite ;
- possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d’écran…). Les feuilles de style
print
permettent une impression immédiate d’une page depuis le navigateur, et dispensent d’avoir à créer une version imprimable du documentHTML
; - possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
- création de layout flexibles, qui s’adaptent aux différentes résolutions d’écran ;
- meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.