The Raven Technique: Un pas de plus des requêtes de conteneurs

Corbin de corbeau pour CSS Container Query: Plus près de la requête en conteneur

Nous soulignons à nouveau: une requête en conteneur est requise dans CSS! Il semble que nous nous dirigeons dans cette direction.

Lors de la création d'un composant de site Web, vous ne savez pas toujours comment les composants seront utilisés. Il peut être aussi large que la fenêtre du navigateur. Peut-être que deux composants sont placés côte à côte. C'est peut-être dans une colonne étroite. La largeur d'un composant n'est pas toujours liée à la largeur de la fenêtre du navigateur.

En règle générale, vous trouverez très pratique de remettre en question à l'aide de composants CSS basés sur un conteneur. Si vous recherchez des solutions en ligne, vous pouvez trouver plusieurs solutions basées sur JavaScript. Mais ces solutions ont un coût: des dépendances supplémentaires, des styles requis par JavaScript et une logique d'application contaminée et une logique de conception.

Je crois fermement à la séparation des préoccupations, et la disposition est au centre de la CSS. Par exemple, bien que l'API IntersectionObserver soit bonne, j'aimerais avoir quelque chose comme :in-viewport dans CSS! J'ai donc continué à chercher une solution uniquement CSS et j'ai trouvé "Flexbox Holy Albatross" de Heydon Pickering. C'est une bonne solution pour les colonnes, mais j'en veux plus. L'albatros d'origine a quelques améliorations (comme le "albatros non acré"), mais ils sont encore un peu maladroits, et tout ce qui se passe n'est qu'un commutateur de ligne à colonne.

Je veux encore plus! Je veux être plus proche de la requête réelle du conteneur! Alors, que fournit CSS que je peux utiliser? J'ai un arrière-plan mathématique, donc des fonctions comme calc() , min() , max() et clamp() sont des choses que j'aime et que je comprends.

Suivant: Utilisez-les pour construire une solution de type requête de conteneur.

Table des matières:

1. Pourquoi le "corbeau"?
2. Fonctions mathématiques dans CSS
3. Étape 1: Créez une variable de configuration
4. Étape 2: Créer une variable d'indicateur
5. Étape 3: Utilisez des variables d'indicateur pour sélectionner les valeurs d'intervalle
6. Étape 4: Utilisez min() et un énorme entier pour sélectionner une valeur de toute longueur
7. Étape 5: assembler tout
8. autre?
9. Où est la hauteur?
10. Qu'en est-il de montrer et de cacher du contenu?
11. Points clés
12. Contenu supplémentaire
13. La pensée finale

Vous voulez voir ce qui pourrait être réalisé avant de continuer à lire? Il s'agit d'une collection de codepen qui montre ce que les idées discutées dans cet article peuvent réaliser.

Pourquoi le "corbeau"?

Ce travail a été inspiré par l'albatros de Heydon, mais la technique pourrait faire plus de trucs, alors j'ai choisi un corbeau parce que le corbeau est un oiseau très intelligent.

Revue: fonctions mathématiques dans CSS

La fonction calc() permet des opérations mathématiques dans CSS. De plus, les unités peuvent être combinées, donc des opérations comme calc(100vw - 300px) sont possibles.

min() et max() prennent deux ou plusieurs paramètres et renvoient les paramètres minimum ou maximum (respectivement).

clamp() est très utile, elle est similaire à la combinaison de min() et max() . La clamp(a, x, b) reviendra:

• Si x est inférieur à A, retournez un
• Si x est supérieur à B, retourne b
• Si x est entre A et B, alors x est retourné

C'est donc un peu comme clamp(最小值, 相对值, 最大值) . Il peut être considéré comme l'abréviation de min(max(a,x),b) . Si vous voulez en savoir plus, voici plus d'informations à ce sujet.

Nous utiliserons également un autre outil CSS largement dans cet article: CSS Custom Properties. Ce sont comme --color: red; ou --distance: 20px; C'est essentiellement une variable. Nous les utiliserons pour rendre le CSS plus concis, comme éviter une duplication excessive de nous-mêmes.

Commençons à utiliser cette astuce de corbeau.

Étape 1: Créez une variable de configuration

Créons certaines propriétés personnalisées CSS à définir.

Sur quelle taille de base voulons-nous que la requête soit basée? Étant donné que nous recherchons un comportement de requête en conteneur, ce sera à 100% - l'utilisation de 100 VW le fera se comporter comme une requête multimédia, car c'est la largeur de la fenêtre du navigateur, pas le conteneur!

 <code>--base_size: 100%;</code>

Voyons maintenant les points d'arrêt. Signifie littéralement la largeur du conteneur, nous voulons casser ici pour appliquer de nouveaux styles.

 <code>--breakpoint_wide: 1500px; /* 大于1500px 将被视为宽*/ --breakpoint_medium: 800px; /* 从801px 到1500px 将被视为中等*/ /* 小于或等于800px 将被视为小*/</code>

Dans l'exemple de course, nous utiliserons trois intervalles, mais cette technique n'a aucune limitation.

Définissons maintenant certaines valeurs (longueur CSS) que nous voulons retourner pour les intervalles que nous définissons pour le point d'arrêt. Ce sont les valeurs littérales:

 <code>--length_4_small: calc((100% / 1) - 10px); /* 根据你的需求更改*/ --length_4_medium: calc((100% / 2) - 10px); /* 根据你的需求更改*/ --length_4_wide: calc((100% / 3) - 10px); /* 根据你的需求更改*/</code>

Ceci est la configuration. Utilisons-le!

Étape 2: Créer une variable d'indicateur

Nous créerons des variables d'indicateur pour l'intervalle. Ils sont un peu comme les booléens, mais avec des unités de longueur (0px et 1px). Si nous limitons ces longueurs comme des valeurs minimales et maximales, elles agissent comme une sorte d'indicateur "vrai" et "faux".

Donc, si et seulement si - basbase_size est supérieur à --breakpoint_wide, nous voulons une variable avec une valeur de 1px. Sinon, nous voulons 0px. Cela peut être fait à l'aide de clamp() :

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code>

Si var(--base_size) - var(--breakpoint_wide) est négatif, alors --Base_Size est inférieur à --breakpoint_wide, donc clamp() renvoie 0px dans ce cas.

Inversement, si --baskSize est supérieur à --breakpoint_wide, le calcul donnera une longueur positive supérieure ou égale à 1px. Cela signifie que clamp() retournera 1px.

Bingo! Nous obtenons une variable d'indicateur "Largeur".

Faisons cela pour l'intervalle "moyen":

 <code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* 不要使用，见下文！ */</code>

Cela donnera 0px pour l'intervalle cellulaire, mais 1px pour les intervalles moyens et larges. Cependant, ce que nous voulons, c'est un large intervalle de 0px et un intervalle moyen de seulement 1px.

Nous pouvons résoudre ce problème en soustrayant la valeur --is_wide. Dans un intervalle large, 1px - 1px est 0px; Dans un intervalle moyen, 1px - 0px est 1px; Pour un petit intervalle, 0px - 0px donne 0px. Parfait.

Alors nous obtenons:

 <code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Est-ce que tu comprends? Pour calculer les variables d'indicateur, utilisez clamp() avec 0px et 1px comme limites et la différence entre --base_width et --breakpoint_ quelles que soient les valeurs limitantes. Soustrayez ensuite la somme de tous les plus grands indicateurs d'intervalle. Pour l'indicateur d'intervalle minimum, cette logique produit les résultats suivants:

 <code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) var(--is_wide)) );</code>

Nous pouvons sauter clamp() ici parce que le point de rupture entre les cellules est 0px et --Base_Size est positif, donc --Base_Size - 0px est toujours supérieur à 1px, clamp() renverra toujours 1px. Par conséquent, le calcul de --is_small peut être simplifié à:

 <code>--is_small: calc(1px - (var(--is_medium) var(--is_wide)));</code>

Étape 3: Utilisez des variables d'indicateur pour sélectionner les valeurs d'intervalle

Maintenant, nous devons passer de ces "variables d'indicateur" à quelque chose d'utile. Supposons que nous utilisons une disposition basée sur des pixels. Ne vous inquiétez pas, nous traiterons avec d'autres unités plus tard.

C'est un problème. Qu'est-ce que cela revient?

 <code>calc(var(--is_small) * 100);</code>

Si --is_small est 1px, il renverra 100px; Si --is_small est 0px, il retournera 0px.

À quoi sert cela? Découvrez ceci:

 <code>calc( (var(--is_small) * 100) (var(--is_medium) * 200) );</code>

Cela renverra 100px 0px = 100px dans l'intervalle cellulaire (où --is_small est 1px et --is_medium est 0px). Dans l'intervalle moyen (où - is_medium est 1px et --is_small est 0px), il renverra 0px 200px = 200px.

Est-ce que tu comprends? Voir l'article de Roman Komarov pour un aperçu plus approfondi de ce qui se passe ici, car il peut être difficile à comprendre.

Vous multipliez une valeur de pixels (unités) par la variable d'indicateur correspondante et ajoutez tous ces éléments ensemble. Donc, pour les dispositions basées sur Pixel, quelque chose comme ça suffit:

 <code>width: calc( (var(--is_small) * 100) (var(--is_medium) * 200) (var(--is_wide) * 500) );</code>

Mais la plupart du temps, nous ne voulons pas de valeurs basées sur des pixels. Nous voulons des concepts tels que "pleine largeur" ​​ou "troisième largeur" ​​ou même d'autres unités telles que 2rem, 65ch, etc. Pour celles-ci, nous devons continuer.

Étape 4: Utilisez min() et un énorme entier pour sélectionner une valeur de toute longueur

Dans la première étape, nous définissons quelque chose comme ça, au lieu de valeurs de pixels statiques:

 <code>--length_4_medium: calc((100% / 2) - 10px);</code>

Alors, comment les utilisons-nous? min() est de sauver!

Définissons une variable d'assistance:

 <code>--very_big_int: 9999; /* 纯粹的无单位数字。必须大于其他地方出现的任何长度。 */</code>

La multiplication de cette valeur par la variable indicatrice donnera 0px ou 9999px. La taille de cette valeur dépend de votre navigateur. Chrome acceptera 999999, mais Firefox n'acceptera pas un nombre aussi important, donc 9999 est une valeur qui fonctionne dans les deux. Il n'y a presque pas de fenêtres supérieures à 9999px, donc tout devrait aller.

Alors, que se passe-t-il lorsque nous l'utilisons avec une valeur inférieure à 9999px mais supérieure à 0px min() ?

 <code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code>

Il renvoie 0px si et seulement si --is_small est 0px. Si --is_small est 1px, la multiplication retournera 9999px (supérieure à --Length_4_Small) et min reviendra: --Length_4_Small.

C'est ainsi que nous pouvons choisir n'importe quelle longueur (c'est-à-dire moins de 9999px mais supérieur à 0px) sur la base de la variable d'indicateur.

Si vous avez affaire à une fenêtre de plus que 9999px, vous devez ajuster la variable --very_big_int. C'est un peu moche, mais nous pouvons corriger ceci une fois que Pure CSS peut supprimer les unités de la valeur pour se débarrasser des unités de la variable indicatrice (et le multiplier directement par n'importe quelle longueur). Actuellement, cela fonctionne.

Nous allons maintenant combiner toutes les pièces et laisser les corbeaux voler!

Étape 5: assembler tout

Nous pouvons maintenant calculer nos valeurs basées sur les points d'arrêt basées sur la largeur de conteneur dynamique comme celle-ci:

 <code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) min(var(--is_small) * var(--very_big_int), var(--length_4_small)) );</code>

Chaque ligne est min() à l'étape 4. Toutes les lignes s'additionnent comme à l'étape 3, les variables indicatrices proviennent de l'étape 2, toutes basées sur la configuration que nous avons faite à l'étape 1 - elles fonctionnent ensemble dans une grande formule!

Vous voulez l'essayer? Il s'agit d'un stylo qui peut être utilisé (voir les commentaires dans CSS).

Ce stylo n'utilise pas Flexbox, Grid ou Float. Juste quelques div. Il s'agit de montrer que les programmes auxiliaires ne sont pas nécessaires dans cette mise en page. Mais n'hésitez pas à utiliser Crow avec ces dispositions car cela vous aidera à créer des dispositions plus complexes.

autre?

Jusqu'à présent, nous avons utilisé des valeurs de pixels fixes comme points d'arrêt, mais voulons-nous modifier la disposition si le conteneur est plus grand ou inférieur à la moitié de la fenêtre moins 10px? aucun problème:

 <code>--breakpoint_wide: calc(50vw - 10px);</code>

Cela fonctionne! D'autres formules s'appliquent également. Pour éviter un comportement étrange, nous voulons utiliser quelque chose comme:

 <code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code>

... Réglez le deuxième point d'arrêt à une largeur de 500px. Le calcul de l'étape 2 dépend du fait que --breakpoint_wide n'est pas inférieur à --breakpoint_medium. Gardez simplement les points d'arrêt dans le bon ordre: min() et / ou max() sont très utiles ici!

Où est la hauteur?

Toutes les évaluations de calcul sont effectuées retardées. Autrement dit, lorsque --dyn_length est attribué à n'importe quel attribut, le calcul sera basé sur le résultat de calcul de - basbase_size dans cette position. Par conséquent, si --Base_Size est à 100%, la hauteur de réglage sera basée sur 100%.

Je n'ai pas trouvé de moyen de définir la hauteur en fonction de la largeur du conteneur. Ainsi, vous pouvez utiliser padding-top car 100% équivaut à la largeur pour le rembourrage.

Qu'en est-il de montrer et de cacher du contenu?

La façon la plus simple d'afficher et de masquer le contenu à l'aide de l'astuce Crow est de définir la largeur à 100px (ou toute autre largeur appropriée) à la variable d'indicateur appropriée:

 <code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code>

Vous devez définir:

 <code>overflow: hidden; display: inline-block; /* 避免难看的空行*/</code>

... ou une autre façon de masquer le contenu dans une boîte avec une largeur de 0px. Pour masquer complètement la boîte, il faut régler les autres propriétés du modèle de boîte (y compris les marges, les remplissages et les largeurs de bordure) à 0px. Le corbeau peut le faire sur certaines propriétés, mais le réparer à 0px est tout aussi efficace.

Une autre façon consiste à utiliser position: absolute; et dessiner l'élément hors écran via left: calc(var(--is_???) * 9999);

Points clés

Nous n'avons probablement pas du tout besoin de JavaScript, même pour le comportement de la requête en conteneurs! Bien sûr, nous espérons que si nous obtenons réellement des requêtes de conteneurs dans la syntaxe CSS, il sera plus facile à utiliser et à comprendre - mais il est également très cool de pouvoir implémenter ces choses dans CSS aujourd'hui.

Tout en y faisant face, j'ai quelques réflexions sur d'autres choses que CSS peut utiliser:

• Des unités basées sur les conteneurs telles que CONW et CONH sont utilisées pour définir la hauteur en fonction de la largeur. Ces unités peuvent être basées sur l'élément racine du contexte d'empilement actuel.
• Une sorte de fonction «évaluation en valeur» pour surmonter le problème de l'évaluation retardée. Cela fonctionnera très bien avec la fonction "Supprimer l'unité" qui fonctionne lors du rendu.

Remarque: Dans les versions antérieures, j'ai utilisé CW et CH comme unités, mais certaines personnes ont souligné que celles-ci sont facilement confondues avec les unités CSS du même nom. Merci à Mikko Tapionlinna et Gilson Nunes Filho pour les conseils dans les commentaires! )

Si nous en avons un second, cela nous permettra de régler la couleur (de manière propre), les frontières, les ombres de boîte, la flexion, la position d'arrière-plan, l'index z, l'échelle () et d'autres choses en utilisant le corbeau.

Combiné avec des unités basées sur des composants, il est même possible de définir la taille de l'enfant sur le même rapport d'aspect que le parent. Ne peut pas être divisé par la valeur avec des unités; Sinon, --Indicator / 1px fonctionnera comme "l'unité de retrait" du corbeau.

Contenu supplémentaire: logique booléenne

La variable indicatrice ressemble à un booléen, non? La seule différence est qu'ils ont une unité "PX". Alors, qu'en est-il de ces combinaisons logiques? Imaginez quelque chose comme "le conteneur est supérieur à la moitié de la largeur de l'écran" et "la disposition est en mode deux colonnes". La fonction CSS revient à nouveau!

Pour l'opérateur OR, nous pouvons utiliser max() pour tous les indicateurs:

 <code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) );</code>

Pour l'opérateur non, nous pouvons soustraire l'indicateur de 1px:

 <code>--NOT_a: calc(1px - var(--indicator_a));</code>

Les puristes logiques peuvent s'arrêter ici parce que ni (a, b) = pas (ou (a, b)) est une algèbre booléenne complète. Mais bon, juste pour le plaisir, en voici plus:

ET:

 <code>--a_AND_b: min(var(--indicator_a), var(--indicator_b));</code>

Cela évaluera 1px si et seulement si les deux indicateurs sont 1px.

Notez que min() et max() acceptent plus de deux paramètres. Ils fonctionnent toujours comme et et de (plus de deux) variables d'indicateur.

Xor:

 <code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) );</code>

Si (et seulement si) les deux indicateurs ont la même valeur, les deux différences sont 0px, max() renvoie cette valeur. Si l'indicateur a une valeur différente, un terme donnera -1px et l'autre donnera 1px. Dans ce cas, max() renvoie 1px.

Si quelqu'un s'intéresse aux situations où deux indicateurs sont égaux, utilisez la méthode suivante:

 <code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) );</code>

Oui, ce n'est pas (un XOR B) . Je ne trouve pas une "meilleure" solution à cela.

L'égalité peut être plus intéressante pour les variables de longueur CSS générales que pour les variables d'indicateur. Cela pourrait aider à utiliser à nouveau clamp() :

 <code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) );</code>

Retirez les unités PX pour obtenir l'égalité générale des variables sans unité (intégrales).

Je pense que c'est une logique booléenne suffisante pour la plupart des dispositions!

Contenu supplémentaire 2: Définissez le nombre de colonnes dans la disposition de la grille

Étant donné que le corbeau est limité au renvoi des valeurs de longueur CSS uniquement, il ne peut pas sélectionner directement le nombre de colonnes pour la grille (car il s'agit d'une valeur sans unités). Mais il existe un moyen de le faire fonctionner (en supposant que nous déclarons la variable d'indicateur comme ci-dessus):

 <code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* 使用乌鸦组合值*/ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code>

Et configurez votre grille en utilisant les méthodes suivantes:

 <code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code>

Comment cela marche-t-il?

1. Définissez le nombre de colonnes que nous voulons pour chaque intervalle (lignes 1, 2, 3)
2. Calculez la largeur de colonne parfaite pour chaque intervalle (lignes 5, 6, 7). Que se passe-t-il ici?

Tout d'abord, nous calculons l'espace disponible pour la colonne. C'est à 100%, moins l'espace que l'écart acquiertera. Pour la colonne N, il y a (n-1) des lacunes. Divisez ensuite cet espace par le nombre de colonnes que nous voulons. 3. Utilisez le corbeau pour calculer la largeur de la colonne correcte pour la véritable --Base_Size.

Dans le récipient de grille, cette ligne:

 <code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code>

... puis sélectionnez le nombre de colonnes pour s'adapter à la valeur fournie par le corbeau (cela entraînera notre variable --number_of_cols 4 ??? ci-dessus).

Le corbeau peut ne pas être en mesure de donner directement le numéro de colonne, mais il peut donner la longueur, en faisant repeat et autofit de calculer le nombre que nous voulons pour nous.

Mais auto-fit fait la même chose que minmax() , non? Non! La solution ci-dessus ne donne jamais trois colonnes (ou cinq colonnes), et le nombre de colonnes n'a pas besoin d'augmenter avec la largeur du conteneur. Essayez de définir les valeurs suivantes dans ce stylo pour voir les corbeaux voler à pleine vitesse:

 <code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code>

Contenu supplémentaire 3: Utilisez linear-gradient() pour modifier la couleur d'arrière-plan

C'est un peu plus à forte intensité de cerveau. Le corbeau est tout au sujet des valeurs de longueur, alors comment obtenir la couleur de ces valeurs? Eh bien, les gradients linéaires traitent les deux en même temps. Ils définissent les couleurs dans des zones spécifiques définies par des valeurs de longueur. Discutons de ce concept plus en détail avant d'entrer dans le code.

Pour résoudre la partie de gradient réelle, une technique bien connue consiste à doubler le point d'arrêt de la couleur, ce qui provoque efficacement la partie du gradient à moins de 0px. Consultez ce code pour savoir comment faire ceci:

 <code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code>

Cela rendra votre fond à moitié rouge à gauche et bleu à droite. Notez le premier paramètre "à droite". Cela signifie que les valeurs de pourcentage sont évaluées du niveau gauche à droite.

Le contrôle d'une valeur de 50% via la variable corbeau vous permet de déplacer le point d'arrêt des couleurs à volonté. Nous pouvons ajouter plus de points d'arrêt de couleur. Dans l'exemple en cours d'exécution, nous avons besoin de trois couleurs, résultant en deux (doubles) points d'arrêt de couleur interne.

Ajoutez des variables pour les points d'arrêt des couleurs et des couleurs, et c'est ce que nous obtenons:

 <code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

Mais comment calculons-nous les valeurs de --First_lgbreak_value et --second_lgbreak_value? Jetons un coup d'œil.

La première valeur contrôle la position visible de Color_small. Dans l'intervalle cellulaire, il doit être à 100%, et dans d'autres intervalles, il doit être 0px. Nous avons appris à le faire avec un corbeau. La deuxième variable contrôle la visibilité de Color_medium. Pour un petit intervalle, il devrait être à 100%; Pour un intervalle moyen, il devrait être de 100%; Mais pour un large intervalle, il devrait être 0px. Si la largeur du récipient est dans un intervalle petit ou moyen, l'indicateur correspondant doit être 1px.

Puisque nous pouvons effectuer des opérations logiques booléennes sur l'indicateur, c'est:

 <code>max(--is_small, --is_medium)</code>

… Pour obtenir le bon indicateur. Cela donne:

 <code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%);</code>

Le tout ensemble produit le code CSS suivant qui modifie la couleur d'arrière-plan en fonction de la largeur (l'indicateur d'intervalle est calculé comme indiqué ci-dessus):

 <code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* 根据你的需求更改*/ --color_medium: green;/* 根据你的需求更改*/ --color_small: lightblue;/* 根据你的需求更改*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

C'est un stylo qui peut voir comment cela fonctionne.

Contenu supplémentaire 4: Débarrassez-vous des variables imbriquées

J'ai un problème étrange lors de l'utilisation du corbeau: il existe un nombre limité de variables imbriquées qui peuvent être utilisées dans calc() . Cela peut causer certains problèmes lors de l'utilisation de trop de points d'arrêt. Pour autant que je comprends, cette limitation est d'empêcher le blocage de la page lors du calcul du style et de permettre une vérification des références circulaires plus rapide.

À mon avis, quelque chose comme «l'évaluation comme valeur» serait un bon moyen de surmonter ce problème. Cependant, cette limite peut vous provoquer un mal de tête lors de la permission des limites du CSS. Espérons que ce problème puisse être résolu à l'avenir.

Il existe un moyen de calculer la variable d'indicateur pour le corbeau sans utiliser de variables imbriquées (de profondeur). Voyons le calcul d'origine de la valeur --is_medium:

 <code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

Le problème se produit où moins --is_wide. Cela amène le Parser CSS à coller la définition de la formule complète de - Is_wide. Le calcul --is_small a même plus de références de ce type. (La définition de --is_wide sera même collée deux fois, car elle est cachée dans la définition de --is_medium et est utilisée directement.)

Heureusement, il existe un moyen de calculer les indicateurs sans référencer les indicateurs avec des points d'arrêt plus importants.

L'indicateur est vrai si et seulement si - bas-base_size est supérieur au point d'arrêt de la limite inférieure de l'intervalle et est inférieur ou égal au point de rupture de limite supérieure de l'intervalle. Cette définition nous fournit le code suivant:

 <code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) );</code>

• min() est utilisé comme logique et opérateur
• Le premier clamp() est "--Base_Size supérieur à --breakpoint_medium"
• Le deuxième clamp() signifie "--Base_Size est inférieur ou égal à --breakpoint_wide".
• L'ajout de 1px passera de "inférieur à" à "inférieur ou égal à ". Cela fonctionne parce que nous traitons les nombres entiers (pixels) (A

Le calcul complet des variables d'indicateur peut être effectué de cette manière:

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px var(--breakpoint_medium) - var(--base_size), 1px);</code>

--is_wide et --is_small sont plus simples à calculer, car chacun ne nécessite qu'un point d'arrêt donné pour être vérifié.

Cela s'applique à tout ce que nous avons vu jusqu'à présent. Voici un stylo qui combine des exemples.

La pensée finale

Crow ne peut pas faire tout ce que les questions médiatiques peuvent faire. Mais nous n'en avons pas besoin pour le faire, car nous avons des requêtes médiatiques dans CSS. Pour les modifications de conception "importantes", telles que la position de la barre latérale ou la reconfiguration du menu, elles sont OK. Ces choses se produisent dans le contexte de la fenêtre entière (la taille de la fenêtre du navigateur).

Mais pour les composants, les requêtes multimédias sont un peu erronées car nous ne connaissons jamais la taille du composant.

Heydon Pickering démontre ce problème en utilisant cette image:

J'espère que Raven vous aidera à surmonter le problème de la création de dispositions réactives pour les composants et de repousser la limite de "Que peut faire CSS" encore plus haut.

En montrant ce qui pourrait être possible aujourd'hui, il peut être possible de compléter une "vraie" requête de conteneur en ajoutant du sucre de syntaxe et de très petites nouvelles fonctions telles que CONW, CONH, "Unités de retrait" ou "évaluation sous forme de pixels". S'il existe une fonction dans CSS qui permet à «1px» d'être réécrit en tant qu'espace et «0px» d'être «initial», le corbeau peut être utilisé en conjonction avec des astuces de commutation d'attribut personnalisées et modifier chaque attribut CSS, pas seulement la valeur de longueur.

En évitant JavaScript pour y parvenir, votre mise en page rend plus rapidement car elle ne dépend pas du téléchargement ou de l'exécution de JavaScript. Même si JavaScript est désactivé, cela n'a pas d'importance. Ces calculs ne bloqueront pas votre fil principal et votre logique d'application ne sera pas gâchée avec la logique de conception.

Merci à Chris, Andrés Galante, Cathy Dutton, Marko Ilic et David Atanda pour leurs merveilleux articles CSS-Tricks. Ils m'ont vraiment aidé à explorer ce que les corbeaux peuvent réaliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!