Présentation des feuilles de style GSS: Grid

Vous avez peut-être récemment entendu parler des feuilles de style grille (GSS) dans le monde de HTML et CSS. GSS réinvente la disposition CSS et remplace le moteur de mise en page du navigateur par un qui exploite le solveur de contrainte de casorie . Ceux d'entre vous qui n'en ont pas compris un mot… bonjour et bienvenue!

GSS promet un avenir meilleur. Le GSS promet un positionnement et un dimensionnement relatifs. GSS promet de centrer n'importe quel élément à l'intérieur d'un autre avec une ligne de code. Et GSS livre. La question est: comment?

Dans cet article, je couvrirai un bref historique de GSS et un aperçu approfondi des fonctionnalités qu'il a à offrir. Je vais également examiner GSS pour les dispositions basées sur les contraintes, l'algorithme de contrainte de cassoy et vous guider à travers le processus d'installation et d'utilisation de GSS.

Ceux d'entre vous qui préfèrent ne pas attendre que le W3C ou les navigateurs se rattrapent, je vous exhorte à vous accrocher et à porter une attention particulière pendant que j'explique le mystère qui est GSS. Sur cette note, commençons par un peu d'histoire.

Les plats clés

Pour commencer à utiliser GSS, il doit être installé via Bower ou téléchargé via GitHub en tant que fichier zip, puis leshets de styles GSS peuvent être chargés en ajoutant Type = Text / GSS sur une balise

ou en utilisant A

Une brève histoire

GSS est une création de la grille avec Dan Tocchini comme fondateur et PDG. Cela répond pourquoi les feuilles de style pas si basées sur le réseau sont appelées feuilles de style grille.

La guerre entre les développeurs Web et la technologie frontale pour présenter des idées sur le Web se déroule depuis des années. CSS s'est avéré triomphant au cours de la dernière décennie. Cependant, la construction d'interfaces utilisateur de plus en plus complexes avec des outils qui n'ont pas évolué avec le temps est quelque chose que les développeurs Web devraient faire régulièrement. Par exemple, centrer verticalement un élément avec CSS n'a pas été la plus simple des tâches, en particulier avec des éléments de hauteur variable.

Flexbox est l'une des solutions les plus récentes, mais même de petits changements, vous obligez à aller profondément dans votre contenu HTML et votre présentation CSS et apporter des modifications.

Il est temps pour GSS de prendre l'arène. GSS s'attaque à ces problèmes et bien d'autres - des problèmes que les développeurs ont depuis plus d'une décennie.

Essentiellement, GSS est un préprocesseur CSS et un runtime JavaScript qui exploite Cassowary.js. Ceux d'entre vous qui ne savent pas déjà, Cassowary.js est le port javascript que Apple utilise dans Cocoa AutoLayout.

GSS et Cassowary sont fondés sur la programmation de contraintes, ce qui le rend idéal pour autonomiser les langages déclaratifs comme CSS. La programmation de contraintes est un paradigme par lequel les développeurs Web sont soucieux de déclarer le «quoi» et de laisser le «comment» à un solveur mathématique.

La programmation de contraintes se concentre sur les intentions, et non sur l'implémentation.

Maintenant que nous avons établi certaines informations générales, passons aux fonctionnalités offertes par GSS.

Aperçu de GSS

L'un des plus grands problèmes de CSS est la relativité. Vous pouvez vous attendre à ce que tout élément CSS ait une liste sans fin de propriétés - rembourrage, hauteur, largeur, flotteur, marges, frontières, contours - mais aucune de ces informations ne nous indique où l'élément sera situé en référence à d'autres éléments de la page ( ou même la page dans son ensemble). La liste sans fin ne répond pas non plus où l'élément sera affiché avec différentes tailles d'écran.

Cela nous amène à la première fonctionnalité de GSS: vous définissez ce que vous voulez que la mise en page soit. Il est révolu le temps de passer d'innombrables heures d'essai et d'erreur, en stratégie de la façon dont la disposition doit être construite.

Puisque nous avons déjà discuté que GSS utilise Cassowary.js, voici une autre grande fonctionnalité de GSS: un élément peut être centré dans n'importe quelle autre avec une ligne de code. Cela rend beaucoup de contournement inutile et les choses du passé.

Par exemple, si vous souhaitez ajouter un bouton d'abonnement en ligne verticalement avec, par exemple, une rubrique sur le côté droit de la page de votre site, vous utiliseriez le code suivant:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Une autre caractéristique: GSS fabrique des flotteurs, des cellules de table, de la fiche claire et un centrage horizontal / vertical obsolète. Adieu aux écueils périlleux qui sont un flotteur parce que nous avons le W3C lui-même disant que les flotteurs ne sont pas idéaux pour les dispositions d'application.

«À mesure que les sites Web évoluaient à partir de documents simples en applications interactives complexes, outils pour la disposition des documents, par ex. Les flotteurs n'étaient pas nécessairement bien adaptés à la disposition des applications. »
- Module de mise en page de la grille W3C (projet de travail)

Qu'en est-il des fonctionnalités CSS comme! IMPORTANT? La quatrième caractéristique de GSS fait quelque chose de similaire: GSS utilise la hiérarchie des contraintes pour hiérarchiser les contraintes avec les forces. Nous parlons de quatre niveaux de force intégrés ici:

• ! Faible
• ! Medium
• ! Strong
• ! Besoin

Notez que! Exiger est une force spéciale qui garantit que la contrainte tiendra et si elle ne le fait pas, tout se casse. Il est conseillé de l'utiliser avec soin et rarement.

Le niveau de résistance augmente dans la liste et les contraintes plus fortes sont accordées une priorité plus élevée pendant l'exécution. Regardons un exemple:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Vous avez fait jusqu'à présent, regardons maintenant quelques mises en page basées sur des contraintes.

GSS pour les dispositions basées sur les contraintes

Les contraintes sont essentiellement des relations entre deux ou plusieurs variables qui peuvent ou non tenir. Toutes les propriétés numériques des éléments sont considérées comme contraintes. Voici un exemple:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

• p est appelé sélecteur
• line-height est la propriété que GSS calculera une valeur pour
• [] est utilisé pour accéder à la propriété
• = définir les contraintes d'inégalité
• 10 et 20 sont des valeurs numériques dans les pixels

Dans l'exemple ci-dessus, les deux contraintes restent valides. Voici un exemple de contraintes qui ne tiennent pas.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Initialement, les éléments Elementa et ElementB sont contraints d'avoir une hauteur de 150px. Dans la troisième ligne, la somme des deux éléments est de 225px. Par conséquent, l'une des contraintes de deux éléments ne tiendra pas.

sélecteurs dans GSS

Les sélecteurs de GSS sont des requêtes sur un groupe d'éléments HTML et ils sont utilisés pour déterminer les éléments qui seront finalement affectés par la contrainte. Les sélecteurs sont importants car vous devez sélectionner et observer des éléments dans le DOM avant de leur appliquer des contraintes.

Les sélecteurs fondamentaux suivants sont pris en charge par GSS.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

SETLES DE RÈGLES EN GSS

Les ensembles de règles vous permettront de définir plusieurs contraintes sur un seul sélecteur. Vous pouvez également les nid et utiliser les propriétés CSS.

cet ensemble de règles imbriqué:

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

est le même que:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Propriétés dans GSS

J'ai déjà couvert des propriétés dans les exemples ci-dessus, mais regardons-les un peu plus près. Dans GSS, les propriétés sont les variables qui appartiennent à un élément. Lorsque nous utilisons des propriétés connues par CSS, leur valeur calculée par GSS correspondante est attribuée en tant que styles en ligne sur l'élément.

quelque chose comme ceci:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

serait égal à:

<span>(section < article .aclass)[height] == 150;</span>

Une introduction à l'algorithme de contrainte de casoary

GSS utilise un port JavaScript (Cassowary.js) de l'algorithme de résolution de contraintes arithmétiques linéaires Cassowary par Badros, Borning et Stuckey, 1999. L'algorithme trouve des solutions optimales pour les dispositions basées sur les contraintes d'entrée données dans le langage naturel par l'utilisateur.

L'utilisateur n'est pas requis pour s'assurer que les contraintes d'entrée ne se contredisent pas. En fait, c'est l'essence de l'algorithme de Cassowary; Il évalue progressivement les contraintes et découvre automatiquement une solution optimale.

Limitations de calcul de l'algorithme de casoary

Le solveur de contraintes derrière GSS est appelé l'algorithme de casoary. Cet algorithme ne peut calculer que des contraintes linéaires (c'est-à-dire de la forme y = mx c). Les opérateurs de base (, -, *, /) sont pris en charge par l'algorithme. La multiplication et la division de deux (ou plus) variables contraises ne sont pas linéaires et je vais donc lancer une erreur.

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Installation de GSS

Pour l'installation côté client, installez via Bower:

<span><span>.container</span> {
</span>  &[height] == #elm[height]<span>;
</span><span>}</span>

Ensuite, ajoutez ce code à la section de votre balisage:

<span>/* this expression is not linear */
</span>#elementa[height] <span>* #elementb[width] == newElement;</span>

Vous pouvez également télécharger la version 2.0.0 via GitHub en tant que fichier zip.

Une fois que vous avez installé GSS, chargez votre .GSS Stylesheets en ajoutant Type = Text / GSS sur un TAG:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

ou en utilisant un élément :

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Une fois que vous avez tout en cours, vous pouvez commencer à suivre avec quelques exemples de code. Ci-dessous, je vais passer en revue le tutoriel d'un débutant.

un tutoriel du débutant GSS

Les exemples que je créerai seront affichés via Codepen, mais je passerai par le tutoriel comme un document HTML standard. Je vais d'abord ajouter la ligne de code suivante à mon HTML pour ajouter le script moteur GSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

J'utiliserai une version hébergée du code du fichier, mais vous pouvez trouver une version hébergée par CDN ici. Ensuite, j'ajouterai le code suivant sous le script de référence GSS (la ligne que je viens d'ajouter ci-dessus) pour transmettre GSS l'objet document.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Si vous préférez, cela pourrait être placé dans un fichier JavaScript séparé qui est inclus après le script moteur.

Exemple 1: centrant verticalement un élément

Je vais créer un div et joindre du texte dans les balises H2 dans la disposition GSS et l'ajouter à la HTML:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Après avoir ajouté un style de base, je peux me lancer dans l'ajout de GSS pour créer la disposition. C'est là que le plaisir commence.

Mon objectif est de centrer verticalement l'élément .foo à l'intérieur de la fenêtre, malgré sa taille, et de pouvoir garder le même alignement en place même si la taille de l'élément change.

Voici les contraintes que je vais appliquer pour atteindre cet objectif:

• Utilisez le sélecteur de fenêtres :: pour centrer l'élément avec la partie visible de la page du navigateur.
• use :: [intrinsic-height] Attribut pour obtenir une valeur relative de la hauteur de l'élément qui sera utilisée pour déterminer la largeur relative.

Tout d'abord, j'ajouterai un bloc

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Un bloc

<span>(section < article .aclass)[height] == 150;</span>

Et c'est tout ce qui est nécessaire. L'élément est maintenant centré (avec une hauteur dynamique) verticalement en utilisant GSS. Vous trouverez ci-dessous la démo:

Voir le pendeur vertical du stylo avec GSS par SitePoint (@SitePoint) sur Codepen.

Essayez la démo plein écran et essayez de redimensionner le navigateur verticalement pour voir l'élément rester centré sur n'importe quelle taille de fenêtre.

Exemple 2: rotation des éléments basée sur la largeur de la fenêtre modifiant dynamiquement

Pour cet exemple suivant, je vais créer une forme carrée de couleur simple et le faire tourner dynamiquement. Démarchons d'abord GSS en ajoutant les lignes de code suivantes dans la section du document:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Notez que vous devrez modifier le code ci-dessus pour pointer vers l'emplacement correct pour les fichiers. Vous pouvez obtenir le fichier worker.js ici, et le fichier GSS.js ici.

Remarque: En raison de certains bogues, les chemins de fichier ci-dessus pointent vers les versions pré-2.0.0 de GSS pour que cela fonctionne.

Créons maintenant la forme carrée en l'ajoutant cela au HTML:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

… et ajoutez-y un style dans le CSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Maintenant, je vais retourner au HTML et ajouter quelques contraintes GSS.

Gardez à l'esprit qu'avec GSS, vous faites simplement une intention et laissez le calcul mathématique jusqu'à l'algorithme. Dans cet exemple, j'essaie de créer une contrainte entre l'élément et la fenêtre par laquelle une rotation est produite dans l'élément lorsque la largeur de la fenêtre change dynamiquement.

Voici les contraintes que je vais appliquer pour atteindre cet objectif:

• Utilisez le sélecteur :: Fenêtre [centre] pour centrer l'élément dans la partie visible de la page du navigateur.
• Utiliser :: Window [Largeur] Pour créer une contrainte avec Rotate-Z, qui créera l'effet de rotation sur l'élément autour de son axe Z. Ici, la valeur reçue de :: fenêtre [largeur] représente le degré de rotation.

Je vais ajouter un bloc de style au HTML avec un type défini sur Text / GSS, comme je l'ai fait dans le premier exemple. N'oubliez pas qu'un bloc de style est nécessaire pour définir le GSS que je vais ajouter.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Je vais associer la boîte carrée à l'écran en utilisant les contraintes GSS en ajoutant le code suivant à l'intérieur des balises de style:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Et avec cela, c'est fait. Découvrez la démo finale du codePen:

Voir la rotation dynamique du stylo à l'aide de GSS par SitePoint (@SitePoint) sur Codepen.

Si vous affichez la démo plein écran, essayez de redimensionner la fenêtre. Vous remarquerez que la boîte carrée modifiera sa position de rotation lorsque la largeur de la fenêtre sera modifiée.

L'avenir de GSS

L'avenir de GSS semble prometteur. Il est temps que nous avançons avec la technologie frontale. Je vous suggère de vous entraîner sur des prototypes à petite échelle avant de déchirer toute votre bibliothèque de feuille de style.

Ce que j'ai couvert ici n'est qu'un petit échantillon de ce que vous pouvez faire avec GSS, mais j'espère que vous avez trouvé ce tutoriel utile et informatif pour vous aider à démarrer.

Avez-vous déjà utilisé GSS? Comment était votre expérience? Faites-moi savoir dans la section des commentaires.

Les questions fréquemment posées sur GSS (feuilles de style grille)

Qu'est-ce que GSS (feuilles de style grille)?

GSS, ou feuilles de style grille, est un outil puissant pour les développeurs et les concepteurs. Il s'agit d'un moteur de mise en page basé sur des contraintes qui vous permet de créer des dispositions réactives et flexibles à l'aide d'une syntaxe simple et intuitive. GSS étend le modèle CSS traditionnel en introduisant le concept de contraintes, qui vous permet de définir les relations entre les éléments et de contrôler leur comportement de manière plus précise et flexible.

En quoi le GSS diffère-t-il du CSS traditionnel?

Le CSS traditionnel utilise un modèle de boîte pour la disposition, qui peut être limitant et complexe lors de la création de dispositions complexes. GSS, en revanche, utilise un modèle basé sur des contraintes, qui permet plus de flexibilité et de précision. Avec GSS, vous pouvez définir des relations entre les éléments et contrôler leur comportement de manière plus intuitive.

Comment puis-je commencer à utiliser GSS?

Pour commencer à utiliser GSS, vous devez inclure le GSS Engine dans votre projet. Cela peut être fait en téléchargeant la bibliothèque GSS à partir du site officiel ou en utilisant un gestionnaire de packages comme NPM. Une fois que le moteur GSS est inclus dans votre projet, vous pouvez commencer à écrire du code GSS dans vos fichiers CSS.

Puis-je utiliser GSS avec mon code CSS existant?

Oui, GSS est conçu pour fonctionner pour fonctionner aux côtés de CSS traditionnels. Cela signifie que vous pouvez progressivement introduire GSS dans vos projets sans avoir à réécrire votre code CSS existant. Le code GSS peut être écrit dans des fichiers séparés ou mélangés avec du code CSS ordinaire.

Quels sont les avantages de l'utilisation de GSS?

GSS offre plusieurs avantages par rapport au CSS traditionnel. Il permet un contrôle plus précis sur la disposition, ce qui facilite la création de conceptions complexes et réactives. GSS simplifie également le code, ce qui facilite la lecture et le maintien de la lecture. De plus, GSS prend en charge l'édition en direct, ce qui signifie que vous pouvez voir des modifications en temps réel lorsque vous codez.

GSS est-il pris en charge par tous les navigateurs?

GSS utilise JavaScript pour implémenter sa disposition basée sur les contraintes moteur, ce qui signifie qu'il devrait fonctionner dans tout navigateur moderne qui prend en charge JavaScript. Cependant, comme pour toute nouvelle technologie, c'est toujours une bonne idée de tester vos conceptions dans plusieurs navigateurs pour assurer la compatibilité.

Y a-t-il des ressources disponibles pour apprendre GSS?

Oui, il y en a plusieurs Ressources disponibles pour apprendre GSS. Le site officiel du GSS fournit un guide complet et une documentation. Il existe également plusieurs tutoriels et cours en ligne disponibles qui couvrent en profondeur GSS.

Le GSS peut-il être utilisé pour le développement Web mobile?

Oui, GSS est un excellent outil pour le développement Web mobile. Son moteur de mise en page basé sur des contraintes permet des conceptions réactives qui s'adaptent à différentes tailles d'écran et orientations. Cela facilite la création d'une expérience utilisateur cohérente sur différents appareils.

est l'Open source GSS?

Oui, GSS est un projet open-source. Cela signifie que n'importe qui peut contribuer à son développement et l'utiliser gratuitement dans ses projets. Le code source de GSS est disponible sur GitHub.

Quel est l'avenir de GSS?

En tant que technologie relativement nouvelle, GSS évolue toujours. Cependant, ses caractéristiques puissantes et l'intérêt croissant pour la disposition basée sur les contraintes suggèrent qu'il a un avenir prometteur. Alors que de plus en plus de développeurs adoptent le GSS, nous pouvons nous attendre à voir plus de ressources, d'outils et de soutien communautaire à cette technologie innovante.

• Les feuilles de style grille (GSS) sont un pré-incessant CSS et un runtime JavaScript qui remplace le moteur de mise en page du navigateur avec le solveur de contrainte de casso, prometteur le positionnement et le dimensionnement relatifs et la possibilité de centrer n'importe quel élément à l'intérieur d'un autre avec une ligne de code.
GSS utilise la programmation de contraintes, qui se concentre sur les intentions plutôt que sur la mise en œuvre, permettant aux développeurs de déclarer le «quoi» et de laisser le «comment» à un solveur mathématique.
GSS fabrique des flotteurs, des cellules de table, de la fiche claire et un centre horizontal / vertical obsolète, et utilise une hiérarchie de contraintes pour hiérarchiser les contraintes avec les forces, offrant quatre niveaux de force intégrés :! faible,! Moyenne,! Strong, et!
GSS utilise l'algorithme de résolution de contraintes arithmétiques linéaires de caso-Osewary pour trouver des solutions optimales pour les dispositions basées sur les contraintes d'entrée données dans le langage naturel par l'utilisateur, évaluant progressivement les contraintes et découvrant automatiquement une solution optimale.
Pour commencer à utiliser GSS, il doit être installé via Bower ou téléchargé via GitHub en tant que fichier zip, puis leshets de styles GSS peuvent être chargés en ajoutant Type = Text / GSS sur une balise
• ou en utilisant A

Une brève histoire

GSS est une création de la grille avec Dan Tocchini comme fondateur et PDG. Cela répond pourquoi les feuilles de style pas si basées sur le réseau sont appelées feuilles de style grille.

La guerre entre les développeurs Web et la technologie frontale pour présenter des idées sur le Web se déroule depuis des années. CSS s'est avéré triomphant au cours de la dernière décennie. Cependant, la construction d'interfaces utilisateur de plus en plus complexes avec des outils qui n'ont pas évolué avec le temps est quelque chose que les développeurs Web devraient faire régulièrement. Par exemple, centrer verticalement un élément avec CSS n'a pas été la plus simple des tâches, en particulier avec des éléments de hauteur variable.

Flexbox est l'une des solutions les plus récentes, mais même de petits changements, vous obligez à aller profondément dans votre contenu HTML et votre présentation CSS et apporter des modifications.

Il est temps pour GSS de prendre l'arène. GSS s'attaque à ces problèmes et bien d'autres - des problèmes que les développeurs ont depuis plus d'une décennie.

Essentiellement, GSS est un préprocesseur CSS et un runtime JavaScript qui exploite Cassowary.js. Ceux d'entre vous qui ne savent pas déjà, Cassowary.js est le port javascript que Apple utilise dans Cocoa AutoLayout.

GSS et Cassowary sont fondés sur la programmation de contraintes, ce qui le rend idéal pour autonomiser les langages déclaratifs comme CSS. La programmation de contraintes est un paradigme par lequel les développeurs Web sont soucieux de déclarer le «quoi» et de laisser le «comment» à un solveur mathématique.

La programmation de contraintes se concentre sur les intentions, et non sur l'implémentation.

Maintenant que nous avons établi certaines informations générales, passons aux fonctionnalités offertes par GSS.

Aperçu de GSS

L'un des plus grands problèmes de CSS est la relativité. Vous pouvez vous attendre à ce que tout élément CSS ait une liste sans fin de propriétés - rembourrage, hauteur, largeur, flotteur, marges, frontières, contours - mais aucune de ces informations ne nous indique où l'élément sera situé en référence à d'autres éléments de la page ( ou même la page dans son ensemble). La liste sans fin ne répond pas non plus où l'élément sera affiché avec différentes tailles d'écran.

Cela nous amène à la première fonctionnalité de GSS: vous définissez ce que vous voulez que la mise en page soit. Il est révolu le temps de passer d'innombrables heures d'essai et d'erreur, en stratégie de la façon dont la disposition doit être construite.

Puisque nous avons déjà discuté que GSS utilise Cassowary.js, voici une autre grande fonctionnalité de GSS: un élément peut être centré dans n'importe quelle autre avec une ligne de code. Cela rend beaucoup de contournement inutile et les choses du passé.

Par exemple, si vous souhaitez ajouter un bouton d'abonnement en ligne verticalement avec, par exemple, une rubrique sur le côté droit de la page de votre site, vous utiliseriez le code suivant:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Une autre caractéristique: GSS fabrique des flotteurs, des cellules de table, de la fiche claire et un centrage horizontal / vertical obsolète. Adieu aux écueils périlleux qui sont un flotteur parce que nous avons le W3C lui-même disant que les flotteurs ne sont pas idéaux pour les dispositions d'application.

«À mesure que les sites Web évoluaient à partir de documents simples en applications interactives complexes, outils pour la disposition des documents, par ex. Les flotteurs n'étaient pas nécessairement bien adaptés à la disposition des applications. »
- Module de mise en page de la grille W3C (projet de travail)

Qu'en est-il des fonctionnalités CSS comme! IMPORTANT? La quatrième caractéristique de GSS fait quelque chose de similaire: GSS utilise la hiérarchie des contraintes pour hiérarchiser les contraintes avec les forces. Nous parlons de quatre niveaux de force intégrés ici:

• ! Faible
• ! Medium
• ! Strong
• ! Besoin

Notez que! Exiger est une force spéciale qui garantit que la contrainte tiendra et si elle ne le fait pas, tout se casse. Il est conseillé de l'utiliser avec soin et rarement.

Le niveau de résistance augmente dans la liste et les contraintes plus fortes sont accordées une priorité plus élevée pendant l'exécution. Regardons un exemple:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Vous avez fait jusqu'à présent, regardons maintenant quelques mises en page basées sur des contraintes.

GSS pour les dispositions basées sur les contraintes

Les contraintes sont essentiellement des relations entre deux ou plusieurs variables qui peuvent ou non tenir. Toutes les propriétés numériques des éléments sont considérées comme contraintes. Voici un exemple:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

• p est appelé sélecteur
• line-height est la propriété que GSS calculera une valeur pour
• [] est utilisé pour accéder à la propriété
• = définir les contraintes d'inégalité
• 10 et 20 sont des valeurs numériques dans les pixels

Dans l'exemple ci-dessus, les deux contraintes restent valides. Voici un exemple de contraintes qui ne tiennent pas.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Initialement, les éléments Elementa et ElementB sont contraints d'avoir une hauteur de 150px. Dans la troisième ligne, la somme des deux éléments est de 225px. Par conséquent, l'une des contraintes de deux éléments ne tiendra pas.

sélecteurs dans GSS

Les sélecteurs de GSS sont des requêtes sur un groupe d'éléments HTML et ils sont utilisés pour déterminer les éléments qui seront finalement affectés par la contrainte. Les sélecteurs sont importants car vous devez sélectionner et observer des éléments dans le DOM avant de leur appliquer des contraintes.

Les sélecteurs fondamentaux suivants sont pris en charge par GSS.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

SETLES DE RÈGLES EN GSS

Les ensembles de règles vous permettront de définir plusieurs contraintes sur un seul sélecteur. Vous pouvez également les nid et utiliser les propriétés CSS.

cet ensemble de règles imbriqué:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

est le même que:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Propriétés dans GSS

J'ai déjà couvert des propriétés dans les exemples ci-dessus, mais regardons-les un peu plus près. Dans GSS, les propriétés sont les variables qui appartiennent à un élément. Lorsque nous utilisons des propriétés connues par CSS, leur valeur calculée par GSS correspondante est attribuée en tant que styles en ligne sur l'élément.

quelque chose comme ceci:

<span>(section < article .aclass)[height] == 150;</span>

serait égal à:

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Une introduction à l'algorithme de contrainte de casoary

GSS utilise un port JavaScript (Cassowary.js) de l'algorithme de résolution de contraintes arithmétiques linéaires Cassowary par Badros, Borning et Stuckey, 1999. L'algorithme trouve des solutions optimales pour les dispositions basées sur les contraintes d'entrée données dans le langage naturel par l'utilisateur.

L'utilisateur n'est pas requis pour s'assurer que les contraintes d'entrée ne se contredisent pas. En fait, c'est l'essence de l'algorithme de Cassowary; Il évalue progressivement les contraintes et découvre automatiquement une solution optimale.

Limitations de calcul de l'algorithme de casoary

Le solveur de contraintes derrière GSS est appelé l'algorithme de casoary. Cet algorithme ne peut calculer que des contraintes linéaires (c'est-à-dire de la forme y = mx c). Les opérateurs de base (, -, *, /) sont pris en charge par l'algorithme. La multiplication et la division de deux (ou plus) variables contraises ne sont pas linéaires et je vais donc lancer une erreur.

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Installation de GSS

Pour l'installation côté client, installez via Bower:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Ensuite, ajoutez ce code à la section de votre balisage:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Vous pouvez également télécharger la version 2.0.0 via GitHub en tant que fichier zip.

Une fois que vous avez installé GSS, chargez votre .GSS Stylesheets en ajoutant Type = Text / GSS sur un TAG:

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

ou en utilisant un élément :

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Une fois que vous avez tout en cours, vous pouvez commencer à suivre avec quelques exemples de code. Ci-dessous, je vais passer en revue le tutoriel d'un débutant.

un tutoriel du débutant GSS

Les exemples que je créerai seront affichés via Codepen, mais je passerai par le tutoriel comme un document HTML standard. Je vais d'abord ajouter la ligne de code suivante à mon HTML pour ajouter le script moteur GSS:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

J'utiliserai une version hébergée du code du fichier, mais vous pouvez trouver une version hébergée par CDN ici. Ensuite, j'ajouterai le code suivant sous le script de référence GSS (la ligne que je viens d'ajouter ci-dessus) pour transmettre GSS l'objet document.

<span>(section < article .aclass)[height] == 150;</span>

Si vous préférez, cela pourrait être placé dans un fichier JavaScript séparé qui est inclus après le script moteur.

Exemple 1: centrant verticalement un élément

Je vais créer un div et joindre du texte dans les balises H2 dans la disposition GSS et l'ajouter à la HTML:

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Après avoir ajouté un style de base, je peux me lancer dans l'ajout de GSS pour créer la disposition. C'est là que le plaisir commence.

Mon objectif est de centrer verticalement l'élément .foo à l'intérieur de la fenêtre, malgré sa taille, et de pouvoir garder le même alignement en place même si la taille de l'élément change.

Voici les contraintes que je vais appliquer pour atteindre cet objectif:

• Utilisez le sélecteur de fenêtres :: pour centrer l'élément avec la partie visible de la page du navigateur.
• use :: [intrinsic-height] Attribut pour obtenir une valeur relative de la hauteur de l'élément qui sera utilisée pour déterminer la largeur relative.

Tout d'abord, j'ajouterai un bloc

<span><span>.container</span> {
</span>  &[height] == #elm[height]<span>;
</span><span>}</span>

Un bloc

<span>/* this expression is not linear */
</span>#elementa[height] <span>* #elementb[width] == newElement;</span>

Et c'est tout ce qui est nécessaire. L'élément est maintenant centré (avec une hauteur dynamique) verticalement en utilisant GSS. Vous trouverez ci-dessous la démo:

Voir le pendeur vertical du stylo avec GSS par SitePoint (@SitePoint) sur Codepen.

Essayez la démo plein écran et essayez de redimensionner le navigateur verticalement pour voir l'élément rester centré sur n'importe quelle taille de fenêtre.

Exemple 2: rotation des éléments basée sur la largeur de la fenêtre modifiant dynamiquement

Pour cet exemple suivant, je vais créer une forme carrée de couleur simple et le faire tourner dynamiquement. Démarchons d'abord GSS en ajoutant les lignes de code suivantes dans la section du document:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Notez que vous devrez modifier le code ci-dessus pour pointer vers l'emplacement correct pour les fichiers. Vous pouvez obtenir le fichier worker.js ici, et le fichier GSS.js ici.

Remarque: En raison de certains bogues, les chemins de fichier ci-dessus pointent vers les versions pré-2.0.0 de GSS pour que cela fonctionne.

Créons maintenant la forme carrée en l'ajoutant cela au HTML:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

… et ajoutez-y un style dans le CSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Maintenant, je vais retourner au HTML et ajouter quelques contraintes GSS.

Gardez à l'esprit qu'avec GSS, vous faites simplement une intention et laissez le calcul mathématique jusqu'à l'algorithme. Dans cet exemple, j'essaie de créer une contrainte entre l'élément et la fenêtre par laquelle une rotation est produite dans l'élément lorsque la largeur de la fenêtre change dynamiquement.

Voici les contraintes que je vais appliquer pour atteindre cet objectif:

• Utilisez le sélecteur :: Fenêtre [centre] pour centrer l'élément dans la partie visible de la page du navigateur.
• Utiliser :: Window [Largeur] Pour créer une contrainte avec Rotate-Z, qui créera l'effet de rotation sur l'élément autour de son axe Z. Ici, la valeur reçue de :: fenêtre [largeur] représente le degré de rotation.

Je vais ajouter un bloc de style au HTML avec un type défini sur Text / GSS, comme je l'ai fait dans le premier exemple. N'oubliez pas qu'un bloc de style est nécessaire pour définir le GSS que je vais ajouter.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Je vais associer la boîte carrée à l'écran en utilisant les contraintes GSS en ajoutant le code suivant à l'intérieur des balises de style:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Et avec cela, c'est fait. Découvrez la démo finale du codePen:

Voir la rotation dynamique du stylo à l'aide de GSS par SitePoint (@SitePoint) sur Codepen.

Si vous affichez la démo plein écran, essayez de redimensionner la fenêtre. Vous remarquerez que la boîte carrée modifiera sa position de rotation lorsque la largeur de la fenêtre sera modifiée.

L'avenir de GSS

L'avenir de GSS semble prometteur. Il est temps que nous avançons avec la technologie frontale. Je vous suggère de vous entraîner sur des prototypes à petite échelle avant de déchirer toute votre bibliothèque de feuille de style.

Ce que j'ai couvert ici n'est qu'un petit échantillon de ce que vous pouvez faire avec GSS, mais j'espère que vous avez trouvé ce tutoriel utile et informatif pour vous aider à démarrer.

Avez-vous déjà utilisé GSS? Comment était votre expérience? Faites-moi savoir dans la section des commentaires.

Les questions fréquemment posées sur GSS (feuilles de style grille)

Qu'est-ce que GSS (feuilles de style grille)?

GSS, ou feuilles de style grille, est un outil puissant pour les développeurs et les concepteurs. Il s'agit d'un moteur de mise en page basé sur des contraintes qui vous permet de créer des dispositions réactives et flexibles à l'aide d'une syntaxe simple et intuitive. Le GSS étend le modèle CSS traditionnel en introduisant le concept de contraintes, qui vous permet de définir les relations entre les éléments et de contrôler leur comportement de manière plus précise et flexible.

En quoi le GSS diffère-t-il du CSS traditionnel?

Le CSS traditionnel utilise un modèle de boîte pour la disposition, qui peut être limitant et complexe lors de la création de dispositions complexes. GSS, en revanche, utilise un modèle basé sur des contraintes, qui permet plus de flexibilité et de précision. Avec GSS, vous pouvez définir les relations entre les éléments et contrôler leur comportement de manière plus intuitive.

Comment puis-je commencer à utiliser GSS?

Pour commencer à utiliser GSS, vous devez inclure le moteur GSS dans votre projet. Cela peut être fait en téléchargeant la bibliothèque GSS à partir du site officiel ou en utilisant un gestionnaire de packages comme NPM. Une fois le moteur GSS inclus dans votre projet, vous pouvez commencer à écrire du code GSS dans vos fichiers CSS.

Puis-je utiliser GSS avec mon code CSS existant?

Oui, GSS est conçu pour fonctionner aux côtés des CSS traditionnels. Cela signifie que vous pouvez progressivement introduire GSS dans vos projets sans avoir à réécrire votre code CSS existant. Le code GSS peut être écrit dans des fichiers séparés ou mélangés avec du code CSS ordinaire.

Quels sont les avantages de l'utilisation de GSS?

GSS offre plusieurs avantages sur le CSS traditionnel. Il permet un contrôle plus précis sur la disposition, ce qui facilite la création de conceptions complexes et réactives. GSS simplifie également le code, ce qui facilite la lecture et le maintien de la lecture. De plus, GSS prend en charge l'édition en direct, ce qui signifie que vous pouvez voir des changements en temps réel lorsque vous codez.

GSS est-il pris en charge par tous les navigateurs?

GSS utilise JavaScript pour implémenter son moteur de mise en page basé sur des contraintes, ce qui signifie qu'il devrait fonctionner dans tout navigateur moderne qui prend en charge JavaScript. Cependant, comme pour toute nouvelle technologie, c'est toujours une bonne idée de tester vos conceptions dans plusieurs navigateurs pour assurer la compatibilité.

Y a-t-il des ressources disponibles pour apprendre le GSS?

Oui, plusieurs ressources sont disponibles pour apprendre le GSS. Le site officiel du GSS fournit un guide complet et une documentation. Il existe également plusieurs tutoriels et cours en ligne disponibles qui couvrent les GS en profondeur.

Le GSS peut-il être utilisé pour le développement Web mobile?

Oui, GSS est un excellent outil pour le développement Web mobile. Son moteur de mise en page basé sur des contraintes permet des conceptions réactives qui s'adaptent à différentes tailles d'écran et orientations. Cela facilite la création d'une expérience utilisateur cohérente sur différents appareils.

GSS est-il open source?

Oui, GSS est un projet open-source. Cela signifie que n'importe qui peut contribuer à son développement et l'utiliser gratuitement dans ses projets. Le code source de GSS est disponible sur GitHub.

Quel est l'avenir de GSS?

En tant que technologie relativement nouvelle, GSS évolue toujours. Cependant, ses caractéristiques puissantes et l'intérêt croissant pour la disposition basée sur les contraintes suggèrent qu'il a un avenir prometteur. Alors que de plus en plus de développeurs adoptent le GSS, nous pouvons nous attendre à voir plus de ressources, d'outils et de soutien communautaire à cette technologie innovante.

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!