Ponctuation et CSS content

© Emily Mathews

La propriété content en CSS permet d’afficher du texte en CSS pour bien des navigateurs. Cette propriété est d’ailleurs plutôt bien supportée, car même Internet Explorer 8 est en mesure de la comprendre. Bon, Internet Explorer 7 ne comprend pas cette propriété, mais comme dirait Uma Turman pour Schweppes "Hey, what did you expect ?". :) Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de cette propriété content, car certains caractères, liés à la ponctuation, ne sont pas correctement encodés directement dans les feuilles de style. Il faut en réalité utiliser la valeur Unicode de ces caractères si l’on souhaite les voir s’afficher avec les sélecteurs :before et :after. Les valeurs Unicode commencent toujours par un antislash. Je vous … Continuer la lecture de « Ponctuation et CSS content »

Can I Use …?

© Can I use

Je vous en parlais il y a quelques semaines alors que je vous présentais ce que sont l’amélioration progressive et la dégradation élégante ou encore en décembre dernier alors que je vous parlais de la propriété hyphens en CSS… Le site Can I Use est un utilitaire permettant de rapidement visualiser quels navigateurs implémentent les dernières fonctionnalités du web. Pour ma part, j’utilise ce site à chaque fois que je tombe sur une nouvelle spécification du web et que je ne connais pas son comportement sur l’ensemble des navigateurs. C’est devenu une sorte de réflexe chez moi, qui m’a permit d’éviter bien des soucis, et d’accroître mon temps de développement… Depuis le 19 juillet, Can I Use nous propose une … Continuer la lecture de « Can I Use …? »

La famille Simpson en CSS

© Amusing Time

En voilà une idée saugrenue, non ?! Tel est le challenge que s’est pourtant donné Chris Pattle, un développeur reconnu de la communauté du web originaire du Royaume-Uni. Le CSS devient un langage extrêmement puissant, que bien des personnes sous-estiment à nos jours ! Chris Pattle s’est donc mis à décomposer chacun des personnages qu’il a eu envie de représenter en plusieurs formes géographiques, qu’il s’est amusé à superposer. Ainsi, en HTML, la tête d’Homer Simpson ressemble à ça : <div id="homer"> <div class="head"> <!– Cheveux et haut de la tête –> <div class="hair1"></div> <div class="hair2"></div> <div class="body head-top"></div> <div class="no-border body head-main"></div> <!– Le ‘M’ au-dessus des oreilles –> <div class="no-border m1"></div> <div class="no-border m2"></div> <div class="no-border m3"></div> <div class="no-border m4"></div> <!– … Continuer la lecture de « La famille Simpson en CSS »

Revenge.css, un addon qui se venge !

© Heydonworks

revenge.css vous fera sans aucun doute sourire ! Cette feuille de style CSS été créée pour dénoncer les comportements dépréciés en HTML d’une page sur le web. revenge.css utilise ainsi la propriété content ainsi que le sélecteur :after. Mais ne vous attendez pas à ce qu’il vous prévienne « cordialement » ! revenge.css se venge, comme son nom l’indique ! Tous les liens malformés, les attributs dépréciés pour un doctype prédéfini, les éléments en blocs dans les éléments « en ligne », et bien d’autres erreurs encore, vous seront signalés par le biais d’un message sur fond rouge écrit en… Comic Sans, bien sûr ! Sur HeydonWorks, vous trouverez donc un petit marque-page à glisser dans vos favoris. Et ensuite, vous pourrez commencer la navigation, et observer ce … Continuer la lecture de « Revenge.css, un addon qui se venge ! »

Amélioration progressive et dégradation élégante

© Steven Depolo

Aujourd’hui, aucun navigateur ne peut prétendre permettre l’utilisation de toutes les spécifications de l’HTML5, ni même de toutes les propriétés prévues pour le langage CSS3. Ces langages n’en restent pas moins utilisables et permettent de simplifier la vie des développeurs. On peut alors avoir recours à deux grands procédés pour mettre en place ces nouvelles fonctionnalités de façon à ce qu’elles soient au maximum comprises des navigateurs : l’amélioration progressive et la dégradation élégante. Qu’est-ce-que l’amélioration progressive ? L’amélioration progressive consiste à créer d’abord des fichiers compréhensibles et interprétables par tous les navigateurs, pour ensuite y ajouter des améliorations visuelles et/ou sémantiques pour tous les navigateurs qui peuvent les comprendre. Il s’agit donc de créer des pages web "basiques" qui seront par … Continuer la lecture de « Amélioration progressive et dégradation élégante »

Refonte graphique : un système économique

© Ben Garratt

Hier, je vous parlais des bonnes pratiques lors d’une refonte graphique. Pour tout vous résumer, je parlais essentiellement dans un premier temps des améliorations de l’interface qui doivent être mises en place pour une prise en main simple de celle-ci par l’utilisateur. Aujourd’hui, je vais vous parler d’un point que certains peuvent oublier et qui pourtant est essentiel à toute conception préalable. Il s’agit de savoir comment imaginer la monétisation d’un site. Bien évidemment, un portfolio n’aura pas nécessairement ce besoin, mais il me paraît essentiel d’ajouter cette réflexion lors de la mise en place d’un projet de refonte graphique. Penser un système économique fiable Un autre des points importants à ne pas négliger lors de la refonte d’un site … Continuer la lecture de « Refonte graphique : un système économique »

Refonte graphique : interfaces & utilisateurs

© Tim Gouw

L’idée d’une refonte graphique n’intervient pas que dans l’optique de modifier l’architecture d’un site. Bien évidemment, tout dépend des cas évoqués, et il se peut que celle-ci soit réellement envisagée. Mais, le principal objectif d’une refonte graphique est de pouvoir conserver certaines bonnes pratiques tout en améliorant l’ergonomie du site et sa prise en main pour l’utilisateur. Elle a pour rôle d’intervenir en tant que mise à niveau technique et conceptuelle. Une refonte graphique permet ainsi d’observer une mise à niveau liée à l’usage évolutif des technologies : un menu vertical était une pratique largement développée il y a quelques années par exemple. Ainsi, pour mettre en place une refonte graphique, il faut savoir tenir compte de certains éléments bien distincts, … Continuer la lecture de « Refonte graphique : interfaces & utilisateurs »

La vie du développeur front-end

© Radocaj

Ma dernière insertion professionnelle m’a pleinement permis de découvrir le métier de développeur front-end et de me pencher sur les savoir-faire et qualités requises à mettre en œuvre quand on fait ce métier. L’ancêtre du développeur front-end est, sans aucun doute l’intégrateur. Il y a quelques années, l’intégrateur web était la personne chargée de la découpe des maquettes graphiques pour un rendu en pages web. Avec les avancées technologiques, l’intégrateur est devenu un développeur à part entière et ne s’arrête plus essentiellement aux besoins HTML/CSS d’une page classique sur le web. Aujourd’hui, être développeur front-end requiert nécessairement des qualités en matière de développement et d’algorithmie. L’algorithmie est la base de la programmation. C’est par ce procédé, qui met en œuvre … Continuer la lecture de « La vie du développeur front-end »