һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] ǿʶ˽CSSе@ AT

[]
24711 websjy 2015-8-15 14:42:53
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ҿCSSмַ@ȻһЩؼֵ÷÷ͳ֮ΪATCSSУ໹Ǻܶģܽо¡

νָ﷨Ĺ
  1. @[KEYWORD] (RULE);
ƴ



@charset
ַַþ˵ᱻHTTPͷǡ
ijЩDreamweaver½CSSļʱԶʾ룬ʵʿʱòΪmetaѾ(<meta charset="utf-8">)ḲǣҶֱɾġ
  1. @charset "utf-8";
ƴ


@import
CSSʽļʵʱ򣬲ʹã֮ࡣؿʹãCSSģ黯ȻʹһЩ(grunt)߽ѹϲأless, sassȻв㣬@importֻCSSļʹļǰϵƣͲô
  1. @import 'global.css';
ƴ


@namespace
˹ӦXML HTML(XHTML)رãΪĻXHTMLԪؿΪѡCSSʹá
  1. <blockquote>/* XHTMLռ */
ƴ



Ƕ׹
νǶ׹򡱣Ǵл{}, ﷨Ĺ
  1. @[KEYWORD] {
  2.   /* Ƕ */
  3. }
ƴ



@document
CSS 4.0淶˵ĵһЩͿӦָһЩʽ˵CSSļվAãͱվCãǿͨƥִвͬCSSʽǿЧͻ߷ֹ֮ࡣ
  1. @document
  2.   /* ҳURLҪ */
  3.   url(http://www.websjy.com/),
  4.   
  5.   /* ҳURLĿͷ... */
  6.   url-prefix(www.websjy.com/WordPress/),
  7.   
  8.   /* ϵҳ */
  9.   domain(zhangxinxu.com),

  10.   /* httPSЭҳ */
  11.   regexp("https:.*")
  12. {
  13.   
  14.   /* ʼʽ */
  15.   body { font-family: Comic Sans; }

  16. }
ƴ


ATCSS4ˮƽģĿǰֻ֧FireFox֧֣һҪǰ׺ǣ10֮Ҳ2025ƾһˡ
@font-face
ҿܱȽ죬ԶõġIE6Ҳ֧֡ĿǰҲͦ࣬Ͳ£Ÿʾ⣺
  1. @font-face {
  2.   font-family: 'MyWebFont';
  3.   src:  url('myfont.woff2') format('woff2'),
  4.         url('myfont.woff') format('woff');
  5. }
ƴ


@keyframes
ϲCSS3ͬѧҲˣ־Ȼǡꡱǡ衱ԭǡ̫䶼ʺ˼Ŷѧϰˣ
CSS3 animationؼ֡õģһЦ
  1. @keyframes fadeIn {
  2.   0% {
  3.     opacity: 0;
  4.   }
  5.   100% {
  6.     opacity: 1;
  7.   }
  8. }
ƴ


@media
ýѯͷdzõġӦʽȰretinaĻжӡĻIE7,IE8hackܶ࣬ı˽⣬룬Ҽʾʹþͺˣ

  1. @media all and (min-width: 1280px) {
  2.     /* ȴ1280... */
  3. }
ƴ

  1. @media
  2. (-webkit-min-device-pixel-ratio: 1.5),
  3. (min-resolution: 2dppx) {
  4.     /* RetinaĻ... */
  5. }
ƴ

  1. @media print {
  2.     /* Ҫӡ */
  3. }
ƴ

  1. @media \0screen\,screen\9 {
  2.     /* IE7,IE8... */
  3. }
ƴ

  1. @media screen\9 {
  2.     /* IE7... */
  3. }
ƴ


@page
ڴӡĵʱ޸һЩCSSԡʹ@pageֻܸı䲿CSSԣmargin, ӡصorphans, widows, Լpage-break-*, CSSԻᱻԡ
  1. @page :first {
  2.   margin: 1in;
  3. }
ƴ


CSSʾ:firstҳҲҪ:left, :rightҳmarginࡣzxx: //@pageα:blank, :first, :left, :right
@supports
Ƿ֧ijCSSAT֧ԽԽˣѾʵĿʹ򣬸أ˵hackʹˡϸڲһЩʹʾ⣺

  1. /* Ƿ֧CSS */
  2. @supports (display: flex) {
  3.   .module { display: flex; }
  4. }

  5. /* */
  6. @supports (display: flex) and (-webkit-appearance: checkbox) {
  7.   .module { display: flex; }
  8. }
ƴ


ù£

360ͼ-16680781.jpg

Ӳ鿴http://caniuse.com/css-supports-api/embed

ο
ԭģhttp://www.zhangxinxu.com/wordpress/2015/08/know-css-at-rules/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2016-12-31 01:16:48
| ʾȫ¥
2F

ױѵѧУ http://www.xszsz.com/
㿪ʼѧױ http://www.xszsz.com/
ϺױѧУ http://www.xszsz.com/
ϲݻױѧУ http://www.xszsz.com/
ϲѧУ http://www.xszsz.com/
ϲױ仯ױѧУ http://www.xszsz.com/
ϲЩױѧУ http://www.xszsz.com/
ϲױ仯ױѵѧУ http://www.xszsz.com/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-11-14 14:41

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б