Alsacreations.com - Apprendre - Archives (novembre 2011)

Vous connaissez sans-doute déjà le plugin Zen Coding (sinon courez vite admirer cette vidéo assez ancienne mais plutôt bluffante).

Zen Coding est une extension pour éditeurs HTML et autres logiciels de développement (IDE) permettant d'automatiser et d'accélérer la rédaction de code à l'aide de syntaxes courtes (snippets) et de raccourcis-clavier.

Je me suis récemment amusé à compiler un ensemble de raccourcis (snippets) personnalisés que j’applique à mes projets et que je commence à intégrer en interne chez Alsacreations.fr

Récupérez et utilisez le fichier Zen Coding modifié

J’ai pensé que ces aménagements pourraient éventuellement servir à d’autres. Du coup, je vous partage volontiers le fichier, faites-en bon usage.

• Récupérez et installez Zen Coding
• Récupérez le dossier “Zen-Coding.zip” sur mon site perso pour en extraire les fichiers Zen Coding.js et Readme.txt
• Copier le fichier Zen Coding.js au sein du dossier “\plugins\NppScripting\includes” de votre éditeur HTML/CSS en écrasant le fichier original (après avoir fait une copie de sauvegarde !).
  Par exemple, pour Notepad++, le chemin sur Windows7 est C:\Program Files (x86)\Notepad++\plugins\NppScripting\includes

Rappel : sur Zen Coding, les Snippets fonctionnent avec les mots-clés (ci-dessous) + la combinaison de touches Ctrl + e

Modifications apportées

Beaucoup de mots-clés sont définis de base, voici uniquement ceux que j’ai modifiés personnellement (ajoutés) :

Structure

• doctype -> un doctype HTML5 + gabarit minimal
• doctype2 -> un doctype HTML5 avec classes conditionnelles sur html (combinaison de lte IE 7 / IE 8 / gt IE 8) + gabarit minimal
• html5 -> aussi un doctype HTML5 + gabarit minimal
• xhtml -> un doctype XHTML 1.0 strict + gabarit minimal
• css -> élément link vers feuille styles.css

Contenu

• lorem -> texte de remplissage en texte schnapsum
• loremp -> 3 paragraphes en schnapsum
• list -> liste ul/li de 5 éléments
• nav -> élément nav contenant une liste ul/li/a de 5 éléments
• content -> contenu type entier (titres, liste, paragraphes) en schnapsum

Commentaires conditionnels

• ie -> commentaire conditionnel if IE
• ie6 -> commentaire conditionnel if IE lte IE 6
• ie7 -> commentaire conditionnel if IE lte IE 7
• noie -> commentaire conditionnel if not IE

CSS

• reset -> styles CSS de base (reset.css personnel)
• bg -> background:#FFF url(|) 0 0 no-repeat;
• br -> border-radius (avec préfixes pour navigateurs en ayant besoin)
• bs -> box-shadow (avec préfixes pour navigateurs en ayant besoin)
• clearfix -> crée une classe .clearfix empêchant les débordements de flottants (à l'aide de content)

Un exemple pour la route

Pour illustrer l'efficacité de ces snippets, voici comment je procède pour créer un gabarit HTML à partir d'une page vide sous Notepad++

Pour commencer, j'écris simplement "doctype" + Ctrl + e pour générer le code suivant :

Puis, si je désire ajouter une liste, les touches seront "list" + Ctrl + e pour générer ceci :

	
Salade
	
Tomate
	
Oignons
	
Choucroute
	
Picon bière

Enfin, si je souhaite du faux texte de remplissage encadré par des paragraphes, la manipulation sera "loremp" + Ctrl + e :

Lorem Elsass ipsum réchime amet non Choucroute knack  tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?
Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.
Allez tchao bissame !

Pratique, n'est-ce pas ?

N’hésitez pas à me faire vos retours si vous utilisez ces modifications, et me proposer les vôtres si vous avez vous aussi bidouillé votre fichier.

Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté.

La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels.

Nous allons voir dans cette article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles.

Le problème des commentaires conditionnels

Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML.

Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions.

Pour information, Internet Explorer 10 ne reconnaît plus les commentaires conditionnels, il ne peut donc plus être ciblé de cette manière.

Dans notre quête de compatibilité maximale sur le navigateur de Microsoft, nous allons principalement nous servir de ce mécanisme pour faire un lien vers une feuille de styles corrective dédiée. Cette seconde feuille CSS, chargée à la suite du fichier de styles principal, aura pour but d’écraser et de rectifier au cas par cas les règles générales mal reconnues par IE, comme le montre l'illustration ci-dessous :

Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Vous serez souvent amenés à produire une feuille CSS spécifique à IE6 et 7, ainsi qu'une autre pour IE8. Ou pire : une feuille différente pour chacune des trois versions !

Au final, vous jonglerez avec au minimum trois feuilles de styles CSS :

Non seulement, nous avons à gérer plusieurs fichiers différents, mais nous ne pourrions toujours pas cibler les trois versions IE6 et IE7 et IE8 à la fois sans ajouter une nouvelle condition et feuille CSS supplémentaire.

En 2008, le développeur américain Paul Irish s’est penché sur le mécanisme des commentaires conditionnels et en a listé ces quelques désagréments :

• Les navigateurs anciens tels que IE6, IE7 et IE8 doivent charger plusieurs fichiers CSS au lieu d’un. Ces requêtes HTTP supplémentaires, ont un impact sur la vitesse d’affichage des pages.
• Certains correctifs CSS s’appliquent à toutes les versions des navigateurs (IE6, IE7, IE8). Il faudra les écrire une fois dans chaque fichier de correctifs.
• A chaque modification opérée sur styles.css, il faudra vérifier dans chacune des feuilles de correctifs CSS s’il n’y a pas également des changements à répercuter. La maintenance et l’évolution des styles CSS deviennent difficiles.
• L'emploi de commentaires conditionnels peut causer des problèmes pour les téléchargements parallèles.

L’argument des baisses de performances est non négligeable sur les versions IE6 et IE7, car il s’agit justement de navigateurs vieillots nécessitant des optimisations constantes et nombreuses en vue de ne pas handicaper leurs temps de calcul et d’affichage.

Une alternative ? Les classes conditionnelles

La solution proposée par Paul Irish a été initialement de créer un nom de classe spécifique à l’élément , via un commentaire conditionnel et sans nécessiter d’appel vers une feuille de styles. Je préfère néanmoins l’appliquer directement à l’élément , plus logique et plus souple à manipuler.

Voici une version optimisée de classe conditionnelle :

Vous pouvez voir cette classe conditionnelle en action sur le site www.goetter.fr/livres/css-avancees/

Le principe et les explications sont simples :

• sur les versions inférieures ou égales à Internet Explorer 7, le corps du document s’écrira  ;
• sur IE8, ce sera  ;
• sur tous les autres navigateurs (IE9+ et le reste du monde), il s’agira simplement de .

Il devient alors aisé d’appliquer une règle spécifique à IE6 et IE7 :

#kiwi { /* Pour tout le monde */  
  display: inline-block;  
}
.ie7 #kiwi { /* Pour IE6 et IE7 */  
  display: inline;
  zoom: 1;
}

Et pour appliquer des styles à la fois sur IE6, IE7 et IE8 :

#kiwi { /* Pour tout le monde */  
  font-size: 1.2rem;  
}
.oldie #kiwi { /* Pour IE6, IE7 et IE8 */  
  font-size: 20px; 
}

Bien que la syntaxe demeure un tantinet rebutante et qu'un ajout de codes HTML soit nécessaire, cette méthode commence à faire son chemin parmi les développeurs web aguerris (elle figure même dans le gabarit par défaut proposé par HTML5boilerplate) car ses avantages sont séduisants :

• Contrairement à ce que l’on pourrait croire, elle est parfaitement valide W3C / HTML et reconnue par tous les navigateurs,
• On cible en toute simplicité les versions d'Internet Explorer souhaitées avec .ie7, .ie8, .oldie par exemple,
• Pas de multiplication des requêtes, et des fichiers externes à vérifier et maintenir.

Et vous, que pensez-vous de cette technique ? L'utilisez-vous déjà en production ?

Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ? C'est devenu possible grâce au langage LESS,  aux frameworks Sass et xCSS. Mon article concernera uniquement le langage LESS et le compilateur LessPHP.

Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet  une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. L'avantage de ce dernier est au niveau de la compatibilité (vous aurez par exemple aucun problème si un intenaute désactive Javascript).

Installation

Vous devez obligatoirement travailler dans un environnement PHP.

1. Téléchargez le fichier lessc.inc.php sur le site officiel de LessPHP
2. Insérez ce code PHP dans votre fichier HTML :

require 'lessc.inc.php';

try {
     lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
     exit('lessc fatal error:
     '.$ex->getMessage());
}

3. Indiquez le chemin du fichier lessc.inc.php, celui du fichier sur lequel vous allez travailler (input.less) et celui du fichier CSS qui sera généré par PHP (out.css).
4. Faites un lien vers le fichier CSS avec la balise link :

Vous pouvez maintenant commencer à travailler sur le fichier input.less, PHP fera le reste.

Variables

Stocker des variables est très pratique pour réutiliser une même valeur plusieurs fois et éviter les répétitions.

@val : 15px;
margin-left: @val;

Vous pouvez faire des opérations (additions, soustractions, divisions et multiplications).

.block_content {
     margin: 50px + 20;
     margin: 20px – 15;
     margin: 20px / 2;
     margin: 5px * 10;
}

@val1 : 20px;
@val2 : 20px;

.block_content_2 {
     margin: @val1 + @val2;
}

Vous pouvez aussi cibler la classe ou l'id qui contient la variable que vous voulez utiliser :

.maClasse {
     @val : 15px;
}


.maClasse_2 {
     margin: .maClasse[@val];
}

Mixins

Les mixins sont comme des variables mais ils peuvent contenir plusieurs propriétés/valeurs.

.styles_box {
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px;
}

.block_content {
     .styles_box;
     ...
}

.block_content_2 {
     .styles_box;
     ...
}

Vous pouvez cibler la classe ou l'id qui contient le mixin que vous voulez utiliser :

#monID {
     .maClasse {
          margin: none;
     }
}


.maClasse_2 {
     #monID > .maClasse;
}

Vous pouvez aussi ajouter un ou plusieurs arguments pour en faire des fonctions :

.styles_box (@radius) {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     border-radius: @radius;
}

.block_content {
     .styles_box(10px);
     ...
}

.block_content_2 {
     .styles_box(5px);
     ...
}

Un autre exemple :

.styles_box (@marginLeft, @marginRight) {
     margin-left: @marginLeft;
     margin-right: @marginRight;
}

.block_content {
     .styles_box(10px; 10px);
     ...
}

.block_content_2 {
     .styles_box(; 5px); // On n'entre que @marginRight
     ...
}

Héritage

Cette technique permet d'avoir un code moins répétitif et plus joli.

Exemple d'un code CSS sans LessPHP :

#content1 #block_1 a, #content1 #block_2 a, #content1 #block_3 a, #content1 #block_4 a {
     color: #000;
     text-decoration: none;
}

#content1 #block_1 span, #content1 #block_2 span, #content1 #block_3 span, #content1 #block_4 span {
     color: #fff
     text-decoration: none;
}

Grâce à l'héritage, on pourra écrire ce code de la manière suivante :

#content1 {
     #block_1, #block_2, #block_3, #block_4 {
          a {
               color: #000;
               text-decoration: none;
          }
          span {
               color: #fff;
          }
     }
}

Pseudo-classes

Voici comment procéder pour utiliser une pseudo-classe CSS :

a {
     color: #000;
     text-decoration: none;
     :hover {
          color: #fff;
     }
}

.monBlock {
     ...

     :active {
          border: 1px solid #000;
     }
}

Contrairement à la compilation sous LessCSS, il ne faut pas ajouter le signe &.

Importation de fichiers

Vous pouvez utiliser la directive @import sur des fichiers .less

@import "fichier.less";
@import url("fichier.less");

Très pratique, surtout que tous ces fichiers seront compilés pour former un seul fichier CSS, donc vous n'aurez pas le problème de peformance lié à cette règle CSS.

Divers

L'instruction // permet de faire un commentaire sur une seule ligne.

.maClasse { // Commentaire
     ...
}

Ressources

Pour finir, souvenez-vous que Corinne Schillinger avait proposé un atelier très intéressant durant la Kiwiparty, nommé "LESS : moins de CSS, plus de fun". Son intervention est disponible en diaporamas sur Slideshare mais également en vidéo sur Dailymotion.

Pour faire une histoire courte, j'ai toujours voulu utiliser SCSS et SASS pour mes projets web. J'ai acheté et installé Compass.app, super sympathique comme application. Mais j'ai souvent à travailler sur des projets distants. Je voulais donc pouvoir utiliser SCSS sans avoir à télécharger le CSS généré à chaque modification.

J'ai trouvé un moyen de travailler sur un serveur distant, sur un SCSS, enregistrer mes modifications et que je puisse ensuite, tout de suite, rafraîchir ma page et que cette dernière marche avec le CSS généré.

Voici:

• Télécharger PHamlP
• L'installer sur votre serveur distant où vous aller avoir votre CSS.
• Vous créez un fichier .scss et travaillez dessus.

Enfin, vous créez un fichier .php avec ceci à l'intérieur:

'compressed'));
$css = $sass->toCss('style.scss');
echo $css;
?>?

Changez le style.scss par le nom de votre fichier .scss.

Dans votre projet vous mettez dans le header:

?

Vous pourrez ainsi travailler, sauvegarder et ainsi avoir toujours vos dernières modifications dans le projet.

-prefix-free est un petit fichier JavaScript (2 Ko) développé par Lea Verou, développeur Web passionnée par les standards Open Source, CSS3 et JavaScript. Le rôle de ce script est d'ajouter automatiquement des préfixes propriétaires nécessaires à la reconnaissance de certaines propriétés de la spécification CSS3 par les différents navigateurs modernes.

Mais quel est le problème ?

Les propriétés CSS3 avancées sont intégrées dans les différents navigateurs de manière non concertée et selon le bon vouloir des développeurs de ces butineurs ! Pour ne pas entraver la prise en compte de ces propriétés non validées par le W3C on a autorisé une syntaxe personnalisée afin de permettre leur intégration progressive. Le choix a été fait d'utiliser un préfixe propriétaire pour identifier les propriétés CSS3 prises en compte par chaque type de navigateur (selon leur moteur de rendu). Les préfixes principaux :

• -webkit- (pour Chrome, Safari,…)
• -moz- (pour Firefox, Flock,…)
• -o- (pour Opera)
• -ms- (pour Internet Explorer)

Les développeurs Web souhaitant d'ores et déjà utiliser ces propriétés CSS sont donc contraints à écrire plusieurs lignes pour que la prise en compte de leur feuille de style se fasse le plus largement possible. Un exemple pour illustrer cela. Ci-dessous la fonction de zoom d'élément (ici doublement de la taille de l'élément ayant pour id zoom) si on ne tient compte que de la spécification officielle :

#zoom {
  transform: scale(2);
}

Pour être certain que cette transformation s'opère dans un maximum de navigateurs, il va falloir ajouter plusieurs lignes supplémentaires :

#zoom {
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

Utilité de -prefix-free ?

-prefix-free est un petit fichier JavaScript qui ajoute à la volée le bon préfixe propriétaire selon le navigateur affichant la page. Plus besoin, donc, d'ajouter dans la feuille de style les différentes propriétés propriétaires ! -prefix-free adapte la propriété CSS3 au navigateur. Un exemple, voici la propriété définissant un fond en dégradé :

#degrade {
    background: linear-gradient(#96C7CC, #FFF);
}

Cette ligne de la feuille de style sera remplacée de la manière suivante pour les utilisateurs de Firefox :

#degrade {
    background: -moz-linear-gradient(#96C7CC, #FFF);
}

Et ainsi pour les utilisateurs d'Opera :

#degrade {
    background: -o-linear-gradient(#96C7CC, #FFF);
}

Les avantages de cette technique :

• Les feuilles de styles feront une cure d'amaigrissement non négligeable (une seule ligne pour une même propriété de style).
• Les développeurs web expérimentés apprécieront le gain de temps (pas besoin d'ajouter les lignes avec propriétés préfixées).
• Les débutants en codage CSS3 ne seront pas déboussolés par les pléthores de préfixes.

Comment faire fonctionner -prefix-free ?

La procédure d'installation de -prefix-free est relativement simple. Placer le fichier à un endroit de votre hébergement, puis insérer la ligne suivante dans la partie de vos pages HTML.

Pour minimiser l'effet FOUC - c'est un phénomène décrit par bluerobot.com qui se traduit par l'affichage de la page brute avant celui de la page stylée - il est recommandé de placer la ligne d'appel du fichier JS juste après la déclaration de la CSS.

Conditions d'utilisation

Comme tout script "patchant", l'utilisation de ce genre d'outil est soumise à certaines conditions…

Les points positifs

• Traite les styles CSS appelés par une balise link ou contenus dans une balise style, mais également ceux des attributs style à l'intérieur des balises.
• Prend en compte les nouveaux éléments link et style et les modifications des attributs style (nécessite un plugin).
• Est compatible avec jQuery (nécessite un plugin).
• Est compatible avec CSS3 Pie (de manière générale d'ailleurs, ne traite pas les propriétés déjà préfixées).
• Les navigateurs cibles compatibles sont : IE9 et supérieur, Opera 10 et supérieur, Firefox 3.5 et supérieur, Safari 4 et supérieur, Chrome pour Windows et Mac-OS et Arora, Midori, Chromium, Epiphany, Rekonq pour Linux (testés sur Ubuntu 11.10). En règle générale, tout navigateur prenant en charge les propriétés avancées CSS3 devrait être compatible.
• Pour les navigateurs non compatibles avec ce genre de propriétés (IE8 par exemple) et pour les propriétés étant déjà préfixées manuellement, aucun préfixe ne sera ajouté.

Les limitations

• Ajoute une couche JavaScript, donc une requête de fichier et des traitements de données du côté client.
• Ne traite pas les styles CSS incorporés par l'intermédiaire de la règle @import
• Ne traite pas non plus les CSS provenant d'un autre domaine.
• Pas de traitement des styles incorporés dans les balises (attribut style) pour Internet Explorer et Firefox < 3.6.

Pour terminer ce petit tutoriel, une page de démonstration de -prefix-free

Resssources Web

• Site officiel (où vous trouverez le fichier à télécharger)
• Outil de démonstration de préfixage pour votre navigateur (sur le site officiel)
• La page de démonstration de ce tutoriel
• Le code de -prefix-free sur github (permet également de signaler un bogue)

Flux (rss): http://www.alsacreations.com/rss/apprendre.xml