Ponctuation et CSS content

Copyright : Emily Mathews

La propriété content en CSS permet de composer du texte via le langage CSS. Cette propriété est assez bien supportée par les navigateurs actuels car même Internet Explorer 8 est en mesure de la comprendre. Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de content car certains caractères, liés à la ponctuation, ne sont pas correctement encodés 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 ont pour particularité de toujours commencer par un antislash. Ci-dessous un tableau non exhaustif des caractères liés à la typographie et la ponctuation et leur équivalence en langage HTML, ASCII et … Continuer la lecture de « Ponctuation et CSS content »

Compter le nombre d’éléments en CSS grâce à la fonction counter()

Copyright : Brina Blum

Il est possible de compter automatiquement des lignes, des blocs et des entités HTML en CSS. Il n’est pas question ici d’utiliser la balise <ol> qui permet de compter les éléments d’une liste, mais de profiter de la fonction counter(). Cette fonction se révèle utile à bien des égards. À 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 n’apparaisse pour le référencement. On pourrait aussi ajouter le nombre de lignes que possède un bloc de code et empêcher ainsi que ses chiffres apparaissent lors d’un copier-coller. On pourrait également numéroter les images d’une page et indiquer ce nombre avec des annotations comme « Figure 1 » dans les légendes de ces images. … Continuer la lecture de « Compter le nombre d’éléments en CSS grâce à la fonction counter() »

Utiliser une police d’icônes pour les réseaux sociaux

Copyright : Thought Catalog

Les réseaux sociaux sont aujourd’hui des moyens de dissémination indéniables pour les sites Web. Toutes les entreprises qui travaillent sur leur stratégie de communication digitale sont obligées de réfléchir à comment aborder les réseaux sociaux. Une entité a tout intérêt à se construire une communauté sur ces plateformes pour avoir une certaine visibilité sur la toile. Ainsi les icônes des réseaux sociaux, reconnaissables d’entre mille, sont largement utilisées sur les sites Web. Utiliser une image pour les présenter, c’est bien ; utiliser une police d’icônes, c’est encore mieux ! Ci-dessous une synthèse de ce qu’implique l’utilisation d’une police pour les icônes des réseaux sociaux. Les avantages d’une police pour les icônes Utiliser une police pour les icônes ou tout autre petite image telle … Continuer la lecture de « Utiliser une police d’icônes pour les réseaux sociaux »

Mettre en place une feuille de style pour l’impression

Copyright : Kara Eads

Dans le monde du Web, on oublie souvent de penser à l’impression quand on crée le design d’une page. 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. Ci-dessous une liste non exhaustive des points à surveiller attentivement lors de la création de cette feuille de style. Créer des règles CSS pour l’impression Dans un premier temps, il convient de préciser aux navigateurs les règles CSS qui sont uniquement réservées à l’impression. Il existe deux manières simples de parvenir … Continuer la lecture de « Mettre en place une feuille de style pour l’impression »

Les enjeux du CSS pour l’impression

Copyright : Caleb George

Il est intéressant de voir à quel point dans le monde du Web, on oublie que le support papier reste celui préféré pour la lecture. Peu de sites aujourd’hui ne prêtent attention à cette statistique et leur « aperçu avant impression » laisse parfois à désirer. 95% des sites sont incompatibles avec la notion d’impression. Pourtant le papier présente l’avantage d’un parcours rapide des textes. À tout moment, le lecteur a la possibilité de choisir son passage à lire. Il a en outre la possibilité d’y annoter des éléments sans altérer l’œuvre principale. Par ailleurs, d’après Jakob Nielsen, professeur, écrivain et consultant sur l’ergonomie du Web et le web design, la lecture sur écran est en moyenne 25% moins performante que la lecture … Continuer la lecture de « Les enjeux du CSS pour l’impression »

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

Copyright : 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 restent néanmoins 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 la suite … Continuer la lecture de « Amélioration progressive et dégradation élégante »

Refonte graphique : un système économique

Copyright : Ben Garratt

Envisager une refonte graphique c’est aussi et surtout conceptualiser la monétisation d’un site. Bien évidemment, tout site n’aura pas ce besoin (en guise d’illustration, un portfolio servant de vitrine n’a pas nécessairement cet enjeu). Néanmoins, il est essentiel de prévoir un temps de réflexion à ce sujet lors de la mise en place d’un projet de refonte graphique. Penser un système économique fiable Un des points importants à ne pas négliger lors de la refonte d’un site est son aspect économique. Un site à fort trafic doit s’assurer des conséquences de la future mise en ligne d’une refonte. Il faut penser à optimiser au maximum l’accès aux services proposés qui accroissent les profits réalisés par le site ; et il faut … Continuer la lecture de « Refonte graphique : un système économique »

Refonte graphique : des interfaces, des utilisateurs

Copyright : 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 par 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 ; aujourd’hui, un menu horizontal est recommandé. Ainsi, pour mettre en place une refonte graphique, il faut savoir tenir … Continuer la lecture de « Refonte graphique : des interfaces, des utilisateurs »

La césure typographique en CSS

Copyright : Ken Zirkel

On y pense rarement, et pourtant, la césure, autrement dit la coupure de mots dans un texte, aussi hyphens en anglais, est un procédé typographique très courant. Dans le monde du web, rares sont les sites qui mettent en œuvre cette pratique : certains ne reconnaissent pas les avantages de la césure, d’autres ne sont tout simplement pas au courant de la possibilité d’une telle pratique. Ci-dessous, un exemple concret de l’utilisation de cette propriété en CSS. Règles de typographie Afin de fournir aux lecteurs d’un texte un confort optimal, certaines règles de typographie ont été mises en place. La césure dans un texte est avant tout préconisée dans le but d’améliorer les espacements entre les mots. Ainsi, que ce dernier … Continuer la lecture de « La césure typographique en CSS »