# 不支持的 CSS 特性

以下 Web CSS 特性在 Lynx 中**不支持**或**部分支持**。

## ⚠️ 重要：解析但不生效的选择器

以下选择器可以被 CSS 解析器识别（不会报错），但**选择器匹配器并未实现**，因此永远不会匹配到元素，样式也不会生效。这是最常见的陷阱。

### 结构性伪类（解析但不匹配）

- ⚠️ `:nth-child()` / `:nth-last-child()`
- ⚠️ `:nth-of-type()` / `:nth-last-of-type()`
- ⚠️ `:first-child` / `:last-child`
- ⚠️ `:only-child`
- ⚠️ `:first-of-type` / `:last-of-type`
- ⚠️ `:only-of-type`
- ⚠️ `:empty`

### 功能性伪类（解析但不匹配）

- ⚠️ `:is()`
- ⚠️ `:where()`
- ⚠️ `:has()` - 父选择器
- ⚠️ `:lang()`
- ⚠️ `:dir()`

### 链接/状态伪类（解析但不匹配）

- ⚠️ `:link`
- ⚠️ `:visited`
- ⚠️ `:checked` - 表单选中状态（解析但不匹配）
- ⚠️ `:enabled` / `:disabled` - 表单状态（解析但不匹配）
- ⚠️ `:default`

### 伪元素（解析但不匹配）

- ⚠️ `::before`
- ⚠️ `::after`
- ⚠️ `::first-line`
- ⚠️ `::first-letter`
- ⚠️ `::backdrop`

### 实际有效的选择器（共 7 个）

| 选择器          | 状态        | 说明               |
| --------------- | ----------- | ------------------ |
| `:not()`        | ✅ 完全支持 | 嵌套选择器匹配     |
| `:hover`        | ✅ 完全支持 | 悬停状态           |
| `:active`       | ✅ 完全支持 | 激活状态           |
| `:focus`        | ✅ 完全支持 | 聚焦状态           |
| `:root`         | ✅ 完全支持 | 匹配根元素（page） |
| `::placeholder` | ✅ 完全支持 | 占位符样式         |
| `::selection`   | ✅ 完全支持 | 选中文本样式       |

> **陷阱提示**：如果你写了 `:first-child` 或 `::before` 这样的选择器，CSS 解析不会报错，但样式永远不会生效。请使用其他方式实现相同效果。

## 完全不支持的特性

### Display

- ❌ `display: block` - 默认行为，无需设置
- ❌ `display: inline` - 使用 `<text>` 组件
- ❌ `display: inline-block` - 使用 Flex
- ❌ `display: table*` - 所有表格相关
- ❌ `display: list-item`
- ❌ `display: run-in`
- ❌ `display: contents`

### Float

- ❌ `float: left`
- ❌ `float: right`
- ❌ `float: none`
- ❌ `clear: left`
- ❌ `clear: right`
- ❌ `clear: both`
- ❌ `clear: none`

### Position

- ❌ `position: static` - 默认就是 relative

### 长度值

- ❌ `stretch`

### 单位

- ❌ `cm` - 厘米
- ❌ `mm` - 毫米
- ❌ `in` - 英寸
- ❌ `pt` - 点
- ❌ `pc` - 派卡
- ❌ `ch` - 字符宽度
- ❌ `ex` - x 高度
- ❌ `vmin` - 视口最小值（部分支持）
- ❌ `vmax` - 视口最大值（部分支持）

### 伪类

- ❌ `:is()` - 较新的选择器
- ❌ `:where()` - 较新的选择器
- ❌ `:has()` - 父选择器
- ❌ `:target` - 目标伪类
- ❌ `:lang()`
- ❌ `:dir()`
- ❌ `:read-only`
- ❌ `:read-write`
- ❌ `:placeholder-shown`
- ❌ `:default`
- ❌ `:checked` - 部分支持
- ❌ `:indeterminate`
- ❌ `:valid`
- ❌ `:invalid`
- ❌ `:in-range`
- ❌ `:out-of-range`
- ❌ `:required`
- ❌ `:optional`
- ❌ `:blank`

### 伪元素

- ❌ `::before` - 完全不支持
- ❌ `::after` - 完全不支持
- ❌ `::first-line` - 首行
- ❌ `::first-letter` - 首字母
- ❌ `::marker` - 列表标记
- ❌ `::backdrop`
- ❌ `::cue`
- ❌ `::part()`
- ❌ `::slotted()`

### 伪元素 content

- ❌ `content: "text"` - 不支持生成文本
- ❌ `content: url()` - 不支持生成图片
- ❌ `content: attr()` - 不支持

### At-rules

#### 媒体查询 @media ⚠️

**重要说明**：Lynx **不支持** CSS `@media` 规则。

- ❌ **完全不支持**：`@media (min-width: ...)`, `@media (max-width: ...)` - 不会在运行时生效
- ❌ **不支持**：`@media print` - 打印媒体
- ❌ **不支持**：`@media speech`, `@media tty` 等其他媒体类型

**替代方案**：

1. 使用 **rem + vw** 实现响应式适配（**推荐**）
2. 使用 **视口单位**（vw/vh）实现流式布局
3. 使用 **JavaScript 动态调整**样式

```css
/* 推荐方案：使用 rem + vw 代替媒体查询 */
page {
  font-size: calc(100vw / 23.4375); /* 1rem = 16px @ 375px */
}

.container {
  width: 100vw;
  padding: 4vw; /* 根据视口宽度自动调整 */
}

.title {
  font-size: 2.25rem; /* 约 36px @ 375px，自动根据屏幕宽度缩放 */
}

/* 备选方案：直接使用 vw */
.subtitle {
  font-size: 4.8vw; /* 约 18px @ 375px */
}
```

```javascript
// JavaScript 动态调整
const viewportWidth = /* 获取视口宽度 */;
if (viewportWidth >= 768) {
  // 应用大屏样式
}
```

```css
/* 使用视口单位代替媒体查询 */
.container {
  width: 100vw;
  padding: 4vw; /* 根据视口宽度自动调整 */
}
```

#### 其他 At-rules

- ❌ `@layer` - CSS 层叠层（Cascading Layers）
- ❌ `@supports` - 特性查询
- ❌ `@keyframes` - 某些高级特性
- ❌ `@import` - 部分支持
- ❌ `@font-face` - 部分支持
- ❌ `@charset`
- ❌ `@namespace`

### 属性

- ❌ `content` - 配合 ::before/::after 生成内容
- ❌ `quotes`
- ❌ `counter-*`
- ❌ `list-style-type`
- ❌ `list-style-image`
- ❌ `list-style-position`
- ❌ `caption-side`
- ❌ `table-layout`
- ❌ `border-collapse`
- ❌ `border-spacing`
- ❌ `empty-cells`
- ❌ `vertical-align` - 部分支持
- ❌ `text-indent` - 部分支持
- ❌ `text-transform`
- ❌ `letter-spacing` - 部分支持
- ❌ `word-spacing`
- ❌ `word-break`
- ❌ `word-wrap` / `overflow-wrap`
- ❌ `hyphens`
- ❌ `tab-size`
- ❌ `writing-mode`
- ❌ `text-orientation`
- ❌ `unicode-bidi`
- ❌ `white-space: pre | pre-wrap | pre-line | break-spaces` - 仅支持 normal/nowrap
- ❌ `pointer-events`
- ❌ `cursor`
- ❌ `user-select` - 部分支持
- ❌ `resize`
- ❌ `scroll-behavior`
- ❌ `scroll-snap-*`
- ❌ `overscroll-behavior`
- ❌ `transform-style`

### 值

- ❌ `currentColor` - 部分支持

### env() 函数

- ✅ **支持**：`env(safe-area-inset-top)`, `env(safe-area-inset-right)`, `env(safe-area-inset-bottom)`, `env(safe-area-inset-left)` - 安全区域适配
- ❌ **不支持**：所有其他 `env()` 值（如 `env(titlebar-area-x)`, `env(keyboard-inset-height)` 等）

### 函数

- ❌ `min()`
- ❌ `max()`
- ❌ `clamp()`

## 部分支持的特性

### Grid 布局

- ❌ 命名网格线: `grid-template-columns: [start] 1fr [end]`
- ❌ `grid-column` 简写属性（请使用 `grid-column-start/end`）
- ❌ `grid-row` 简写属性（请使用 `grid-row-start/end`）
- ❌ `grid-area` 简写
- ⚠️ `minmax()`: 支持基本用法，但复杂场景下行为可能与 Web 不同

### Flexbox

- ⚠️ `flex-basis: min-content` - 视为 0px
- ⚠️ `flex-basis: max-content` - 视为 auto

### 选择器

- ⚠️ 属性选择器: `[attr^="val"]`, `[attr$="val"]`, `[attr*="val"]`

### 文本

- ⚠️ `text-overflow: fade` - 仅支持 clip/ellipsis
- ⚠️ `vertical-align`

### 变换

- ⚠️ `perspective`

## 替代方案

| 不支持的特性      | 替代方案                  |
| ----------------- | ------------------------- |
| `float`           | `display: flex`           |
| `display: inline` | `<text>` 组件             |
| `min-content`     | 使用固定值或 `auto`       |
| `writing-mode`    | 使用 transform 旋转       |
| `word-break`      | 调整 `white-space`        |
| `pointer-events`  | 调整 `opacity` 或移出屏幕 |
| `user-select`     | 使用平台特定 API          |