Tous les articles
➡️ Il y a 110 articles
Comprendre WAI-ARIA, un guide complet
Dans cet article, Kate Kalcevich explique quand utiliser ARIA et comment l'utiliser correctement afin d'aider les nombreuses personnes handicapées qui utilisent des technologies d'assistance pour naviguer sur Internet. Allons-y !Des styles de listes créatifs
Un aperçu de quelques façons utiles et créatives de styliser une liste.Grille CSS et formes personnalisées, 1
Utiliser :has() comme sélecteur de parent et bien plus
Comment appliquer un style à un élément en fonction de ce qui se passe à l'intérieur de cet élément : la révolution :has()Zoomer les images dans une grille
Temani Afif ajoute un effet de survol aux images dans une grille implicite, pas si simple, mais Temani a le don rare de décortiquer les pbs pour les résoudre simplement.CSS Grid : grille implicite et placement automatique
L'article le plus clair sur les grilles implicites et le placement automatique dans CSS Grid.Écrire HTML à la manière HTML (pas XHTML)
26 juillet 2022,htmlAvec Jens Oliver Meiert, redécouvrez le HTML et participez à l'élaboration d'une nouvelle méthode moderne d'écriture du HTML.Une table des matières parfaite avec HTML et CSS
Créer une table des matières pour un document à imprimer s'avère légèrement compliqué, Nicholas C. Zakas propose ici une solution simple en purs HTML et CSS.La différence entre :nth-child et :nth-of-type
La différence entre nth-child et nth-of-type n'est pas forcément évidente et pourtant elle est fondamentale.:last-of-type
La pseudo-classe last-of-type cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.Comment apprendre CSS
Pas besoin d'apprendre par cœur chaque propriété CSS, l'important est de comprendre les fondamentaux : cet article de Rachel Andrew vous guidera dans votre apprentissage de CSS.Contrôler l'affichage du texte
Comment gérer le retour à la ligne ou les césures ? Il y a beaucoup plus de façons qu'on ne le pense, et plein d'astuces possibles.Améliorer un texte à faible contraste
Le contraste insuffisant d'un texte est un obstacle grave pour les utilisateurs malvoyants ou simplement à la vue déclinante. Et pourtant, ce problème d'accessibilité lié au contraste est encore très (trop) répandu !Une taille de police enfantine
Défense et illustration des tailles de police plus grandes pour nos utilisateurs, par Tyler Sticka. La Cascade ne peut que plussoyer.Comprendre CSS Grid : Grid template areas
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle poursuit ici avec les zones de grille.Comprendre CSS Grid : les lignes Grid
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle poursuit ici avec les lignes de grille.Comprendre CSS Grid : créer un container Grid
Dans cette nouvelle série, Rachel Andrew analyse la spécification CSS Grid Layout. Elle commence par ce qui se passe quand on crée un conteneur grid.CSS Grid : la différence entre grilles explicite et implicite
La propriété CSS Clip Path
27 décembre 2020,cssSticky footer, de 5 façons
Une brève histoire des sticky footers, par Chris Coyier, depuis les pieds de page collants à l'ancienne jusqu'aux techniques Flexbox et CSS-Grid.Listes CSS, marqueurs et compteurs
Alignement en CSS, un guide complet
Tout sur l'alignement en CSS par Rachel Andrew. Les choses ont beaucoup évolué dernièrement avec Flexbox, CSS Grid et la spécification Box Alignment. Dans la continuité de ses articles de référence déjà traduits dans la Cascade.Comment fonctionne calc()
La fonction calc( ) de CSS nous permet de calculer des valeurs de propriétés. Ire Aderinokun passe en revue son fonctionnement, son utilité et quelques cas pratiques.La propriété CSS visibility et l'accessibilité
Le DOM (Document Object Model) est une interface pour vos pages web. C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa structure et ses styles. Passons tout cela en revue pour comprendre comment ça marche.CSS Flexbox et la dimension des boîtes
Nous allons explorer le dimensionnement en Flexbox, qui est souvent un casse-tête : comment Flexbox décide-t-il de la taille de nos items ?CSS Flexbox et l'alignement, guide complet
Dans cet article, nous examinons les propriétés d'alignement de Flexbox tout en découvrant quelques règles de base qui nous aideront à nous rappeler comment elles fonctionnent sur les axes principal et transversalLe DOM, c'est quoi exactement ?
Le DOM (Document Object Model) est une interface pour vos pages web. C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa structure et ses styles. Passons tout cela en revue pour comprendre comment ça marche.Que se passe-t-il quand on crée un Flexbox flex container?
Lorsque les gens trouvent Flexbox difficile ou déroutant, c'est souvent parce qu'ils essaient de l'utiliser comme Grid layout.Comment fonctionne CSS display: contents
20 octobre 2018,cssNous pouvons contrôler la façon dont la boîte et ses enfants sont dessinés sur la page grâce à la propriété CSS displayL'imbrication des sélecteurs dans Sass
L'imbrication de sélecteurs est une fonctionnalité des préprocesseurs CSS d'utilisation tellement courante qu'elle peut devenir problématique. Par Kitty Giraudel.Sass mixin ou placeholder
Kitty Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux.Créer des systèmes de menu accessibles
Il existe de nombreux types de menus différents sur le Web. Créer des expériences inclusives est une question d'utilisation des bons modèles de menu aux bons endroits, avec le balisage et le comportement adéquats.Sass et interpolation
Tout ce que vous avez toujours voulu savoir sur l'interpolation dans Sass, expliqué par Kitty Giraudel. Une bonne introduction toute simple et les cas d'utilisation principaux, pour interpoler avec plaisir.CSS Grid : comment fonctionne minmax()
La fonction minmax() est l'une des plus utiles parmi les nouveautés introduites par la spécification CSS Grid Layout. Ire Aderinokun la présente à sa façon habituelle: systématique, claire et complète!JSON pour les débutants
23 mars 2017,jsonJSON est un format de données facilitant le stockage et l'échange de données entre tous langages de programmation. Louis Lazaris propose une introduction simple, mais détaillée, pour comprendre JSON et JSONP.Grid et Flexbox, le duo gagnant
CSS Grid et Flexbox sont faits pour fonctionner ensemble. Grid pour l'organisation générale, Flexbox pour les ajustements spécifiques. Chen Hui Jing le démontre avec un exemple magistral (et quelques bonus).Sass, tout sur @extend
Kitty Giraudel, notre grand spécialiste de Sass, est de retour. Il fait le point de façon précise et claire sur ce que personne ne vous avait jamais dit sur @extend.SVG, la syntaxe Path
29 décembre 2016,svgL'élément path de SVG est l'outil de dessin le plus perfectionné qui soit, mais sa syntaxe ne semble pas aisée. Chris Coyier décortique brillamment ce langage, pas si compliqué finalement.Comprendre SVG viewBox
26 décembre 2016,svgTout savoir sur SVG viewbox. L'attribut viewBox est l'un des premiers qu'on rencontre quand on débute avec SVG, cette introduction de Dudley Storey vous simplifiera la vie.Utiliser SVG use
26 décembre 2016,svguse est l'outil de clonage de SVG, il permet de dupliquer des éléments existants ou prédéfinis et d'alléger votre code.CSS Initial, Inherit, Unset et Revert
Il existe quatre valeurs applicables (en théorie) à n'importe quelle propriété CSS, ce sont les valeurs explicites par défaut. Avec Ire Aderinokun apprenez à les connaître et à les différencier.CSS Grid Layout, guide complet
Avec Flexbox, le module CSS Grid Layout représente l'avenir de la mise page CSS. Chris House a conçu un guide complet et plein d'exemples pour enfin comprendre cette spécification complexe.Sur :not et la spécifité
Ire Aderinokun revisite ici la pseudo-classe de négation, nous montre l'envers du décor et nous offre un crash course sur la spécificité!Backgrounds SVG : hexagones et écailles
Dudley Storey poursuit sa passionnante série sur les backgrounds SVG, ici avec des motifs en tuiles hexagonales et en écailles. On y apprend quelques petites astuces relatives à l'encodage base64.Cacher des éléments avec CSS
Encore un article d'Ire Aderinokun, qu'on aime beaucoup ici pour ses analyses en profondeur et la clarté de ses explications. Avez-vous bien tout considéré lorsque vous cachez un élément HTML?Contrôler le modèle de boîte
Dans cet article simple et complet, Ire Aderinokun rappelle les bases du modèle de boîte CSS et montre pourquoi vous devriez utiliser box-sizing.Créer un cube en CSS
David Walsh s’amuse à créer un cube 3D en CSS. En chemin, on suit la logique de construction, on apprend ou on révise la 3D CSS et les animations.Comprendre SVG preserveAspectRatio
22 novembre 2015,svgAprès SVG viewport et viewBox, Joni Trythall présente le complément logique, l'attribut preserveAspectRatio. Là aussi, les choses sont d'abord un peu complexes, mais présentées par Joni elles deviennent très claires.Comprendre SVG viewBox et viewport
22 novembre 2015,svgSVG viewport et viewBox peuvent sembler compliqués et intimidants lorsqu’on débute avec SVG. Excellente introduction agrémentée d'illustrations fruitées.Comment fonctionne z-index
Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement.Les bases de SVG : Groupes
17 octobre 2015,svgSuite des bases de SVG par Dudley Storey : les groupes SVG ressemblent aux éléments div des pages web mais il existe des différences qu’il est important de bien comprendre.Bien utiliser l'attribut alt
Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle pour les images, indispensable pour l'accessibilité et le SEO.CSS :root, le retour aux racines
La cascade CSS est la meilleure et la pire des choses. Dans cet article limpide, Simurai donne quelques astuces simples pour réduire les problèmes de spécificité et mieux comprendre CSS.:nth-child
Le sélecteur :nth-child (“n-ième enfant”) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que vous déterminez.Motifs SVG japonais
Pour le plaisir, Dudley Storey a réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais. Un approfondissement de la série sur SVG, mine de rien, ça devient sérieux!Créer de superbes diagrammes avec SVG et Blend Modes
Une nouvelle association de SVG et CSS Blend Modes pour de nouveaux effets créatifs. De quoi vous faire regretter le bureau, les graphiques et les diagrammes en camembert. Merci Dudley!Backgrounds Pop-Art avec SVG et Blend Modes
Dudley Storey nous a appris à dessiner avec SVG. Ces lignes peuvent devenir complexes, on peut les mélanger à des images via Blend Modes pour créer des backgrounds “pop artBackgrounds SVG : les rayures
Dans la continuité des articles sur les bases de SVG, Dudley Storey commence une série sur les motifs et les backgrounds. SVG permet de réaliser des choses impossibles en CSS.Diagonales et motifs SVG en background
19 juillet 2015,svgLorsque nous comprenons les bases des motifs SVG, c'est un monde de créativité qui s'ouvre. Après les bases de SVG, Dudley Storey nous montre comment créer des backgrounds en SVG.Pourquoi height: 100% ne marche pas
19 juillet 2015,cssLe blog que Maujor consacre à CSS depuis 2006 est bien connu au Brésil pour ses articles spécialisés ou de vulgarisation. Celui-ci fait le point sur le problème height:100%.Mécanique des polices de caractères, 2
18 juillet 2015,typographieDeuxième article de la brillante série de Tobias Frere-Jones. Après les questions de dimensions, Tobias aborde celles de l’épaisseur du trait et des graisses.Guide de Flexbox : space-between, l'oublié
5 juillet 2015,flexboxTout comprendre sur space-between, le héros oublié de Flexbox. Noah Blon propose un cas pratique d'utilisation de cette valeur de justify-content dans Flexbox, super pratique pour vos mises en page.Les bases de SVG : Lignes simples et multiples
4 juillet 2015,svgAprès les formes de base de SVG, Dudley Storey présente les lignes, simples et multiples et... ce n’est pas si simple.Le $Path vers la lumière
7 juin 2015,outilsL'installation de logiciels sur notre machine est souvent un processus pénible et semé d'embûches. Mieux connaître $PATH facilitera notre vie et nous évitera quelques crisesLes bases de SVG : Polygones
7 juin 2015,svgDudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes.L'ajustement optique
Les designers ne doivent pas compter sur les seuls logiciels pour faire le travail d'ajustement, mais également sur leurs yeux et leur instinct. Preuves à l'appui.Astuces CSS avec checkbox
C'est incroyable ce qu'on peut faire avec un élément aussi modeste que les cases à cocher... du moins lorsqu'on s'appelle Will Boyd et qu'on a de la créativité à revendre !Les bases de SVG : Rectangles et Carrés
26 mai 2015,svgDudley Storey reconstitue un célèbre tableau de Mondrian et nous montre chemin faisant tout ce qu'il faut savoir pour créer des rectangles en SVG.Les bases de SVG : Cercles et ellipses
25 mai 2015,svgMême lorsqu’on utilise un logiciel de création graphique pour créer des SVG, la connaissance de la syntaxe permet de créer plus rapidement et efficacement des formes simples.Comprendre Clip Path
La propriété clip-path de CSS est un super outil pour réaliser des effets de style5 règles pour rendre SVG accessible
SVG est formidable pour le design responsif, la performance et la qualité vectorielle, mais rendre SVG accessible demande encore un peu de travail, rendu simple avec ces 5 règles proposées par Dudley Storey.5 règles pour rendre SVG accessible
rendre SVG accessible demande encore du travail, simple avec ces 5 règles proposées par Dudley Storey3 raisons d'utiliser HSL pour vos couleurs
Pourquoi utiliser HSL ? Quelle différence entre HSL et RGB ? Dudley Storey passe en revue quelques situations où HSL peut vraiment vous changer la vie.Utiliser HSL pour vos couleurs
La méthode HSL de création de couleurs est bien connue des designers mais négligée par les codeurs. Dudley Storey nous en montre ici tout l'intérêt.Un carrousel responsif en pur CSS
De plus en plus les développeurs web ont besoin de solutions responsives et performantes. Dudley Storey propose ici un carrousel responsive en pur CSS qui répond parfaitement à ces objectifs.Mécanique des polices de caractères, 1
14 février 2015,typographieNotre esprit veut dessiner une forme, mais nos yeux veulent en voir une autre. Cette série d'articles de Tobias Frere-Jones explore le travail en coulisses permettant aux polices d'être fonctionnelles.Un surlignage simple en CSS
Surligner les rangées d'un tableau en CSS est très facile, mais les colonnes ? Les pseudo-éléments sont mis à contribution dans ce tutoriel court, facile et astucieux de l'indispensable Chris Coyier.Le morphing en SVG
Certaines propriétés SVG ne sont pas animables avec CSS. Chris Coyier montre ici comment réaliser simplement un morphing avec SMIL et Javascript.Shape Blobbing
Le shape blobbing c'est cet effet d'aspiration d'une goutte par une autre, réalisable en CSS à partir de filtres pour le flou et le contraste. Tutoriel clair de Chris Coyier.Qu'est-ce qu'un élément remplacé ?
13 janvier 2015,htmlAvez-vous déjà entendu parler des éléments HTML remplacés ? Vous les utilisez pourtant tous les jours sans le savoir, et connaître leur nature peut vous éviter quelques soucis.Utiliser CSS object-fit
13 janvier 2015,cssLa propriété object-fit de CSS offre des options de redimensionnement et de présentation des images qui faciliteront la vie des designers.5 façons d'animer de manière responsable
Nous vivons une époque formidable de l'animation web. Mais tout à notre excitation, nous oublions parfois de nous poser la question du pourquoi ?Guide des animations SVG (SMIL)
Pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.CSS, aider la veuve et l'orpheline
CSS nous permet de contrôler facilement la première ligne d'un texte, mais sa capacité à contrôler la dernière ligne reste limitée. Un rappel sur widows et orphans par Dudley Storey.Toi seul : utiliser only-child de CSS
10 décembre 2014,cssLes cas d'utilisation de only-child sont nombreux. Comme souvent avec les pseudo-classes, il nous permet d'écrire un code concis et adapté au contenu généré dynamiquement.Créer un background vidéo fullscreen avec HTML5
Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.Rendre un SVG responsif
9 décembre 2014,svgInfiniment redimensionnable, le format SVG n'en est pas moins étonnamment difficile à rendre responsif. Dudley Storey montre comment y parvenir.La première variable CSS : currentColor
En attendant l'arrivée des variables CSS, Dudley Storey nous rappelle l'existence de currentColor et nous en montre quelques applications:empty, une pseudo-classe pas si vide
Dudley Storey montre ici comment utiliser la pseudo-classe :empty, depuis l'application d'un style CSS aux tableaux et aux navigations dynamiques, jusqu'au nettoyage de votre balisage HTML.La pseudo-classe de négation
Parmi les pseudo-classes, il en est une qu'on oublie souvent, c'est :not(). La pseudo-classe de négation peut pourtant s'avérer très utile dans bien des situations, comme l'explique ici Shay Howe.Portal CSS
Ce projet de Donovan Hutchinson est une excellente introduction aux transformations et animations CSS, ludique et claire.Centrer en CSS, un guide complet
Le centrage en CSS est souvent un véritable casse-tête, car il existe plusieurs techniques différentes selon les cas d'utilisation. Chris Coyier les a listées et nous donne toutes les solutions.Raccourcis et astuces Emmet
Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.Créer des sphères en CSS
Nous aussi nous pouvons faire des bulles, grâce à Donovan Hutchinson, maître des sphères.Les filtres CSS
26 juillet 2014,cssEn été, il n'y a pas que les filtres solaires, c'est aussi le moment idéal pour se pencher sur une propriété qui peut être utile... par Paula Borowska.Les dégradés SVG
6 juin 2014,svgLes dégradés SVG permettent de remplir quasiment sans effort une forme complexe, et par rapport aux dégradés CSS ils présentent l'avantage d'être présents dans le DOMSubtilités de CSS3 Transitions
30 mai 2014,animationLouis Lazaris montre quelques utilisations inattendues des transitions CSS3 et un piège à éviter. Animez vos pages en pur CSS.Animer un SVG avec CSS
Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours.Combinateurs et pseudo-classes CSS
Nous poursuivons notre introduction aux basiques de CSS avec un article de Steven Bradley sur les combinateurs et les pseudo-classes. La maîtrise de cette syntaxe vous aidera à mieux coder.Pseudo-éléments :before & :after
Cet article de Louis Lazaris s'adresse à ceux qui ont découvert avec émerveillement les trucs sympas qu'on peut faire avec les pseudo-éléments et veulent mieux connaître cette technique très utilisée. On commence par :before et :after.Centrer un bloc div, guide complet
Un guide complet pour centrer une div. Steve Pear fait le tour de la question du centrage de div en CSS et propose des solutions pour tous les cas de figure.Les dégradés CSS
09 mars 2014,cssSurligner les rangées d'un tableau en CSS est très facile, mais les colonnes ? Les pseudo-éléments sont mis à contribution dans ce tutoriel court, facile et astucieux de l'indispensable Chris Coyier.Flexbox, guide complet
Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.CSS Block, Inline et Inline-Block
18 janvier 2014,cssLe premier d'une série de 3 articles de Louis Lazaris sur des notions de base de CSS. Nous commençons aujourd'hui avec les notions parfois confuses de Block, Inline et Inline-Block.Le positionnement CSS
18 janvier 2014,cssUne technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété positionDe la Typographie Web
Être designer demande une compréhension profonde de la typographie et de la sélection et de l'association des polices de caractères. Le grand Jason Santa Maria l'explique avec intelligence et sensibilité.Emmet, un turbo dans votre CSS
20 décembre 2013,cssJosh Medeski se concentre ici sur Emmet pour CSS : comment Emmet transforme instantanément de simples abréviations en snippets de code CSS complexes.Goodbye, Zen Coding. Hello, Emmet!
Emmet, anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps.Le web, 95% de typographie
Un bref rappel par Oliver Reichenstein, fondateur d'Information Architects, de l'importance de la typographie dans le web, ce qu'elle est et ce qu'elle n'est pas. Simple, direct, éclairant et inspirant.Box-sizing pour les nuls
Box-sizing est une alternative au modèle de boîte standard. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska.