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.

Ce truc astucieux ramène les visiteurs quand ils se détournent

Combien de fois ouvrez-vous un article, écrivez quelques phrases, puis cliquez pour aller voir un autre onglet? Je suis coupable de cela tous les jours. Ce n'est pas si facile de garder l'attention d'un visiteur et c'est pourquoi le script Do not Go peut être si précieux.En ajoutant ce script à votre page, vous pouvez automatiquement mettre à jour le favicon et le titre de la page lorsque la page n'est pas en cours d'affichage.Vous

(Conseils techniques et de conception)

ShareTube vous permet de regarder des vidéos YouTube en privé avec des amis

Il n'y aurait presque rien que vous ne sachiez pas sur YouTube, mais ShareTube est une chose complètement nouvelle dans le domaine de la visualisation de vidéos et des services de partage sur le web.ShareTube est un service Web pour regarder, partager et parler de vidéos YouTube . Avec ce service, vous pouvez regarder des vidéos de votre choix en temps réel avec vos amis. C&#

(Conseils techniques et de conception)