Sunfox

Comment j’ai rendu mon blog responsive

9 août 2014 5 commentaires — css, future-friendly, html, web

L’HTML et le CSS de ce blog ont été écrits en 2006. En années Internet c’est comme si je l’avais fait il y a 3042 ans.

À cette époque l’iPhone n’existait pas encore et on ne se préoccupait pas de savoir si un site fonctionnait sur son assistant personnel ou pas. La première mention de Responsive Web Design date de 2010 (il y a 520 ans environ). Essentiellement il s’agit de transformer un site pour qu’il puisse s’adapter de façon fluide à toutes tailles d’écrans.

Transformer quelque chose qui n’a pas été pensé mobile first n’est pas chose facile, alors un vieux site au CSS croupissant, cela paraît insurmontable.

Suite de l’article…

En CSS, n’utilisez que des classes

6 août 2014 2 commentaires — class, css, selectors

CSS permets d’utiliser plein de sélecteurs raffinés pour ajouter du style à vos éléments. Je soutiens qu’il faut éviter autant que possible d’utiliser quoi que ce soit d’autre que le sélecteur de classes (.foo).

Pour que vos styles soit réutilisables et ne soit plus aussi liés à votre HTML fini donc d’utiliser des sélecteurs d’identifiants, de balises, d’attributs ou de parenté.

Voici pourquoi.

Suite de l’article…

Paris Web 2009

13 octobre 2009 4 commentaires — conférences, css, html, parisweb, quotes

© Thanh

L’édition 2009 des conférences Paris Web est terminée. Une fois de plus la grande qualité des conférences et le bon esprit qui règne étaient là. J’ai a-do-ré.

Quelques citations :

Après tout ça j’ai des milliers de nouvelles idées et de choses à faire. Par exemple il faut que je me renseigne sur l’HTTP « bis » qui est en cours de discution au w3c, que je lise cette documentation sur le cache, que j’installe phpsecinfo, que je lise à propos des méthodes agiles de Jeff Patton, que j’utilise les favelets de Stéphane Deschamps, que je regarde de plus près les CSS media queries, que je me remette à jour dans mes sauvegardes, que je retrouve la proposition de Daniel Glazman sur les règles CSS qui permettent de cibler la disponibilité de certaines propriétés dans les navigateurs, que j’implémente Foaf+SSL quelque part, que je mette la main à la pâte sur La Distribution, …

Merci Paris Web !

L’HTML avant la tempête

12 mai 2009 2 commentaires — cms, css, html, integration, xhtml

La page blanche. Puis viens ce moment pur où, dôté de la maquette du site, il ne reste plus qu’à faire la page la plus propre possible. À nous le choix d’XHTML ou d’HTML, d’utiliser ou pas tt, address, … De créer de jolies listes, des titres à plusieurs niveaux. De choisir avec soin le nom des ids et des classes et de saupoudrer le tout de microformats. Le tout propre et bien indenté.

J’aime ce moment où on peut s’approcher le plus possible des idéaux de l’HTML sémantique… jusqu’à ce que CMS et CSS, bourreaux des cœurs, nous imposent de souiller la pureté de nos documents.

Rédécouvrons cursor:progress

23 avril 2008 4 commentaires — ajax, css, javascript, prototype, ui

L’interface utilisateur passe aussi par la forme du curseur. Peu utilisée en CSS, la propriété cursor regorge pourtant de valeurs dont on peut se servir pour aider l’utilisateur dans une application web (wait progress help default pointer text vertical-text crosshair move -moz-grab -moz-grabbing -moz-copy -moz-alias -moz-zoom-in -moz-zoom-out -moz-cell -moz-context-menu not-allowed no-drop nw-resize n-resize se-resize sw-resize s-resize e-resize w-resize ne-resize col-resize row-resize).

Par exemple, pour indiquer qu’un chargement a lieu via Ajax, plutôt que d’afficher une image de loader animée, un style CSS peu suffire :

.loading, .loading a, .loading input, .loading textarea {
	cursor: progress;
}

Ne reste plus qu’à appliquer la classe loading au body dès que la page fait un appel Ajax ou un long traitement.

Si vous utilisez Prototype ajoutez ces quelques lignes pour que la classe soit appliquée automatiquement tant qu’un appel Ajax a lieu :

Ajax.Responders.register({
  onCreate: function() {
    $$('body').first().addClassName('loading');
  },
  onComplete: function() {
    if (Ajax.activeRequestCount == 0)
      $$('body').first().removeClassName('loading');
  }
});

CSS Naked Day Havoc

10 avril 2008 — css, dates, standards, web

Le CSS Naked Day est une idée rigolote, que j’ai mis en place avec entrain sur mon blog. Elle consiste à ce que tout le monde désactive ses feuilles de style à une date donnée pour promouvoir les standards du Web.

C’est pourquoi le 5 avril mon blog désactivait ses styles en affichant un petit message et un lien vers le site officiel. Tout était automatique pour ne pas avoir à modifier l’apparence de mon site à minuit, en utilisant un morceau de code PHP qu’ils proposent eux-même sur le site officiel.

Manque de pot ils ont décidé de changer la date ! Cette année le jour du CSS tout nu tombe le 9 avril, alors que les deux années précédentes la date était fixée au 5. Évidemment cela casse les très nombreux plugins ou scripts qui ont été crées pour l’événement, comme ce que j’utilisais sur mon blog.

D’après le site officiel la date est désormais fixée au premier Mardi, Mercredi ou Jeudi d’avril qui ne soit pas le 1er avril. Oui. C’est carrément nul.

J’arrète donc de promouvoir cet événement jusqu’à ce qu’ils ne remettent une date fixe. Ou au moins quelquechose de calculable. Comme le premier mardi d’avril à part le 1er, au moins je pourrais le calculer facilement et ne pas avoir à éditer le code de mon site chaque année…

La sémantique des classes

19 novembre 2007 5 commentaires — accessibilité, css, framework, html, sémantique

En HTML le nombre de classes et le nom des classes est libre. Néanmoins il est bon d’utiliser des classes sémantiques, décrivant la fonction de la balise plutôt que son style.

Exemples

Pourquoi faire ?

De cette façon en utilisant des feuilles de style CSS l’on peut décider de changer les couleurs et l’affichage des pages sans avoir à changer l’HTML ou d’avoir des styles illogiques tels que .red { color:pink; }. D’autre part votre site peut avoir plusieurs feuilles de style (impression, mobile, slide, …), où vous pouvez décider par exemple que la classe large-column serait dans ce format… ni large, ni en colonne.

Ce n’est pas très grave si quelques-unes de vos classes décrivent l’apparence finale plutôt que la fonction de votre texte. Néanmoins c’est important dans une démarche qualité globale et cela augmente la réutilisabilité de votre code.

Tout ça pour en venir aux frameworks actuels

Les frameworks CSS qui foisonnent ces derniers temps tels que Blueprint CSS et YUI Grids CSS imposent sciemment l’utilisation de classes telles que <div class="column span-15">. C’est dommage. C’est pourquoi je les évite.

J’attends que les implémentations de CSS dynamiques telles que CleverCSS intègrent les fonctionnalités appréciables de ces frameworks. Mais je n’ai encore vu personne avancer cette idée. Ils pourraient pourtant par exemple avoir des propriétés magiques de type colspan: 15 qui se transformeraient en code nécessaire à la création d’une colonne à la bonne taille… Lazyweb te sens-tu le courage ?

Pas de liens sur les images

19 mars 2005 5 commentaires — css, design, ergonomie, html, image, standards du web

Voici le grand principe html du jour : ne pas faire de liens hypertexte sur les images. Je m’explique.

Suite de l’article…

Coulisses du Roi Arthur

29 janvier 2005 4 commentaires — boulot, css, dvdrama, film, html, sémantique, standards du web

Ça y est, le site du Roi Arthur est né, et c’est moi qui l’ai fait !

Chez Dualnet mon dernier projet a été de construire de A à z le site du DVD du Roi Arthur le film, pour Disney. C’est la première fois que je fais ce genre de site, et j’ai dû le faire entièrement tout seul.

Je suis assez fier du résultat, surtout en ce qui concerne l’html valide, léger et sémantique et le sacré usage des feuilles de style.

Croyez moi, ce respect des standards et cette accessibilité est une révolution dans ce genre de sites. Les sites commerciaux, de films, de DVDs et plus largement de publicité sont tous sauvagement crées pour ne fonctionner que chez la grosse partie des utilisateurs, en oubliant le reste.

C’est sans doute le seul site de film qui puisse être visité proprement à partir d’un PDA. Ou bien encore visité par un téléphone portable, un moteur de recherche ou encore un aveugle. (Si si, les aveugles aussi ont le droit de tout savoir sur le DVD du Roi Arthur… :p)

Class ou id ?

13 juillet 2004 — css, html, sémantique, standards du web

Pour définir le style CSS d’un élément d’ XHTML, que choisir entre une classe (.robert) et un id (#robert) quand cela donne apparement le même résultat ?
que choisir entre un <div class="robert"> et un <div id="robert"> ?
Suite de l’article…