HTML & CSS

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

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

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 :

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;}

Une variante utilisée dans HTML5 Boilerplate. Notez le remplacement de la propriété `overflow: hidden` par `visibility: hidden` :

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

L’absence de la propriété `overflow: hidden` peut entrainer des problèmes d’espaces au-dessus de certains éléments. Pour y remédier, il est possible d’utiliser le clearfix suivant (notez que l’utilisation de `overflow: hidden` sur le container en question dans votre feuille de style suffit généralement à régler le problème) :

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

Lire aussi :

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);
 }

Lire aussi :

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

Scripts

Outils CSS3 /HTML5

Tester votre site

Articles et discussions

→ 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

Publié le par Bruno Bichet