CSS At-rules

February 6, 2022 · 2 min read

At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, ‘@‘ followed by an identifier and includes everything up to the next semicolon, ‘;’ or the next CSS block , whichever comes first.

@charset — Defines the character set used by the style sheet.
@import — Tells the CSS engine to include an external style sheet.

  /* Example: tells browser to use UTF-8 character set */
  @charset "utf-8";

@media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.

  /* At the top level of your code */
  @media screen and (min-width: 900px) {
    article {
      padding: 1rem 3rem;
    }
  }

@supports — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.

  /* Nested within another conditional at-rule */
  @supports (display: flex) {
    @media screen and (min-width: 900px) {
      article {
        display: flex;
      }
    }
  }

@font-face — Describes the aspect of an external font to be downloaded.

  @font-face {
    font-family: 'myFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'), url('webfont.woff2') format('woff2'),
      url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'),
      url('webfont.svg#svgFontName') format('svg');
  }
  body {
    font-family: 'MyFont', Fallback, sans-serif;
  }

@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence. @keyframes *animationname*{*keyframes-selector*{*css-styles;}*} Tryit Editor v3.7

  div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
  }

  @keyframes mymove {
    0% {
      top: 0px;
    }
    25% {
      top: 200px;
    }
    75% {
      top: 50px;
    }
    100% {
      top: 100px;
    }
  }

css