Handling CSS Vendor Prefixes

DEX601 - Unit 2 Getting Started

📄 第 96 页 🎬 视频课程

课程章节介绍

同学们,今天我们来聊聊CSS供应商前缀的问题。你们知道吗,有时候我们在写CSS的时候,会遇到一些属性,比如`border-radius`或者`user-select`,这些属性在不同的浏览器中可能需要加上一些前缀才能正常工作。比如,`-moz-`是给Firefox用的,`-webkit-`是给Chrome和Safari用的。 但是,在Salesforce的Lightning框架里,你们不需要自己手动去加这些前缀。框架会自动帮你们处理这些麻烦事。你们只需要写标准的CSS属性,比如`user-select`,框架在生成最终的CSS代码时,会自动加上所有需要的供应商前缀。 举个例子,如果你写了这样的CSS: ```css .user-select { user-select: none; } ``` 框架会自动帮你生成这样的代码: ```css .user-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` 这样,你的代码在所有浏览器中都能正常工作,而且你也不用担心忘记加哪个前缀了。 当然,如果你有特殊的需求,想要手动指定某个前缀的值,你也可以自己写上去。框架会优先使用你手动指定的值。比如: ```css .user-select { -webkit-user-select: auto; user-select: none; } ``` 这样,Chrome和Safari会使用`auto`,而其他浏览器会使用`none`。 总结一下,在Lightning框架里,你们可以放心地写标准的CSS属性,框架会帮你们处理好所有的供应商前缀问题。除非你有特殊需求,否则不需要自己手动加前缀。这样不仅省事,还能避免出错。 好了,今天的课就到这里,大家有什么问题吗?