Utilisation de la règle @ en CSS

Cet article présente principalement le résumé d'utilisation de certaines règles @ en CSS, qui constituent les connaissances de base pour l'apprentissage introductif du CSS. Les amis qui en ont besoin peuvent s'y référer

at-rule est une déclaration qui fournit. exécution pour CSS Ou des instructions sur la façon de se comporter. Chaque déclaration commence par @, suivi d'un mot-clé disponible, qui fait office d'identifiant pour indiquer ce que le CSS doit faire. Il s'agit d'une syntaxe générale, bien qu'il existe d'autres variantes syntaxiques pour chaque règle at.
Règles générales

Les règles générales suivent la syntaxe suivante :

@[KEYWORD] (RULE);

@charset
Cette règle définit le caractère du navigateur défini à utiliser si la feuille de style contient des caractères non-ASCII (par exemple : UTF-8). Notez que le jeu de caractères placé dans l'en-tête HTTP remplacera la règle @charset

@charset "UTF-8";

@import
Cette règle indique que la feuille de style est demandée dans cette ligne, si. le contenu est correct, un fichier CSS externe sera introduit.

@import 'global.css';

Bien que les préprocesseurs CSS populaires prennent tous en charge @import, il convient de noter qu'ils fonctionnent différemment du CSS natif : le préprocesseur récupère les fichiers CSS et les traite dans un fichier CSS pour le CSS natif, chacun @. l'importation est une requête HTTP indépendante.
@namespace
Cette règle est très utile pour appliquer du CSS au XML HTML (XHTML), car l'élément XHTML peut être utilisé comme sélecteur en CSS.

/* Namespace for XHTML */
        @namespace url(http://www.w3.org/1999/xhtml);
        /* Namespace for SVG embedded in XHTML */
        @namespace svg url(http://www.w3.org/2000/svg);

Règles imbriquées

Les règles imbriquées contiennent des déclarations de sous-ensembles supplémentaires, dont certaines ne peuvent être utilisées que dans des situations spécifiques.

@[KEYWORD] {
          /* Nested Statements */
        }

@document
Cette règle précise les conditions de la feuille de style : elle ne peut être appliquée qu'à des pages spécifiques. Par exemple, nous fournissons une URL puis personnalisons les styles pour cette page spécifique. Dans les autres pages, ces styles seront ignorés.

@document 
          /* Rules for a specific page */
          url(http://css-tricks.com/),
          /* Rules for pages with a URL that begin with... */
          url-prefix(http://css-tricks.com/snippets/),
          /* Rules for any page hosted on a domain */
          domain(css-tricks.com),
          /* Rules for all secure pages */
          regexp("https:.*")
        {
          /* Start styling */
          body { font-family: Comic Sans; }
        }

@font-face
Cette règle permet de charger des polices personnalisées sur les pages Web. Il existe différents degrés de prise en charge des polices personnalisées, mais cette règle accepte la création d'instructions et fournit. ces polices.

@font-face {
          font-family: 'MyWebFont';
          src:  url('myfont.woff2') format('woff2'),
                url('myfont.woff') format('woff');
        }

@keyframes
Parmi de nombreuses propriétés CSS, cette règle est à la base de l'animation par images clés et nous permet de marquer le début et la fin de l'animation.

@keyframes pulse {
          0% {
            background-color: #001f3f;
          }
          100% {
            background-color: #ff4136;
          }
        }

@media
Cette règle contient des déclarations conditionnelles qui peuvent être utilisées pour spécifier des styles pour des écrans spécifiques. Ces déclarations peuvent inclure des tailles d'écran, ce qui peut être utile dans screen-. style adaptatif.

/* iPhone in Portrait and Landscape */
        @media only screen 
          and (min-device-width: 320px) 
          and (max-device-width: 480px)
          and (-webkit-min-device-pixel-ratio: 2) {
            .module { width: 100%; }
        }

Ou appliquez simplement le style lorsque le document est imprimé

@media print {
        }

@page
Cette règle définit les styles pour les pages individuelles qui sera imprimé. Il peut notamment définir des marges pour les pseudo-éléments de la page : :first, :left et :right

@page :first {
          margin: 1in;
        }

@supports
Cette règle permet de tester si le navigateur connaît les Supports une caractéristique/fonctionnalité et si une condition est remplie, un style spécifique sera appliqué à ces éléments. Un peu comme Modernizr, mais vraiment des propriétés CSS.

/* Check one supported condition */
        @supports (display: flex) {
          .module { display: flex; }
        }
        /* Check multiple conditions */
        @supports (display: flex) and (-webkit-appearance: checkbox) {
          .module { display: flex; }
        }

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Résumé des hautes performances lors de l'écriture de code CSS

Remplacement des règles des styles CSS

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!