Anne  de Morel

Anne de Morel

1656694800

Comment Utiliser Les Sous-grilles CSS Avec Les Requêtes De Conteneur

Si vous travaillez souvent avec CSS, vous avez peut-être rencontré des mises en page placées côte à côte qui se cassent ou se désalignent lorsque la taille d'un côté change. Presque tous les concepteurs de sites Web ont été confrontés à ce problème, et cela peut être frustrant à résoudre. Heureusement, CSS possède des fonctionnalités vous permettant de créer des mises en page Web qui maintiennent l'alignement lorsque leur contenu change ; celles-ci sont appelées les requêtes de sous-grille et de conteneur.

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités qui peuvent considérablement améliorer la conception de la mise en page Web et le développement Web réactif. Cet article plongera profondément dans les sous-grilles CSS en fournissant un didacticiel sur leur utilisation transparente avec des requêtes de conteneur.

Que sont les sous-grilles CSS ?

Les sous-grilles CSS sont une fonctionnalité relativement nouvelle dans l'écosystème CSS, s'avérant être un ajout important aux spécifications de conception et de mise en page de la grille CSS de niveau deux.

Les éléments (composants enfants) que vous construisez et ajustez dans un conteneur de grille traditionnel n'héritent pas directement des lignes et des colonnes de leur composant parent. Cela entraîne des difficultés à les aligner de manière cohérente avec la grille parent, car chaque élément a tendance à agir indépendamment.

Il faut alors gérer deux grilles distinctes, qui peuvent devenir redondantes. Vous pouvez résoudre rapidement ce problème en ajoutant subgridune valeur pour les propriétés grid-template-rowset grid-template-columns, car les composants enfants de la grille peuvent désormais parfaitement se synchroniser avec leur composant parent.

Les sous-grilles CSS permettent aux composants enfants d'hériter de leurs paramètres de ligne et de colonne parents sans conserver leurs paramètres de grille.

Considérez les trois cartes dans un système de grille imbriquée ci-dessous :

Cartes dans un système de grille imbriquée

Regardez ce qui se passe lorsque vous augmentez le contenu de la carte au centre :

Les cartes de grille imbriquées ont augmenté le contenu du centre

 

Vous pouvez immédiatement voir que les positions du titre et du pied de page sont compromises à mesure que le contenu augmente.

Il existe plusieurs façons de traiter ce problème. Pourtant, ils finissent tous par vous obliger à gérer manuellement des grilles individuelles dans des systèmes de grille imbriqués, ce qui peut être problématique lorsque vous travaillez sur une base de code plus grande.

Les sous-grilles fournissent désormais une solution alternative qui permet aux lignes et aux colonnes de conserver leur position initiale dans le système de grille malgré la modification de leur contenu.

D'après mon exemple ci-dessus, l'ajout subgridde la valeur de s de ma carte grid-template-rowproduira une sortie différente :

.card {
  grid-template-rows: subgrid;
}

Voici le résultat :

cartes de sous-réseau

Malgré l'augmentation du contenu de la deuxième carte, les éléments de titre et de pied de page sont toujours parfaitement positionnés et synchronisés avec la grille parent.

La sous-grille est un ajout important aux spécifications de disposition de la grille CSS en raison de la capacité des composants enfants à hériter des propriétés de leurs composants parents et grands-parents. Il est pratique lors de la création de systèmes de grille imbriqués, de mises en page de formulaires parfaitement alignées et d'autres alignements Web éditoriaux.

Actuellement, seul le navigateur Firefox prend en charge la sous-grille CSS, mais les autres navigateurs populaires ne sont pas loin derrière. Vous pouvez vous référer à ce guide pour approfondir les sous-grilles CSS et leurs fonctions.

Que sont les requêtes de conteneur ?

Depuis l'introduction des requêtes multimédias dans les navigateurs, la conception Web réactive a fait un pas de géant dans le futur, car vous pouvez désormais concevoir des mises en page spécifiques pour les fenêtres du navigateur.

C'est formidable, mais les requêtes multimédias ont également révélé un problème de redondance lors de la création de structures Web plus complexes. Par exemple, les composants enveloppés dans une section conteneur qui doivent ajuster leurs propriétés de mise en page principales (telles que la largeur ou la hauteur) pour s'aligner avec un changement dans la fenêtre d'affichage de la page Web peuvent affecter et casser la conception.

Pour résoudre ce problème, maintenez les requêtes multimédias du composant synchronisées avec la section contenante pour vous assurer que votre composant s'affiche bien sur toutes les tailles de fenêtre. Vous pouvez facilement résoudre ce problème avec des requêtes de conteneur, car au lieu des tailles de fenêtre, vous concevez désormais des éléments en fonction de leurs propriétés réelles. Les requêtes de conteneur permettent à n'importe quel composant de répondre selon un conteneur spécifié.

Dans un système de grille, par exemple, les composants enfants peuvent s'aligner sur leur conteneur et déterminer leur comportement et leur réactivité. Vous pouvez modifier leurs styles en fonction de leur position dans le conteneur (et non dans la fenêtre). Bien que vous puissiez toujours structurer des pages Web avec une disposition de grille réactive, l'utilisation de requêtes de conteneur est une approche plus simple de la conception Web réactive.

Comment fonctionnent les requêtes de conteneur ?

La première chose à comprendre à propos des requêtes de conteneur CSS est que, bien que les "conteneurs" soient les éléments interrogés, les règles des requêtes de conteneur n'affectent que les descendants du conteneur. Par exemple, si vous interrogez a main, sectionou peut-être a divcomme conteneur cible, les requêtes de conteneur vous permettront de définir des règles sur la façon dont les éléments qu'ils contiennent changent lorsque la taille du conteneur change.

Vous pouvez créer une requête de conteneur avec @container. Il recherche le contexte de confinement le plus proche :

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Le code ci-dessus est une illustration de l'utilisation des requêtes de conteneur. Il demande simplement au navigateur de modifier la valeur de la flex-directioncolonne de la carte en rowsi la largeur du conteneur est d'au moins 450px.

Les requêtes de conteneur ont été spécifiées pour être incluses dans CSS containment. Trois propriétés les accompagnent :

première.container-type

Cette propriété affecte un conteneur de requête à un élément afin que ses composants enfants puissent interroger plusieurs aspects de ses fonctionnalités de mise en page.

  • sizecrée un conteneur de requêtes pour les requêtes dimensionnelles de blocs et d'axes en ligne. La mise en page, le style et la limitation de la taille sont appliqués à l'élément
  • inline-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe en ligne du conteneur. La mise en page, le style et la taille en ligne de l'élément sont appliqués
  • block-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe de bloc du conteneur. La mise en page, le style et le confinement de la taille des blocs sont appliqués à l'élément
  • styleest pour les requêtes de style et crée un conteneur de requête
  • statecrée un conteneur de requêtes pour les requêtes d'état

2.container-name

Une propriété facultative qui spécifie davantage le nom du conteneur. Cet attribut agit comme une trappe de sortie lorsque nous ne voulons pas cibler le conteneur parent le plus proche.

Considérez le code ci-dessous :

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

Le CSS ci-dessus génère un conteneur avec un nom spécifié ( sidebar) qui ne contient que du contenu sur l'axe en ligne, ce qui signifie que le contenu peut croître autant qu'il le faut sur l'axe du bloc. Vous pouvez ensuite interroger ce conteneur spécifique avec son container-namesemblable :

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Cette propriété est souvent utilisée comme propriété abrégée que vous pouvez utiliser pour définir à la fois container-typeet container-namedans une seule instruction.

Cas d'utilisation pour les requêtes de conteneur

Les requêtes de conteneur conviennent aux composants hautement réutilisables dont la disposition dépend de l'espace de conteneur disponible. Ils peuvent être utilisés dans diverses situations ou ajoutés à plusieurs conteneurs sur la page.

D'autres cas d'utilisation de requête de conteneur incluent :

  • Dispositions adaptables
  • Cartes, éléments de formulaire, bannières et autres composants modulaires
  • Tests de redimensionnement CSS
  • Pagination mobile et desktop avec des fonctionnalités distinctes

La plupart des navigateurs ne prennent toujours pas en charge les requêtes de conteneur, mais vous pouvez facilement tester leurs fonctionnalités sur Google Chrome Canary. Dirigez-vous vers chrome://flagset activezCSS Container Queries :

Activer les requêtes de conteneur CSS

Vous pouvez également expérimenter les requêtes de conteneur sur Mozilla Firefox en accédant à about:configet en activantlayout.css.container-queries :

activation des requêtes de conteneur firefox

Les requêtes de conteneur sont actuellement dans leur premier projet de travail public, mais il s'agit d'une fonctionnalité qui s'est avérée utile et qui sera probablement intégrée à toutes les versions de navigateur.

Utilisation de sous-grilles CSS avec des requêtes de conteneur

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités CSS fascinantes qui, je pense, changeront votre approche de la conception de la mise en page des pages Web et du style réactif, mais comment pouvons-nous les combiner ?

Supposons que nous ayons une section contenant trois articles au format suivant :

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Plaçons maintenant ces articles dans un système de grille imbriquée où les sous-grilles et les requêtes de conteneur peuvent jouer leur rôle :

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

À partir du code CSS ci-dessus, nous avons fait en sorte que les deux premières colonnes prennent autant de place dans un système de grille à deux colonnes que la troisième, qui se trouve juste en dessous. Nous avons ensuite créé une sous-grille à l'intérieur de l'article pour nous assurer que les éléments à l'intérieur sont synchronisés et ne peuvent pas se casser, même lorsque le contenu de l'article est augmenté.

exemple de système de grille de cartes

Pour rendre ce système plus réactif, nous avons dû cibler la section et définir des règles de requête de conteneur qui s'appliquent aux articles en tant que leurs descendants. Vous remarquerez peut-être que nous avons interrogé la inline-sizepropriété de la section parce que nous voulons que les composants de l'article (enfant) grandissent ou rétrécissent en ligne avec la largeur de la section (conteneur).

Dans ce cas, nous avons fait fléchir les articles dans le sens de la colonne lorsque la largeur de la section est au maximum de 80ch. Cela permet à nos articles de répondre non pas à la taille de la fenêtre mais à la largeur de leur conteneur.

Voici le résultat :

conteneur requêtes sous-réseaux travaillant ensemble

Conclusion

Cet article traite des sous-grilles CSS et des requêtes de conteneur, de leur fonctionnement et des cas d'utilisation. Nous avons également pu expérimenter les deux concepts et les combiner pour créer une mise en page réactive. Les requêtes de conteneur et les sous-grilles CSS en sont actuellement à leur premier projet de travail public, mais ce sont des fonctionnalités qui se sont avérées utiles et qui seront probablement intégrées dans la plupart des nouvelles versions de navigateur.

J'espère que cet article vous a été utile. Bon codage !

Source : https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

What is GEEK

Buddha Community

Comment Utiliser Les Sous-grilles CSS Avec Les Requêtes De Conteneur
Anne  de Morel

Anne de Morel

1656694800

Comment Utiliser Les Sous-grilles CSS Avec Les Requêtes De Conteneur

Si vous travaillez souvent avec CSS, vous avez peut-être rencontré des mises en page placées côte à côte qui se cassent ou se désalignent lorsque la taille d'un côté change. Presque tous les concepteurs de sites Web ont été confrontés à ce problème, et cela peut être frustrant à résoudre. Heureusement, CSS possède des fonctionnalités vous permettant de créer des mises en page Web qui maintiennent l'alignement lorsque leur contenu change ; celles-ci sont appelées les requêtes de sous-grille et de conteneur.

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités qui peuvent considérablement améliorer la conception de la mise en page Web et le développement Web réactif. Cet article plongera profondément dans les sous-grilles CSS en fournissant un didacticiel sur leur utilisation transparente avec des requêtes de conteneur.

Que sont les sous-grilles CSS ?

Les sous-grilles CSS sont une fonctionnalité relativement nouvelle dans l'écosystème CSS, s'avérant être un ajout important aux spécifications de conception et de mise en page de la grille CSS de niveau deux.

Les éléments (composants enfants) que vous construisez et ajustez dans un conteneur de grille traditionnel n'héritent pas directement des lignes et des colonnes de leur composant parent. Cela entraîne des difficultés à les aligner de manière cohérente avec la grille parent, car chaque élément a tendance à agir indépendamment.

Il faut alors gérer deux grilles distinctes, qui peuvent devenir redondantes. Vous pouvez résoudre rapidement ce problème en ajoutant subgridune valeur pour les propriétés grid-template-rowset grid-template-columns, car les composants enfants de la grille peuvent désormais parfaitement se synchroniser avec leur composant parent.

Les sous-grilles CSS permettent aux composants enfants d'hériter de leurs paramètres de ligne et de colonne parents sans conserver leurs paramètres de grille.

Considérez les trois cartes dans un système de grille imbriquée ci-dessous :

Cartes dans un système de grille imbriquée

Regardez ce qui se passe lorsque vous augmentez le contenu de la carte au centre :

Les cartes de grille imbriquées ont augmenté le contenu du centre

 

Vous pouvez immédiatement voir que les positions du titre et du pied de page sont compromises à mesure que le contenu augmente.

Il existe plusieurs façons de traiter ce problème. Pourtant, ils finissent tous par vous obliger à gérer manuellement des grilles individuelles dans des systèmes de grille imbriqués, ce qui peut être problématique lorsque vous travaillez sur une base de code plus grande.

Les sous-grilles fournissent désormais une solution alternative qui permet aux lignes et aux colonnes de conserver leur position initiale dans le système de grille malgré la modification de leur contenu.

D'après mon exemple ci-dessus, l'ajout subgridde la valeur de s de ma carte grid-template-rowproduira une sortie différente :

.card {
  grid-template-rows: subgrid;
}

Voici le résultat :

cartes de sous-réseau

Malgré l'augmentation du contenu de la deuxième carte, les éléments de titre et de pied de page sont toujours parfaitement positionnés et synchronisés avec la grille parent.

La sous-grille est un ajout important aux spécifications de disposition de la grille CSS en raison de la capacité des composants enfants à hériter des propriétés de leurs composants parents et grands-parents. Il est pratique lors de la création de systèmes de grille imbriqués, de mises en page de formulaires parfaitement alignées et d'autres alignements Web éditoriaux.

Actuellement, seul le navigateur Firefox prend en charge la sous-grille CSS, mais les autres navigateurs populaires ne sont pas loin derrière. Vous pouvez vous référer à ce guide pour approfondir les sous-grilles CSS et leurs fonctions.

Que sont les requêtes de conteneur ?

Depuis l'introduction des requêtes multimédias dans les navigateurs, la conception Web réactive a fait un pas de géant dans le futur, car vous pouvez désormais concevoir des mises en page spécifiques pour les fenêtres du navigateur.

C'est formidable, mais les requêtes multimédias ont également révélé un problème de redondance lors de la création de structures Web plus complexes. Par exemple, les composants enveloppés dans une section conteneur qui doivent ajuster leurs propriétés de mise en page principales (telles que la largeur ou la hauteur) pour s'aligner avec un changement dans la fenêtre d'affichage de la page Web peuvent affecter et casser la conception.

Pour résoudre ce problème, maintenez les requêtes multimédias du composant synchronisées avec la section contenante pour vous assurer que votre composant s'affiche bien sur toutes les tailles de fenêtre. Vous pouvez facilement résoudre ce problème avec des requêtes de conteneur, car au lieu des tailles de fenêtre, vous concevez désormais des éléments en fonction de leurs propriétés réelles. Les requêtes de conteneur permettent à n'importe quel composant de répondre selon un conteneur spécifié.

Dans un système de grille, par exemple, les composants enfants peuvent s'aligner sur leur conteneur et déterminer leur comportement et leur réactivité. Vous pouvez modifier leurs styles en fonction de leur position dans le conteneur (et non dans la fenêtre). Bien que vous puissiez toujours structurer des pages Web avec une disposition de grille réactive, l'utilisation de requêtes de conteneur est une approche plus simple de la conception Web réactive.

Comment fonctionnent les requêtes de conteneur ?

La première chose à comprendre à propos des requêtes de conteneur CSS est que, bien que les "conteneurs" soient les éléments interrogés, les règles des requêtes de conteneur n'affectent que les descendants du conteneur. Par exemple, si vous interrogez a main, sectionou peut-être a divcomme conteneur cible, les requêtes de conteneur vous permettront de définir des règles sur la façon dont les éléments qu'ils contiennent changent lorsque la taille du conteneur change.

Vous pouvez créer une requête de conteneur avec @container. Il recherche le contexte de confinement le plus proche :

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

Le code ci-dessus est une illustration de l'utilisation des requêtes de conteneur. Il demande simplement au navigateur de modifier la valeur de la flex-directioncolonne de la carte en rowsi la largeur du conteneur est d'au moins 450px.

Les requêtes de conteneur ont été spécifiées pour être incluses dans CSS containment. Trois propriétés les accompagnent :

première.container-type

Cette propriété affecte un conteneur de requête à un élément afin que ses composants enfants puissent interroger plusieurs aspects de ses fonctionnalités de mise en page.

  • sizecrée un conteneur de requêtes pour les requêtes dimensionnelles de blocs et d'axes en ligne. La mise en page, le style et la limitation de la taille sont appliqués à l'élément
  • inline-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe en ligne du conteneur. La mise en page, le style et la taille en ligne de l'élément sont appliqués
  • block-sizecrée un conteneur de requêtes pour les requêtes dimensionnelles sur l'axe de bloc du conteneur. La mise en page, le style et le confinement de la taille des blocs sont appliqués à l'élément
  • styleest pour les requêtes de style et crée un conteneur de requête
  • statecrée un conteneur de requêtes pour les requêtes d'état

2.container-name

Une propriété facultative qui spécifie davantage le nom du conteneur. Cet attribut agit comme une trappe de sortie lorsque nous ne voulons pas cibler le conteneur parent le plus proche.

Considérez le code ci-dessous :

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

Le CSS ci-dessus génère un conteneur avec un nom spécifié ( sidebar) qui ne contient que du contenu sur l'axe en ligne, ce qui signifie que le contenu peut croître autant qu'il le faut sur l'axe du bloc. Vous pouvez ensuite interroger ce conteneur spécifique avec son container-namesemblable :

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

Cette propriété est souvent utilisée comme propriété abrégée que vous pouvez utiliser pour définir à la fois container-typeet container-namedans une seule instruction.

Cas d'utilisation pour les requêtes de conteneur

Les requêtes de conteneur conviennent aux composants hautement réutilisables dont la disposition dépend de l'espace de conteneur disponible. Ils peuvent être utilisés dans diverses situations ou ajoutés à plusieurs conteneurs sur la page.

D'autres cas d'utilisation de requête de conteneur incluent :

  • Dispositions adaptables
  • Cartes, éléments de formulaire, bannières et autres composants modulaires
  • Tests de redimensionnement CSS
  • Pagination mobile et desktop avec des fonctionnalités distinctes

La plupart des navigateurs ne prennent toujours pas en charge les requêtes de conteneur, mais vous pouvez facilement tester leurs fonctionnalités sur Google Chrome Canary. Dirigez-vous vers chrome://flagset activezCSS Container Queries :

Activer les requêtes de conteneur CSS

Vous pouvez également expérimenter les requêtes de conteneur sur Mozilla Firefox en accédant à about:configet en activantlayout.css.container-queries :

activation des requêtes de conteneur firefox

Les requêtes de conteneur sont actuellement dans leur premier projet de travail public, mais il s'agit d'une fonctionnalité qui s'est avérée utile et qui sera probablement intégrée à toutes les versions de navigateur.

Utilisation de sous-grilles CSS avec des requêtes de conteneur

Les sous-grilles CSS et les requêtes de conteneur sont deux fonctionnalités CSS fascinantes qui, je pense, changeront votre approche de la conception de la mise en page des pages Web et du style réactif, mais comment pouvons-nous les combiner ?

Supposons que nous ayons une section contenant trois articles au format suivant :

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

Plaçons maintenant ces articles dans un système de grille imbriquée où les sous-grilles et les requêtes de conteneur peuvent jouer leur rôle :

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

À partir du code CSS ci-dessus, nous avons fait en sorte que les deux premières colonnes prennent autant de place dans un système de grille à deux colonnes que la troisième, qui se trouve juste en dessous. Nous avons ensuite créé une sous-grille à l'intérieur de l'article pour nous assurer que les éléments à l'intérieur sont synchronisés et ne peuvent pas se casser, même lorsque le contenu de l'article est augmenté.

exemple de système de grille de cartes

Pour rendre ce système plus réactif, nous avons dû cibler la section et définir des règles de requête de conteneur qui s'appliquent aux articles en tant que leurs descendants. Vous remarquerez peut-être que nous avons interrogé la inline-sizepropriété de la section parce que nous voulons que les composants de l'article (enfant) grandissent ou rétrécissent en ligne avec la largeur de la section (conteneur).

Dans ce cas, nous avons fait fléchir les articles dans le sens de la colonne lorsque la largeur de la section est au maximum de 80ch. Cela permet à nos articles de répondre non pas à la taille de la fenêtre mais à la largeur de leur conteneur.

Voici le résultat :

conteneur requêtes sous-réseaux travaillant ensemble

Conclusion

Cet article traite des sous-grilles CSS et des requêtes de conteneur, de leur fonctionnement et des cas d'utilisation. Nous avons également pu expérimenter les deux concepts et les combiner pour créer une mise en page réactive. Les requêtes de conteneur et les sous-grilles CSS en sont actuellement à leur premier projet de travail public, mais ce sont des fonctionnalités qui se sont avérées utiles et qui seront probablement intégrées dans la plupart des nouvelles versions de navigateur.

J'espère que cet article vous a été utile. Bon codage !

Source : https://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics