Une histoire de CSS et de précision Sass

Défis de la disposition du pourcentage: différences de navigateur et problèmes de précision des points flottants

La disposition du pourcentage est extrêmement difficile en raison de l'incohérence du navigateur et du manque de spécification de la précision des points flottants, ce qui peut entraîner des problèmes d'alignement et de précision.

Avantages du SASS: Améliorer la précision et la lisibilité du code

SASS est un langage de script de préprocesseur qui améliore la précision en gérant les calculs complexes et rend les feuilles de style plus faciles à lire et à mettre à jour. Cependant, l'option de précision par défaut de SASS est de 5, ce qui peut toujours être trop faible pour certains cas.

calc() Fonction: calcul du navigateur et arrondissement

Les fonctions

calc(..) CSS permettent aux navigateurs de traiter les calculs et l'arrondi, produisant potentiellement de meilleurs résultats. Cette fonction, combinée à l'opération SASS, offre le meilleur des deux mondes pour la précision CSS.

Chez Edenspiekermann, nous comptons sur la révision du code pour nous assurer que le travail que nous soumettons est assez bon ™. Une chose que je rencontre souvent est l'ambiguïté autour des nombres (en particulier les nombres avec des points décimaux). Il s'agit donc d'un court article qui vise à clarifier ce problème.

Paramètres initiaux

Pour rendre toute l'explication plus claire avant de commencer, nous travaillerons sur un petit morceau de code, qui est très pertinent pour notre cas.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

quel est le problème?

Vous vous demandez peut-être ce qui ne va pas avec ce code. De l'apparition, il n'y a pas de gros problème. Il s'agit d'une disposition de grille à trois colonnes, ce qui est assez courant.

Cependant, 33% 33% équivaut à 99%, pas à 100%. Bien que cela ne puisse pas faire de différence dans la plupart des cas, lorsqu'il s'agit d'un alignement en ligne droite, 1% peuvent avoir un impact important. 1% d'un conteneur de 14 pixels de large mesure 14 pixels. C'est une distance considérable.

Pourquoi ne pouvons-nous pas simplement déplacer le point décimal (ou l'ajouter) pour le rendre plus précis? Nous pourrions réduire l'écart à 1,4 pixels, voire 0,14 pixels, ce qui, je suppose, ne vaut plus la peine! Puis commencez ici.

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

Cela fonctionne mieux, mais toujours pas parfait. John Albin Wilkins discute largement de cette question dans cet article intitulé «Le sale petit secret de la conception réactive». Si vous ne l'avez pas encore lu, lisez-le.

Le navigateur ne peut-il pas gérer cela?

À ce stade, vous vous demandez peut-être pourquoi le navigateur ne peut pas le faire fonctionner ™. Le problème est que la spécification CSS ne spécifie pas (ironiquement) pour les fournisseurs de navigateur quoi faire avec la précision du point flottant pour le pourcentage de nombres. Lorsque la spécification CSS omet des détails, vous pouvez être sûr que chaque navigateur le gérera à sa manière.

Les exemples suivants de l'article ci-dessus:

[…] Utilisez une grille de 6 colonnes avec 100% de largeur par colonne ÷ 6 = 16,666667%. Dans une fenêtre de 1000 pixels de large (je l'ai commodément sélectionnée pour faciliter nos mathématiques), chaque colonne calcule à 166.66667 pixels. Étant donné que la spécification ne fournit pas de directives, les fabricants de navigateurs sont libres de formuler leurs propres règles. Si le navigateur tourne au pixel le plus proche, dans notre exemple, nous obtiendrons 167 pixels. Mais depuis 167 x 6 = 1002 pixels, nous n'avons plus de place pour accueillir les 6 colonnes de notre fenêtre. Ou, si le navigateur roule à 166 pixels par colonne, nous serons 4 pixels moins que parfaitement en mettant toutes les colonnes dans notre fenêtre. —— John Albin Wilkins

C'est ce qui s'est passé. Les anciennes versions d'Internet Explorer (principalement 6 et 7) sont arrondies à l'entier le plus proche, provoquant des interruptions de mise en page. Le navigateur WebKit arrondis vers le bas, ce qui empêche les résultats de la disposition catastrophique, mais nous laisse un espace supplémentaire. L'opéra (du moins dans son ancien moteur de rendu) fait quelque chose de bizarre que je suis trop paresseux pour expliquer. Cependant, il n'y a pas de règles pour ce comportement dans la spécification, alors qui dois-je blâmer? Bien sûr, pas les navigateurs qui utilisent le rendu des sous-pixels, car en fin de compte, c'est la façon de produire les meilleurs résultats.

Quoi qu'il en soit, c'est simplement un gâchis et nous discuterons à nouveau de cette question dans la conclusion de cet article.

Et Sass?

SASS prend en charge les opérations mathématiques. Ce n'est pas nouveau, c'est en fait l'une des nombreuses choses que Sass a initialement utilisées (pour construire un système de grille basé sur les mathématiques). Nous pouvons dire à Sass que nous voulons diviser la largeur du conteneur en 3 parties égales.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Nous pouvons également utiliser la fonction pourcentage (..) pour obtenir le même résultat:

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

Dans Ruby et Libsass, l'option de précision pour SASS est de 5. C'est en fait un problème car il est très faible; 10 serait mieux, mais ce n'est pas la valeur par défaut (bien que configurable, mais pas très facile).

Ce code générera le CSS suivant:

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

Cela ne résout pas notre problème de navigateur, mais cela facilite les styles d'écriture. Non seulement nous n'avons pas à faire face aux calculs et à la précision nous-mêmes, mais nous rendons également le code plus facile à lire et à mettre à jour en affichant réellement les calculs.

Je pense que c'est une bonne chose.

le meilleur des deux mondes

Jusqu'à présent, nous avons appris qu'il est préférable de laisser SASS gérer les calculs pour nous plutôt que de coder les valeurs. Maintenant, la meilleure façon est de laisser le navigateur gérer cela de la meilleure façon possible. Pour ce faire, la fonction calc(..) CSS peut être utilisée.

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

Ce code ne compilera en rien. Il apparaît dans le navigateur comme l'écrivent les auteurs. Le navigateur est alors responsable de la profiter. Je vais vous dire complètement honnêtement que je ne sais pas si le navigateur gère la valeur calc(..) comme il le fait avec des valeurs régulières. Je pense qu'ils font les calculs puis tournent. Certains navigateurs semblent intégrer le rendu des sous-pixels dans l'équation. Si vous avez des informations à ce sujet, veuillez le partager dans les commentaires.

Pour les navigateurs qui ne prennent pas en charge les expressions calc(..) (principalement Internet Explorer 8 et Opera Mini), nous pouvons placer une valeur statique représentée comme une opération SASS avant elle. De cette façon, nous pouvons avoir le meilleur des deux mondes.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Conclusion

passons rapidement en revue. Premièrement, la disposition en pourcentage est difficile à gérer en raison de l'incohérence du navigateur et du manque de spécifications pour la précision des points flottants.

Ensuite, les valeurs du code dur produit par un calcul complexe ne sont généralement pas une bonne idée. Nous pouvons demander à Sass de calculer une approximation (5 décimales).

Mieux encore, nous pouvons faire en sorte que le navigateur calcule une approximation. Dans un monde idéal, lorsque le navigateur est responsable des mathématiques et du rendu, il devrait être en mesure d'en tirer le meilleur parti. Pour se déplacer dans cette direction, nous comptons sur la fonction calc(..).

C'est presque la situation actuelle. Rien de nouveau, mais je pense qu'un examen rapide vous aidera!

FAQs sur CSS et SASS Précision (FAQ)

Quelle est la différence entre CSS et SASS?

CSS (feuille de style en cascade) est une langue de feuille de style utilisée pour décrire l'apparence et le formatage des documents écrits en HTML. SASS (Smart Styleshets in Syntax) est un langage de script préprocesseur qui est interprété ou compilé en CSS. La principale différence entre les deux est que Sass a des caractéristiques qui n'existent pas dans le CSS, telles que les variables, la nidification, le mixin, l'héritage, etc. Ces fonctionnalités rendent Sass plus puissant et plus flexible que CSS.

Comment fonctionne la précision dans CSS et SASS?

La précision de CSS et SASS fait référence au détail et à la précision du rendu de style. Dans CSS, la précision est souvent limitée en raison du manque de variables et de fonctions. Sass, en revanche, permet une précision plus élevée grâce à ses fonctionnalités avancées. Par exemple, vous pouvez définir des variables pour une couleur ou une taille spécifique et les utiliser de manière cohérente tout au long de la feuille de style pour assurer la précision et la cohérence de votre conception.

Puis-je utiliser SASS dans un projet Web?

Oui, vous pouvez utiliser SASS dans n'importe quel projet Web. SASS est compatible avec toutes les versions de CSS. Vous pouvez donc commencer par CSS et ajouter la fonction SASS selon les besoins. Cependant, n'oubliez pas que SASS nécessite un préprocesseur pour le convertir en un CSS que le navigateur peut interpréter.

Quels sont les avantages de l'utilisation de SASS sur CSS?

SASS offre plusieurs avantages sur CSS. Il permet l'utilisation de variables, de nidification, de mélange et d'héritage, ce qui peut rendre votre feuille de style plus organisée, réutilisable et facile à entretenir. SASS prend également en charge les opérations mathématiques, vous permettant de calculer les dimensions et les couleurs directement dans la feuille de style.

Comment améliorer la précision du CSS ou du code SASS?

Vous pouvez améliorer la précision de votre CSS ou code SASS en utilisant des variables pour obtenir des valeurs cohérentes, en utilisant des opérations mathématiques pour effectuer des calculs précis et en utilisant des fonctions et des mixins pour obtenir des styles réutilisables. De plus, l'utilisation de réinitialisation CSS peut aider à assurer la cohérence entre les différents navigateurs.

Qu'est-ce qu'un préprocesseur CSS et pourquoi Sass en a-t-il besoin?

Le préprocesseur CSS est un langage de script qui étend les fonctionnalités par défaut de CSS. Il vous permet d'utiliser des variables, des règles imbriquées, des mixins, des fonctions et des opérations mathématiques dans les feuilles de style. SASS est un préprocesseur CSS. C'est nécessaire car le navigateur ne peut interpréter que le CSS. Par conséquent, le code SASS doit être compilé en CSS avant d'être utilisé dans un projet Web.

Comment SASS aide-t-il à écrire du code sec (ne vous répétez pas)?

SASS prend en charge des fonctionnalités telles que les variables, le mixin et l'héritage, qui aide à écrire du code sec. Une variable vous permet de définir une valeur à la fois et de l'utiliser à plusieurs endroits. Mixin vous permet d'écrire des styles réutilisables qui peuvent être inclus dans d'autres règles. L'héritage vous permet de partager un ensemble de propriétés CSS d'un sélecteur à un autre.

Quels sont les pièges potentiels de l'utilisation du SASS?

Bien que Sass offre de nombreux avantages, il a également des pièges potentiels. Le besoin de préprocesseurs peut augmenter la complexité du processus de développement. De plus, certaines caractéristiques SASS telles que la nidification et le mélange peuvent provoquer le gonflement de la sortie CSS et l'inefficacité si elles sont mal utilisées.

Comment commencer à apprendre et à utiliser SASS?

Il existe de nombreuses ressources disponibles pour apprendre Sass en ligne. Le site Web officiel de SASS fournit un guide complet pour démarrer. Vous pouvez également trouver des tutoriels sur les sites Web de développement Web et les plateformes d'apprentissage en ligne. Pour commencer avec SASS, vous devez configurer un préprocesseur SASS dans votre environnement de développement.

Puis-je convertir mon code CSS existant en SASS?

Oui, vous pouvez convertir votre code CSS existant en SASS. Étant donné que SASS est un superset de CSS, tout CSS valide est un SASS valide. Vous pouvez d'abord renommer votre fichier .css sur .SCSS (Sassy CSS), puis commencer progressivement à utiliser la fonction SASS dans votre code.

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!