directives-bubling.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .parent {
  2. color: green;
  3. }
  4. @document url-prefix() {
  5. .parent .child {
  6. color: red;
  7. }
  8. }
  9. @supports (sandwitch: butter) {
  10. .inside .top {
  11. property: value;
  12. }
  13. }
  14. @supports (sandwitch: bread) {
  15. .in1 .in2 {
  16. property: value;
  17. }
  18. }
  19. @supports (sandwitch: ham) {
  20. .inside .top {
  21. property: value;
  22. }
  23. }
  24. @supports (font-family: weirdFont) {
  25. @font-face {
  26. font-family: something;
  27. src: made-up-url;
  28. }
  29. }
  30. @font-face {
  31. @supports not (-webkit-font-smoothing: subpixel-antialiased) {
  32. font-family: something;
  33. src: made-up-url;
  34. }
  35. }
  36. @supports (property: value) {
  37. @media (max-size: 2px) {
  38. @supports (whatever: something) {
  39. .outOfMedia {
  40. property: value;
  41. }
  42. }
  43. }
  44. }
  45. @supports (property: value) {
  46. @media (max-size: 2px) {
  47. @supports (whatever: something) {
  48. .onTop {
  49. property: value;
  50. }
  51. }
  52. }
  53. }
  54. @media print {
  55. html {
  56. in-html: visible;
  57. }
  58. @supports (upper: test) {
  59. html {
  60. in-supports: first;
  61. }
  62. html div {
  63. in-div: visible;
  64. }
  65. @supports not (-webkit-font-smoothing: subpixel-antialiased) {
  66. html div {
  67. in-supports: second;
  68. }
  69. @media screen {
  70. html div {
  71. font-weight: 400;
  72. }
  73. html div nested {
  74. property: value;
  75. }
  76. }
  77. }
  78. }
  79. }
  80. @media print and (max-size: 2px) {
  81. .in1 {
  82. stay: here;
  83. }
  84. @supports not (-webkit-font-smoothing: subpixel-antialiased) {
  85. @supports (whatever: something) {
  86. .in2 .in1 {
  87. property: value;
  88. }
  89. }
  90. }
  91. }
  92. html {
  93. font-weight: 300;
  94. -webkit-font-smoothing: subpixel-antialiased;
  95. }
  96. @supports not (-webkit-font-smoothing: subpixel-antialiased) {
  97. html {
  98. font-weight: 400;
  99. }
  100. html nested {
  101. property: value;
  102. }
  103. }
  104. .onTop {
  105. animation: "textscale";
  106. font-family: something;
  107. }
  108. @font-face {
  109. font-family: something;
  110. src: made-up-url;
  111. }
  112. @keyframes "textscale" {
  113. 0% {
  114. font-size: 1em;
  115. }
  116. 100% {
  117. font-size: 2em;
  118. }
  119. }