WordPress de A à Z — C comme CSS & Composé HTML5

«For Those About To Rock…» Dans B comme Basics, j’ai abordé la mise en place d’un Blank Theme pour démarrer différents projets de site web. Je pensais réserver la lettre «C» pour les commentaires(1), mais après le marquage HTML5, il m’a semblé important d’aborder au plus vite la partie CSS. Une des difficultés à surmonter lorsqu’on crée un thème de base, c’est d’éviter 1) d’avoir trop d’éléments à ajouter et 2) d’en avoir trop à supprimer. L’équilibre est délicat. D’autant plus que les intitulés des éléments doivent être le plus générique possible pour s’adapter à toutes les situations et permettre de se repérer facilement. «Fire !» Voici le sommaire complet des 26 articles de WordPress de A à Z.

Certains éléments sont souvent dispersés dans plusieurs fichiers (déclarations de menus personnalisés ou zones widgétisables). Si vous avez jeté un oeil sur les différents fichiers vous avez peut-être été surpris par leur nombre. C’est le prix à payer pour la modularité et éviter de faire des gros pâtés de code (déjà que…). Les CSS ne dérogent pas à ce principe. Je compte sur vous pour utiliser un script pour «minifier» tout ça afin d’éviter les requêtes inutiles.

Articles déjà publiés dans la série WordPress de A à Z :

1. Logo « WordPress je thème »
2. WordPress de A à Z… avec le Codex
3. A comme Allons-y !
4. B comme Basics
5. Vous lisez C comme CSS & Composé HTML5
6. Prochain article : D comme Discussion (les commentaires)

→ Basics en bref et lien de téléchargement.

Un site dédié à Basics

En ce qui concerne la gestion de Basics, j’ai opté dans un premier temps pour la création du sous-domaine basics.css4design.com, puis j’ai fais pointer WordPress & Webdesign sur ce dossier car je ne me voyais pas tenir deux blogs sur WordPress. Comme vous pouvez le constater, j’en ai profité pour commencer à écrire en anglais. La lecture de l’article Merci Bruno LesBonsTuyaux ! de Marie Faubert (intégratrice web) m’a incité à relever le défi pour être à la hauteur de ma e-réputation 😉 Je traduirai les billets écris sur WP 4 Design petit à petit.

Composés HTML5

C’est en commençant à utiliser Basics de manière concrête que je me suis rendu compte que le marquage HTML et les classes associées à certains éléments était perfectibles. Sur une interrogation de @akashrine, je me suis posé une nouvelle fois la question de l’utilisation de la balise <section>. Jusque là, j’avais botté en touche en décidant que les sections avaient leur place dans la zone de contenu des articles, et puis voilà !

Or, il se trouve qu’à ma connaissance aucun éditeur WSYWIG ne propose la possibilité d’ajouter une section à un article. Du coup, pour donner une chance à <section> j’ai revu le marquage HTML de Basics :

• Ajout de balises `<div>` au-dessus des nouvelles balises HTML5 `<header>` et `<footer>`,
• Ajout de balises <section> pour chaque zone faisant partie de la zone de contenu (hors `<header>` et `<footer>`),
• Déporter la sémantique des rôles WAI-ARIA sur ces balises `<section>`,
• Remplacement des balises <aside> des Widgets par des balises <section>,
• Remplacement des balises <section> par des balises <aside>,
• Réintégration de balises <section> pour accueillir les Widgets dans les <aside>.

Pas mal de changements pour obtenir une structure un peu plus sémantique, ou du moins qui devrait s’adapter à un maximum de situation.

Exemples

Dans header.php

<div id="banner">
    <header role="banner">

Dans le template index.php

<div id="main">
    <section role="main">

Dans sidebar-one.php

<div id="sidebar-1" class="sidebars">
    <aside role="complementary">

Dans footer.php

<div id="content-info">
    <footer role="contentinfo">

Le premier intérêt est de mieux dissocier le fond et la forme :  sur les <div>, les identifiants pourront être réservés au scripting ou au positionnement des blocs en CSS ; tandis que les balises <section> pourront se charger de prendre soin du contenu.

Par ailleurs, il est souvent nécessaire d’avoir des éléments internes pour éviter de donner à la fois une largeur width et des marges internes (ou une bordure) au même élément. Dans le dernier exemple, je peux réserver la propriété witdh à #content-info et le padding à la balise footer, ce qui est parfait pour «en toucher une sans faire bouger l’autre», comme dit le proverbe ^__^

Pour finir, cette méthode permet aussi d’uniformiser la structure des différents blocs imbriqués :

• Dans l’en-tête : `div#banner`→ `header role= »banner »`
• Dans la zone de contenu : `div#main` → `section role= »main »`
• Dans le pied de page : `div#content-info` → `footer role= »contentinfo »`

Organiser les CSS

Lorsqu’on démarre un projet de site web, l’organisation des feuilles de style CSS demande un maximum d’attention ; il est très facile de s’emmêler les pinceaux, même dans les projets les plus simples. Pour éviter les écueils les plus sournois, j’ai organisé les CSS du thème Basics de la manière suivante :

Découpage du fichier style.css en provenance de HTML5 Boilerplate en plusieurs fichiers pour faciliter les mises à jour : reset.css, author.css et tool.css. J’ai prévu une feuille de style contenant mon mashup des trois frameworks CSS Blueprint, 960.gs et The Simpler Grid dans le fichier grid.css. Pour finir le fichier markup.css regroupe les styles de base appliqués aux balises HTML et quelques styles propres à WordPress.

Styler l’éditeur de WordPress

WordPress permet de styler l’éditeur WYSIWYG TinyMCE pour qu’il reflète l’affichage des articles une fois publiés, et ce, pendant la saisie. C’est un plus appréciable qui évite les mauvaises surprises de veuves ou d’orphelines. WordPress utilise un fichier editor-style.css pour styler la zone de saisie des billets afin de la rendre un peu plus WYSIWYG.

Pourquoi ne pas s’en servir aussi pour le site web ? Aussitôt dit, aussitôt fait. J’ai regroupé dans le fichier editor-style.css les propriétés de couleurs, de typographie, de marges internes et externes, etc. Grosso modo, tous ce qui peut affecter la grille verticale, ou tout autre élément comme les boutons CSS, comme on peut le voir sur la capture d’écran ci-dessous.

J’ai renommé editor-style.css en markup.css. Pour activer la gestion des styles de l’éditeur (et pouvoir renommer editor-style.css en markup.css), il suffit d’ajouter la fonction add_editor_style( 'markup' ) dans le fichier functions.php.

→ http://codex.wordpress.org/Function_Reference/add_editor_style

style.css

Avec index.php, c’est le deuxième fichier indispensable pour avoir un thème WordPress. Le fichier style.css doit indiquer certaines informations pour que votre installation de WordPress reconnaisse votre thème.

/*
Theme Name: Basics
Theme URI: http://basics.css4design.com/
Author: Bruno Bichet
Author URI: https://4design.xyz/
Description: A Blank Theme based on HTML5 Boilerplate « for those about to rock » with WordPress.
Version: 0.2
License: GNU General Public License
License URI: license.txt
Tags: buddypress, custom-menu, sticky-post, microformats, rtl-language-support, translation-ready, html5, wai-aria
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
For Those About to Rock. Fire!
*/

Ce fichier sert de gare de triage pour importer les autres fichiers nécessaires au bon affichage du site. On voit ici en action l’astuce qui consiste à renommer et à utiliser le fichier prévu pour styler l’éditeur TinyMCE afin d’y regrouper les déclarations CSS orientées «Markup».

Seule cette cette première partie est indispensable. Vous pouvez supprimer les déclarations d’import et supprimer les fichiers présents dans le dossier /css si vous voulez partir de zéro.

/*
Import markup.css (editor-style.css renamed) witch import css/reset.css
Mybe the best way to match both front website and editor styles ^^
HTML5 Boilerplate part #1 is included within markup.css via @import "/css/reset;css"
HTML5 Boilerplate part #2 is included directly within markup.css
*/
@import "markup.css";
/*
Grids are great. Or not.
*/
/* @import "css/grid.css"; */
/*
You may want to give your website your own style!
*/
@import "css/author.css";
/*
HTML5 Boilerplate part #3
*/
@import "css/tool.css";
/* We Salute you! */

markup.css

Ce fichier est censé regrouper tous les styles de base concernant les balises HTML et quelques classes utilisées par WordPress, principalement en ce qui concerne les images. Il est situé à la racine du site car WordPress à besoin qu’il soit là pour styler également l’éditeur TinyMCE intégré à WordPress. Un paramètre m’a peut-être échappé, auquel cas, nous pourrions l’envoyer dans le dossier /css.

Si votre site possède un fond noir et du texte blanc, vous pourriez utiliser la déclaration suivante pour styler l’éditeur en conséquence :

html .mceContentBody {
    background: #000;
    color: #FFF;
    max-width: 580px;
}

Au fil des nouvelles version de Basics, je fais en sorte de transformer markup.css en une sorte de No Reset, c’est à dire un fichier qui devrait, à terme, pouvoir être utilisé tel quel pour rédéfinir la plupart des balises HTML et permettre un affichage cohérent (pas forcément identique) sur tous les navigateurs.

reset.css

Le reset CSS est inclu dans markup.css pour que l’éditeur reflète au plus près l’apparence des articles lorsqu’ils sont publiés sur le site. Ce fichier comprend la plus grande partie de style.css que l’on trouve à l’origine dans HTML5 boilerplate. Les seuls modifications effectuées concernent quelques valeurs (1.539, 1.539em et 0.27em) que je voulais éviter de redéfinir dans markup.css ou author.css, vu qu’il s’agit, pour moi, du service minimum à rendre aux lecteurs 😉

grid.css

Ce fichier embarque un système de grille que j’ai bidouillé en prenant le meilleur de Blueprint, 960.gs et The Simpler Grid. Les commentaires sont là pour dire : «hé, les grilles c’est bien pendant la conception du site, mais on peut s’en passer ensuite !».

author.css

Si vous avez décidé de garder les fichiers précédents, celui-ci devrait vous servir à personnaliser totalement votre version de Basics selon votre charte graphique

tool.css

C’est la dernière partie des éléments en provenance de HTML5 Boilerplate. On y trouve principalement des CSS utilitaires : clearfix, squelette pour les Media Queries et des déclarations CSS pour l’impression.

handheld.css

Le fichier handheld.css proposé par HTML5 Boilerplate qui peut être utile pour réserver une feuille de style aux téléphones portables de l’ancienne génération.

/utils

Le dossier /utils situé à la racine de Basics regroupe quelques fichiers qui ont vocation à intégrer Basics dans des versions futures et d’autres contiennent des déclarations CSS prêtes à copier-coller :

• font-stack.txt — 25 piles de polices de caractères dont 12 avec Serif et 13 Sans Serif,
• media-queries.css — 10 blocs de CSS pour cibler précisément les périphériques en fonction de leur résolution d’écran: grands écrans, iPhone, iPad, Netbook, mode portrait, paysage, etc.

Basics en bref

Basics est avant tout un Blank Theme et je n’avais pas envisagé au départ de proposer une version avec une CSS structurée. Or, il se trouve que sans aucun style, les liens pour télécharger Basics et les billets que j’avais commencé à rédiger n’étaient pas très lisibles. Je me suis également vite fatigué à gérer une version publique et une version privée.

Par ailleurs, le fait de styler Basics, même rapidement, m’a permis de revoir totalement l’organisation du code HTML sous-jacent pour avoir une structure un peu plus homogène entre les différentes zones principales : le header, le contenu, les barres latérales et le footer. La cohérence du marquage HTML devrait faciliter l’accès éléments avec les sélecteurs CSS. Notamment en permettant de sélectionner les balises HTML en utilisant les rôles ARIA comme sélecteurs CSS.

Je reste bien évidemment à l’écoute de vos remarques et suggestions concernant l’organisation du thème en général et des CSS, mais surtout au niveau de la structure HTML, car c’est là-dessus que j’aimerai améliorer Basics au fil des prochaines versions. Merci de votre attention 😉

«We Salute You.»