AndroidRemoteController/MODERN_CSS_EXAMPLES.md

现代CSS强大功能示例 (2025)

1. CSS 嵌套 (CSS Nesting) ⭐ 最推荐

让CSS代码更清晰、更易维护

/* 传统写法 */
.device-container {
  width: 100%;
  height: 100%;
}

.device-container .device-update {
  display: flex;
}

.device-container .device-update-title {
  color: white;
}

/* 现代嵌套写法 */
.device-container {
  width: 100%;
  height: 100%;
  
  .device-update {
    display: flex;
    
    .device-update-title {
      color: white;
    }
  }
  
  /* 使用 & 引用父选择器 */
  &:hover {
    background-color: #0550d0;
  }
  
  /* 媒体查询嵌套 */
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

2. CSS 变量 (Custom Properties) ⭐ 最实用

统一管理颜色、尺寸等

:root {
  /* 颜色变量 */
  --primary-color: #0769fb;
  --primary-hover: #0550d0;
  --text-color: #ffffff;
  --bg-color: #f5f5f5;
  
  /* 尺寸变量 */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  
  /* 动画变量 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

.device-container {
  background-color: var(--primary-color);
  padding: var(--spacing-md);
  transition: background-color var(--transition-normal);
  
  &:hover {
    background-color: var(--primary-hover);
  }
}

3. 容器查询 (Container Queries) ⭐ 响应式新标准

基于容器大小而非视口大小

.device-container {
  container-type: inline-size;
  container-name: device;
}

/* 当容器宽度大于600px时 */
@container device (min-width: 600px) {
  .device-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 当容器宽度小于600px时 */
@container device (max-width: 599px) {
  .device-list {
    display: flex;
    flex-direction: column;
  }
}

4. :has() 选择器 ⭐ 强大的父选择器

根据子元素状态改变父元素样式

/* 当包含特定子元素时 */
.device-container:has(.device-update-title) {
  border-top: 2px solid var(--primary-color);
}

/* 当子元素有焦点时 */
.device-container:has(input:focus) {
  box-shadow: 0 0 0 3px rgba(7, 105, 251, 0.3);
}

/* 当没有子元素时 */
.device-list:has(:not(.device-item)) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

5. @layer 层叠层

更好地管理CSS优先级

@layer base, components, utilities;

@layer base {
  .device-container {
    margin: 0;
    padding: 0;
  }
}

@layer components {
  .device-update {
    display: flex;
  }
}

@layer utilities {
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

6. aspect-ratio

保持元素宽高比

.device-item {
  aspect-ratio: 16 / 9; /* 保持16:9比例 */
  width: 100%;
}

.device-card {
  aspect-ratio: 1; /* 正方形 */
}

7. backdrop-filter

毛玻璃效果

.device-overlay {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
}

8. clip-path 和 mask

创建复杂形状

.device-card {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.device-icon {
  mask: url('icon.svg') no-repeat center;
  mask-size: contain;
}

9. CSS Grid 高级特性

.device-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  
  /* 子网格 */
  .device-list {
    display: grid;
    grid-template-columns: subgrid;
  }
}

10. 动画和过渡

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.device-item {
  animation: slideIn 0.3s ease-out;
  
  /* 或者使用 transition */
  transition: transform var(--transition-normal),
              opacity var(--transition-normal);
  
  &:hover {
    transform: scale(1.05);
  }
}

11. 逻辑属性 (Logical Properties)

更好的国际化支持

.device-container {
  /* 传统 */
  margin-top: 10px;
  margin-right: 20px;
  
  /* 现代逻辑属性 */
  margin-block-start: 10px;  /* 顶部（垂直方向开始） */
  margin-inline-end: 20px;   /* 右侧（水平方向结束） */
}

12. color-mix() 颜色混合

.device-button {
  background-color: color-mix(in srgb, var(--primary-color) 80%, white);
  
  &:hover {
    background-color: color-mix(in srgb, var(--primary-color) 100%, black 10%);
  }
}

实际应用示例：优化你的 device.css

/* 使用CSS变量和嵌套优化后的代码 */
:root {
  --device-primary: #0769fb;
  --device-primary-hover: #0550d0;
  --device-spacing: 16px;
  --device-transition: 0.3s ease;
}

.device-container {
  width: 100%;
  height: 100%;
  background-color: var(--device-primary);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  transition: background-color var(--device-transition);
  
  &:hover {
    background-color: var(--device-primary-hover);
  }
  
  .device-update {
    width: 100%;
    height: auto;
    min-height: 60px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--device-spacing);
    gap: var(--device-spacing);
    
    .device-update-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: white;
      flex: 1;
    }
    
    .device-update-btn {
      padding: 8px 16px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      cursor: pointer;
      transition: all var(--device-transition);
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
      }
    }
  }
  
  .device-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--device-spacing);
    
    /* 容器查询 */
    container-type: inline-size;
    
    @container (min-width: 600px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--device-spacing);
    }
  }
  
  .device-add {
    width: 100%;
    min-height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--device-transition);
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}

浏览器支持情况

• ✅ CSS 嵌套: Chrome 112+, Firefox 117+, Safari 16.5+
• ✅ 容器查询: Chrome 105+, Firefox 110+, Safari 16.0+
• ✅ :has(): Chrome 105+, Firefox 121+, Safari 15.4+
• ✅ CSS 变量: 所有现代浏览器
• ✅ @layer: Chrome 99+, Firefox 97+, Safari 15.4+
• ✅ aspect-ratio: Chrome 88+, Firefox 89+, Safari 15.0+

推荐学习资源

1. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
2. CSS-Tricks: https://css-tricks.com/
3. web.dev Learn CSS: https://web.dev/learn/css/