@property的默认属性

property 的关键字主要分为四类:

  • 原子性nonatomic,atomic
    在默认情况下,由编译器合成的方法会通过锁定机制确保其原子性(atomicity)。如果属性具备nonatomic 特质,则不使用同步锁。请注意,尽管没有名为“atomic”的特质(如果某属性不具备nonatomic特质,那它就是“原子的” ( atomic ),但是仍然可以在属性特质中写明这一点,编译器不会报错。若是自己定义存取方法,那么就应该遵从与属性特质相符的原子性。
    这个一般都是非原子的,因为性能高,如果有特殊要求,比如安全性要高的话,选原子的,原子的会给对象加锁(会给对象setter函数加锁,使用的是@synchronized(self){//code}

  • 读写权限readonly, readwrite

  • 内存管理 assign, strong, weak, unsafe_unretained, copy
  • 方法名 getter,setter
  • 不常用的nonnull, null_resettable,nullable
  • property 默认关键字
    在声明 property 时,如果不指定关键字,编译器会为 property 生成默认的关键字。

  • 对应基本数据类型,默认关键字为
    atomic, assign, readwrite

  • 对应对象类型,默认关键字为
    atomic, strong, readwrite
在 CSS 中,`@property` 是 **CSS Houdini(CSS 雕刻)** 的一部分,它允许你**显式地定义 CSS 自定义属性(变量)的类型、语法和继承行为**,而不仅仅是使用 `--my-var` 这种无类型的方式。 --- ## ✅ `@property` 的作用 默认情况下,CSS 自定义属性是“无类型”的,浏览器不会知道你传入的是颜色、长度还是数字,因此在做动画或过渡时不能很好地处理。 而 `@property` 可以: - **指定变量的类型**(如 `<length>`, `<color>`, `<number>` 等) - 控制变量是否继承 - 定义初始值 这样你就可以在动画、过渡中安全地使用自定义属性了! --- ## ✅ 语法 ```css @property --property-name { syntax: <type>; inherits: true | false; initial-value: <value>; } ``` --- ## ✅ 示例:定义一个颜色类型的自定义属性 ```css @property --accent-color { syntax: '<color>'; inherits: false; initial-value: #000000; } ``` 然后你可以在样式中使用这个变量: ```css .box { background-color: var(--accent-color); transition: background-color 0.3s ease; } ``` 点击按钮改变变量: ```html <button onclick="changeColor()">Change Color</button> <div class="box"></div> ``` ```js function changeColor() { document.documentElement.style.setProperty('--accent-color', 'red'); } ``` --- ## ✅ 示例:使用 `@property` 实现平滑动画过渡 假设我们想让一个元素的 `--scale` 属性从 `1` 过渡到 `1.5`: ### ✅ 使用 `@property` 定义: ```css @property --scale { syntax: '<number>'; inherits: false; initial-value: 1; } ``` ### ✅ 使用该变量: ```css .box { width: 100px; height: 100px; background: blue; transform: scale(var(--scale)); transition: transform 0.5s ease; } ``` ### ✅ JS 控制变化: ```js document.querySelector('.box').style.setProperty('--scale', '1.5'); ``` 这样就可以实现平滑的缩放动画了! --- ## ✅ 支持的 `syntax` 类型 | 类型 | 示例 | |------|------| | `<color>` | 红、蓝、#fff、hsl() 等 | | `<length>` | px、em、rem、vw、vh 等 | | `<percentage>` | % | | `<number>` | 1, 2.5, -3 等 | | `<angle>` | deg、rad、grad | | `<time>` | s、ms | | `<transform-function>` | translate(), scale(), rotate() 等 | | `<custom-ident>` | 关键字如 auto、none、left 等 | 你也可以组合使用: ```css syntax: '<length> <length>'; ``` --- ## ✅ 注意事项 | 注意点 | 说明 | |--------|------| | **兼容性** | 目前主流浏览器(Chrome、Edge、Safari)支持较好,Firefox 支持较晚 | | **需要启用 Houdini** | 有些浏览器需要在设置中启用实验性功能 | | **不要滥用** | 主要用于动画、过渡等需要类型检查的场景 | --- ## ✅ 浏览器兼容性(截至 2025) | 浏览器 | 支持情况 | |--------|----------| | Chrome | ✅ | | Edge | ✅ | | Firefox | ⚠️(部分支持) | | Safari | ✅ | | Mobile | ✅(现代设备支持) | 你可以通过 [caniuse.com](https://caniuse.com/css-property) 查看最新兼容性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值