Tags: css

notes (65)

Variables CSS

Date
Catégories
Tags

Un petit point sur les variables CSS, qui sont « officiellement » devenues un brouillon de travail au W3C en avril dernier.

Accordéon en CSS

Date
Catégories
Tags

Petite expérimentation toute simple sur la manière d'obtenir un effet accordéon en css uniquement.

Transition CSS

Date
Catégories
Tags

Petite expérimentation sur la gestion des transitions CSS d'un élément, avec identification de la fin de toutes les transitions.

Opera : combien de transitions ?

Date
Catégories
Tags

Alors que je cherchais à simplifier l'objet javascript qui me sert à gérer les animations, je me suis retrouver face à un problème dont je n'ai pas encore trouver la solution : comment savoir, sous Opera, quand une transition CSS est terminée ?

Open Web

Date
Catégories
Tags

Daniel Glazman, co-président du groupe de travail CSS au W3C, développeur de logiciels d'édition web, du Composer de la suite web Mozilla à la fin des années 90 jusqu'à BlueGriffon aujourd'hui, a publié un billet plutôt alarmant.

Effet de vague sur une liste d'items

Date
Catégories
Tags

Le bling-bling sévit partout, y-compris dans le développement web. Exemple : les items de liste du pied-de-page du blog {Sciences²} (dont la lecture est par ailleurs fortement recommandée). Autant j'aime l'effet rendu, autant la manière de l'obtenir me laisse, comment dire, perplexe...

Filtrer une liste

Date
Catégories
Tags

Un petit bout de code html/css/javascript tout simple pour filtrer l'affichage des items d'une liste à partir d'une valeur tapée dans un champ. A étendre pour appliquer à des besoins plus sépcifiques.

CSS : background position

Date
Catégories
Tags

On a beau défendre les recommandations W3C pour tout ce qui est languages web, il y a des fois où des implémentations propriétaires sont bien utiles. Exmple avec la propriété CSS background-position.

Nettoyage de printemps

Date
Catégories
Tags

A force de développer le site en continu, le code a fini par s'accumuler, parfois de manière un peu chaotique, sans que j'ai vraiment le temps de penser sa pertinence ou sa structure. Il est donc temps de faire un peu le ménage.

Série d'articles sur les CSS

Date
Catégories
Tags

J'ai rédigé de nombreuses notes au boulot afin d'expliquer certains principes CSS aux collègues développeurs non portés sur la chose. Je vais en publier quelques unes sur ce site, en espérant que cela puisse être utile à d'autres. Comme toujours, cela aurait dû être fait il y a bien longtemps (certains textes ont plus de deux ans)...

Pseudo-éléments des images

Date
Catégories
Tags

Les pseudo-éléments :before et :after permettent de définir des boîtes de contenu avant et après l'élément HTML qui les porte. Alors qu'il est maintenant possible de leur appliquer de nombreuses règles de stylisation, leur utilisation n'est pas totalement standardisée (je ne parle pas des navigateurs qui ne les gèrent pas). C'est le cas des images.

HTML5 pour les développeurs

Date
Catégories
Tags

A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.

News web

Date
Catégories
Tags

Le web d'aujourd'hui, c'est ça : des Ogres (Google et Apple) cherchant à contrôler chaque jour un peu plus ce que l'on fait de nos vies numériques et des Hommes qui, seuls ou en groupe, préfèrent emprunter une autre voie.

Omacronides 4.2

Date
Catégories
Tags

Petite mise à jour du site, à la fois côté serveur et côté client, avec une mise à jour de la maquette, quelques corrections de bugs et l'activation de certaines nouvelles fonctionnalités.

Border-radius ou dessiner des cercles en CSS

Date
Catégories
Tags

L'astuce est déjà ancienne mais il est peut-être utile de rappeler ce qu'on peut faire depuis un moment déjà avec des navigateurs web modernes et quelques règles CSS : arrondir les coins des bordures d'un élément pour créer des cercles.

Négation en CSS

Date
Catégories
Tags

Les feuilles de styles en cascade permettent beaucoup de choses, notamment avec les navigateurs web qui implémentent correctement les spécifications du W3C. Néanmoins, il est parfois difficile - mais pas impossible - d'appliquer une série de règles par la négative (appliquer les styles sauf dans certains cas précis). Les CSS de niveau 3 offriront enfin un outil pour le faire.

Insérer une balise style en javascript

Date
Catégories
Tags

Imaginons : vous devez insérer un élément ou fragment de document lambda dans un document web via le DOM. Cet élément doit obéir à certaines règles CSS et, comme il n'a aucune raison d'être dans le dit document si la gestion du javascript est désactivée, vous insérez ces règles elles-aussi en manipulant le DOM. L'opération serait finalement triviale s'il n'y avait Internet Explorer.

Include en javascript

Date
Catégories
Tags

Du nouveau dans la gestion du javascript, avec la découverte d'une astuce qui répond parfaitement aux besoins de ce site : appeler un fichier javascript à la manière des « include » PHP.

News web en vrac

Date
Catégories
Tags

Quelques liens en vrac sur le développement web, de l'utilisation intempestive des listes de définition à la définition de quelques balises html.

Evolution du code

Date
Catégories
Tags

La dernière phase de mise à jour du site touche à sa fin avec le remaniement de la maquette. De petites modifications dans la forme mais aussi dans la structure des pages.

Comment lutter contre la Div mania

Date
Catégories
Tags

Les standards de publication web du W3C semblent peu à peu s'installer dans les esprits, que ce soit au niveau des professionnels que chez les simples webmasters publiant un site personnel. Cependant, le résultat peut parfois sembler ambigu quand il conduit à remplacer les lignes et les colonnes des tableaux - pensées pour ranger et hiérarchiser des données et non pour construire la maquette d'une page - par une multitude de conteneurs div.

Références (1) : le sélecteur universel

Date
Catégories
Tags

Outre les ressources déjà référencées pour le style switcher, le menu déroulant, le design élastique et les fichiers javascript (galerie de photographies et mise en forme de la page d'accueil et des pages de section), outre les références générales sur les standards et les langages web (XHTML et CSS), il m'a semblé opportun de préciser ici d'autres documents utilisés lors de l'écriture du code des pages de ce site.

CSS 3 et liens externes

Date
Catégories
Tags

La présentation du site est actuellement gérée par des feuilles de styles en cascade de niveau 3. Cette troisième version des CSS en est encore au stade d'ébauche et à l'heure actuelle, seule les recommendations css 2 ont fait l'objet d'une publication officielle (une version révisée 2.1 devrait être diffusée dans peu de temps).

Simplification du code pour les lettrines

Date
Catégories
Tags

A la suite de mes précédentes simplification du code, d'autres modifications me sont apparues judicieuses. Jusque là, j'utilisais une classe spéciale, debut, pour transformer en lettrine la première lettre du premier paragraphe après chaque titre. Il me suffisait de définir les propriétés de cette classe à travers le pseudo-élément first-letter, qui permet d'appliquer des styles à la première lettre d'un paragraphe :

Des logos spécifiques à chaque style

Date
Catégories
Tags

J'ai par ailleurs souhaité pousser un peu plus loin la personnalisation des pages en fonction des styles. Outre le changement de couleurs, on peut facilement adapter les puces des listes ou tout autre icône en utilisant la propriété « image de fond » (background-image). Par contre personnaliser le logo était une autre affaire puisqu'il s'agit d'une image intégrée au code HTML.

La gestion des styles

Date
Catégories
Tags

Je parlerai de la gestion des styles en fonction des navigateurs dans une autre actu. Ici, c'est de relations entre les différentes feuilles dont il s'agit. Résumé de la situation: le site utilise des fichiers CSS pour la mise en forme des pages, un fichier pour le squelette (en-tête, contenu central, pied-de-page) et cinq autres fichiers spécifiques aux cinq styles (printemps, été, automne, hiver et nuit, qui modifient presque essentiellement les couleurs).

Des menus déroulants

Date
Catégories
Tags

J'ai transformé le menu vertical gauche en un menu horizontal déroulant pure CSS. Il fait appel à la fonction hover qui permet d'assigner certaines propriétés lorsqu'on passe la souris au-dessus d'une boîte spécifique. Dans le cas présent, elle est appliquée aux listes de définition utilisées dans le menu: seul le titre (balise dt) est affiché, les sous-titres (balises dd) étant masqués par un display: none. Ensuite, le fait de survoler les dits-titres avec la souris déroulera le sous-menu dans son intégralité grâce à un display: block.

Des corrections nécessaires

Date
Catégories
Tags

Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.

Des styles en fonction du navigateur

Date
Catégories
Tags

Voila quelque chose qui m'agaçait depuis quelque temps : les limitations d'Internet Explorer dans sa gestion des CSS rendaient l'affichage des pages du site quelque peu aléatoire. La solution était donc évidente : construire une feuille de style spécifique à IE qui serait utilisée uniquement pour ce navigateur. J'ai donc ajouté un petit script javascript sur chaque page pour identifier le navigateur qui se connecte et charger la feuille de style adéquate.

Ca m'agace !!!

Date
Catégories
Tags

Un petit mot concernant le bouton Retour en haut de la page : ce bouton se trouve en bas à droite des pages, avec un attribut position: fixed. Cette propriété CSS permet de garder un objet en position fixe dans la fenêtre de navigation: le bouton reste toujours à sa place lorsque vous descendez dans la page. De plus, le morceau de code HTML décrivant le bouton se trouvant en toute fin de code, il faut lui définir une propriété z-index pour qu'il soit visible. Cette propriété permet de spécifier le niveau d'empilement des différentes structures; en lui attribuant la valeur z-index: 1, le bouton se placera par dessus tout le reste.

articles (19)

Caractères unicodes

Date
Mise à jour
Catégories
Tags

Petit memento sur l'utilisation des caractères unicodes dans différents langages de programmation / structuration / présentation. Un travail en construction...

Citations et références en HTML

Date
Catégories
Tags

Une série d'articles ces derniers jours m'a amené à aborder la question des citations dans un document web, et à expliquer les techniques que j'utilise depuis plusieurs années.

Organiser un projet CSS

Date
Mise à jour
Catégories
Tags

Quelques notes rapides et en vrac sur la façon dont je gère des projets CSS depuis quelques temps. Comme il n'existe pas vraiment de standards dans le domaine, il s'agit ici d'une simple habitude de travail.

Position absolue et taille des éléments HTML

Date
Mise à jour
Catégories
Tags

Travaillant principalement sur un produit permettant de construire des applications web, j'ai souvent dû expliquer à mes collègues issus du monde java le pourquoi du comment du positionnement et de la taille des éléments HTML en CSS. Ceci est un texte rédigé pour expliquer la chose...

Affichage du site avec Internet Explorer

Date
Mise à jour
Catégories
Tags

Assurer un affichage correct des pages d'un site web sur tous les navigateurs est parfois une gageure, surtout lorsqu'il s'agit d'Internet Explorer, un navigateur obsolète qui ne respecte que partiellement les langages de publication web. Mise au point de ma position sur le sujet.

Dimensions des tableaux HTML

Date
Mise à jour
Catégories
Tags

La présentation des tableaux en HTML peut parfois être irritante, surtout lorsque vous souhaitez leur donner une taille précise. Voici quelques petites astuces qui permettent de récupérer une largeur et une hauteur définie.

Enfants et descendants en CSS

Date
Catégories
Tags

Le langage CSS est plutôt simple et intuitif. Mais, en s'habituant à cette aisance d'utilisation, on en oublie parfois certaines de ses subtilités (en tout cas c'est mon cas). En voici une parmi d'autres : la présentation des « enfants » et des « descendants » d'un élément.

Des styles en fonction du navigateur

Date
Mise à jour
Catégories
Tags

L'utilisation des feuilles de styles en cascade pour mettre en page son site web n'est pas toujours évident, non que cette technique soit compliquée mais parce que, malgré l'existence de normes communes, chaque navigateur n'en fait un peu qu'à sa tête. Heureusement, des solutions existent. Cependant, leur utilisation ne risque-t-elle pas d'entretenir le statu quo ?!

Notes dans un document web

Date
Catégories
Tags

Internet, en tant que nouveau vecteur de contenu rédactionnel, nécessite de repenser des modèles d'édition créés pour d'autres supports. C'est le cas par exemple des « notes de bas de page » : ont-elles encore un sens dans une publication sur la toile mondiale ? Et comment les présenter ?

Ressources sur les standards web

Date
Mise à jour
Catégories
Tags

Sur le modèle des pages « Ressources Mozilla » et « Charles Vess, ressources et références », voici une liste de liens qui vous aidera à découvrir les standards de publication sur internet.

projets (6)

Simple Slides

Date
Mise à jour
Catégories
Tags

SimpleSlides est un projet tout simple, un POC pour illuster la manière dont on peut réaliser rapidement une visionneuses d'images avec du HTML, un peu de CSS et de javascript. Sa seule ambition est d'éventuellement servir de base à des projets plus aboutits et complets.

rnb-css

Date
Mise à jour
Catégories
Tags

Compilation des différents usages de classes et d'identifiants dans la mise ne forme et la caractérisation d'un document web.

CSS Checklist

Date
Mise à jour
Catégories
Tags

Technique CSS pour présenter une liste de tâches dans une page web en simulant l'état coché (fait) et non coché (à faire).

Web plateform Docs

Date
Catégories
Tags

logo Lancement de Web plateform Docs, un site communautaire chargé de réunir et de publier de la documentation autour des technologies web, soutenu par le W3C, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla et Opera (vous trouvez pas qu'il manque quelqu'un là...).

Les transitions CSS

Date
Catégories
Tags

CEDERHOLM, Dan. Understanding CSS3 Transitions. A List Apart, . Ce n'est pas du HTML 5 mais du CSS 3 : comment modifier dynamiquement la valeur de certaines propriétés CSS, ce que permettent la plupart des librairies javascript. On pourra toujours se demander si c'est aux feuilles de styles de faire cela, mais c'est en tout cas simple et rapide à mettre en place.

HTML 5 et néologismes

Date
Catégories
Tags

CROFT, Jeff. On the term “HTML5”. jeffcroft.com, . Sur l'utilisation du terme « HTML 5 », qui commence à désigner le HTML 5 à proprement parler mais aussi toutes les autres nouvelles spécifications web (CSS 3, DOM 3, Geolocation, etc.). Bruce Lawson propose NEWT (« New Exciting Web Technologies ») ; Jeffrey Zeldman pencherait plutôt pour HART, « HTML5 And Related Technologies », et ça sonne plutôt bien. Pourquoi ne pas simplement parler d'Open Web, ou d'Open Web technologies ?