Comment fonctionne CSS. Création d'effets d'animation à l'aide de CSS

L’avantage de la typographie Web est qu’elle repose sur les connaissances accumulées au fil des siècles de développement de la typographie imprimée traditionnelle. Pour la même raison, la typographie web doit suivre des normes meilleures pratiques et les meilleures pratiques.

Cependant, le web est un espace de communication avec ses propres caractéristiques. A tel point que transition en douceur de l'impression à la typographie Web devient un défi. Jason Santa Maria, dans son livre sur la typographie Web, écrit :

Les livres imprimés sont un format statique. Dès la première mise en page, le livre vous parvient sans modifications à travers l'imprimerie, l'entrepôt et la bibliothèque. Exactement sous la même forme que prévu.

Sur le Web, le même site peut avoir un aspect différent en fonction de nombreux facteurs : différences entre les appareils, les résolutions d'écran, paramètres personnels navigateurs et plus encore. Comme Jason l'écrit en outre, certains de ces facteurs...

Ils peuvent donner l’impression que la police est trop petite, d’autres retireront une partie du contenu de l’écran et d’autres encore peuvent complètement gâcher l’expérience de visualisation de la page.

Mais on sait aussi que « le Web est le meilleur endroit pour écrire du texte ». Le texte sur Internet peut être « recherché, copié, traduit, transmis sous forme de lien, imprimé ; le texte sur le Web est pratique et accessible.

La flexibilité du Web ne signifie pas renoncer au contrôle. Au contraire, en tant que concepteurs de sites Web, nous nous attendons à pouvoir faire des choix éclairés dans tout ce qui constitue notre travail, et la copie ne fait pas exception. Cela inclut la façon dont le texte est positionné, sa taille, sa police et tout ce qui permet de transmettre l'idée principale du site.

Outil principal Pour manipuler l’apparence du texte sur le web, c’est du CSS.

Les propriétés CSS abordées dans cet article se trouvent dans le module CSS Text Spécification.

Ce module décrit la mise en page CSS, c'est-à-dire les propriétés CSS qui contrôlent la traduction d'une source de texte en texte formaté et délimité par des lignes.

En d’autres termes, le module de texte CSS regroupe tout ce qui concerne l’affichage des caractères et des mots dans le navigateur, l’indentation, l’alignement, la césure, etc.

Ce qui est considéré comme une unité de base de texte ou de mot, où les mots peuvent être décomposés et d'autres règles, dépend de la langue du site. Il est donc très important de spécifier la langue utilisée dans le document HTML (généralement l'attribut lang de l'élément html).

Dans cet article, je ne discuterai pas des choses suivantes :

• polices, c'est-à-dire représentation visuelle des symboles et de leurs propriétés ;
• Propriétés de décoration de texte CSS telles que le soulignement, les ombres de texte ou l'accentuation.

Si vous êtes curieux, vous trouverez la dernière documentation sur les polices et la décoration de texte dans le module CSS Fonts Level 3 et le module CSS Text Decoration Level 3.

Contrôle de la casse des lettres : transformation de texte

Parfois, il devient nécessaire de mettre des majuscules aux mots ou aux premiers caractères des mots. CSS utilise la propriété text-transform pour contrôler la casse des lettres.

La valeur par défaut de text-transform est none , c'est-à-dire que par défaut la casse des lettres n'est pas modifiée.

Capitaliser la valeur

Si vous souhaitez mettre en majuscule la première lettre de chaque mot, en laissant tout le reste en majuscule forme originale, cela peut être réalisé en définissant la valeur de capitalisation.

Balisage :

H2 ( transformation de texte : majuscule ; )

Notez que la majuscule ne suit pas les règles traditionnelles : elle met en majuscule la première lettre de tous les mots, y compris les prépositions. Et si tu veux suivre les normes langue anglaise, vous devrez le faire manuellement.

Signification des majuscules

Si votre objectif est de mettre toutes les lettres en majuscules, alors la valeur appropriée serait en majuscule :

Balisage :

Les aventures d'Alice au pays des merveilles

H2 ( transformation de texte : majuscule ; )

Signification des minuscules

Cette valeur, au contraire, met tous les caractères en minuscules. Bien entendu, cela n’a aucun impact sur les lettres minuscules.

Balisage :

Les aventures d'Alice au pays des merveilles

H2 ( transformation de texte : minuscule ; )

valeur pleine largeur

Cette valeur est apparue récemment dans la spécification. Cette valeur limite le caractère à l'intérieur du carré, comme pour les hiéroglyphes. Et l'utilisation de cette propriété facilite l'alignement des caractères latins avec les caractères idéographiques.

Tous les symboles n'ont pas une forme correspondante, et donc tous les symboles ne seront pas affectés par cette signification :

Balisage :

Les aventures d'Alice au pays des merveilles

H2 ( transformation de texte : pleine largeur ; )

Cette propriété est sur à l'heure actuelle Uniquement pris en charge dans Firefox.

Informations Complémentaires

Les navigateurs prennent parfaitement en charge la propriété text-transform, et tous les principaux navigateurs n'ont aucun problème avec elle.

La seule exception est la valeur pleine largeur, qui ne fonctionne actuellement que dans Firefox. Et une telle impopularité pourrait bien conduire à l’exclusion de cette valeur du cahier des charges.

Il existe également une légère différence dans la gestion des majuscules dans Firefox et les autres navigateurs.

Ici, par exemple, Firefox :

Notez que la première lettre après le trait d’union n’est pas en majuscule. Et voici le même exemple dans Chrome :

Chrome ne fait pas d'exception pour les premières lettres après les traits d'union : elles sont en majuscules comme les autres. Et c'est le comportement par défaut pour tous les navigateurs à l'exception de Firefox mentionné ci-dessus.

Et enfin, n'oubliez pas la cascade. La définition de la propriété text-transform sur un élément conteneur sera héritée par tous ses descendants. A éviter des résultats inattendus, demander éléments enfants transformation de texte en none .

Gestion des espaces : espaces blancs

Lorsque vous appuyez sur la touche Tab, sur la barre d'espace ou que vous forcez un saut de ligne (avec avec la touche ENTER ou une étiquette
), vous créez des trous dans votre document.

Par défaut, les navigateurs concatènent toutes les séquences d'espaces en une seule, suppriment les sauts de ligne et forcent les chaînes à occuper la largeur du conteneur. C'est pratique car cela vous permet d'indenter et de séparer des morceaux de texte, gardant le document source lisible et maintenable, sans vous soucier de son affichage dans le navigateur.

Mais que se passe-t-il si nous avons un objectif différent ? Supposons que vous souhaitiez conserver tous les espaces que vous créez dans un document HTML. Ou vous souhaitez qu'un morceau de texte soit affiché sous forme d'extrait de code, avec toute l'indentation. Ou vous souhaitez afficher le texte sur une seule ligne, sans tirets.

Dans les cas où vous devez modifier le comportement par défaut du navigateur, la propriété white-space propose plusieurs options intéressantes.

Mot clé normal est identique au comportement par défaut - c'est tout espaces supplémentaires réduit en un seul, la ligne est translatée après avoir atteint le bord du conteneur.

Pré-valeur

Le mot-clé pre vous permet de générer du texte avec tous les espaces et toutes les nouvelles lignes forcées préservées dans la source. Et si les limites des conteneurs sont dépassées, la ligne ne se brisera pas.

Élément ( espace blanc : pre; )

Si vous utilisez des tabulations, vous pouvez contrôler leur taille en espaces à l'aide de la propriété tab-size. Il faut une valeur entière.

Élément ( espace blanc : pre ; -moz-tab-size : 4 ; -o-tab-size : 4 ; tab-size : 4 ; )

La propriété tab-size est prise en charge par tous les navigateurs modernes, à l'exception des navigateurs Microsoft (et même Edge, hélas), mais si vous êtes sûr d'en avoir besoin, utilisez un polyfill.

Signification du pré-emballage

Le mot-clé pre-wrap vous permet d'obtenir le résultat souhaité.

Élément ( espace blanc : pré-enveloppement ; )

Remarquez comment chaque ligne affichée dans le navigateur répète toutes les nouvelles lignes de la source, en fonction de l'espace disponible dans le conteneur.

Cependant, si vous réduisez la largeur du navigateur, vous remarquerez que toutes les lignes sont limitées par la largeur du conteneur.

Signification de la pré-ligne

Et enfin, une autre valeur intéressante pour la propriété white-space est la pré-ligne. Il agit comme valeur par défaut en termes de réduction des espaces en un seul et de limitation de la chaîne à la taille du conteneur. Cependant, il gère tous les sauts de ligne forcés.

Élément ( espace blanc : pré-ligne ; )

Signification de nowrap

nowrap est peut-être la signification la plus connue de l'espace blanc. Avez-vous déjà rencontré le besoin de donner une continuité à un élément de design, quelle que soit la largeur du conteneur ? Cela se fait en utilisant un espace blanc : nowrap ; .

Pour de tels cas, nous disposons de propriétés CSS spéciales.

propriété word-wrap/overflow-wrap

La propriété overflow-wrap (anciennement connue sous le nom de word-wrap et toujours prise en charge dans tous les principaux navigateurs) fonctionne si la propriété white-space permet un retour à la ligne pour s'adapter à la taille de la ligne. Les valeurs possibles sont normal et break-word .

Avec la valeur normal, les mots sont divisés au niveau de tous les marqueurs traditionnels - espaces, tirets, etc.

La valeur break-word permet de couper les mots longs si la ligne devait autrement dépasser la taille disponible.

L'image ci-dessous montre un exemple de mot long s'étendant au-delà du conteneur :

Maintenant, définissons la propriété overflow-wrap de cet élément (et la propriété word-wrap pour des raisons de compatibilité) sur break-word :

Élément ( word-wrap : break-word ; overflow-wrap : break-word ; )

Désormais, le mot extra-long est divisé en plusieurs lignes qui remplissent toute la largeur du conteneur.

Propriété des tirets

Rompre les longs mots est bien sûr une bonne chose. Cependant, le texte qui en résulte peut dérouter les lecteurs. Il vaudrait mieux que le mot split soit accompagné d'un trait d'union. De cette façon, il est immédiatement clair pour les lecteurs qu’il s’agit d’un seul mot divisé en lignes. Ceci peut être réalisé en utilisant la propriété hyphens, qui peut être combinée avec word-wrap : break-word .

Plus précisément, cela signifie que la valeur automatique de la propriété hyphens vous permet d'afficher un trait d'union au niveau du saut de mot, si le langage du document le permet dans la source HTML existante. Pour que cela fonctionne, assurez-vous de définir le bon attribut lang pour votre document :

Break-word.hyphens-auto ( -moz-hyphens : auto ; -webkit-hyphens : auto ; -ms-hyphens : auto ; tirets : auto ; )

Vous pouvez également désactiver les traits d'union en définissant les traits d'union sur aucun :

Break-word.hyphens-none ( -moz-hyphens : aucun ; -webkit-hyphens : aucun ; -ms-hyphens : aucun ; tirets : aucun ; )

Vous avez également la possibilité d'afficher des traits d'union aux sauts de ligne là où vous les placez dans le balisage. Cela se fait en utilisant la valeur manuelle :

Break-word.hyphens-manual ( -moz-hyphens : manuel ; -webkit-hyphens : manuel ; -ms-hyphens : manuel ; tirets : manuel ; )

Gérer l'espace entre les mots et les lettres

La lisibilité d'un texte dépend souvent de plusieurs facteurs. Dans certains cas, réduire ou augmenter l’espace entre les mots ou les lettres, c’est-à-dire le suivi, améliore considérablement la lisibilité.

CSS possède des propriétés d'espacement des mots et des lettres pour contrôler respectivement l'espacement entre les mots et les lettres.

propriété d'espacement des mots

Cette propriété peut prendre valeurs suivantes:

• normale
• (spécifiant directement une valeur numérique en unités absolues)
• pourcentage (définir la valeur en pourcentage)

normal affiche l'espacement des lettres par défaut. Cette distance dépend de la police et du navigateur utilisés.

Normal ( espacement des mots : normal ; )

Valeur numérique ajoute l'intervalle spécifié à la valeur par défaut ( soustrait, si on lui donne une valeur négative) :

Longueur (espacement des mots : 0,5 em ; )

La valeur en pourcentage fonctionne de la même manière que la valeur numérique. Il n'est actuellement pas pris en charge par les navigateurs et sera probablement supprimé des futures versions de la spécification.

Pourcentage (espacement des mots : 1 % ; )

propriété d'espacement des lettres

La propriété d'espacement des lettres accepte deux types de valeurs : une valeur normale ou une valeur numérique avec des unités.

La propriété normale se réinitialise tôt valeur définie espacement des lettres par défaut. Par exemple, si vous définissez l'espacement des lettres d'un élément parent sur 1em , vous pouvez le remplacer pour les enfants avec normal .

Élément (espacement des lettres : normal ; )

La valeur numérique est spécifiée en unités, telles que em ou pixels, vous pouvez augmenter la distance par défaut ou la diminuer en spécifiant une valeur négative.

Élément (espacement des lettres : 1em ; )

Ajout

l'espacement des mots ne s'applique pas seulement aux mots : il peut être utilisé avec n'importe quel contenu en ligne ou en bloc en ligne.

Vous pouvez également animer l’espacement des mots et l’espacement des lettres. Cependant, dans les transitions CSS, la valeur normale d'espacement des lettres ne fonctionne pas dans Firefox (39), remplacez simplement la valeur par 0em .

Retraits de texte : texte-retrait

L'indentation du texte se fait généralement sur la première ligne d'un paragraphe, bien que ce ne soit pas une pratique courante sur les sites Web. Au lieu de cela, il est généralement placé chaîne vide, séparant les paragraphes.

Cependant, l'indentation de la première ligne est parfois utilisée, par exemple pour imiter la conception classique des livres.

Si vous souhaitez utiliser cette technique dans votre conception, CSS possède la propriété text-indent. Considérons ses significations possibles.

La valeur numérique peut être spécifiée en pixels, em et autres unités prises en charge :

Élément ( retrait de texte : 2em ; )

Y compris en pourcentage de la largeur du conteneur :

Élément ( retrait du texte : 6 % ; )

La valeur de chaque ligne indente non seulement la première ligne, mais également toute ligne après un saut de ligne (ENTRÉE ou
). Ces indentations ne s'appliquent pas aux lignes qui sont enveloppées parce que le conteneur est plein.

La valeur ajoute un retrait à toutes les lignes suspendues sauf la première.

Les deux dernières valeurs : each-line et hanging sont expérimentales et ne sont actuellement implémentées dans aucun navigateur.

Bonne journée, chers abonnés !

En HTML il est possible de rendre un objet visible ou invisible, et il y a diverses options, et ils affichent le contenu différemment.

Alors commençons.

Imaginons une situation : nous devons insérer un morceau de texte assez volumineux dans un bloc de 200 x 300 pixels (en principe, cela peut être n'importe quoi).

Si nous définissons le bloc à l'aide de styles sur une largeur de 200 et une hauteur de 300 pixels, alors il s'étendra en hauteur autant que le contenu du bloc. Mais il nous faut strictement 300 pixels de hauteur ! Dans ce cas, nous procédons comme suit :

Pour notre bloc, nous définissons la propriété overflow avec la valeur scroll . Le bloc prend la taille dont nous avons besoin, tout le contenu y tient et des barres de défilement apparaissent.

Valeurs propriétés de débordement sont donnés ci-dessous :

overflow – contrôle la taille d’un objet si son contenu ne peut pas être entièrement affiché.

Valeurs:

auto – déterminé par le navigateur.

visible – la taille est étirée à tel point que tout le contenu est visible.

caché – tout ce qui dépasse les limites de l’élément n’est tout simplement pas affiché.

défilement – ​​Tout le contenu est affiché et des barres de défilement apparaissent.

Pour notre cas spécifique, un exemple :

XHTML

#st1( overflow: scroll; width:200px; height:300px; ) Un assez gros fragment de texte

Il existe une propriété qui permet de contrôler la visibilité du contenu de l'élément.

visibilité - contrôle en CSS la visibilité du contenu d'un élément.

Valeurs:

XHTML

le contenu de cet en-tête ne sera pas affiché

La propriété suivante qui vous permet de contrôler la visibilité d'un bloc est display .

display - détermine comment l'élément sera affiché

Valeurs:

aucun - l'élément n'est pas affiché

block - coupe la ligne avant et après l'élément (c'est-à-dire que l'élément ne peut pas être sur la même ligne que les autres éléments)

inline - ne coupe pas la ligne

Comment utiliser cette propriété ?

Disons que nous avons du texte, parmi ce texte il y a une balise ou cela peut être un lien, et nous avons besoin que le contenu de cette balise ou de ce lien soit affiché sur ligne séparée, alors pour eux nous définirons propriété d'affichage avec le bloc de valeur. Et vice versa, si nécessaire, disons que la balise n'est pas sur une ligne séparée, mais sur la même que le texte, alors nous définissons sa propriété d'affichage avec la valeur inline .

XHTML

sera sur la même ligne avec le texte affiché sur une ligne séparée

Attention particulière ne mérite la valeur aucune. Si nous définissons la propriété display sur n'importe quel élément avec la valeur none, alors cet élément ne sera pas affiché. De plus, contrairement à la propriété visibilité à valeur cachée, cet élément ne sera pas affiché complètement (la propriété visibilité à valeur cachée n'affichera pas le contenu de l'élément, et l'élément lui-même prendra sa place sur la page).

Résumé : Accès aux feuilles de styles. Propriétés de la feuille de style. Ajout et suppression de règles. Modification des styles d'éléments. Noms des classes d'éléments.

Considérons (pour le moment) un exemple théorique - disons qu'il existe un site Web sur lequel une série d'articles techniques est présentée. Nous souhaitons mettre en avant certains de ces articles avec un carrousel animé sympa, mais qu'en est-il des utilisateurs qui n'ont pas activé JavaScript pour une raison quelconque ? En nous rappelant ce que nous avons appris sur le JavaScript discret, nous souhaitons que les fonctionnalités du site Web fonctionnent également pour ces utilisateurs, mais nous souhaiterons peut-être concevoir le site différemment pour ces utilisateurs afin qu'ils puissent l'utiliser confortablement, même sans carrousel.

Si vous souhaitez supprimer cette règle, vous pouvez appeler la fonction stylesheet.deleteRule(index), où index sera l'index de la règle qui sera supprimée.

Dans l'exemple de démonstration d'articles, vous pouvez créer une règle qui rend la propriété d'affichage égale à aucune pour tous les articles sur HTML et JavaScript - regardez l'exemple du carrousel (http://dev.opera.com/articles/view/dynamic- style-css-javascript/carousel .html) pour le voir en action.

Remarque : IE n'implémente pas de règles conformes aux normes. Il utilise des règles au lieu de l'attribut cssRules. IE utilise également RemoveRule au lieu de deleteRule et addRule( selector , Rule, index) au lieu de insertRule .

Modification des styles d'éléments

Vous devez maintenant comprendre comment éditer les feuilles de style associées à une page et créer et modifier des règles CSS en leur sein. Que faire si vous souhaitez modifier un élément spécifique du DOM ? À l'aide de l'API DOM, vous pouvez accéder à des éléments de page spécifiques. En revenant à l'exemple du carrousel, vous pouvez voir que les fonctions sont définies de telle manière que lorsque vous cliquez sur un article, cet article est mis en surbrillance, tandis que le texte principal de l'article est affiché en dessous.

AVEC en utilisant DOM on accède à l'objet style, qui décrit le style du document. Cet objet de style est défini comme CSSStyleDeclaration ; explication détaillée Cela peut être trouvé dans la documentation du W3C sur l'interface CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). L'objet style ne fonctionne pas tout à fait de la même manière que certaines autres propriétés définies sur l'élément HTML. Contrairement à element.href ou element.id qui renvoient des chaînes, element.style renvoie un objet. Cela signifie qu'il n'est pas possible de définir un style en attribuant une chaîne à element.style .

L'objet style possède des attributs qui correspondent à différents propriétés données CSS. Par exemple, style.color renvoie la couleur spécifiée sur l'élément. Faire element.style.color = "red";

Vous pouvez modifier dynamiquement le style. Vous trouverez ci-dessous une fonction qui transforme la couleur d'un élément en rouge lorsque l'identifiant de l'élément lui est transmis.

fonction colorElementRed(id) ( var el = document.getElementById(id); el.style.color = "red"; )

Vous pouvez également utiliser setAttribute(key, value) pour styliser un élément. Par exemple, définissez la couleur d'un élément sur rouge en appelant element.setAttribute("style", "color: red"); , mais soyez prudent car cela supprime toutes les modifications apportées à l'objet de style. Lorsqu'un élément est stylisé de cette façon, c'est la même chose que si nous le stylisions comme une déclaration attribut de styleélément HTML

. Ce style ne sera appliqué que lorsque l'importance et la spécificité de la règle sont supérieures aux autres règles appliquées à l'élément (la spécificité est expliquée au chapitre 28 sur l'héritage CSS et la cascade).

Certains d'entre vous se demandent peut-être ce qui se passe lorsqu'une propriété est définie Vous pouvez définir les attributs des différents styles directement dans le balisage ou utiliser une feuille de style. La propriété peut être utilisée pour attribuer un Classe CSS à un style de menu qui contrôle certains aspects de l'apparence du contrôle. L'exemple montre comment spécifier une propriété pour un certain nombre de propriétés que vous pouvez ensuite référencer dans une feuille de style.

...

Notez qu'il est recommandé de spécifier des styles en ligne dans le balisage ou d'utiliser la propriété et de spécifier des styles à l'aide d'une feuille de style. Il n'est pas recommandé de spécifier des styles en ligne et d'utiliser une feuille de style, car un comportement inattendu pourrait en résulter. Pour une discussion générale sur l’utilisation de CSS avec les contrôles serveur, consultez Contrôles du serveur Web ASP.NET et styles CSS.

Comportement et styles des menus

Pour contrôler l'apparence de la partie dynamique du menu, vous pouvez utiliser les propriétés de style avec le mot « Dynamique » dans le nom :

L'exemple suivant crée une collection de quatre styles qui s'appliquent aux quatre premiers niveaux d'éléments de menu et peuvent être référencés dans une feuille de style à l'aide de la valeur.

Le premier style de la collection s'applique aux éléments de menu de premier niveau ; le deuxième style s'applique aux éléments de menu de deuxième niveau, et ainsi de suite. Notez qu'il n'y a pas d'héritage entre les styles de niveau, de sorte que les styles appliqués à un niveau n'affectent pas les niveaux suivants.

L'exemple suivant crée une collection de trois styles qui s'appliquent aux trois premiers niveaux d'éléments de menu et peuvent être référencés dans une feuille de style.

Et le même jour, les scientifiques se sont inquiétés de la gravité. Coïncidence? Pas autrement.

Le modèle de l'article précédent couvrait 90 % des cas de chargement CSS en plusieurs étapes, et sa simplicité est assez évidente. Mais aimeriez-vous entendre parler d’un modèle qui fonctionne environ 100 % du temps et qui est en outre ridiculement compliqué ? Alors je vous invite à m'accompagner au paragraphe suivant...

Il manque 10 %

Pendant le chargement du CSS, l'analyseur bloque, ce qui signifie que le rendu est bloqué pour tout le contenu ultérieur. Selon la page de démonstration de l'article mentionné ci-dessus, le rendu est divisé en les étapes suivantes.

Téléphones mobiles Ordinateurs

C'est génial sur mobile, où chaque CSS pour une section se bloque lui-même ainsi que toutes les sections suivantes, mais sur ordinateur, le CSS pour le principal et les commentaires dans la colonne de gauche empêche l'affichage de about-me dans la colonne de droite, même si le CSS pour about-me est chargé en premier. En effet, l'ordre de blocage est déterminé par l'ordre dans code source mais pour cette conception, ce serait génial d'avoir colonne de droite est apparu avant celui de gauche.

Nous devons construire un arbre de dépendances où le rendu de chaque élément est bloqué avant le rendu des autres certains éléments. De plus, les dépendances doivent pouvoir changer lorsque la largeur de la fenêtre change. Cela semble tentant, n'est-ce pas ?

Cela peut être fait en utilisant des Propriétés CSS…

Propriétés CSS personnalisées

Mais pour notre conversation d'aujourd'hui, il suffit de savoir ceci...

Html ( arrière-plan : var(--gloop, rouge); )

Ici, nous définissons l'arrière-plan de la page sur la valeur de la propriété personnalisée --gloop, et s'il n'en a pas, nous le définissons sur rouge comme solution de secours. En conséquence, le fond sera rouge. Mais si on ajoute :

:root ( --gloop: vert; )

...nous définissons la propriété personnalisée --gloop sur green , donc la page est maintenant verte. Mais si on ajoute :

:root ( --gloop: initial; )

La valeur initiale est ici traitée d’une manière particulière. Il remplace en fait --gloop afin que l'arrière-plan de la page soit à nouveau rouge.

Création d'un arbre de dépendance de rendu à l'aide de propriétés CSS personnalisées

En terminant ce titre, j'étais déjà heureux de voir à quel point je suis intelligent.

Le HTML [ "/main.css", "/comments.css", "/about-me.css", "/footer.css" ].map(url => ( const link = document.createElement("link" ); link.rel = "feuille de style"; link.href = url; document.head.appendChild(link));

Vous pouvez donc charger /initial.css en l'utilisant ou l'intégrer, car il bloque toujours le rendu. Mais nous chargeons toutes les autres feuilles de style de manière asynchrone.

initial.css main, .comments, .about-me, footer ( display: none; ) :root ( --main-blocker: none; --comments-blocker: none; --about-me-blocker: none; - -footer-blocker: none; ) /* Autres styles initiaux... */

Nous masquons les sections que nous ne sommes pas encore prêts à afficher, puis pour chaque section nous créons une propriété « bloqueur » personnalisée.

main.css :root ( --main-blocker: initial; ) main ( display: var(--main-blocker, block); ) /* Autres styles de contenu principaux... */

Le contenu principal n'a aucune dépendance d'affichage. Une fois le CSS chargé, son bloqueur est annulé (avec initiale) et rendu.

comments.css :root ( --comments-blocker: var(--main-blocker); ) .comments ( display: var(--comments-blocker, block); ) /* Autres styles de commentaires... */

Les commentaires ne doivent pas être affichés avant le contenu principal, le bloqueur de commentaires est donc associé à --main-blocker . Block.comments devient visible dès que ce CSS est chargé et que --main-blocker est annulé

about-me.css :root ( --about-me-blocker: var(--comments-blocker); ) .about-me ( display: var(--about-me-blocker, block); )

Semblable au code ci-dessus, .about-me dépend de son CSS et de ses commentaires. Mais lorsque la page est plus large, elle est affichée sur deux colonnes, nous n'avons donc plus besoin de .about-me pour dépendre des commentaires pour l'affichage :

@media (min-width: 600px) ( :root ( --about-me-blocker: initial; ) ) /* Autres styles pour about-me... */

Prêt! Lorsque la largeur de la fenêtre d'affichage dépasse 600 pixels, .about-me est rendu immédiatement après le chargement de son CSS.

footer.css :root ( --footer-blocker: var(--main-blocker, var(--about-me-blocker)); ) footer ( display: var(--footer-blocker, block); ) / *Autres styles... */

Le pied de page doit apparaître après l’apparition des sections de contenu principal et à propos de moi. Pour ce faire, --footer-blocker prend sa valeur de --main-blocker , mais immédiatement après l'annulation de --main-blocker --footer-blocker revient à la valeur extraite de --about-me-blocker .

Démo

Requis Chrome Canari ou Firefox.

Dans cette démo, le CSS est chargé de manière asynchrone, ce qui prend environ 0 à 5 secondes pour charger chaque fichier. Malgré cela, la page n'apparaîtra jamais dans le désordre et chaque section apparaîtra le plus rapidement possible en fonction de la largeur du navigateur.

Mais... est-ce pratique ?

Cette méthode est beaucoup plus compliquée, avec des avantages minimes et d’énormes problèmes. compatibilité ascendante. Mais cela démontre la puissance des propriétés personnalisées CSS. inaccessible aux solutions comme les variables Sass utilisées au moment de la compilation.

Si vous voulez vraiment faire quelque chose de similaire aujourd'hui, vous pouvez alors assumer l'essentiel du travail. chargement asynchrone CSS utilisant loadCSS et ajoutant des classes une fois que certains styles sont chargés (), bien que cela entraînera de nombreux problèmes spécifiques résolus grâce à des hacks.

Je suppose que cet article peut être considéré comme un « exemple amusant », mais nous avons à peine commencé à découvrir la puissance des propriétés personnalisées CSS.

Merci à Rémy Sharp pour les corrections. Aurai-je un jour un article sans fautes d'orthographe? Nidokgah.