css 4 design » HTML & CSS

HTML5 Please — Fallback et Polyfills (ou pas)

Bruno Bichet — Tue, 24 Jan 2012 19:54:00 +0000

Envie de mettre les nouveautés HTML5 et CSS3 à contribution lors du redesign de votre site, mais un peu inquiet quand même sur la compatibilité de ces nouveaux jouets avec les nombreux navigateurs qui se battent pour occuper toute la RAM de votre poste de travail ? N’hésitez plus, et venez jeter un oeil sur HTML5 Please qui vient d’apparaitre dans ma timeline Twitter ⁽¹⁾ !

Ce site indique, pour chacune des fonctionnalités, si l’on peut l’utiliser passionnément, à la folie ou pas du tout. Elles sont présentées sous forme de liste, résumées et accompagnées d’une indication claire grâce au code couleur suivant :

Vert : Utilisable ; Utilisable avec Fallbacks ; Utilisable avec Polyfills.
Orange : Attention ; Attention avec Polyfills ; Attention avec Fallbacks.
Rouge : A éviter ; A éviter avec Polyfills.

D’un coup d’oeil, on voit immédiatement si la fonctionnalité est prête à l’emploi, et si oui, comment l’utiliser au mieux telle qu’elle, accompagnée d’un Polyfills ou d’un Fallbacks le cas échéant.

Tandis que When Can I Use nous précise le niveau de prise en charge que l’on peut attendre d’un navigateur et d’une version donnés pour telle ou telle fonctionnalité, Modernizr nous donne la possibilité d’en détecter le support.

Le rôle joué par HTML5 Please ressemble à celui d’un coach ou d’un conseiller qui donnerait des recommandations pour savoir quel est le Polyfills le plus adapté.

⁽¹⁾ Merci à Thierry Roget o/

Articles sur le même sujet

Quelques notes — Programme de formation HTML & CSS

Bruno Bichet — Wed, 04 Jan 2012 12:01:47 +0000

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
Zone de contenu principale : texte, image, vidéo,
Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours, fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
une zone de contenu…
… associée à une ou plusieurs barres latérales,
avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO). On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduit au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure de mes idées et de vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

Articles sur le même sujet

Quelques liens sur les Media Queries en CSS3

Bruno Bichet — Sun, 09 Oct 2011 21:38:47 +0000

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !

CSS3 Media Queries

Media Queries : W3C Candidate Recommendation – La recommandation du W3C sur les Media Queries
mediaqueri.es – Collection de site utilisant Media Queries
Hardboiled CSS3 Media Queries – La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
Progressive Enhancement with CSS Media Queries – Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
CSS3 : les Media Queries – Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
Responsive Design with CSS3 Media Queries – Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.

Grilles adaptatives

Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
columnal – A responsive CSS grid system helping desktop and mobile browsers play nicely together.
Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs

Articles sur le même sujet

HTML5 Boilerplate — Des images remplacées cliquables avec la classe .ir

Bruno Bichet — Sat, 11 Jun 2011 16:24:53 +0000

HTML5 Boilerplate et WordPress ♥ Basics par la même occasion contiennent quelques classes CSS utiles pour masquer du contenu de différentes manières en fonction de vos besoins : .hidden, .visuallyhidden, .invisible and .ir. Après un rapide survol des trois premières classes, nous allons nous attarder un peu sur la dernière classe .ir pour régler une bonne fois pour toutes le problème des images de fond non cliquables.

.hidden { display: none; visibility: hidden; }: Fig. 1: Cache le contenu associé pour les lecteurs d’écran et les navigateurs.
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }: Fig. 2: Cache le contenu visuellement seulement (est toujours disponible pour les lecteurs d’écran).
.invisible { visibility: hidden; }: Fig. 3: Cache le contenu visuellement pour les lecteurs d’écran et les navigateurs, mais conserve l’espace occupé.
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }: Fig. 4: Remplacement d’image

Remplacement d’image avec CSS

La classe .ir propose un mécanisme pour remplacer du texte par une image grâce à la propriété background, en cachant le contenu initial sous le tapis. C’est très pratique, mais cette technique peut poser un problème lorsqu’on veut que l’image remplacée soit cliquable, comme c’est généralement le cas lorsqu’on place une image en fond de balise

pour remplacer le titre du site, par exemple.

HTML 4.01

Le bout de code suivant :

… accompagné du style CSS :

#site-title {
    width: 220px;
    height: 160px;
    background: url(../img/logo.png) no-repeat;
}

… affiche bien l’image de fond logo.png à la place du titre du site, mais le contenu de la balise

n’étant pas affiché, notre logo-image n’est pas cliquable. C’est bien embêtant.

HTML 5

Débarrassons-nous de ce problème. Grâce à la magie de HTML 5, il suffit de rendre cliquable l’ensemble de la balise

D’après la spécification HTML5…

L’élément a peut envelopper des paragraphes entiers, des listes, des tableaux et ainsi de suite, de même que des sections entières, aussi longtemps qu’il n’y a pas d’élément interactif à l’intérieur des contenus, comme des boutons ou d’autres liens.

… l’affaire est dans le sac =^__^=

Traduit avec l’aimable autorisation de moi-même, d’après l’article HTML5 Boilerplate — Using .ir class and make the replaced image “clickable”.

Articles sur le même sujet

Schema.org — Microdata pour Google, Bing et Yahoo!

Bruno Bichet — Fri, 03 Jun 2011 21:09:17 +0000

Schema.org propose un ensemble de micro-données hiérarchisé destiné à donner du sens au marquage HTML qui structure les pages web. Ce système complet de microdatas est comparable à RDFa, à ceci près qu’il est proposé conjointement par Google, Bing et Yahoo! pour enrichir les résultats de leurs moteurs de recherche respectifs.

Pour vous faire une idée de la richesse de ce vocabulaire commun, il suffit de jeter un oeil sur l’ensemble de la hiérarchie disponible sur la page The Type Hierarchy. On le voit, ce vocabulaire a l’ambition de taguer l’ensemble de la production culturelle humaine, et plus à venir.

Thing

Au sommet de cette hiérarchie de micro-données, on trouve la «chose».Thing est décomposée en:

CreativeWork,
Event,
Intangible,
Organization,
Person,
Place,
Product.

CreativeWork

Chaque élément est lui-même structuré en sous-ensemble. Pour CreativeWork, nous avons par exemple :

Article,
Blog,
Book,
ItemList,
Map,
MediaObject,
Movie,
MusicPlaylist,
MusicRecording,
Painting,
Photograph,
Recipe,
Review,
Sculpture,
TVEpisode,
TVSeason,
TVSerie,
WebPage,
WebPageElement.

WebPageElement

Parmi les éléments qui permettent d’ajouter du sens aux balises HTML pour préciser leur portée. Par exemple, WebPageElement se subdivise en :

SiteNavigationElement,
Table,
WPAdBlock,
WPFooter,
WPHeader,
WPSideBar.

Exemple d’utilisation du schema « Movie »

J’ai repris un exemple de la documentation de schema.org en prenant la liberté de modifier le balisage HTML initialement proposé pour ajouter un peu plus de sémantique via une liste de définition. Un peu dans l’esprit de ce que j’avais fait pour le microformat hCard, souvent expliqué avec des exemples de marquage HTML un peu «léger».


    Avatar
     Director: James Cameron (born August 16, 1954)
     Science fiction
     Trailer

Fig. 1 : exemple de fiche pour le film Avatar sans les microdatas.


    Avatar
    Director: James Cameron (born August 16, 1954)
    Science fiction
    Trailer

Fig. 2 : même marquage qu’au-dessus avec les microdata issues de «Movie».

RDFa c’est fini ?

D’après Google, les site utilisant RDFa continueront à être valorisés en tant que Rich Snippets mais il ne dit pas pendant combien de temps…

Enfin une solution stable et pérenne pour enrichir nos données ?

Je suis un farouche supporter des microformats, mais j’ai toujours gardé également à l’esprit qu’il ne s’agissait globalement que d’un exercice de style. Je n’ai jamais pu observer un quelconque impact dans le fait de mettre des classes microformatées dans mes balises. Avec les schémas proposés par Google Bing et Yahoo! nous aurons peut-être plus de chances de voir nos efforts enfin récompensés. A tester et à voir.

→ Consulter HTML Microdata du W3C

Articles sur le même sujet

Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)

Bruno Bichet — Fri, 20 May 2011 10:26:02 +0000

L’ajout des classes CSS pour spécifier la largeur des colonnes dans le code HTML est le lot des frameworks CSS qui proposent un mécanisme pour créer une grille de mise en pages. Pour couronner le tout, la plupart des frameworks ont besoin d’une classe pour la première colonne (.first pour The Simpler Grid) ou la dernière colonne (.last pour Blueprint CSS) voire pour la première et la dernière colonne (.alpha et .omega pour 960 Grid System) pour annuler les marges droites et/ou gauches attribuées par avance aux colonnes.

Dans ma liste de plus de 30 frameworks CSS, seul inuit.css s’affranchit de ces classes .first, .last, .alpha ou .omega. Mais c’est au prix d’un décalage global du container (.grids, en l’occurrence) de la valeur de la gouttière. Je suis assez admiratif de cette technique et je m’en veux de ne pas l’avoir trouvée au lieu de faire l’intéressant avec mon mashup de Blueprint CSS, The Simpler Grid, 960.gs ^^

Sélecteur de frère adjacent

Dans mes mises en page web, j’utilise souvent un nombre de colonne différent selon le contexte : contenu principal accompagné de deux ou trois colonnes en page d’accueil; contenu principal plus une colonne lorsque j’affiche le contenu d’un article seul. C’est là qu’intervient le sélecteur de frère adjacent, symbolisé par le signe «+».

La spécification des CSS 2 nous apprend que :

Les sélecteurs d’enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l’arbre du document et quand E1 y précède immédiatement E2.

J’avais l’habitude de me servir de ce sélecteur pour supprimer l’alinéa du premier paragraphe qui n’a littéralement aucune raison d’être ici, puisque par définition, il n’y a rien à mettre «à la ligne» :

p + p {
    text-indent: 1em;
}

Ici, étant donné que le deuxième p est le sujet du sélecteur, on sous-entend que le premier n’est pas indenté.

.sidebars + .sidebars = grille ?

Je me suis dit qu’il pourrait être intéressant d’utiliser cette propriété dans le cas où le nombre de colonnes varie selon le contexte, sans être obligé de définir ce contexte de manière trop précise. L’exemple qui suit, que j’aurais pu mettre en place pour des sites de casinos en ligne (je sais que vous êtes joueurs), illustre à merveille ce concept :-)

#sidebar { margin-left: 20px; }
#sidebar .sidebars + .sidebars {
    margin-left: 20px;
}

#sidebar contient entre une et deux colonnes. Lorsqu’une seule .sidebars est présente, je n’ai pas besoin de spécifier de marge gauche ⁽¹⁾ (celle de #sidebar suffit à créer la gouttière entre #main (le contenu de l’article) et #sidebar). Lorsqu’il y a deux .sidebars dans #sidebar, seule la deuxième doit avoir cette marge gauche pour créer la gouttière. Et voilà !

⁽¹⁾ j’utilise une marge gauche pour créer des gouttières afin de pouvoir annuler la marge du premier élément — au cas où j’aurais appliqué un float: left et un margin-left: 20px à toutes mes colonnes — avec le pseudo-sélecteur :first-child (CSS 1) pris en charge plus largement que :last-child qui nous arrive tout juste avec CSS 3.

Dans le cas d’une troisième .sidebars, il suffirait donc d’utiliser une déclaration du type :

#sidebar .sidebars + .sidebars + .sidebars {
    margin-left: 20px;
}

On s’en «grille» une ?

Voici un exemple d’une rangée de 12 colonnes bâtie sur ce principe avec une version en ligne de cette grille CSS (notez l’utilisation des rôles WAI-ARIA en action) :

#page {
    width: 940px;
    margin: 0 auto;
    text-align: center;
}
[role="banner"],
[role="contentinfo"] {
    clear: both;
    background: #333;
    color: #eee;
}
[role="main"] > div {
    width: 60px;
    float: left;
    background: #eee;
    margin: 1.539em 0;
}
[role="main"] > div + div {
    margin-left: 20px;
}

Un système encore expérimental

Cette utilisation du sélecteur d’enfant adjacent est encore expérimentale et devrait faire l’objet de tests plus approfondi pour voir où peut mener cette technique qui ne nécessite à priori aucune intrusion intempestive dans le code HTML si votre page est bien structurée (je suis sûr que c’est le cas chez tout le monde, non ?). Je compte sur vous pour tester ce concept qui en a sous la botte ou le talon aiguille afin d’en tirer la substantifique moelle. Merci d’avance :)

Articles sur le même sujet

Astuce CSS3 et RGBA avec les outils de développement de Google Chrome

Bruno Bichet — Wed, 18 May 2011 14:59:01 +0000

J’utilise de plus en plus Google Chrome pour tester mes pages web. J’ai trouvé dernièrement une petite astuce qui m’évite d’ouvrir Photoshop pour connaitre la correspondance des couleurs hexadécimales dans les formats RGB ou HSL. Dans une optique de dégradation gracieuse, je prends l’habitude de préciser une couleur au format «hexa» suivie de la même couleur au format RGBa pour profiter des effets de transparence.

Pour cela, je lance les outils de développement de Google Chrome (Ctrl + Maj + i ou Clic droit et «Inspecter l’élément»). Je clique ensuite plusieurs fois sur le carré de couleur jusqu’à ce que le mode rgb() apparaisse. Il suffit ensuite de copier-coller les valeurs dans lafeuille de style CSS.

Exemple visible sur la nouvelle version de WordPress & Webdesign :

#menu-download-basics a {
    background: #807666;
    background: rgba(128,118,102,0.8);
}

Le premier background précise une couleur au format hexadécimal pour les anciens navigateurs, tandis que le deuxième s’adresse aux navigateurs capables d’afficher une couleur en transparence avec la propriégé RGBa indiquée dans le 4ème paramètre (ici, 0.8).

Finie, l’ouverture de Photoshop pour connaitre les valeurs RGB d’une couleur au format Hexadécimal !

Fonction "Inspecter l'élément" de Google Chrome

Parmi les modes colorimétriques disponibles, on trouve :

Hexadécimal (Rouge, Vert, Bleu) : #807666,
RGB (Rouge, Vert, Bleu) : rgb(128, 118, 102),
HSL (Teinte, Saturation et luminance) : hsl(37, 11%, 45%).

Le dernier mode (TSL en français) est très intéressant car il permet de modifier, pour une couleur donnée, uniquement la teinte (en gardant les informations de saturation et de luminosité intactes), la saturation (en gardant les deux autres) ou la luminosité (idem).

Je ne dis pas que ces outils de développement remplaceront l’extension ColorZilla de Firefox, mais ils peuvent ponctuellement rendre des services.

Articles sur le même sujet

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

Bruno Bichet — Thu, 12 May 2011 00:54:47 +0000

«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 !»

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 :

Logo « WordPress je thème »
WordPress de A à Z… avec le Codex
A comme Allons-y !
B comme Basics
Vous lisez C comme CSS & Composé HTML5
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

. 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 à

j’ai revu le marquage HTML de Basics :

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

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

Dans le template index.php

Dans sidebar-one.php

Dans footer.php

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.

Styler votre éditeur WordPress comme votre site et vice-versa

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: http://css4design.com/
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.»

Articles sur le même sujet

Créer des « Call to Action » ou des « boutons CSS » dans l’éditeur WYSIWYG TinyMCE

Bruno Bichet — Tue, 10 May 2011 11:46:46 +0000

Cette petite astuce toute simple permettra à vos clients⁽¹⁾ de styler certains liens différemment des autres (Call to action, bouton, etc.) depuis TinyMCE, l’éditeur WYSIWYG de WordPress. Il suffit de créer un lien et de le mettre en «gras» avec l’icône B. Cette combinaison toute simple vous donnera le composé HTML suivant :


    
        lien de téléchargement

Pour les styles CSS :

strong a {
    font-weight: normal;
    padding: 0.25em 0.5em;
    background: #F29F05;
    color: #000;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

On peut aller plus loin en isolant ce marquage HTML dans son propre paragraphe pour augmenter les possibilités. Comme dit le proverbe bien connu : «Plus il y a de marquage HTML et plus il y a de marrage sous les bretelles», comme le centrage, des backgrounds différents, etc.

Dans le même esprit, on peut également envisager de combiner un lien avec «l’italique» (I) pour styler ensuite le sélecteur em a.

D’un point de vue sémantique, l’importance des textes véhiculée par strong ou em devrait s’accorder avec une mise en évidence plus ou moins forte des contenus associés.

⁽¹⁾ Si c’est pour pour vos clients, ça devrait être bon pour vous aussi !

Articles sur le même sujet

hgroup disparait du brouillon HTML5, une chance pour logo et motto ?

Bruno Bichet — Wed, 04 May 2011 11:54:51 +0000

Suite à la demande de Lars Gunther, la balise hgroup ne fait plus partie du brouillon HTML5 des spécifications du W3C. Les raisons de cet abandon semblent assez subjectives. Il semblerait que Lars Gunther n’aimait pas vraiment cet élément et que Ian ‘Hixie’ Hickson non plus. Il n’en fallait pas plus pour que cette balise disparaisse purement et simplement du brouillon HTML5.

Qu’en penser ? D’un côté, HTML5 est une spécification en cours de rédaction ; il est normal d’observer un va-et-vient dans les éléments retenus ou abandonnés. D’un autre côté, la balise hgroup fait partie du paysage HTML5 depuis pratiquement deux ans ; elle a fait l’objet de nombreux tutoriels, a été expliquée dans moult ouvrages de référence et utilisée dans de nombreux thèmes WordPress.

Ceci dit, objectivement, je ne suis pas le seul a avoir eu du mal à voir l’intérêt de cette balise hgroup. Pour rappel, elle est (était ?) censée regrouper des niveaux de titre, tel que h1 et h2 pour envelopper le titre du site et le slogan ou le titre de l’article et son sous-titre servant de chapô. Tout l’intérêt de hgroup résidant dans le fait que la balise h2 était exclue de l’Outline, c’est-à-dire de la hiérarchie des niveaux de titre du document. Ce qui pourrait très bien être fait avec la première balise header située dans une balise possédant le statut de Sectioning Content, soit dit en passant ;)

Bref, je ne vais pas me plaindre de la disparition de hgroup. Je trouve que cette suppression s’est fait de manière arbitraire, sans vrai débat, ce qui est toujours dommage. Toutefois, on voit que le groupe de travail a décidé de devenir plus sélectif et c’est peut-être une bonne chose. Peut-être que le groupe de travail se penchera-t-il sur ma proposition de créer les éléments logo et motto ? Qui sait…

→ Manifeste pour la création des éléments LOGO et MOTTO dans HTML5 !

PS : Quelques heures après la rédaction de ce billet, la balise hgroup était de retour dans le brouillon des spécifications HTML5 du W3C. Cf. http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element