@ルール

1. @font-face - フォントに関する@ルール

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
				

説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。説明。

@media

公式サイト：Media Queries - W3C

公式サイト：Media Queries Level 4 - W3C

公式サイト：Media Queries Level 5 - W3C

参考：@media - CSS - MDN

メディアクエリー

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

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

Media Queries @viewport min-width max-width width min-height max-height height zoom min-zoom max-zoom user-zoom orientation extends-to-zoom

@supports

公式サイト：CSS Conditional Rules Module Level 3 - W3C

公式サイト：CSS Conditional Rules Module Level 4 - W3C

参考：@supports - CSS - MDN

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

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

@charset

公式サイト：Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification - W3C#4.4 CSS style sheet representation

参考：@charset - CSS: Cascading Style Sheets | MDN

@charset "utf-8";
				

@charset shape-inside border-boundary

@keyframes

参考：@keyframes - CSS - MDN

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
				

2. KnotTextでのCSSの分類

参考：CSS reference - CSS | MDN