La Cascade

Rechercher

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)

    Avec 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

  • Sticky 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 transversal
  • Le 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

    Nous 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 display
  • L'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

    JSON 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

    L'é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

    Tout 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

    use 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

    Aprè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

    SVG 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

    Suite 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 art
  • Backgrounds 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

    Lorsque 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

    Le 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

    Deuxiè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é

    Tout 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

    Aprè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

    L'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 crises
  • Les bases de SVG : Polygones

    Dudley 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

    Dudley 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

    Mê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 style
  • 5 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 Storey
  • 3 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

    Notre 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é ?

    Avez-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

    La 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

    Les 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

    Infiniment 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

    En é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

    Les 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 DOM
  • Subtilités de CSS3 Transitions

    Louis 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

    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.
  • 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

    Le 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

    Une technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété position
  • De 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

    Josh 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.