css @規則

css相信咱們都不陌生，可是咱們真的對它很是瞭解嗎？

css主要分爲兩種規則組成：

1. 一種被稱爲 at-rule，也就是 at 規則

2. 另外一種是 qualified rule，也就是普通規則

今天讓咱們來說講咱們不經常使用的 at 規則吧：

1. @charset

@charset 用於提示 CSS 文件使用的字符編碼方式，它若是被使用，必須出如今最前面，不能在<style>元素內的樣式屬性內使用。

我也沒搞清楚具體有什麼用，只要html和css保持編碼一致，而且html上加上 <meta charset="xxxx"> 便可，@charset寫不寫也沒什麼做用

@charset "utf-8";

 

2. @import

@import 當時我覺得是less sass的語法糖，其實它是css自己的特性，能夠在css文件裏引入其餘css文件

@import './style.css';
@import url(./style.css);
@import './style.css' screen and (min-width:500px);

 

3. @media

@media查詢應該是咱們見得最多的@rule之一了，針對不一樣的媒體類型定義不一樣的樣式

@media 媒體類型1,媒體類型2 and|not|only (媒體特性) {
    CSS-Code;
}

 

媒體類型沒有被廢棄的只有如下幾種：

1. all 全部設備

2. print 打印機和打印預覽

3. screen 電腦/手機屏幕

4. speech 應用於屏幕閱讀器等發聲設備

媒體特性經常使用無非就是（更多）：

1. min-width、max-width

2. min-height、max-height

3. orientation（方向）:  landscape(橫屏)/portrait(豎屏)

例如：

@media screen and (min-width: 500px) and (max-width: 800px) {         
     ... 
}

 

4. @page

@page 用於設置分頁媒體的樣式，和@media print類似，可是@page只能設置部分css樣式

MDN原文說到： You can only change the margins, orphans, widows, and page breaks of the document.

 

5.  @counter-style

自定義list-style的圖形，目前只有firefox支持，詳情

@counter-style aaa {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}  

ul {
  list-style: aaa;
}

 

 

6. @keyframes

也是咱們經常使用的@rule之一，用於定義animation的動畫幀

div {
    position: relative;
    height: 100px;
    background: red;
    animation:  mymove 5s ease infinite;
}
@keyframes mymove
{
    from {top:0px;}
    to {top:200px;}
}

 

7. @font-face

用於引入一些額外的字體，放在css頂部或者css規則組

@font-face {
  font-family: aaa;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: aaa, serif; }

 

8. @supports

用於檢測css兼容的特性

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

 

9. @namespace 

須要混用其餘XML組件的時候，例如HTML5裏內聯的SVG、MathML或者混合多個詞彙表的XML，css匹配規則最好按命名空間應用，詳情

/* 默認命名空間 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/* 命名空間前綴 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

 

10. @viewport

設置視窗的屬性，目前safari、firefox都不支持，更多使用meta的形式來代替（<meta name="viewport" content="width=device-width, initial-scale=1.0">）

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}