Ponctuation et CSS content

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 »

Compter le nombre d’éléments en CSS

Décidément, tous les jours je suis bluffée par le CSS ! Saviez-vous qu’il était possible de compter automatiquement des lignes, des blocs, des entités HTML en CSS ? Je ne parle pas de l’utilisation des balises <ol> qui permettent de compter les éléments d’une liste. Je veux parler de la fonction counter() ! On peut imaginer toutes sortes de cas dans lesquels il serait utile de compter automatiquement des éléments. A titre d’exemple, on pourrait s’en servir pour compter et numéroter les différents sous-titres d’une page, sans que cette donnée de lecture apparaisse pour le référencement. On pourrait aussi ajouter le nombre de lignes que possède un bloc de code, et ainsi empêcher que ses chiffres apparaissent lors d’un copier/coller. On pourrait aussi … Continuer la lecture de « Compter le nombre d’éléments en CSS »

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 …? »

Une police d’icônes de réseaux sociaux

Je viens de tomber sur le lien utile du jour : une police entièrement faite d’icônes de réseaux sociaux. Ça pourrait vous sembler être une idée farfelue, ou alors un lien simplement utile pour les graphistes. Mais grâce à la propriété font-face en CSS, un panel de possibilités s’ouvre également aux développeurs. Quoi qu’il en soit, profitez ici de la Mono Social Icons Font. Celle-ci propose un grand nombre de réseaux sociaux représentés : 500px, Amazon, AOL, Apple, Behance, Bing, Blogger, Delicious, Deviantart, Ebay, Facebook, Google +, Grooveshark, iTunes, LinkedIn, MSN, Soundcloud, Twitter, et bien d’autres encore ! Et avec Mono Social Icons, il est aussi possible de profiter de toutes ces icônes sous la forme d’un carré et d’un cercle. Les avantages d’une … Continuer la lecture de « Une police d’icônes de réseaux sociaux »

La famille Simpson en CSS

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 !

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 ! »

Créer une feuille de style pour l’impression

Dans le monde du web, on oublie souvent de penser à l’impression quand on crée le design d’une page. Et pourtant, l’internaute à la recherche d’informations aura sans aucun doute recours à l’impression si le contenu de la page qu’il parcourt lui semble pertinent. Aujourd’hui, très peu de sites implémentent une feuille de style dédiée à l’impression en présumant que leurs informations apparaissent conformément à leurs attentes. Malheureusement, c’est rarement le cas. Ayant travaillé à plusieurs reprises sur ce type de projet, j’ai pu répertorier une liste non-exhaustive des points à surveiller attentivement. Mettre en place des règles CSS pour l’impression Dans un premier temps, il convient de préciser aux navigateurs les règles CSS qui doivent être uniquement apposées dans … Continuer la lecture de « Créer une feuille de style pour l’impression »

Les enjeux du CSS pour l’impression

C’est réellement intéressant de voir à quel point dans le monde du web, on oublie que finalement, le support papier reste celui préféré pour la lecture. J’ai notamment eu la curiosité d’observer mes sites et quelques-uns des sites que je consulte régulièrement en mode Apercu avant l’impression : le résultat en est plutôt surprenant. J’estime que 95% des sites sont incompatibles avec la notion d’impression. Pour ce qui est du rendu des articles de ce blog à l’impression, celui-ci a été optimisé : la plupart des informations annexes à l’article ont été supprimées. Mais je m’aperçois en écrivant cet article, qu’il me reste un souci de marges légèrement étroites à corriger ! (Je le ferai ce week-end, si j’en trouve le temps !) Le … Continuer la lecture de « Les enjeux du CSS pour l’impression »

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

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 »