Le guide ultime du CSS 2023

Introduction au CSS

Qu’est-ce que CSS ? Définition et objectif

CSS , qui signifie Cascading Style Sheets , est le langage qui définit la présentation des documents Web. Alors que HTML (HyperText Markup Language) fournit la structure et le contenu d'une page Web, CSS est responsable de son apparence. Considérez HTML comme le squelette d'une page Web et CSS comme l'habillage et les vêtements qui la rendent visuellement attrayante.

Par exemple, si vous souhaitez qu'un titre de votre page Web soit en gras, centré et bleu, vous utiliserez CSS pour appliquer ces styles. La partie « en cascade » du nom signifie que les règles de style peuvent passer d'un style à un autre, permettant ainsi à des règles plus spécifiques d'ajouter ou de remplacer des règles plus générales.

Exemple:

Dans cet exemple, les styles s'appliqueraient à n'importe quel élément <h1> du HTML, le rendant bleu, centré et gras.

Bref historique : de CSS1 à CSS4

L'évolution du CSS a été marquée par une série de versions, chacune s'appuyant sur la précédente.

• CSS1 (1996) : La première version de CSS, axée sur le style simple des pages Web.

• CSS2 (1998) : introduction du positionnement, un concept qui permet des mises en page plus complexes. Il a également ajouté davantage de sélecteurs et de propriétés, enrichissant ainsi les possibilités de conception.

• CSS3 (2008-2018) : au lieu d'une version complète, CSS3 a été divisé en modules, chacun se concentrant sur une fonctionnalité spécifique. Les ajouts notables incluent des animations, des transitions et des dégradés.

• CSS4 (au-delà de 2021) : bien qu'il ne s'agisse pas d'une version autonome comme ses prédécesseurs, CSS4 fait référence aux avancées en cours après CSS3. De nouveaux sélecteurs, propriétés et fonctionnalités sont continuellement proposés et intégrés.

Tout au long de ces versions, l'objectif principal reste cohérent : rendre le style Web plus intuitif, adaptable et puissant.

Comment les navigateurs affichent CSS : le moteur de rendu

Le processus par lequel les navigateurs interprètent et appliquent le CSS aux documents HTML est à la fois fascinant et complexe. Cette procédure se produit dans le moteur de rendu du navigateur.

1. Analyse : le navigateur commence par analyser le HTML et le CSS. Cela transforme le HTML en une arborescence DOM (Document Object Model) et le CSS en une structure de style.

2. Construction de l'arbre de rendu : en utilisant les deux arbres, le navigateur construit un arbre de rendu. Celui-ci contient à la fois le contenu visuel et les informations de style pour chaque élément.

3. Mise en page : une fois l'arbre de rendu construit, le navigateur calcule l'endroit où chaque élément doit apparaître à l'écran.

4. Peinture : Enfin, le navigateur "peint" les éléments en appliquant les styles du CSS.

Il convient de noter que toute modification apportée au CSS ou au contenu peut amener le navigateur à répéter partiellement ou entièrement ce processus, garantissant ainsi que le spectateur voit toujours la version la plus à jour de la page Web.

Ce fut un bref voyage dans le monde captivant du CSS. Au fur et à mesure que nous avançons, nous approfondirons les nuances, les subtilités et les possibilités illimitées de ce langage stylistique. Que vous soyez un débutant cherchant à démarrer votre aventure de codage ou un développeur chevronné souhaitant rafraîchir vos connaissances, ce guide a pour objectif d'être votre ressource incontournable pour tout ce qui concerne CSS.

Sélecteurs et propriétés de base

Sélecteurs universels, de type, de classe et d'identification

Dans le domaine du CSS, les sélecteurs sont cruciaux. Ils déterminent les éléments du HTML que vous stylisez. Démystifions les sélecteurs les plus basiques mais indispensables :

• Sélecteur universel ( * ) : comme son nom l'indique, le sélecteur universel cible chaque élément d'une page Web. Utilisez-le avec prudence !

  Exemple:

  * { margin : 0 ; padding : 0 ; }

  Cet exemple garantit que tous les éléments commencent sans marges ni remplissage.

• Sélecteur de type : également appelé sélecteur d'élément, il cible directement un élément HTML.

  Exemple:

  p { color : red; }

  Cela rend tout le texte du paragraphe rouge.

• Sélecteur de classe ( .classname ) : cible les éléments avec un attribut de classe spécifique. Ils sont plus spécifiques que les sélecteurs de type mais pas aussi précis que les identifiants.

  Exemple:

  .highlight { background-color : yellow; }

  Les éléments avec class="highlight" auront un fond jaune.

• Sélecteur d'ID ( #idname ) : ce sélecteur cible un élément unique et unique en fonction de son attribut ID. Chaque identifiant ne doit être utilisé qu’une seule fois par page.

  Exemple:

  #header { background-color : blue; }

  L'élément avec id="header" aura un fond bleu.

Regroupement et combinateurs

Le regroupement d'éléments et l'utilisation de combinateurs sont des concepts fondamentaux qui rendent l'écriture CSS plus concise et logique.

• Regroupement : si vous disposez de plusieurs sélecteurs partageant les mêmes styles, vous pouvez les regrouper.

  Exemple:

  h1 , h2 , h3 { famille de polices : Arial, sans-serif ; }

  Cela applique la police Arial aux trois niveaux d’en-tête.

• Combinateurs : ce sont des symboles utilisés pour définir les relations entre les sélecteurs.

  • Sélecteur de descendant (espace) : cible un élément qui est le descendant d'un autre élément spécifié.

    article p { color : green; }

    Cela stylise tout élément <p> dans un élément <article> pour avoir du texte vert.

  • D'autres combinateurs incluent les sélecteurs d'enfant ( > ), de frère ou sœur adjacent ( + ) et de frère général ( ~ ), chacun définissant des relations uniques.

Propriétés communes : couleur, taille de police, marge, remplissage

Comprendre les propriétés fondamentales est essentiel :

• color : définit la couleur du texte d’un élément.

  Exemple:

  h1 { color : purple; }

• font-size : ajuste la taille du texte. Les valeurs peuvent être dans des unités telles que px , em ou rem .

  Exemple:

  body { font-size : 16px ; }

• margin : définit l'espace en dehors de la bordure d'un élément. Il repousse les éléments adjacents.

  Exemple:

  .box { margin : 10px 20px ; }

• padding : Concerne l'espace à l'intérieur de la bordure d'un élément. Cela augmente la taille visuelle d’un élément.

  Exemple:

  .button { padding : 10px 15px ; }

Avec ces concepts et propriétés fondamentaux à votre actif, vous êtes sur la bonne voie pour maîtriser CSS. Au fur et à mesure que nous poursuivons, nous dévoilerons davantage la tapisserie complexe de styles, de sélecteurs et de sémantiques qui façonnent le Web visuel. Qu'il s'agisse de concevoir un simple blog ou une application Web complexe, ces bases ouvrent la voie.

Modèle et disposition de la boîte

Comprendre le modèle de boîte : marge, bordure, remplissage, contenu

Chaque élément en CSS est considéré comme une boîte. Ce concept fondamental, connu sous le nom de « modèle de boîte », est la pierre angulaire de la conception et de la mise en page Web. Le modèle divise chaque case en quatre composants distincts :

• Contenu : cela représente les « éléments » réels à l'intérieur de la boîte – qu'il s'agisse de texte, d'images ou d'autres médias. Ses dimensions sont définies par des propriétés telles que width et height .

• Remplissage : espace situé entre le contenu et la bordure. C'est comme le rembourrage autour du contenu principal.

• Bordure : la ligne qui englobe le remplissage et le contenu. Les bordures peuvent être stylisées de différentes manières, par exemple pleines, pointillées ou pointillées.

• Marge : la couche la plus externe. Il détermine l'espace entre cette case et les autres cases environnantes.

Représentation visuelle:

Exemple:

Dimensionnement de la boîte : boîte de contenu ou boîte de bordure

La propriété box-sizing détermine la manière dont les dimensions d'un élément (largeur et hauteur) sont calculées. Il joue un rôle central dans la gestion du comportement de la mise en page :

• content-box (par défaut) : avec cette valeur, les propriétés width et height incluent uniquement le contenu. La bordure et le rembourrage sont ajoutés à l'extérieur, augmentant ainsi la taille globale de la boîte.

  Exemple:

  div { box-sizing : content-box; width : 300px ; /* Only the content width */ padding : 10px ; border : 5px solid; }

• border-box : ici, les propriétés width et height englobent le contenu, le remplissage et la bordure. Cela garantit que la boîte conserve une taille cohérente quelles que soient les valeurs de remplissage et de bordure.

  Exemple:

  div { box-sizing : border-box; width : 300px ; /* Includes content, padding, and border */ padding : 10px ; border : 5px solid; }

La valeur border-box s'avère souvent plus intuitive et prévisible pour les mises en page, en particulier dans les conceptions réactives.

Propriétés d'affichage : bloc, en ligne, bloc en ligne, aucune

La propriété display est primordiale en CSS, définissant comment un élément doit être affiché dans la mise en page :

• bloc : les éléments style block occupent toute la largeur disponible, forçant le contenu suivant à une nouvelle ligne. Les exemples incluent les divs et les en-têtes.

  Exemple:

  div { display : block; }

• en ligne : contrairement aux éléments de bloc, les éléments inline n'occupent que la largeur nécessaire et sont intégrés aux autres contenus. Les balises Span et les liens sont des exemples.

  Exemple:

  span { display : inline; }

• inline-block : Il s’agit d’un hybride. Bien qu'ils soient intégrés comme des éléments inline , ils conservent des fonctionnalités de style au niveau des blocs, telles que la définition de la largeur et de la hauteur.

  Exemple:

  button { display : inline-block; }

• none : Cette valeur masque entièrement l’élément de la mise en page. C'est comme si l'élément n'existait pas dans le document.

  Exemple:

  .hidden { display : none; }

Remarque finale : Le modèle de boîte et les propriétés d'affichage jettent les bases de la disposition des éléments sur une page. Ils servent de boussole, guidant le positionnement, le dimensionnement et la présentation globale. Au fur et à mesure que nous progressons, ces concepts fondamentaux ancreront des techniques de style plus avancées, garantissant une compréhension de l'harmonie et de la logique qui font du CSS l'outil puissant qu'il est.

Éléments de positionnement

Positionnement statique, relatif, absolu, fixe et collant

Le positionnement en CSS définit la manière dont un élément est placé dans son élément conteneur ou dans la fenêtre d'affichage. Voici une répartition :

• Statique : il s'agit de la position par défaut de chaque élément Web. Cela signifie que l'élément circulera dans la page comme il le ferait normalement.

  Exemple:

  div { position : static; }

• Relatif : positionne l'élément par rapport à sa position normale. Les propriétés de décalage ( top , right , bottom , left ) permettent alors de déplacer l'élément de cette base.

  Exemple:

  div { position : relative; top : 20px ; left : 10px ; }

  Ici, le div se déplace de 20 pixels vers le bas et de 10 pixels vers la droite par rapport à l'endroit où il se trouverait s'il était static .

• Absolu : positionne l'élément par rapport à l'ancêtre positionné le plus proche. S'il n'y a pas d'ancêtre positionné, il prend le corps du document comme référence.

  Exemple:

  div { position : absolute; top : 30px ; right : 15px ; }

• Corrigé : positionne l'élément par rapport à la fenêtre du navigateur. Il restera au même endroit même si la page défile.

  Exemple:

  div { position : fixed; bottom : 0 ; gauche : 0 ; }

  Cela garantit que le div est toujours positionné dans le coin inférieur gauche de la fenêtre.

• Sticky : Un mélange de relatif et de fixe. L'élément est traité comme relative jusqu'à ce qu'il franchisse un seuil spécifié, auquel cas il devient fixed .

  Exemple:

  header { position : sticky; top : 0 ; }

  L’en-tête restera en haut de la fenêtre une fois que la page aura défilé au-delà de son emplacement d’origine.

Contexte d'empilement et z-index

Lorsque des éléments se chevauchent, le contexte d'empilement détermine lequel apparaît en premier. La propriété z-index permet de contrôler ceci :

• z-index : s'applique uniquement aux éléments positionnés. Un z-index plus élevé signifie que l'élément sera empilé au-dessus des autres avec un z-index plus faible.

  Exemple:

  .overlay { position : absolute; z-index : 2 ; /* Appears above elements with a z-index of 1 or less */ }

  Le .overlay s'empilera au-dessus des autres éléments dans le même contexte d'empilement.

Éléments flottants et flotteurs de compensation

Les éléments flottants ont été initialement conçus pour placer des images dans du texte, mais ont depuis été utilisés pour la mise en page :

• float : permet à un élément d'être poussé vers la gauche ou la droite, avec du texte ou des éléments en ligne qui l'entourent.

  Exemple:

  img { float : gauche; /* L'image flotte vers la gauche, le contenu s'enroule autour de sa droite */ }

• clear : utilisé pour supprimer les effets secondaires des flotteurs. Si un élément est effacé, il apparaîtra sous tous les éléments flottants qui le précèdent.

  Exemple:

  .footer { clear : both; /* Ensures the footer appears below any floated content */ }

Le positionnement et la mise en page sont primordiaux pour donner vie à une vision de conception Web. En comprenant comment les éléments peuvent être placés, empilés et flottants, les concepteurs acquièrent un contrôle précis sur leur canevas Web. Au fur et à mesure que nous progressons, ces compétences permettront de concevoir des conceptions plus complexes et des mises en page réactives, garantissant que vos pages Web seront exactement comme prévu sur tous les appareils et toutes les tailles d'écran.

Les ombres peuvent ajouter de la profondeur et de l'intrigue à vos éléments de conception. Maîtrisez l'art des ombres avec notre guide sur la propriété CSS box-shadow, complet avec 9 exemples solides .

Typographie et style de texte

La typographie est un outil puissant dans le domaine de la conception Web, qui façonne la lisibilité, l’ambiance et l’expérience utilisateur globale. Dévoilons les aspects fondamentaux de la typographie Web :

Polices sécurisées pour le Web et polices personnalisées avec @font-face

Les polices Web sécurisées sont celles universellement disponibles sur différents systèmes d'exploitation, garantissant un affichage cohérent :

• Polices sécurisées pour le Web : quelques exemples populaires incluent Arial, Times New Roman et Courier New.

  Exemple:

  p { famille de polices : Arial, sans-serif ; }

Pour des besoins de conception sur mesure, des polices Web peuvent être incorporées :

• @font-face : Cette règle permet aux concepteurs de charger un fichier de police personnalisé dans les sites Web, offrant ainsi une voix typographique unique.

  Exemple:

  @font-face { font-family : 'MyCustomFont' ; src : url ( 'path/to/mycustomfont.woff2' ) format ( 'woff2' ), url ( 'path/to/mycustomfont.woff' ) format ( 'woff' ); } body { font-family : 'MyCustomFont' , sans-serif ; }

Propriétés de la police : épaisseur, style, espacement

Le réglage fin des polices permet un contrôle précis de leur apparence :

• poids : fait référence à l’épaisseur des caractères dans une police. Les valeurs courantes incluent normal , bold et bolder , mais des valeurs numériques allant de 100 (fin) à 900 (épais) peuvent également être utilisées.

  Exemple:

  strong { font-weight : bold; }

• style : principalement utilisé pour spécifier si une police doit être affichée en italic ou normal .

  Exemple:

  em { font-style : italic; }

• espacement (espacement des lettres et espacement des mots) : ajuste l'espace entre les caractères et les mots, respectivement.

  Exemple:

  p { letter-spacing : 1px ; word-spacing : 2px ; }

Propriétés du texte : hauteur de ligne, alignement du texte, transformation du texte

Ces propriétés permettent des ajustements détaillés de la façon dont le texte est présenté :

• line-height : contrôle l’espace entre les lignes de texte. Ceci peut être défini en utilisant des valeurs sans unités, des pixels, des ems, etc.

  Exemple:

  p { line-height : 1.5 ; /* 150% of the font size */ }

• text-align : définit l'alignement horizontal du texte. Les valeurs incluent left , right , center et justify .

  Exemple:

  h1 { text-align : center; }

• text-transform : contrôle la capitalisation du texte. Les valeurs courantes sont uppercase , lowercase et capitalize .

  Exemple:

  .uppercase-text { text-transform : uppercase; }

La typographie est souvent considérée comme la voix d’un design. Avec les bons choix de polices et les bonnes techniques de style, vous pouvez transmettre le ton, l'emphase et l'intention, créant ainsi une expérience utilisateur qui n'est pas seulement lisible, mais aussi émotionnellement résonnante. À mesure que nous approfondissons l’art de la conception Web, n’oubliez jamais que les nuances de la typographie ont le pouvoir d’élever une conception de bonne à excellente.

Couleurs, arrière-plans et dégradés

L’utilisation esthétique et stratégique des couleurs peut créer des expériences utilisateur immersives. Plongez au cœur du monde des couleurs, des arrière-plans et des dégradés Web :

Formats de couleur : HEX, RVB, RVBA, HSL, HSLA

Comprendre les formats de couleurs garantit aux concepteurs d'obtenir la teinte et la transparence précises qu'ils désirent :

• HEX : Abréviation de « hexadécimal », HEX est une représentation de couleurs à 6 caractères. Il se compose de trois paires, chaque paire indiquant les valeurs de couleur rouge, verte et bleue.

  Exemple:

  p { couleur : #FF5733 ; /* Un orange vibrant */ }

• RVB : signifie rouge, vert, bleu. Utilise des valeurs séparées par des virgules pour représenter les couleurs.

  Exemple:

  div { background-color : rgb ( 255 , 87 , 51 ); /* Same vibrant orange */ }

• RGBA : étend le RVB en ajoutant un canal "Alpha", qui détermine l'opacité (0,0 est entièrement transparent, 1,0 est entièrement opaque).

  Exemple:

  div { couleur d'arrière-plan : rgba ( 255 , 87 , 51 , 0.5 ); /* Orange vif à 50 % d'opacité */ }

• HSL : signifie Teinte, Saturation, Légèreté. Fournit un moyen intuitif de choisir les couleurs.

  Exemple:

  h1 { color : hsl ( 14 , 100% , 50% ); /* Another way to represent the same vibrant orange */ }

• HSLA : similaire au HSL mais avec un canal Alpha ajouté pour l'opacité.

  Exemple:

  h1 { couleur : hsla ( 14 , 100 % , 50 % , 0,5 ) ; /* Orange vif à 50 % d'opacité */ }

Propriétés de l'arrière-plan : taille, position, répétition

Ces propriétés offrent un contrôle précis sur le comportement des images d'arrière-plan :

• size : Définit la taille de l’image d’arrière-plan. Les valeurs incluent contain , cover et des dimensions spécifiques.

  Exemple:

  div { background-image : url ( 'path/to/image.jpg' ); background-size : cover; /* Ensures the image covers the entire element */ }

• position : Détermine la position initiale de l’image d’arrière-plan.

  Exemple:

  div { background-image : url ( 'path/to/image.jpg' ); background-position : center center; /* Centers the image */ }

• répéter : définit si/comment une image d'arrière-plan sera répétée.

  Exemple:

  div { background-image : url ( 'path/to/pattern.jpg' ); background-repeat : repeat-x; /* Repeats the image horizontally */ }

Dégradés linéaires et radiaux

Transitions de dégradés entre plusieurs couleurs, apportant profondeur et texture :

• Dégradés linéaires : transitions de couleurs en ligne droite. La direction peut être spécifiée.

  Exemple:

  div { background : linear-gradient (to right, red, yellow); /* Horizontal gradient from red to yellow */ }

• Dégradés radiaux : les transitions de couleurs rayonnent à partir d'un point central.

  Exemple:

  div { background : radial-gradient (circle, white, blue); /* Circular gradient from white in the center to blue on the edges */ }

Note de clôture : les couleurs, les arrière-plans et les dégradés sont fondamentaux pour créer de la profondeur, une hiérarchie et un intérêt visuel sur une page Web. Que vous recherchiez une élégance minimaliste ou un dynamisme vibrant, la maîtrise de ces aspects vous garantit de transmettre la bonne ambiance et le bon message. Dans les chapitres suivants, nous nous appuierons davantage sur ces éléments fondamentaux pour dévoiler le potentiel illimité du CSS.

Transitions et animations

L'aspect dynamique de la conception Web, les transitions et les animations donnent vie à un site et améliorent l'expérience utilisateur. Plongeons dans le monde dynamique des animations CSS :

Comprendre les transitions : propriétés, durée, timing

Les transitions permettent aux propriétés de changer sur une durée, offrant un effet fluide :

• propriétés : Spécifie quelles propriétés CSS seront transférées.

  Exemple:

  button :hover { couleur de fond : bleu ; propriété de transition : couleur d'arrière-plan ; }

• durée : détermine la durée de la transition.

  Exemple:

  button { transition-duration : 0.5s ; /* Transitions over half a second */ }

• timing : décrit la courbe de vitesse de la transition, ayant un impact sur la sensation au milieu d'une animation.

  Exemple:

  button { transition-timing-function : ease-in-out; /* Starts slow, becomes fast, ends slow */ }

Images clés et animations en plusieurs étapes

Les images clés permettent des animations complexes en plusieurs étapes :

• @keyframes : définit la séquence d'animation, en définissant des waypoints pendant l'animation.

  Exemple:

  @keyframes slide { 0% { left : 0 ; } 50% { left : 30px ; } 100% { left : 0 ; } } div { animation : slide 2s infinite; /* The div will continually slide left and back */ }

Performances et bonnes pratiques pour des animations fluides

S'assurer que les animations sont fluides et ne nécessitent pas beaucoup de ressources est crucial pour l'expérience utilisateur :

• Utilisez la transformation et l'opacité : lorsque cela est possible, animez des propriétés telles que transform et opacity . Elles nécessitent moins de performances que des propriétés telles que margin ou width .

  Exemple:

  div :hover { transform : scale ( 1.1 ); /* Slightly enlarges the div */ }

• Évitez !important : abuser de la règle !important peut rendre difficile la gestion des animations et le remplacement des styles.

• Limitez le nombre d’éléments animés : avoir trop d’éléments animés simultanément peut réduire les performances. Visez un équilibre entre le style visuel et la performance.

• Test sur plusieurs appareils : les animations peuvent fonctionner différemment selon les appareils. Testez régulièrement vos animations sur plusieurs appareils pour garantir la cohérence et la fluidité.

Les transitions et les animations ne sont pas uniquement destinées à l’esthétique ; ils guident les utilisateurs, fournissent des commentaires et améliorent l'engagement global. Cependant, trouver un équilibre entre beauté et efficacité est vital. Un site Web animé qui est lent ou qui ne répond pas peut frustrer les utilisateurs. Exploitez la puissance des animations, mais donnez toujours la priorité à l'expérience de l'utilisateur final. Au fur et à mesure que nous avancerons, vous découvrirez comment ces éléments dynamiques s'intègrent à l'écosystème Web plus large.

Tout en maîtrisant les animations CSS, n'oubliez pas la puissance qu'apporte JavaScript ! Découvrez comment retarder l'exécution avec setTimeout en JavaScript pour améliorer votre interactivité Web.

Conception réactive et adaptative

Dans le paysage numérique diversifié d'aujourd'hui, les sites Web doivent s'afficher et fonctionner de manière transparente sur un large éventail d'appareils. Plongez dans les principes et les techniques qui constituent l'épine dorsale de la conception Web réactive et adaptative :

Mises en page fluides : conception basée sur un pourcentage

Les mises en page fluides permettent aux conceptions de s'adapter dynamiquement aux différentes largeurs d'écran, garantissant ainsi des expériences visuelles cohérentes.

• Conception basée sur un pourcentage : au lieu d'utiliser des valeurs de pixels fixes, les tailles des éléments sont définies à l'aide de pourcentages par rapport à leur conteneur parent.

  Exemple:

  .container { width : 100% ; /* Takes up the full width of its parent */ } .content { largeur : 75% ; /* Occupe 75 % de la largeur de son conteneur parent */ }

Media Queries : ciblage des caractéristiques des appareils

Les requêtes multimédias permettent aux concepteurs d'appliquer des styles CSS en fonction des caractéristiques de l'appareil telles que la largeur, la hauteur ou même l'orientation de l'écran.

• Utilisation des requêtes multimédias : voici comment définir des styles pour les appareils dont la largeur d'écran peut atteindre 600 px (généralement des appareils mobiles).

  Exemple:

  @media ( max-width : 600px ) { body { background-color : lightblue; /* A different background for mobile screens */ } }

Balise méta Viewport et conception axée sur le mobile

Pour garantir que les sites Web s'affichent correctement sur les appareils mobiles, nous utilisons la balise méta viewport. De plus, la conception axée sur les appareils mobiles (appelée conception axée sur le mobile) donne la priorité aux contraintes et aux opportunités des écrans plus petits.

• Balise méta Viewport : cette balise garantit que le contenu est correctement mis à l'échelle et dimensionné sur tous les appareils.

  Exemple en HTML :

  < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

• Conception axée sur le mobile : commencez par les styles mobiles par défaut, puis utilisez des requêtes multimédias pour ajouter des styles pour des écrans plus grands.

  Exemple:

  /* Default mobile styles */ body { taille de police : 14px ; } /* Styles pour tablettes et appareils plus grands */ @media ( largeur min : 600px ) { corps { taille de police : 16px ; } }

Un site qui n'est pas réactif ou adaptatif dans le monde multi-appareils d'aujourd'hui risque d'aliéner une partie importante de son audience. En tant que concepteur, il est primordial de garantir que chaque utilisateur, quelle que soit la manière dont il accède à votre site Web, bénéficie d'une expérience optimale. À mesure que notre exploration du CSS s’approfondit, n’oubliez pas que le but ultime est toujours de fusionner forme et fonction en harmonie, quelle que soit la taille de l’écran.

Vous avez des difficultés avec les iframes dans vos conceptions réactives ? Consultez notre article sur la façon de créer un iframe réactif en CSS pour connaître les dernières stratégies et bonnes pratiques, garantissant des intégrations transparentes en 2023.

Dispositions Flexbox et grille

À mesure que le Web évoluait, la complexité et la polyvalence des mises en page Web ont également augmenté. Flexbox et Grid sont deux outils importants dans l'arsenal du concepteur de sites Web moderne. Ces modèles de configuration permettent des conceptions complexes qui étaient autrefois encombrantes, voire impossibles. Comprenons la puissance et la flexibilité qu'ils apportent :

Bases de Flexbox : axe principal, axe transversal, justification du contenu, alignement des éléments

Flexbox est un modèle de disposition unidimensionnel permettant un alignement et un ordre complexes des éléments dans un conteneur.

• Axe principal et axe transversal : dans Flexbox, l'axe principal est la direction principale dans laquelle les éléments flexibles sont disposés. L'axe transversal est perpendiculaire à l'axe principal.

  Exemple:

  .container { display : flex; flex-direction : row; /* main axis runs left to right */ }

• justifier-contenu : aligne les éléments le long de l'axe principal.

  Exemple:

  .container { justify-content : space-between; /* Distributes items evenly with space between */ }

• align-items : aligne les éléments le long de l'axe transversal.

  Exemple:

  .container { align-items : centre; /* Centre les éléments verticalement dans le conteneur */ }

Création de mises en page complexes avec CSS Grid

Alors que Flexbox est unidimensionnel, CSS Grid est un système bidimensionnel. Cela signifie qu'il peut gérer simultanément les lignes et les colonnes, permettant ainsi des conceptions complexes.

• Définition d'une grille : commencez par définir la propriété display d'un élément sur grid .

  Exemple:

  .grid-container { display : grid; grid-template-columns : 1 fr 2 fr 1 fr; /* Creates three columns: the middle one is twice as wide as the others */ }

Zones de grille, pistes et chaînes de modèles

En approfondissant, CSS Grid offre des fonctionnalités encore plus avancées pour définir et contrôler la mise en page.

• Zones de grille : régions nommées de la grille, permettant des conceptions de mise en page plus sémantiques.

  Exemple:

  .grid-container { grid-template-areas : "header header header" "sidebar main main" "footer footer footer" ; } .header { grid-area : header; }

• Pistes : horizontalement, ce sont des lignes. Verticalement, ce sont des colonnes.

  Exemple:

  .grid-container { lignes de modèle de grille : 100px auto 50px ; /* Définit la hauteur de chaque ligne */ grille-modèle-colonnes : 1 fr 3 fr ; /* Définit la largeur de chaque colonne */ }

• Chaînes de modèle : un raccourci pour définir les zones de modèle de grille.

  Exemple:

  .grid-container { grid-template : "header header" 50px "sidebar main" 200px "footer footer" 30px ; }

L'avènement de Flexbox et Grid dans le monde du CSS a révolutionné la facilité et la précision avec lesquelles les mises en page Web peuvent être créées. N'étant plus liés par les limitations des modèles plus anciens, les designers modernes sont libres de visualiser et de réaliser sans contraintes. Alors que nous parcourons le vaste paysage du CSS, des outils comme ceux-ci nous rappellent constamment la créativité illimitée que le Web peut héberger.

Flexbox reste un outil essentiel dans la boîte à outils de chaque développeur. Obtenez une compréhension rapide de l'une de ses propriétés essentielles en découvrant CSS flex spaceBetween en seulement 1 minute .

Sélecteurs avancés et pseudo-classes

À mesure que les concepteurs s'aventurent au-delà du CSS de base, le domaine des sélecteurs avancés et des pseudo-classes se dévoile. Ces outils puissants garantissent une précision dans le style, permettant des conceptions plus interactives et dynamiques. Approfondissons les capacités de CSS :

Sélecteurs d'enfants, de frères et sœurs et d'attributs

Ces sélecteurs améliorent la spécificité et permettent un meilleur contrôle du ciblage des éléments :

• Sélecteur d'enfant ( > ) : cible un enfant direct d'un élément spécifique.

  Exemple:

  div > p { color : red; /* Styles only the paragraphs directly inside a div, not nested further */ }

• Sélecteur de frères et sœurs ( + et ~ ) : le sélecteur + cible un élément immédiatement après un autre, tandis que le sélecteur ~ cible tous les frères et sœurs suivants.

  Exemple:

  h2 + p { poids de la police : gras ; /* Stylise uniquement le premier paragraphe après un élément h2 */ } h2 ~ p { marge-haut : 20px ; /* Stylise tous les paragraphes après un élément h2 */ }

• Sélecteur d'attribut ( [] ) : cible les éléments en fonction de leurs attributs.

  Exemple:

  input [type= "text" ] { border-radius : 5px ; /* Styles only text input fields */ }

Pseudo-classes dynamiques : :hover, :active, :focus, :nth-child

Ces pseudo-classes traitent des interactions utilisateur et de séquences spécifiques :

• :hover : stylise un élément lorsqu'un utilisateur le survole.

  Exemple:

  a :hover { text-decoration : underline; /* Underlines links on hover */ }

• :active : stylise un élément pendant l'état actif, comme lorsqu'un bouton est enfoncé.

  Exemple:

  button :active { background-color : grey; /* Changes the button's background when pressed */ }

• :focus : stylise un élément lorsqu'il reçoit le focus, souvent observé avec les champs de formulaire.

  Exemple:

  input :focus { outline : 2px solid blue; /* Highlights the input field with a blue outline when focused */ }

• :nth-child() : cible les éléments en fonction de leur position dans une séquence.

  Exemple:

  li :nth-child (odd) { background-color : lightgrey; /* Styles all odd-numbered list items */ }

Pseudo-classes structurelles : :first-child, :last-child, :not()

Ces pseudo-classes permettent aux concepteurs de cibler des éléments en fonction de leur position ou d'exclure des éléments spécifiques :

• :first-child : cible le premier élément enfant de son parent.

  Exemple:

  li :first -child { font-weight : bold; /* Boldens the first item in a list */ }

• :last-child : cible le dernier élément enfant de son parent.

  Exemple:

  li :last-child { margin-bottom : 0 ; /* Removes the bottom margin from the last item in a list */ }

• :not() : exclut un ou plusieurs éléments spécifiés de la sélection.

  Exemple:

  p :not ( .special ) { couleur : vert ; /* Colore tous les paragraphes en vert sauf ceux avec la classe "special" */ }

L'étendue et la profondeur des sélecteurs CSS et des pseudo-classes permettent aux concepteurs de créer des interfaces complexes, réactives et conviviales. Au fur et à mesure que vous parcourez le monde de la conception Web, ces outils permettent précision, efficacité et créativité. À chaque chapitre, nous découvrons des niveaux de fonctionnalités, ce qui montre clairement que la maîtrise du CSS est à la fois un art et une science.

Comprendre les pseudo-classes peut améliorer vos prouesses en matière de style. Plongez dans les nuances d'un sélecteur aussi puissant en maîtrisant le sélecteur :not CSS avec notre guide 101 complet .

Pseudo-éléments et contenu généré

L'interaction entre la conception et le contenu est essentielle pour créer des expériences Web convaincantes. Avec des pseudo-éléments et du contenu généré, CSS propose une boîte à outils pour augmenter ou modifier des éléments sans altérer le HTML d'origine. Dévoilons cette facette passionnante du CSS :

Avant et après les pseudo-éléments

Les pseudo-éléments ::before et ::after permettent aux concepteurs d'injecter du contenu avant ou après le contenu réel d'un élément.

• Utilisation de ::before et ::after : Voici comment ajouter du contenu autour d'un élément.

  Exemple:

  blockquote ::before { content : "“" ; font-size : 3em ; } blockquote ::after { contenu : """ ; taille de police : 3em ; }

Utilisation de la propriété content

La propriété content , généralement utilisée avec des pseudo-éléments, détermine ce qui est inséré dans la page. Il peut contenir du texte, des images, des compteurs et bien plus encore.

• Ajout de texte et d'images : voici un exemple présentant les deux.

  Exemple:

  .icon ::before { content : url ( 'icon.png' ); } .warning ::before { content : "Warning: " ; font-weight : bold; }

Listes de style avec ::marker

Le pseudo-élément ::marker offre un moyen de styliser les puces ou les nombres dans les listes, donnant ainsi aux concepteurs plus de contrôle sur la présentation des listes.

• Personnalisation des marqueurs de liste : modifions la couleur et la taille de nos marqueurs de liste.

  Exemple:

  li ::marker { color : red; font-size : 1.5em ; }

Les pseudo-éléments et le contenu généré élargissent les horizons de ce qui est possible en matière de conception Web sans altérer la structure HTML sous-jacente. Ils offrent un moyen dynamique d'améliorer le contenu, d'ajouter des éléments décoratifs et de garantir que le design complète le contenu. À mesure que nous approfondissons les subtilités du CSS, il devient clair que le langage n'est pas seulement une question de style : il s'agit également de raconter des histoires captivantes à travers le design.

Avec l'évolution des normes Web, il est essentiel de se tenir au courant des sélecteurs CSS les plus puissants. Découvrez lessélecteurs CSS que tout développeur Web doit connaître en 2023 et assurez-vous que vos styles restent précis et efficaces.

Sass et prétraitement

À mesure que CSS se développait et que les projets devenaient plus complexes, les développeurs cherchaient des moyens d'écrire du CSS de manière plus efficace et plus maintenable. Entrez les préprocesseurs, des outils qui étendent les capacités du CSS Vanilla. Parmi ceux-ci, Sass se démarque comme un choix populaire. Découvrons la magie de Sass et le monde du prétraitement :

Introduction aux préprocesseurs CSS : pourquoi et comment ?

Un préprocesseur permet aux développeurs d'écrire du code dans un langage (comme Sass), puis de le compiler en CSS. Mais pourquoi introduire une autre couche ?

• Avantages de l'utilisation d'un préprocesseur :

  • Modularité et réutilisabilité : créez des morceaux de code réutilisables, ce qui rend CSS DRY (Don't Repeat Yourself).
  • Fonctionnalités avancées : utilisez des variables, des mixins et des fonctions non natives de CSS.
  • Code organisé et maintenable : permet une meilleure structuration du code, rendant les grandes feuilles de style plus gérables.

  Insight : considérez un préprocesseur comme un couteau suisse : il s'agit toujours de CSS à la base, mais complété par des outils pour rendre le développement plus fluide.

Variables, mixins et règles imbriquées dans Sass

Sass (Syntaxically Awesome Style Sheets) offre une gamme de fonctionnalités pour booster vos feuilles de style.

• Variables : stockez et réutilisez les valeurs, ce qui facilite grandement les modifications dans de grandes feuilles de style.

  Exemple:

  $primary-color : #3498db ; body { background-color : $primary-color ; }

• Mixins : blocs réutilisables de propriétés CSS ou même des ensembles de règles entiers.

  Exemple:

  @mixin border-radius( $radius ) { -webkit- border-radius : $radius ; -moz- border-radius : $radius ; -ms- border-radius : $radius ; border-radius : $radius ; } .bouton { @include border-radius( 5px ); }

• Règles imbriquées : structurez votre Sass d'une manière qui reflète la structure HTML, conduisant à des styles plus propres et plus intuitifs.

  Exemple:

  nav { ul { margin : 0 ; remplissage : 0 ; style de liste : aucun ; li { display : bloc-en-ligne ; } } }

Compilation et intégration dans les processus de construction

Une fois que vous avez écrit votre Sass, il est essentiel de le compiler en CSS standard pour que les navigateurs le comprennent.

• Compiler Sass : Utiliser des outils comme le compilateur Sass ou des frameworks comme Gulp ou Webpack.

  Insight : le processus traduit les fonctionnalités améliorées de Sass en CSS Vanilla.

• Intégration dans les processus de construction : pour les projets plus importants, intégrez la compilation Sass dans un processus de construction, en garantissant que les styles sont toujours à jour et optimisés.

  Exemple:

  // Using the Sass CLI sass input.scss output.css

Sass et les préprocesseurs en général témoignent de l'évolution des besoins des développeurs Web et de la volonté de la communauté d'optimiser et d'améliorer. Dans un paysage où l'efficacité rencontre la créativité, des outils comme Sass garantissent aux développeurs la puissance et la flexibilité nécessaires pour donner vie à leurs visions avec finesse.