CSS at rule

重学前端学习笔记

qualified rule

这就是一般的css规则

at-rule

由@ + 关键子和后续的区块组成

• @charset
  表示css文件使用的字符编码，使用时出现在文件开头

• @import
  可以引入一个css文件的全部内容

  @import "mystyle.css";
  @import url("mystyle.css");
  //  下面这个是什么鬼
  @import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

• @media
  media query

• @page
  定义媒体在访问页面时的页面设置(比如打印机)

• @counter-style
  用于自定义列表，该方法只要firefox支持

    css
       @counter-style test {
            system: alphabetic;
            symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
            suffix: "、";
        }
        ul{
            list-style: test;
        }
    html
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>

• @keyframes
  动画
• @fontface
  用于字体
• @supports
  用来判断浏览器是否支持某些特性
  还可以使用逻辑或，与，非

// 基本用法
@supports (display:flex) {
  section { display: flex }
  /* 其他code*/
}
// 非
@supports not (display: flex){
  #container div{float:left;}
}
// 与
@supports (column-width: 20rem) and (column-span: all) {
  div { column-width: 20rem }    
  div h2 { column-span: all }
  div h2 + p { margin-top: 0; }
  /*其他代码*/
}
// 或
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /*其他代码*/
  }         
}
// 混用是要使用()
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
  /*code*/
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
  /*code*/
}

• @namespace