Un regard dans: Règle du document CSS4

Beaucoup de sites Web ont beaucoup de pages, mais toutes ces pages sont généralement stylisées avec une seule feuille de style. Servir une seule feuille de style est une bonne pratique pour minimiser les requêtes HTTP permettant aux pages de se charger plus rapidement dans un navigateur.

Cependant, il y aura un tas de règles de style contenues dans la feuille de style qui sont inutiles pour certaines pages. Donc ce ne serait pas génial si nous pouvions appliquer un ensemble de règles de style seulement pour certaines pages tout en le gardant à une feuille de style?

Cette idée serait rendue possible grâce à la nouvelle règle CSS standard appelée @document . Cette règle a été initialement proposée dans le cadre de CSS3 mais en raison de plusieurs problèmes, elle a été reportée et serait probablement incluse dans CSS Level 4.

Voyons voir comment cela fonctionne, allons-nous?

Utilisation basique

@document nous permet de désigner des règles de style pour des pages spécifiques seulement. Comme indiqué dans la proposition, il est principalement conçu pour la feuille de style utilisateur. Ainsi, les utilisateurs peuvent faire ce qui suit pour personnaliser leurs sites Web (favoris):

 @document domain ("facebook.com") {body {background-color: jaune; } a {couleur: rouge; } img {border-radius: 100%; }} @document domain ("twitter.com") {body {background-color: red; } a {couleur: rose; }} 

Vous pouvez visiter UserStyles.org pour d'excellents exemples de feuilles de style utilisateur.

Nous, en tant qu'auteurs Web, pouvons également utiliser @document pour contrôler les styles sur notre site Web. Disons que nous voulons que nos règles de style soient appliquées sur une page particulière de notre site Web. Pour ce faire, nous pouvons encapsuler les règles de style avec @document comme ceci:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; la couleur verte; } p {couleur: rouge; } a {couleur: bleu; }} 

La différence entre domain() (à partir du premier exemple) et url() est que domain() affectera toutes les pages hébergées sur le domaine spécifié, alors que url() appliquera uniquement les règles de style à l'URL spécifiée; les autres URL (ou pages) ne sont donc pas affectées.

Vous pouvez utiliser url-prefix() pour désigner des règles de style à une URL commençant par, par exemple, css .

 @document url-prefix ("https://www.hongkiat.com/blog/category/") {h2 {font-family: "Géorgie"; } div {background-color: bleu; couleur: #fff; }} 

En utilisant la fonction regexp(), nous pouvons aller plus en profondeur avec Regular Expression (Regex). L'exemple suivant est dérivé de W3C, et le Regex correspond à l'URL qui commence par http://www.w3.org/TR/, suivi de 4 chiffres numériques et se terminant par 8 chiffres numériques.

 @document regexp ("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {body {transformation: rotate (90deg) ; }} 

Conclusion

Bon, nous avons vu quelques possibilités d'utilisation de la règle @document . Mais comme mentionné, il est actuellement en attente pour CSS4, et Firefox est le seul navigateur qui l'a implémenté avec le préfixe @-moz-document . Néanmoins, nous garderons un @document sur le développement de la règle @document et verrons comment cela se @document dans le futur.

20 polices de script gratuit, vous pouvez télécharger

Comme la conception des polices de caractères est basée sur la fluidité de l'écriture réelle, elles peuvent ajouter une touche personnelle à presque tous les designs, en particulier ceux qui impliquent la typographie. Par conséquent, les polices de script sont des outils vraiment pratiques quand il s'agit de concevoir des choses comme des cartes postales, des dépliants et des cartes d'invitation de mariage.Heureus

(Conseils techniques et de conception)

20 façons créatives d'annoncer la grossesse [PHOTOS]

Avec tant de photos d'annonces de grossesse hilarantes et adorables flottant sur Facebook et Pinterest ces jours-ci, il pourrait être un défi de créer quelque chose de nouveau quand vient le temps de répandre les nouvelles que vous avez "un petit pain dans le four" .Les traditionalistes pourraient préférer envoyer des cartes postales par courrier pour partager une grande nouvelle avec des amis, mais les photos dynamiques et exceptionnelles qui racontent une histoire sont quelque chose de plus unique et personnel. Des

(Conseils techniques et de conception)