La propriété CSS3 border-radius permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 border-radius : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent -webkit-border-radius et ceux qui tournent sur Gecko (Firefox, Camino) utilisent -moz-border-radius. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel…

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !

L’actualité du développement web est riche et c’est sans compter les liens plus anciens qui en ont encore sous le pied. Après le petit journal du web et celui consacré à WordPress, voici une sélection de ressources qui devrait plaire aux intégrateurs HTML et CSS. Au menu : un paquet de référence sur la prise en compte des balises HTML5 et des propriétés CSS par les différents navigateurs ; du nouveau pour aller au-delà des polices installées sur le poste client ; quelques Frameworks CSS à tester pour occuper les longues soirées hivernales et du float en veux-tu en voilà !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

• The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.

• HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

  Tag	Information	Version	Attributes
  blockquote	Long quotation	4/5	cite
  dialog	dialog, conversation	5	global attributes
  section	section	5	cite

• Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.

• CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)

• Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.

• Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.
  

• Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

• Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

  Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

  Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

• My Simple Framework — Ce framework fera plaisir à tous ceux qui trouve que la rigidité des grilles entravent leur créativité. A la place, ce framework se distingue avec plus de 1 600 feuilles de style prêtes à l’emploi pour subvenir à vos besoins en matière de mise en page web : 840 CSS en 960 pixels avec par exemple head-nav-3col(1-2-3)-4col(3-4)-960px.css et 840 CSS liquides avec head-nav-2col(1-2)-4col(2-3-4)-liquid.css.

• oocss — Framework CSS à la mode de la programmation objet. A ce sujet, je suis assez d’accord avec Grégoire pour dire que la POO c’est du pipeau — ou du moins pas indispensable en développement web — car la programmation procédurale en a encore sous la botte… Ceci dit, il y a toujours de bonnes idées à prendre dans les frameworks, donc, enjoy!

• Reset CSS spécial HTML5 — Un bon reset CSS c’est le début d’un framework ! Cette remise à zéro des styles par défaut des balises HTML est inspiré par le Reset CSS d’Eric Meyer auquel Richard Clark a ajouté les éléments spécifiques à HTML5 : article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video. Via Blog-html5.

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

• Framework CSS — mettez vos grilles au pas !,
• Frameworks CSS + Reset CSS : design from scratch,
• Framework CSS sémantique ? Comment je vois les choses.

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

• Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
• CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
• Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?,
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire.

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

• Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

Comme tous les intégrateurs web j’utilise plusieurs navigateurs pour tester la conformité du rendu HTML et CSS. Firefox 3 a une place particulière puisqu’il fait également partie des outils de conception grâce à des extensions comme Webdevelopper.

Pour autant, je reste un utilisateur comme les autres quand il s’agit de consulter mes mails (Gmail) de saisir du courrier (Google Documents), de consulter mes flux RSS (Google Reader) ou simplement pour lire le journal (Google News).

Firefox 3 — le capital sympathie s’épuise ?

La force de Firefox 3 ne réside pas dans ces qualité intrinsèques : qu’en reste-t-il une fois les extension désactivées ? Pourtant, l’indulgence de la part de la communauté vis-à-vis du Panda roux a été jusqu’au déni des contre-performances, pourtant évidentes que j’avais évoqué dans l’article Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?

La faute à Javascript ?

La particularité des services mentionnés plus haut est de faire un usage important de Javascript qui sollicite la mémoire du navigateur et grève ses performances. De ce point de vue, Firefox n’est pas un foudre de guerre et question rapidité il ne fait pas le poids, y compris face à Internet Explorer 6…

On a retrouvé Big Foot !

Quant à l’empreinte mémoire, n’en parlons pas : il m’arrive régulièrement d’observer une occupation de près de 1Go. Tout ça ne serait rien, si Firefox n’avait pas la fâcheuse habitude de planter régulièrement. La fonction qui permet de recouvrer l’ensemble de la session n’excuse pas tout. Mais au final, j’y trouve mon compte grâce aux extensions disponibles qui me font gagner du temps dans dans le « débuggage » des pages web.

Et Google Chrome fut

Une des particularités de Google Chrome est de lancer chaque onglet dans un processus différent à côté du noyau principal qui reste très léger. Grâce au gestionnaire de tâche intégré, il devient possible de connaitre précisément l’occupation mémoire de des onglets ouverts. Cela permet d’optimiser la navigation et de mieux gérer la RAM en réservant Google Chrome pour afficher les sites nécessitant des ressources importantes.

Où je veux en venir ? Simplement à une nouvelle organisation de mon surf quotidien : Google Chrome comme navigateur par défaut et Firefox 3 comme outil de développement web.

Conclusion

Comme la majorité de la population n’a pas besoin des extensions de developpement de Firefox 3, Google Chrome risque de rafler la mise auprès du grand public, comme le moteur de recherche Google l’avait fait en son temps : on ne résiste pas à l’accélération de l’affichage des résultats, pas plus qu’à celui des pages web.

Pour finir, il sera plus difficile pour la fondation Mozilla de mettre en place une plate-forme anxiogène sur le produit de Mountain View que sur celui de Redmond !

Firefox ne manque pas d’imagination quand il s’agit de se faire remarquer et le prouve une fois encore pour la sortie de Firefox 3 en organisant une opération visant à établir un record du monde du logiciel le plus téléchargé dans une journée afin d’entrer dans le livre Guiness des records !

A l’heure où je me suis inscris, nous somme 246 670 dans le monde à faire la promesse de télécharger Firefox 3 et 6 868 pour la France. Allez, faites chauffer le buzz ;)

Inscrivez-vous sur WorldRecord.

Si vous utilisez le tableau de bord Admin de WordPress avec Internet Explorer vous avez droit à ce joli visuel vous mettant en garde contre l’utilisation d’un navigateur non sécurisé et vous invitant à switcher pour un monde meilleur ;)

Vous voulez un bon éditeur de page HTML et CSS et avoir sous le coude le maximum de ressources à portée de souris ? Cet article est fait pour vous si cherchez le bon plugin jQuery pour votre projet ou si vous êtes friand de liens pointant vers des ressources indispensables pour la création de sites web. Si en plus vous utilisez WordPress, c’est votre dossier Plugins qui va être content ! Le titre est trompeur : il n’y a pas 1000 ressources, mais bien plus à découvrir… Attention, cette liste est vivante et grandit avec vos suggestions !

La boite à outils du codeur de site web

Javascript »

A force d’ouvrir une palanquée de navigateurs sur mes deux écrans, j’ai découvert qu’il était possible de copier un onglet Firefox vers une deuxième fenêtre par glissé-déposé. Jusque-là rien de très étonnant, me direz-vous ;)

Ce qui est surprenant, c’est que le glissé-déposé d’onglets fonctionne également depuis Firefox (ou Flock) vers Internet Explorer 7.

En revanche, si IE7 accepte les câlins, ce n’est pas le cas de FF qui refuse toute tentative de rapprochement de la part de son rival.

Bref, si Firefox et Internet Explorer parlent « onglets » c’est à sens unique pour l’instant. Peut-être que Firefox 3 sera un peu plus sociable… ^_^v

Edit du 14/01/2007 à 10:32

A la lumière des commentaires Eclairés de mes pairs, Mon jugement je révise Et déclare qu’IE7 Ne vaut pas tripette Qu’on se le dise

Sous ces jeux de mots faciles se cache une interrogation existentielle de la plus haute importance. Si pour le développement d’un site web, la question du navigateur à utiliser ne se pose pas (il faut tous les prendre en compte), pour le surf quotidien, en revanche, je ne sais plus quel navigateur choisir entre Firefox, IE7 et Opera…

Firefox, un renard qui s’apprivoise

Firefox a ma préférence depuis longtemps en raison de sa simplificité et de son « extensabilité », d’une part, mais surtout grâce à son moteur de rendu qui, l’air de rien, rend les pages web plus équilibrées et plus belles, notamment en ce qui concerne la taille des textes par défaut, leur agrandissement, le rendu des éléments de formulaires, les options disponibles pour l’affichage des onglets, et bien sûr les moults modules externes qui satisfont les besoins les plus fous !

Deux problèmes cependant (qui sont certainement liés) : la consommation mémoire et l’instabilité du logiciel. Lorsque j’utilisais Firefox rempli de plugins jusqu’à la gueule, et qui plus est sous Windows 2000, je battais ma coulpe en maudissant ma frilosité et mon attachement à Photoshop qui m’empêchaient de passer sous Ubuntu ou de changer de matériel pour installer un Windows XP ou Vista pour entrer d’un coup dans la modernité…

Internet Explorer 7 à prouver

… Et un jour je suis passé sous Vista (même pas mal). J’ai très vite réinstallé Firefox pour m’apercevoir que les plantages continuaient. Pas toutes les cinq minutes, certes, mais suffisamment pour que je me tourne vers IE7 la larme à l’oeil.

IE7. Ne plante pas. Très rapide (beaucoup plus de Firefox qui, pour une étrange raison met presque autant de temps à afficher une page présente dans l’historique qu’une nouvelle…). Mais avec une ergonomie générale venue d’un autre monde.

Bien sûr, avec un peu d’habitude on s’y fait ; je m’étais bien habitué aux inconsistances de Firefox. (Tiens, à ce propos, j’aimerais savoir si je suis vraiment le seul à rencontrer des problèmes avec le Renard de feu ou si tout le monde fait semblant). Bon, vous remarquerez que parler de IE7 me ramène au Panda roux.

Ceci dit, par rapport à IE6, la dernière version a fait des progrès sensibles, tels que l’affichage de pointillés qui ressemblent vraiment à des pointillés, la prise en compte de la transparence du format PNG en 24 bits, etc…

Toutefois, je regrette le petit retour en arrière sur le zoom de la page qui semble avoir remplacé l’agrandissement de la taille du texte. A moins d’avoir un écran 24 pouces, je ne vois pas trop à quoi ça sert.

IE7 serait très bien pour le surf quotidien mais la gestion des onglets est perfectible. Sous Firefox, il est facile de demander l’affichage des liens dans un nouvel onglet de la même fenêtre alors que IE7 a tendance à ouvrir des nouvelles fenêtres qui encombrent rapidement l’espace de travail.

Sur un air d’Opera

Du coup, je me suis intéressé à Opera. C’est un très bon logiciel rapide et stable, connu pour son support étendu des CSS. Le seul problème que je lui trouve, c’est le manque de fiabillité quant à l’affichage de certaines pages web que j’utilise régulièrement.

Dès qu’Ajax entre en jeu, des bugs d’affichage surviennent, en particulier dans Google Reader et parfois dans Gmail. Il s’agit peut-être d’une mauvaise implémentation de Javascript dans Opera ou une mauvaise utilisation de Javascript de la part des développeurs de chez Google, mais bon…

Dans la série des bugs étranges et venus d’ailleurs, il y a celui qui affecte le texte saisi dans l’éditeur visuel de WordPress : l’attribut href passe en majuscule et des espaces multiples apparaissent dans l’éditeur, mais également dans le billet publié :

Remarquez la ligne blanche après « Klein » qui apparait lors d’une simple saisi de texte dans l’éditeur visuel de WordPress…

Et voici le résultat lors de la prévisualisation du billet

En bref

En pesant le pour et le contre de chaque logiciel, l’expérience la moins désagréable reste celle procurée par Firefox : tant qu’il ne plante pas, c’est parfait… Vivement la version 3 ;)

Depuis peu, l’affichage et le masquage de certaines rubriques de ma blogroll était en grève sans raison apparente : aucune modification des scripts jQuery en question. Tout en continuant malgré tout de chercher du côté de Javascript, je me suis rappelé une discussion avec Goulven ou Sébastien concernant l’intérêt de valider son code HTML pour traquer les erreurs. J’ai lancé HTML Validator sans conviction…

…Et bingo ! Le SGML Parser m’a retourné – outre les presque inévitables erreurs de type general entity « btnG » not defined – un ID « links » already defined de mauvais augure suivi d’un ID « links » first defined here… Arrgh! I did it : j’ai donné deux fois le même identifiant !!!

Voilà ce que c’est que d’ajouter un bloc de code et de donner un identifiant au cas où sans réfléchir. Bref, cette petite anecdote pour vous signaler que oui, la validation HTML peut aider à corriger les erreurs Javascript ;)

Depuis, je ne sors plus sans HTML Validator associé à Firefox. Pour les non-anglophones voici une petite craduction :

HTML Validator est une extension Mozilla pour valider le code HTML dans Firefox et Mozilla [Mozilla est à la fois une organisation et un navigateur web]. Le nombre d’erreurs est visible sous la forme d’une icône dans la barre de status de votre navigateur lorsque vous affichez une page web. Le détail des erreurs est disponible en affichant le code source de la page. Cette extension est basée sur Tidy et OpenSP (SGML Parser). Les deux algorithmes ont été développés à l’origine par le W3C ; ils sont actuellement étendus et améliorés par beaucoup d’autres personnes. Les deux algorithmes sont inclus dans Mozilla/Firefox et la validation s’effectue en local sur votre poste de travail sans envoyer votre code HTML à un serveur tiers. Chaque algorithme a des avantages et des inconvénients. Le programme vous permettra de choisir celui que vous préférez lors de l’installation. Grosso-modo, il faut savoir que SGML Parser est le programme qui assure la validation des pages sur validator.w3.org, tandis que Tidy peut vérifier les points d’accessibilités pour les 3 niveaux définis par le WAI [cf l'article de wikipédia sur le sujet, NdT].

Comme quoi, un outil peut en cacher un autre ;)

Les résultats du Sandbox Designs Competition sont disponibles depuis quelques heures après plusieurs jours passés à peser le pour et le contre de chaque proposition. Chaque membre du jury était libre de laisser libre court à sa subjectivité et à son intime conviction pour se prononcer sur les choix éditoriaux ou la mise en valeur des différentes fonctionnalités qui structurent un blog. Ou encore sur les choix purement esthétiques comme les visuels employés ou les choix colorimétriques. J’ai accordé un poids important au confort de lecture en traquant impitoyablement les déficits en blancs tournants, interlignages et autres espacements. Pour autant, je n’ai pas laissé de répit aux problèmes de lisibilité dépendants de la palette de couleurs retenue : un blog, c’est avant tout beaucoup de texte à lire. En second lieu, j’ai pris en compte l’équilibre global du design. J’ai vérifié ensuite si la structure résistait à l’épreuve de la compatibilité inter-navigateurs. Pour celà, j’ai testé les pages sous Firefox 2, Internet Explorer 6 et Opéra 9, le tout pour Windows. Merci à Scott pour avoir mis en place ce concours qui fut un modèle d’organisation. Vivement l’année prochaine !

C’est quoi au juste ce concours ?

Il s’agissait de proposer un thème pour WordPress en utilisant l’intendance fournie par Sandbox. Je vous renvoie sur l’un des billets que j’ai déjà écris sur ce thème Sandbox. Grosso modo, ce thème a deux particularités. D’une part, il offre l’intégration des microformats dans un écrin xhtml CHIC, donc classe… D’autre part, il utilise le fichier functions.php pour générer des classes à gogo en fonction du contexte dans lequel s’affiche la page dont voici quelques exemples :

 <body class="wordpress y2007 m05 d31 h18 home loggedin"> <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin"> <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09"> <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Et quand on sait que Sandbox fera probablement partie un jour ou l’autre de la distribution WordPress, vous conviendrez qu’il est urgent d’aller jeter un oeil chez l’ami Scott !

46 designs — Mes impressions « à chaud »

La suite de ce billet contient mes notes de lecture prises durant la phase de sélection des designs. Ces notes, destinées à guider mes choix pour désigner les trois meilleurs thèmes accompagnés de leur chalengers, sont à peines réécrites pour les besoins de cet article. A la relecture, je m’aperçois que je n’ai pas été particulièrement tendre : que voulez-vous, c’est pas de ma faute si j’ai pris mon rôle de judge au sérieux ;) En, même temps, je me dis que ça ne sert à rien d’embellir les résultats après coup pour éviter de froisser les susceptibilités. Car en fait, si les résultats parlent d’eux-mêmes, ils ne disent finalement pas grand chose sur les designs qui n’ont pas été retenus.

Ca va sans dire mais mieux en le disant, il s’agit essentiellement d’impressions personnelles et subjectives, même si ça et là, quelques justifications techniques ou ergononiques donnent l’impression du contraire ^_^. Lorsque je n’ai pas pu me prononcer franchement « pour » un design, j’ai joué la carte de l’honnêteté en précisant « N/A » pour « Non Applicable » au moment où j’ai rédigé ma note. En revanche, je me suis appliqué à justifier mes impressions « contre ».

Les 46 designs »