At-rules

@charset

@charset définit l’encodage des caractères utilisés dans une feuille de style.
Cette règle doit être la première règle de la feuille de style (aucun caractère ne doit être écrit avant).

@charset "utf-8";

L’encodage doit correspondre à un nom d’encodage valide pour le web tel que défini dans le registre IANA.
Le nom est insensible à la casse.

@import

@import permet d’importer des feuilles de styles à l’intérieur d’une feuille de feuille.
Les imports sont placés en début de fichier.

Définition :

@import [ <url> | <string> ] <media-query-list>?

Exemples :

@import url("mystyle.css");

@import "mystyle.css";

@import url("fineprint.css") print;

Pour la plupart des navigateurs, @import empêche le chargement de plusieurs feuilles de style en parallèle, ce qui ralentit le chargement de la page. Elle est donc à éviter, sauf dans le cas où on utilise un préprocesseur tel que SASS.

@media (media queries)

@media permet de spécifier les conditions à remplir pour exécuter le CSS [CSS3]

Définition:

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Les différents media types (types d’appareil) sont :

Media Description
all Tout type d’appareil (valeur par défaut)
print Imprimante
screen Écran (desktop, mobile)
speech Lecteur audio

Liste des media features

Exemple:

@media print {
  button { display: none; }
}

@media print and (max-width: 420px) {
  button { display: none; }
}

@media (max-width: 420px) {} /* mobile */
@media (min-width: 421px) and (max-width: 720px) {} /* tablet */
@media (min-width: 721px) {} /* desktop */

@supports (feature queries)

@supports permet de spécifier des conditions de prise en charge des propriétés à remplir pour exécuter le CSS [CSS3]

Définition:

@supports <support-condition> [or <support-condition>] [and <support-condition>] {
  <group-rule-body>
}

où <support-condition> = (<property: value>) | not (<property: value>)

Exemple:

@supports (display: flex) {
  div {
    display: flex;
  }
}

@supports not (display: flex) {
  div {
    float: right;
  }
}

@supports (display: table-cell) and (display: list-item) {}

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

@namespace

@namespace définit les espaces de noms XML utilisés dans une feuille de style CSS, avec un espace de noms par défaut suivit d’une liste d’espaces de noms avec préfixes.

Les règles @namespace doivent suivre les règles @charset et @import et précéder les autres at-rules ainsi que les déclarations de style contenus dans la feuille de style.

Un fois déclaré, un espace de nom peut être utilisé pour restreindre un sélecteur afin que celui-ci ne sélectionne que les éléments contenus dans cet espace de nom. L’espace de nom est séparé du sélecteur par un pipe (|).

a {}       /* cible les éléments XHTML <a> (XHTML est l'espace de nom par défaut) */
svg|a {}   /* cible les éléments SVG <a> */
*|a {}     /* cible tous les éléments <a> (XHTML et SVG )*/

Définition:

@namespace <namespace-prefix>? [ <string> | <url> ];

Exemple:

@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
@namespace math "http://www.w3.org/1998/Math/MathML";

@page

@page permet de modifier les marges, le comportement des lignes orphelines et veuves ainsi que les sauts de page lorsqu’on imprime la page [CSS2]

Définition:

@page [:first || :left || :right || :blank] {
  <(regular css properties) ||
  page-break-before || page-break-after || page-break-inside ||
  orphans || widows>
}

Les propriétés suivantes s’appliquent à l’intérieur d’une at-rule @page.

Exemple:

@page {
  div.note { 
    page-break-before: avoid;
  }
}

Depuis CSS3 on peut également cibler les zones de marge, comme les headers et les footers, pour y ajouter du contenu généré.

@page {
  color: red;
  @top-center {
    content: "Page " counter(page);
  }
}
Cible Emplacement
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner

@viewport

Ce module reprend les principes de base de la meta viewport mais en respectant les normes d’écriture de CSS.

// en HTML 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 

// en CSS 
@viewport { 
  width: device-width; 
  zoom: 1; 
}

Les propriétés suivantes peut être appliquées à l’intérieur d’une at-rule @viewport:

@font-face

Le navigateur peut télécharger automatiquement une police qui n’est pas installée si on lui indique où la trouver avec @font-face.

Définition:

 @font-face {
  font-family: <string>;
  src: <src-list>;
}

Les autres propriétés également acceptées dans le block @font-face sont :

Formats de police:
Différents navigateurs supportent différents formats de police.

Extension Format Utilisé par
.woff Web Open Font Format Les navigateurs modernes
.eot Embedded Open Type Les anciennes versions d’IE
.svg SVG fonts Les anciennes versions d’iOS Safari (3.2-4.1)
.ttf Truetype fonts Les anciennes versions du navigateur d’Android

Exemple:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');                                    /* IE9 Compat Modes */
  src: local('MyWebFont'),
       url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'),                  /* Super Modern Browsers */
       url('webfont.woff') format('woff'),                    /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'),                /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg');          /* Legacy iOS */
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Serif Pro'),
       local('SourceSerifPro-Regular'),
       url(https://fonts.gstatic.com/s/sourceserifpro/v6/neIQzD-0qpwxpaWvjeD0X88SAOeauXo-oBOL.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Serif Pro'),
       local('SourceSerifPro-Regular'),
       url(https://fonts.gstatic.com/s/sourceserifpro/v6/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Exemple avec une WebFont de Google (Roboto)
Générateur de @font-face
local(‘☺’)

@font-feature-values

Une police peut avoir des glyphes supplémentaires en plus des glyphes par défaut pour un caractère donné, par exemple des alternatives stylistiques ou des swash.

@font-feature-values permet de créer un nom pour la fonctionnalité d’une police [CSS3].
Cela permet de simplifier les feuilles de style lorsqu’on utilise plusieurs polices.

Définition:

@font-feature-values <family-name> {
  @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation {
    <name>: <integer>;
  }
}

Type de fonctionnalité:

Type Valeur OpenType Description
historical-forms hist Formes historiques
stylistic salt Formes stylistiques alternatives
styleset ss## Ensemble de caractères d’un style alternatif
character-variant cv## Semblable à styleshet mais les caractères peuvent avoir un style indépendant
swash swsh, cswh Glypes pour les lettres ornées
ornaments ornm Ornements tels que les fleurons et autres casseaux
annotation nalt Annotations (telles que les chiffres entourés ou les caractères inversés)

Exemple:

@font-feature-values dual300 { 
  @stylistic {
    ident1: 1;
  }
}
h1 {
  font-variant-alternates: stylistic(ident1)
}

JsFiddle @font-feature-values

Plus d’infos:

@counter-style

@counter-style permet de définir de nouveaux styles de compteurs [CSS3]

Définition:

@counter-style <counter-style-name> {
  system
  symbols
  additive-symbols
  prefix
  suffix
  pad
  negative
  range
  speak-as
  fallback
}

Exemple:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
ol {
  list-style: circled-alpha;
}

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}
ol {
  list-style: alpha-modified;
}

JSfiddle @counter-style

@keyframes

@keyframes crée une animation [CSS3]
Pour ce faire, on liste tous les changements et transformations que va subir l’élément auquel sera assigné l’animation.

Définition:

@keyframes <string> {
  (from | to | <percentage>) {
      <declaration-list>
  }+
}

Exemple:

@keyframes myAnimation {
  from { color:black; }
  50% { color: red; }
  to { color:black; }
}
This site is open source. Improve this page.