La typographie intrinsèque est l'avenir du style de style sur le Web

La façon dont nous stylisons le texte n'a pas beaucoup changé au fil des ans. Il y a eu de nombreuses progrès pour rendre les choses plus flexibles, comme les mises en page, mais en termes de style, les aspects les plus finis de nos conceptions, comme le texte, restent relativement inchangés. Cela est particulièrement vrai pour le style de texte. Nous écrivons du code pour styliser explicitement le texte pour chaque partie de nos mises en page, puis, pour le rendre réactif, nous écrivons plus de code pour le faire fonctionner à chaque point d'arrêt. Cela signifie que, en tant que différents domaines de la compression de texte et de l'élargissement, le résultat est une tension - une tension expérientielle palpable - juste avant la rupture du contenu. À ces endroits, le contenu souffre de ne pas être bien dimensionné ou bien espacé, tout en étant soutenu par un code trop compliqué et cassant.

La typographie intrinsèque déplace tout cela, l'éliminant en commençant par le code lui-même pour affecter le style. Au lieu d'écrire des styles de texte explicites, vous définissez comment ces styles changent en proportion de la zone du texte. Cela vous permet d'utiliser des composants de texte plus flexibles dans des variations plus de disposition. Il simplifie votre code, augmentant les opportunités de nouvelles possibilités de mise en page. La typographie intrinsèque fonctionne pour que le texte s'adapte à la zone dans laquelle il est rendu. Au lieu de dimensionner et d'espacer du texte pour chaque composant à chaque point d'arrêt, le texte reçoit des instructions pour répondre aux zones dans lesquelles il est placé. En conséquence, la typographie intrinsèque permet aux conceptions d'être beaucoup plus flexibles, s'adaptant à la zone dans laquelle il est placé, avec beaucoup moins de code.

Super pouvoirs typographiques au-delà de la clamp ()

Le résultat de l'utilisation de la typographie intrinsèque va bien au-delà de ce qui est possible avec des outils comme clamp (). Le style typographique intrinsèque mélange la portabilité des composants des requêtes d'élément avec le contrôle d'interpolation des animations CSS, permettant des changements transparents de toute valeur à travers les largeurs de conteneurs. Cette technique permet des choses qui ne sont pas possibles avec les autres techniques CSS, telles que l'ajustement de la police variable, la couleur et la hauteur de ligne sans unité à mesure que la zone d'un élément change. Vous évitez également les pièges de l'accessibilité de CLAMP () et les verrouillent où la modification de la taille de police par défaut du navigateur décourage votre typographie de l'alignement avec vos points d'arrêt lorsque vous utilisez des unités relatives.

En quoi est-ce différent de la typographie réactive?

La typographie réactive fait référence à la fenêtre pour transformer le texte. Il le fait à travers des requêtes multimédias, des serrures de cliquetis () ou des serrures CSS. Bien que ces techniques permettent un contrôle granulaire de la typographie entre les tailles d'écran, elles n'ont pas la capacité de contrôler la typographie dans différents composants. Cela signifie que, pour une page avec un éventail de zones de contenu de taille différemment, un nouveau style de titre devrait être créé pour chacun de ces domaines avec une approche de typographie réactive.

La typographie intrinsèque n'a pas besoin de tout cela. Avec la typographie intrinsèque, un style unique peut être utilisé dans tous les différents domaines de contenu. Les styles de titre discrets peuvent être consolidés en un titre intrinsèque. Il s'agit d'une distinction similaire à celle des requêtes d'élément par rapport aux requêtes multimédias: avec les requêtes d'élément, il est possible de lier toutes les informations de mise à l'échelle à un composant, où les requêtes multimédias, les styles font toujours référence à la fenêtre.

L'anatomie d'un style intrinsèque

Si nous devions prendre les styles de titre intrinsèque ci-dessus et extruder toutes les variations en eux, cela ressemblerait à ce qui suit:

Dans les zones plus grandes de la page, le texte est composé pour être plus grand, plus audacieux et plus large. Dans les petites zones de la page, le texte est plus petit, plus léger et plus étroit. La zone dans laquelle un titre est rendu est mesurée, puis la tranche appropriée est tirée de ce style de titre intrinsèque à utiliser pour ce titre spécifique.

Vous remarquerez peut-être quelques choses sur la forme de ce style de titre extrudé. Le texte passe de plus petit à plus grand, mais la forme elle-même a des courbes. Ce contrôle sur la façon dont le texte évolue d'un point à un autre est particulièrement utile à mesure que les écrans deviennent plus petits pour assurer une lisibilité optimale. Ci-dessous, vous pouvez voir le même ensemble de styles appliqués à deux colonnes de texte, une avec une forme incurvée et une avec une forme linéaire. Dans l'exemple intrinsèque incurvé, le texte est largement plus lisible dans plus d'endroits, par rapport à l'exemple utilisant une interpolation linéaire, où le texte devient trop petit trop rapidement.

En combinant la capacité d'interpoler le style de texte à travers les tailles et les zones d'une disposition ainsi que pour façonner la façon dont ces paramètres sont interpolés, la typographie intrinsèque donne aux concepteurs une quantité sans précédent de contrôle sur la façon dont le texte est rendu à n'importe quelle taille d'écran ou de composant.

Composé intrinsèquement

Typetura a développé un outil pour ajouter des fonctionnalités de composition intrinsèque à CSS (je suis le créateur.) Cet outil permet d'écrire les styles typographiques nécessaires, injectant la flexibilité où auparavant il n'y en avait pas. Les styles intrinsèques sont stockés dans les images clés CSS et le changement en fonction de la largeur d'un élément parent. Cela permet l'interpolation de toute propriété animateable sur les largeurs des éléments. Pour référence à notre exemple de requêtes d'élément, pensez aux requêtes d'élément interpolée.

Pour configurer vos images clés, 0% est égal à une largeur de conteneur de 0px, et l'image clé à 100% est la largeur de conteneur maximale que vos styles couvrira. Cette valeur est de 1600px par défaut. Les conteneurs peuvent être définis en ajoutant la classe typetura à un élément, avec l'élément racine comme conteneur par défaut. Les éléments enfants seront stylisés en fonction de la largeur du contexte parent, à moins qu'un nouveau contexte ne soit défini.

 @KeyFrames Headline {
  0% {
    taille de police: 1rem;
  }
  100% {
    taille de police: 4rem;
  }
}

Pour attacher ces styles à votre élément, utilisez la propriété personnalisée - TT-Key. Vous pouvez maintenant voir votre premier style intrinsèque.

 @KeyFrames Headline {
  0% {
    taille de police: 1rem;
    hauteur de ligne: 1.1;
  }
  100% {
    taille de police: 4rem;
    hauteur de ligne: 1;
  }
}

.headline {
  --TT-Key: titre;
}

Pour façonner la façon dont ces styles évoluent, utilisez la propriété personnalisée - TT-Ease. Cette propriété accepte les fonctions et les mots clés de l'assouplissement CSS. Cela vous permet d'élever rapidement la taille de la police de base ou de réduire la mise à l'échelle et l'espacement des phares. De plus, nous pouvons contraindre la plage avec laquelle ces styles couvrent - tt-max pour mieux adapter les contraintes de vos dispositions et pour quoi le texte est utilisé.

 @KeyFrames Headline {
  0% {
    taille de police: 1rem;
    hauteur de ligne: 1.1;
  }
  100% {
    taille de police: 4rem;
    hauteur de ligne: 1;
  }
}

.headline {
  --TT-Key: titre;
  --TT-MAX: 600;
  --Tt-Ease: Facitage-Out;
}

L'exemple suivant montre à quel point votre page peut être flexible lorsque tout le texte dessus est motivé par des styles typographiques intrinsèques; de la racine du document et plus. Le texte peut passer de manière transparente d'un moniteur servant une salle de conférence jusqu'à la taille d'une montre - le tout sans requêtes médiatiques. Les styles de texte peuvent également être partagés dans différents modules; Par exemple, le titre en haut de la page et les gros titres de la zone des clics suivants sont tous motivés par le même style. Bien que l'efficacité apparaisse immédiatement à n'importe quelle taille du site Web, elles se composent rapidement: plus le site que vous disposez, plus ces efficacités se construisent.

Découvrez ce stylo. Dans ce document, j'ai ajouté un inspecteur de style intrinsèque afin que vous puissiez cliquer sur chaque titre et voir quelle est la taille rendue. Dans l'inspecteur, vous pouvez également manipuler la forme du style intrinsèque et la limite supérieure. Cela vous permet de commencer à voir les possibilités de style typographique pour les typetura.

La typographie intrinsèque est l'avenir du style sur le Web

La cuisson de ces règles de conception dans votre contenu est la pratique de la conception intrinsèque et la cuisson de ces règles dans votre texte est la pratique de la typographie intrinsèque. La conception Web intrinsèque , inventée par Jen Simmons, est un concept où les mutations de conception communes sont cuites dans le tissu même de nos composants. Au lieu d'indiquer explicitement le style de chaque élément de contenu individuel, les dispositions intrinsèques reçoivent des contraintes de conception et notre contenu répond à son environnement, par opposition à la définition explicite des styles. Cette approche simplifie à la fois votre base de code et améliore la flexibilité de vos conceptions, car les composants ont des instructions qui les aident à répondre à plus que la fenêtre.

Typetura apporte cette philosophie dans le style de texte. Les composants du texte étant notre matériel de conception le plus fondamental, un matériau réutilisé dans presque tous les composants, la typographie intrinsèque présente des avantages significatifs par rapport aux autres méthodologies. Les avantages de la résilience de conception, de l'évolutivité et de la simplification du code existent plus profondément dans votre projet et prolongent sa durée de vie. Diche à la taille d'une montre ou jusqu'à la taille d'un téléviseur, et où le texte a autrefois limité dans quelle mesure votre disposition pourrait atteindre, il prend désormais en charge vos ambitions.

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!