Petite mise à jour de ma structure par défaut pour commencer un projet.
J’apprends en effet quelques nouvelles techniques, je découvre de nouvelles solutions, certains problèmes, j’expérimente, je teste…
Tout ça, en grande partie grâce à vous d’ailleurs. Du coup, pas de raison de ne pas partager.
Alors bien sûr, je fais certains choix… critiquables (langues, encodage, etc). Il n’empêche que cette structure est solide, souple et éprouvée en conditions réelles.
Elle pourra peut-être tout simplement vous inspirer sur un aspect ou un autre ?
Pré-requis
- Un serveur de type MAMP/LAMP/WAMP.
- Le chargement de la page peut se faire néanmoins en local avec une petite astuce.
Techniques employées
Globales
- Une bonne partie des recommandations Yahoo!’s Exceptional Performance.
XHTML
- Utilisation des Conditional Comments pour cibler les différentes versions de IE sans hack.
CSS
- YUI CSS Reset pour le reset CSS.
- YUI CSS Fonts pour la gestion des polices.
- YUI CSS Base pour établir un affichage par défaut des éléments principaux.
- Les Media types pour pouvoir concaténer les CSS.
- Even More Rounded Corners With CSS pour proposer une solution de modèle de boîte extensible avec des bords arrondis.
- Des boutons extensibles en CSS compatibles tous navigateurs.
JS
- jQuery
- JSMin pour compresser à la volée les JS.
- Browser detect pour pouvoir cibler les navigateurs par CSS sans hack (à n’utiliser que pour des correctifs mineurs évidemment).
- AJAX Libraries API pour profiter d’une éventuelle mise en cache de la bibliothèque.
PHP / Apache
- La méthode Combine pour concaténer à la volée les fichiers CSS et JS.
- CSSTidy pour nettoyer automatiquement les CSS.
- L’URL Rewriting qui est nécessaire en fonctionnement de la méthode « Combine ».
Résultats
- Un code XHTML valide.
- Un code CSS valide.
- Un score avec YSlow de A.
En ligne
- Exemple vierge.
- Exemple avec chargement de Flash, coins arrondis et formulaire.
- Les fichiers sur Google Code.
À venir
- Sans doute des améliorations sur l’accessibilité.
- Des optimisations ?
- Des correctifs ?
10 commentaires ↓
Merci pour ce petit update sur lequel je vais à nouveau faire mon marché sans vergogne… Quelques questions :
Pour le reste moi les CSS Yahoo! je suis pas fan mais sinon je dis chouette. Et vous ?
Salut Christophe,
zoom:1
et autres trucs exotiques sans invalider mes CSS. Rien d’important donc. Pour m’y retrouver facilement quand je suis contraint de faire ça, je le note par un petit commentaire dans la feuille de style principale (comme ici par exemple).body
et être sûr qu’il soit chargé. Sur lehtml
ça marchait aussi très bien mais c’était invalide et ça manquait de cohérence au regard des commentaires conditionnels pour IE.Et sinon, pourquoi pas YUI CSS ? Tu utilises quoi à la place ? C’est mieux ?
Salut Vincent,
Bah YUI CSS j’avais goûté, ça m’a un peu rebuté alors j’en suis revenu à mon bon vieux reset fait maison, façonné avec amour ces dernières années et qui marche très bien. Je te le montrerai à l’occase (sinon il est en ligne sur des projets pros genre Total Fondation je pense). Dans mon souvenir je crois que je l’avais piqué à Etienne avant de l’avoir fait (un peu) évoluer.
Je trouve les bidouilles pour coins arrondis et boutons extensibles de trop. C’est se casser la tête et ajouter du code pour par grand chose. Les bords arrondis, on a les propriétés CSS pour ça. Et styler les formulaires, moins on le fait, mieux on se porte.
La fusion des JS et CSS à la volée, je trouve ça un peu « risqué ». Il vaut mieux bien choisir cette fusion (et faire la fusion par un script avant la mise en prod). C’est un subtil choix ce genre de fusions. Quels fichiers sont utilisés partout, lesquels sont spécifiques, lesquels sont nécessaires sur une succession de page, etc etc. Tout ça pour optimiser l’utilisation du cache, diminuer le nombre de requêtes tout en restant avec un téléchargement initial le moins gros possible.
PS : J’avais ralé pour le bouton Prévisualiser et du coup, je l’ai pas vu, cacher qu’il est au milieu de la barre. Je l’attendais à côté de Envoyer, mais ça a l’air de plaire aux autres 😉 .
Rik,
En effet, je pourrais virer les coins arrondis de la structure « de base ». Après laisser ça aux CSS, dans mon contexte de production actuel (webagency), c’est tout simplement hors de question malheureusement.
Tu noteras que je ne fais que très peu de skinnage concernant les formulaires, et la technique de Samuel me semble par ailleurs très pratique et robuste.
Pour la fusion des JS et CSS, tu mets le doigt sur un problème que je n’avais pas envisagé. Mais en changeant quelques lignes, on devrait pouvoir obtenir n’importe quelle configuration désirée je pense…
Chris,
Tu utilises un reset de ce type ?
* {margin:0;padding:0}
C’est violent tout de même, non ? Tu arrives à prévoir tout les cas de figure ensuite ?
Euh… Oui ! =]
Pour ma part je n’utilise quasiment que ça aussi :
* { margin:0; padding:0; }
C’est beaucoup plus simple et je n’ai jamais eu de souci.
Mais bon, je ne suis pas en agence 😉
Du coup je me suis repenché sur mon reset.css un peu vieux et j’ai viré mon grand méchant « étoile » en ciblant plus particulièrement les éléments qui ont droit aux margin/padding 0.
Ca m’a permis de virer 2-3 trucs pas nets qui trainaient (comme quoi ça sert) et de laisser des aberrations avec un aplomb déconcertant (par exemple un gros
font-family: sans-serif;
bien généraliste, mais vous en faites beaucoup vous des projets en serif ?).En matant le reset de Seb « Cultura » Dussaut (salut, Seb) j’ai vu un abominable
label{ cursor:pointer; }
qui m’a montré que les goûts et les couleurs hin… =]Raconte ?
Non car j’ai honte ! =] (je me souviens pus en vré mais bon c’était pas non plus catastrophique)
Laisser un commentaire