Je commençais à m’endormir sur la version 0.2.5 de mon thème WordPress ♥ Basics quand la version 2 de HTML5 Boilerplate a fait son apparition au beau milieu du mois d’août. Cette nouvelle version de HTML5 Boilerplate apporte de nombreux changements, dont le plus important est peut-être le remplacement du reset CSS par une « simple » redéfinition des balises HTML grâce à normalize.css mis au point par  Nicolas Gallagher et Jonathan Neal.

WordPress Basics 0.2.6 tient compte des différents changements apportés par HTML5 boilerplate 2 avec la mise à jour du code HTML, des fichiers CSS et des librairies Javascript :

• Mise à jour de quelques portions de code HTML dans les fichiers header.php et footer.php.
• Inclusion de normalize.css dans les fichiers reset.css (renomé logiquement normalize.css), tools.css et author.css.
• Mise à jour des versions des bibliothèques Modernizr et jQuery. J’ai conservé DD_BelatedPNG au cas où.
• Suppression des déclarations CSS redondantes entre normalize.css et markup.css.

Par ailleurs, j’en ai profité pour apporter une mise à jour à la fonction basics_description() afin que les shortcodes n’apparaissent plus « tels quels », lorsqu’ils sont utilisés en début d’article. Merci à Thomas Patin pour m’avoir alerté sur ce sujet et fourni la ligne de code à insérer dans la fonction pour que tout fonctionne.

J’ai activé la constante WP_DEBUG pour faire le ménage dans  les variables pas ou mal définies, notamment dans la fonction basics_respond() du fichier functions.php et le fichier comments.php.

→ Téléchargez WordPress ♥ Basics

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics
• WordPress de A à Z — A comme Allons-y ! (on s’organise)
• WordPress de A à Z — F comme Functions.php

Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un framework CSS, en mettant en lumière leurs avantages et inconvénients respectifs. Tout naturellement, j’ai voulu les mélanger pour ne garder que le meilleur. Pour faire bonne mesure, j’ai ajouté The Simpler Grid découvert récemment que j’ai ajouté à ma réflexion pour créer un espèce de The Blue «940» Grid Simpler. J’envisage d’utiliser ce système de grille simple et efficace en complément du concentré de bonnes pratiques HTML5 Boilerplate.

J’importe le fichier 940.css dans H5BP lors de la mise en place du zoning des pages web. Lorsque cette étape est validée, je fais le ménage dans le code HTML en supprimant les classes inhérentes au système de grille pour mettre les déclarations appropriées dans la feuille de style. En effet, il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. CSS avancées — Vers HTML5 et CSS3, page 72. ⁽¹⁾.

C’est ainsi que  :

<div id="logo" class="first span-6">

<div id="logo">
#logo {
    position: relative;
    float: left;
    width: 220px;
    clear: left;
}

Système de grille sur mesure

Suite au comparatif 960.gs vs. Blueprint, j’ai décidé de fusionner les deux frameworks en faisait le minimum de modifications pour obtenir :

1. Le système de marge unique à droite proposé par Blueprint pour créer les gouttières entre les colonnes. L’ajout de la class `.last` est déjà un tue-l’amour de l’intégration, alors ne parlons pas des classes `.alpha` et `.omega` de 960 Grid System.
2. Le placement des colonnes dans la page indépendamment de leur position dans le code proposé par 960 Grid System avec des classes `.push` et `.pull` plus concises grâce à la déclaration `position: relative;` sur chaque colonne.
3. En chemin, j’ai été également tenté par The Simpler CSS Grid qui reprend le meilleur de 960 Grid System et de Blueprint CSS tout en diminuant légèrement le nombre de déclarations pour parvenir au même résultat.

Mis en place par Nick La de Webdesigner Wall (@nickla), The Grid Simpler revisite les frameworks CSS Blueprint et 960.gs

The Grid Simpler : une grille simple et souple

Contrairement à Blueprint, The Simpler Grid place la gouttière à gauche des colonnes. La classe .last est remplacée par .first, ce qui oblige par ailleurs à modifier les classes .border et .colborder dans la feuille de style pour créer des bordures à gauche des colonnes et non plus à droite. Ceci peut éventuellement être un problème (ou un avantage) selon votre maquette et la hauteur respective des zones situées de part et d’autre de la bordure. Selon le cas, la bordure peut suivre la hauteur de votre sidebar ou de votre zone de contenu.

Dans le code HTML, il faut aussi supprimer les classes .last et ajouter les classes .first en conséquence, sans oublier de modifier l’emplacement des classes .border et .colborder.

J’ai encore un peu de mal à me représenter cette gouttière à gauche des colonnes plutôt qu’à droite, certainement en raison des habitudes liées au sens de lecture mais je m’accroche ;)

The Blue «940» Grid Simpler

Après quelques tentatives aussi burlesques qu’inutiles pour proposer ma propre nomenclature pour le nom des différentes classes, j’ai conservé les intitulés de Blueprint qui permettent de profiter des générateurs de grilles disponibles sur le marché, comme l’excellente application Air Boks pour modifier plus rapidement le pas de la grille (il suffira de copier-coller les déclaration contenant des largeurs).

En ce qui concerne la grille elle-même, elle est composée de 24 colonnes de 20 pixels chacune séparées par une gouttière de 20 pixels en adaptant légèrement la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or. Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixel en utilisant : font-size: 13px; line-height: 1.539.

Elément de base pour afficher une grille en background

Tout cela nous donne une largeur de 940 pixels. Il s’agit de la largeur utile disponible dans 960 Grid System une fois que l’on a retranché les marges de 10 pixels à droite et à gauche. Pour retrouver ces marges — pour mettre une image en background, un dégradé CSS3 ou un simple aplat de couleur, par exemple –, il suffit d’indiquer une largeur de 960 pixels sur la balise body qui servira ainsi de container, and the cat’s in the bag!

Astuce : l’excellent http://griddle.it permet de créer l’image de votre grille personnalisée à la volée en ajoutant la largeur, le nombre de colonnes et la largeur de la gouttière à la fin de l’url comme http://griddle.it/940-24-20?vertical=20 ou http://griddle.it/940-12-20?vertical=20 par exemple.

Pour tester The Blue «940» Grid Simpler, je me suis basé sur les exemples de pages et de grilles disponibles dans les démonstrations de Blueprint CSS en adaptant le code source en conséquence.

• → The Blue «940» Grid Simpler.
• → La démonstration de la grille de Blueprint à comparer avec l’originale.
• → La démonstration de l’échantillon de page à comparer avec l’originale.
• → Les avantages apportés par The Simpler Grid.
• → Frameworks CSS — Blueprint vs 960 Grid System pour plus d’information concernant les éléments ajoutés ou retranchés dans The Blue «940» Grid Simpler par rapport aux frameworks utilisés.
• → Tous les articles concernant les grilles de mise en page web et les frameworks CSS sur ce blog.

Clearfix ?

Si vous n’utilisez pas HTML5 Boilerplate et si vous avez besoin d’un clearfix (la classe .first peut ne pas suffire), ajoutez-donc quelques lignes à la fin de votre feuille de style principale et la classe clearfix sur les boites contenant des éléments span pour rétablir le flux :

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Articles sur le même sujet

• Frameworks CSS — Blueprint vs 960 Grid System
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Création de site WordPress de A à Z — B comme Basics
• WordPress de A à Z — A comme Allons-y ! (on s’organise)

Les langages du web comme HTML et CSS sont structurés autour de concepts qui n’ont pas forcément de rapport avec la manière dont ils seront utilisés. Les concepteurs ne sont pas les auteurs ; il appartient à ces derniers de tâtonner puis d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Les spécifications sont très utiles pour comprendre la nature des balises HTML et des propriétés CSS mais ne suffisent pas pour réaliser un site Internet. Et pour cause : il n’existe pas de recette toute faite. Les ingrédients (les contenus) sont uniques et demandent un traitement graphique et un marquage HTML particulier.

Toutefois, on ne peut pas ne pas constater que les sites Web partagent dans leur grande majorité les éléments suivants :

1. En-tête de page (header),
2. Une ou plusieurs barres latérales (aside),
3. Zone de contenu (article) à droite, à gauche ou au milieu,
4. Pied de page (footer) généralement situé en bas de page.

La plupart des tutoriels que l’on trouve sur le web reprennent un découpage par thématique : après les bases concernant l’insertion de la balise style, on attaque généralement par la mise en forme du texte, les listes, les images, les bordures, le modèle de boite, le positionnement, etc. C’est le découpage proposé par les spécifications du W3C et la majorité des tutoriels CSS qui permet de retrouver rapidement une propriété. Il s’agit avant tout de servir de référence… mais a-t-on jamais appris à rédiger des phrases avec un dictionnaire ?

J’évoque souvent le potentiel didactique des frameworks CSS :

• Le Reset CSS (reset.css) permet de faire le point sur les balises HTML les plus utilisées,
• Le fichier typographie (typography.css) redéfinit le comportement des balises et permet d’acquérir un solide vocabulaire CSS,
• Le système de grille (grid.css) propose les éléments fondamentaux du positionnement en quelques déclarations,
• La prise en compte des derniers de la classe (ie6, ie7 et bientôt IE8) permet d’aborder la notion de compatibilité cross-browser.

→ Lectures complémentaires conseillées :

• Faites votre choix parmi plus de 30 frameworks CSS,
• Lire Frameworks CSS + Reset CSS : design from scratch.

A côté des frameworks on trouve un grand nombre de proposition de feuilles de style prenant en compte une grande partie des balises HTML sans pour autant inciter à l’utilisation d’un reset CSS ou d’un système de grille de mise en pages. Ces feuilles de style de base ont souvent été longuement pensées par leur auteur et les choix effectués nous éclairent sur les subtilités des CSS.

→ Parmi les «kits de démarrage» existants, je trouve souvent mon bonheur dans :

• base.css de Thierry Koblentz (cf. Implementing a starter CSS file rather than using a reset styles sheet),
• no-reset de Florent Verschelde (cf. A Simple Base Stylesheet),
• style.css de HTML5 Boilerplate.

L’idéal étant bien sûr de prendre ça et là ce dont on a besoin pour se constituer son propre fichier CSS tout terrain !

Articles sur le même sujet

• BIC, framework CSS orienté couleur et typographie
• Frameworks CSS + Reset CSS : design from scratch
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes :before et :after pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires.

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

• → Voir aussi Tableaux de caractères Unicode – Écritures,
• → Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

• → iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
• → CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

• → Lire la documentation de HTML5 Boilerplate sur GitHub,
• → Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
• → Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

• → Float, clear et contextes de formatage,
• → Everything you Know about Clearfix is Wrong,
• → How to « patch » clearfix so it can better handle collapsing margins,
• → CSS 101: Block Formatting Contexts,
• → The hacktastic zoom fix.

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

→ Lire aussi Le petit journal permanent de CSS3 — 100+ ressources pour commencer

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

• → Ombres avancées avec CSS3 et box-shadow — Tutoriel très complet en français sur la mise en place d’ombres portées originales avec box-shadow.
• → Drop Shadows with CSS3,
• → Pure CSS3 box-shadow page curl effect.
• → Des bulles de dialogue en CSS3 sans image

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

• Fixer le Viewport,
• Passer tous les éléments de largeur fixe en largeur automatique,
• Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
• Gérer les mots longs,
• Passer à une seule colonne,
• Masquer les éléments superflus,
• Afficher un message personnalisé.

→ Lire aussi Une feuille de styles de base pour le media print.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

• Google Chrome Frame
• DebugBar
• CompanionJS
• Internet Explorer Developer Toolbar
• Fiddler
• HttpWatch
• Web Accessibility Toolbar
• TamperIE

Scripts

• IE7.js Javascript library
• Selectivizr
• Rounded corner HTML elements using CSS3
• CSS3 support for Internet Explorer 6, 7, and 8
• CSS3 Solutions for Internet Explorer

Outils CSS3 /HTML5

• CSS3Pie
• transformIE
• html5shiv
• IE Print Protector
• Internet Explorer User Agent Style Sheets
• Modernizr
• MySpace’s Performance Tracker
• Unit PNG Fix
• ExplorerCanvas

Tester votre site

• IETester
• IE NetRenderer
• Browsershots

Articles et discussions

• Why People Still Use IE 6
• Is IE9 a modern browser?
• IE CSS Bugs That’ll Get You Every Time
• IE6 – CSS Bugs and Fixes Explained

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

1. Learn The Basics Of Photoshop In Under 25 Minutes,
2. Basics Of Photoshop: Colour Correction, Touch Ups And Enhancements,
3. Basics Of Photoshop: Basic Drawing With The Pen Tool,
4. Basics Of Photoshop: Designing A Website,
5. Basics Of Photoshop: Next Steps And Further Resources.

→ Lire aussi Détourer les cheveux avec Photoshop

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes — Programme de formation HTML & CSS

«Ressources pour webdesigner» aurait été plus concis, mais c’était sans compter la bonne ou la mauvaise idée de l’Insee qui souhaite supprimer les termes design et designers de la NAF 74.10 comme nous l’apprend l’Alliance Française des Designers. Tiens, AFD ça fait aussi All For Design… Hasard ? Je ne crois pas ^__^ Pendant que nous sommes dans les métiers du webdesign, profitons-en pour balader notre souris chez Pixenjoy ! Nous pourrons ensuite étancher notre soif de connaissance sur l’excellent portail des métiers de l’Internet. Pour approfondir les aspects liés à l’ergonomie et au design d’interfaces, la lecture du blog de Laurent Demontiers nous apprendra beaucoup.

L’air de rien, l’introduction fourmille déjà de très bons liens pour en savoir davantage sur les métiers de la conception web au sens large. Dans la suite de ce billet, je vous présenterai brièvement les nouveaux blogs ou sites web qui ont attiré mon attention ces derniers temps, ainsi que des ressources plus anciennes qui en ont encore sous la botte.

Les nouveaux blogs

Boite à Web

Le blog de Julio spécialisé dans le CMS WordPress et la création sur le web se consacre plus particulièrement aux failles de sécurité des plugins destinés à WordPress.

Lire Faille XSS chez Fur.ly : attention aux faux liens !

DevBlog

Blog dédié aux langages web. Scripts et ressources pour webmaster.

Lire Shortcode WordPress : création de shortcode personnalisés

seebzNet

Un blog sur le développement web avec PHP et Javascript avec des vrais morceaux de code à l’intérieur !

Lire Minifiez vos feuilles de styles et vos fichiers javascript

Visitez aussi code.seebz.net — Plus de 25 scripts autour de PHP et Javascript.

Weedle

Ce nouveau blog créé par Fred et David est consacré au graphisme et au design. D’après Modérateur vous y trouverez de nombreux tutoriels, des ressources gratuites, des sélections de thèmes WordPress ou encore des sources d’inspiration.

Lire 30 tutoriels pour apprendre à dessiner des personnages de mangas.

Techniques pour l’intégrateur web

1. Méthode universelle pour décorer les blocs (coins arrondis inside) — Agrémenter ses blocs HTML est souvent un casse-tête pour de nombreux intégrateurs. Entre la création de `div` surnuméraires qui nous éloigne d’une saine séparation de la forme et du fond et les fonctions Javascript non obstrusives déportant la couche présentationnelle dans des fichiers externes, il y a désormais une alternative.
2. CSS3 Border Images for Beautiful, Flexible Boxes — L’essentiel pour comprendre le mode de calcul de découpe des images pour obtenir de belles bordures flexibles avec CSS3 avec une seule image sans marquage HTML superflu. Voir la démonstration.
3. eCSStender — Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (`@font-face` et `@page` pour le moment). Pour la suite des explication je vous invite à lire la documentation ;)
4. Nota-Bene – Bienvenue sur le site de Stéphane et Stéphanie (ne riez pas). Stéphane est expert accessibilité web et Stéphanie est professeur des écoles. Lire Je n’aime pas le reset CSS et plus généralement les articles de la rubrique Sur le web.

Astuces WordPress

• Configuration avançée de WordPress — Si l’installation de WordPress s’effectue en 5 mn. chrono, il est possible d’y passer bien plus de temps. Ajouter des options au fichier `wp-config.php` occupera les longues soirées d’automne : optimisation des performances, sécurité, débugging et développement sont au programme. Lire également Pimp your wp-config.php et Editing wp-config.php.
• WordPress Hooks Database — Cette base de données contient l’ensemble des hooks disponibles dans WordPress : `apply_filters()`, `do_action()` et `do_action_ref_array`. Pratique pour connaitre les hooks dépréciés, ceux qui ont changé de nom. Une brève description est disponible et il est même possible de voir le hook dans son contexte. Voir l’API des plugins pour plus d’information sur les hooks, les actions et les filtres.
• From Photoshop to WordPress -– Part I – Design et Part II – Coding. Tutoriels très instructifs pour connaitre dans le détail l’ensemble des étapes nécessaires à la création d’un thème pour WordPress from scratch.
• 10 Useful WordPress Search Code Snippets — Dans WordPress les fonctions de recherche sont un peu le parent pauvre. Pour y remédier, voici 10 bouts de codes qui permettront de relever l’ordinaire : exclure des billets ou des pages des résultats de recherche, restreindre la recherche à une catégorie, ou dans les sous-catégories, afficher le nombre de résultats renvoyés, surligner les mots-clé sur la page (jQuery), etc.
• 21 plugins et extensions WordPress à éviter — Un des élément-clé de la popularité de WordPress réside sans doute dans le nombre de plugins disponibles, à condition de ne pas installer tout et n’importe quoi ;)
• 21 hacks pour 21 plugins WordPress inutiles — Cet article fait suite au précédent et propose d’ajouter quelques lignes de code dans le fichier functions.php ou dans vos templates pour vous passer de certains plugins.
• Ajouter une limite à wp_list_pages dans WordPress — Très pratique pour limiter le nombre de page renvoyé par la fonction `wp_list_pages()`.
• Shortcode WordPress : afficher les documents liés aux billets — La gestion des documents joints n’est pas le point fort de WordPress. Heureusement, Mehdi Kabab s’est penché sur la question et nous offre la possibilité d’afficher de manière élégante les pièces jointes liées à des articles ou des pages.
• Le guide complet pour configurer votre blog WordPress — Envie de connaitre toutes les ficelles pour maitriser WordPress ? Ce guide fait le point sur l’ensemble des options présentes dans le menu Réglages : Général, Ecriture, Lecture, Discussion, Médias, Vie Privée et Permaliens.
• Introduction à WordPress 3 : custom post type et custom taxonomy — Les  types personnalisés de contenus permettent de sortir des sentiers battus que sont les billets et les pages en permettant de créer par exemple un type de contenu Petite annonce ou Portfolio avec des champs spécifiques. Les taxonomies personnalisées permettent quant à elles d’aller plus loin que les catégories ou les tags proposés par défaut par WordPress.

Mesure d’audience

• Piwik — La mesure d’audience en temps réel. Vous vous souvenez peut-être de l’outils de statistiques phpMyVisites dont j’avais parlé dans Mesure d’audience : des mots-clefs au ClickRank.phpMyVisites a donc changer de nom et de look and feel : maintenant, c’est Piwik ! Du coup, je laisse une chance au produit : le temps réel dans les statistiques d’accès au blog est quand même bien pratique.
• GetClicky — Encore un outil de mesure d’audience rapide et précis. Les résultats s’éloignent peu de ceux de Google Analytics si ce n’est que GetClicky semble calculer le taux de rebond d’une manière totalement différente. Là où Google Analytics exagère avec des taux de rebonds allant jusqu’à 70%, GetClicky est plus flatteur avec un 30% certainement plus proche de la réalité.Cet écart est sûrement du au fait que GA confond les visites de moins de 20 secondes d’une page (un « vrai » rebond, selon moi) avec les visites d’une page dont la durée permet de lire un article. La version gratuite est largement suffisante mais la version payante propose d’afficher les visites en temps-réel, ce qui est assez plaisant et dont vous pourrez profiter gratuitement pendant un mois.

Miscellanées

• Mr. Data Converter — Il suffit de coller des données séparées par des virgules ou des tabulations dans un champs pour que Mr Data Converter s’occupe de leur conversion dans différents formats : ActionScript, ASP/VBScript, JSON, PHP, Ruby ou XML. (via Roget.biz).
• imagethumb() – Générer facilement des miniatures en PHP.
• Wordle — Créez rapidement des nuages de mots-clés en collant vos propres textes ou en fournissant une URL. Nombreuses options de personnalisation pour un résultat toujours intéressant.

Articles sur le même sujet

• HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

Thematic-html5boilerplate est un un thème WordPress basé sur le thème par défaut Twenty Ten présent dans l’installation de WordPress depuis la version 3.0, le framework Thematic et HTML5Boilerplate qui est est lui-même un template composé d’un ensemble cohérent de fichiers HTML, Javascript et CSS. Son but ? Rendre votre blog prêt pour HTML5 et CSS3, le tout avec des performances améliorées.

A ce propos, j’ai eu l’occasion d’utiliser Thematic sur ce blog il y a plusieurs mois et j’avais trouvé que le framework avait une marge de progression en terme de performance non nulle, mais c’est peut-être de l’histoire ancienne. D’ailleurs, il semble que seules certaines parties de Thematic ont été incluses dans Thematic-html5boilerplate.

Bref, avec autant de qualités sur le papier, il me tarde de remettre les mains dans le cambouis pour travailler sur un nouveau thème !

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Duster — Nouveau thème WordPress HTML5 par Automattic
• Roots — Thème WordPress à base de HTML5 Boilerplate
• 9 thèmes WordPress HTML5 pour créateurs de thèmes
• WordPress de A à Z — A comme Allons-y ! (on s’organise)

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css).

L’existence d’un fichier wordpress.css sera très utile pour les fans de cette plateforme de blog ! Je regrette juste que les styles spécifiques à WordPress ne soient pas tous présent dès maintenant. Peut-être dans la prochaine version ? Pour finir, il reste myclass.css au cas où vous auriez quelque chose à déclarer :D

Bref, du beau, du bon, du pocky à télécharger d’urgence.

PS : Si vous trouvez que les frameworks pénalisent les performances globales de votre site web en raison des requêtes surnuméraires, jetez quand même un oeil dans les différents fichiers de BIC : vous y trouverez certainement matière à réflexion.

Articles sur le même sujet

• Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• 36 frameworks CSS — Mettez une grille dans votre design
• Frameworks CSS + Reset CSS : design from scratch
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

Pour notre plus grand plaisir, Eric Meyer – le gourou des CSS – a mis à jour son célèbre Reset CSS. Après Reset Reloaded, voici donc Resetting Again ! Le plus gros changement est la suppression de l’héritage (inherit) des propriétés font-weight, font-style et font-family : la mauvaise prise en charge de la valeur inherit par Internet Explorer ne permet pas un reset satisfaisant dans tous les navigateurs.

Parmis les autres modifications, nous avons : la simplification de la suppression des guillemets pour les balises blockquote et q avec un élégant quotes: none et l’ajout des balises ins et del pour éviter que certains navigateurs maladroits n’appliquent le soulignement à la balise ins, ce qui entraine une confusion avec les liens.

Resetting Again : des CSS au garde-à-vous

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}


/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Articles en relation

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Frameworks CSS + Reset CSS : design from scratch
• Organiser ses feuilles de style CSS

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Frameworks CSS + Reset CSS : design from scratch
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Framework JQuery pour écrire du Javascript non-intrusif

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta.

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

• Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
• Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.
• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
• En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

• Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
• Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
• Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
• Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
• Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

• Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, [...] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]
• Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don't use frameworks]
• Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
• Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
• Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
• *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
• Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.
  
• Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
• Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
• CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
• CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
• CSS Global Reset par Mike Rundle.
• Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Vos positions s'affaissent ? Mettez le bottom à zéro…

Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de « consistance » décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous…

Dans leur grande sagesse les concepteurs du HTML ont fourni un exemple de feuille de style pour uniformiser le rendu visuel des pages web ; dans leur précipitation à sortir leur produit avant la concurrence, les concepteurs des navigateurs ont fait ce qu’ils ont voulu. Enfin, il est aussi possible que les spécifications – parfois sybillines – du monde joyeux des recommandations puissent être interprétées de diverses manières…

Prudence est mère de sûreté…

Il ne faut pas confondre ces différences de rendu entre les navigateurs avec les nombreux bugs qui affectent particulièrement IE comme le calcul de la largeur d’une boite. Gardez également à l’esprit que l’on peut très bien travailler avec ces valeurs par défaut au lieu de les éliminer, et que faire reset, ce n’est pas toujours rigolo : il s’agit d’une technique à manier avec précaution.

D’autant plus que la majorité des problèmes rencontrés est souvent liée à la transmission de l’héritage entre parents et enfants. Faire table rase, d’accord, encore faut-il savoir de quoi ^_^ Une autre notion indispensable est d’avoir une idée des possibilités d’imbrication des balises. Voici un récapitulatif de qui contient quoi, ainsi qu’une référence complète sur les attributs et relations de parenté des éléments XHTML 1.1.

La Cascade (le C de CSS) est une autre source de confusion. Openweb a consacré un article intéressant qui explique comment sont « priorisés » les différents styles qui peuvent s’appliquer à un élément.

Pour faire simple : si vous débutez l’apprentissage des CSS, je vous déconseille fortement de mettre un reset dans votre moteur, même s’il semble ronronner affectueusement au début. Nul doute que dès que vous aurez le dos tourné… Enfin maintenant si vous insistez, je vous ai préparé un mini dossier sur le sujet :

• margin et padding à zéro avec le sélecteur universel
• Reset CSS Reloaded, Eric Meyer
• INITIAL, Christian Montoya
• YUI Reset CSS, Yahoo! UI Library
• undohtml.css, Tantek Celik

Remise à zéro du margin et du padding avec le sélecteur universel * »

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Exercice de style CSS et HTML : table vs div