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.

12 façons mignonnes et imaginatives d'enseigner le fingerpelling

Les doigts sont un excellent moyen de créativité. Jetez simplement un coup d'oeil à la photographie de doigt et aux portraits de doigts humains pour quelques exemples impressionnants de ce qui est possible. Mais juste au moment où vous pensez que l'Internet a atteint son apogée, un artiste vient avec une autre idée brillante - illustrer des créations adorables autour de vos doigts pour vous aider à apprendre le fingerpelling !Alex So

(Conseils techniques et de conception)

Comment devenir riche en tant que concepteur

Beaucoup de gens rêvent de devenir riches en faisant ce qu'ils aiment . Les concepteurs, en gros, entrent dans la conception parce qu'ils l'aiment simplement. Mais finalement, les réalités de gagner sa vie, payer les factures, nourrir votre famille, etc. prennent le dessus sur vos rêves créatifs, et vous pouvez vous retrouver avec des clients et des projets que vous n'auriez jamais pensé juste pour l'argent.La pl

(Conseils techniques et de conception)