分针网—每日分享:CSS 自定义属性:API 篇
来源:互联网 发布:远程桌面连接换端口 编辑:程序博客网 时间:2024/05/07 13:55
模块化 CSS:可配置的网格布局
虽然现在我们有了 CSS Grid,你还是可以用 flexbox 去实现网格布局。尽可能地将你的实现抽象成一个可复用可定制的模块,这将会是一个有趣的练习。来,先看看最直白的做法吧:
要如何模块化上面的代码?首先,作为一个模块需要沙盒机制,所以先给它们都加上命名空间,取名有很多种方式,比如 BEM 还有 SMACSS。不过简洁起见。在本文里我们暂时用 my- 作为前缀。再补充上变量定义和一些注释:
看起来 my-grid 已经被封装成一个像模像样的模块了,那么要如何使用它呢?
引入样式表之后,根据样式覆盖原则,在默认样式的之后对 CSS 变量赋上新值:
当然,你也可以在其他的选择器中对变量赋值;还能通过媒体查询,在不同的场景下使用不同的值:
请注意,以上所有的配置统统是纯 CSS 实现的,不需要切换不同的类名改变网格的布局。这说明,模块开发者不需要提供一系列 CSS 类名给模块使用者了。只要提供了 CSS 变量,模块使用者就能灵活地去设置它们,也不再受限于开发者提供的类名。
应用场景之二:图片长宽比
假如你正在搭建自己的博客,你想给图片元素设置 max-width,防止它超出容器的范围:
如果一开始图片没有占位,那么在图片加载的时候页面内容会不断往下移动,所以一开始就要为图片占好位。在 img 标签中直接定义了宽高的话:
图片在自适应窗口宽度的时候,浏览器是不会保证它的横纵比的,它只能保证图片的高度是 768px 同时让图片的宽度不要超过 600px(CSS 中的定义),结果我们会得到一张变形的图片( 图片版权所属 latch.r ):
那么你要怎么保证图片在任何场景下都不变形?使用 padding 保证图片的长宽比应该是最广为人知的方式(这个技巧的首发于此),如果要实现 16:9 的比例,你可以这么做:
HTML 结构如下:
如果只有几种横纵比还好,但你要做的是网格布局的图片流,就会遇到各种各样尺寸的图片,这个方法明显不能解决问题。
该自定义属性 API 上场了,让我们来实现一个固定长宽比的图片容器吧!
--my-image-wrapper-w 和 --my-image-wrapper-h 就是模块化的 CSS 接口,使用起来很灵活:
现在我们的小猫可以正常显示了!
将这一步结合到自动化流程中的话,就能保证任何图片的长宽比了!
注意:我把这个功能封装为一个 npm 插件 css aspect ratio,欢迎围观。
Web Components
Web Components 使得开发者能够开发和使用完全封装的可复用的 Web 组件。
无论你的 Web Components 是否用到了 Shadow DOM,都应该暴露出一些属性接口为异化做准备。这样开发者在使用的时候该组件时,不用深入组件的代码分析,通过文档就能知道可以如何配置组件了。
更换主题是典型的应用场景。 如果组件中可调整的属性没有被暴露,组件使用者不得不一个个选择器地去覆盖原有样式:
对使用者(以及几个月以后已经忘了自己写过什么的你)来说,如果组件中有任何可以异化的地方,将它们以自定义属性的方式暴露出来是相当友好的:
通过这个方式,使用者在未来更新组件表现时也不会有心理负担,他们可以这么写:
如果在组件中你使用了 Shadow DOM,引入自定义元素更是必要。要使用者重置 Shadow DOM 样式实在不合理。至于不合理的原因,以及关于 Shadow DOM 的更多考虑请看 Eric Bidelman 的 Shadow DOM v1:独立的网络组件。
你我的工作
将模块(或 Web Components)中的可变部分独立出来很重要。这样使用者才能知道如何根据情况,安全地异化模块。不要说其他使用者,这么做也是为几个月之后的开发者本人铺平道路啊。
通过建立一套完整的自定义属性体系可以让你的模块和组件复用性更高,客户端代码更健壮,甚至可以作为模块或组件的内置文档。
链接:http://www.f-z.cn/id/163
学习更多IT知识 加群:272292492
阅读全文
0 0
- 分针网—每日分享:CSS 自定义属性:API 篇
- 分针网—每日分享:css命名规范
- 分针网—每日分享:CSS优先级别计算
- 分针网——每日分享:Vue计算属性
- 分针网—每日分享:JavaScript-Ajax
- 分针网——每日分享:css模块化及CSS Modules使用详解
- 分针网——每日分享:网页布局时CSS无效的常见原因
- 分针网—每日分享:网页布局时CSS无效的常见原因
- 分针网——每日分享:Vue2中ref属性的用法
- 分针网——每日分享:Session对象
- 分针网——每日分享:JavaScript严格模式
- 分针网——每日分享:nodejs导出excel实战
- 分针网——每日分享:Vue 指令总结
- 分针网——每日分享:Mongodb 的基本操作
- 分针网—每日分享: 利用js实现倒计时
- 分针网—每日分享: 关于绝对路径和相对路径
- 分针网—每日分享:jQuery的deferred对象详解
- 分针网—每日分享:Node.js操作mongodb数据库
- 第十三章:事件类型(鼠标与滚轮事件)
- Android BroadcastReceiver 动态与静态注册
- jQuery中 html(),text(),val()的区别
- SpringMVC的工作流程
- SO抬头信息增强
- 分针网—每日分享:CSS 自定义属性:API 篇
- layui-弹出层
- 0011、node 之删除与更新用户资料
- Git建立本地仓库及各种操作命令
- 关于打开数据库时提示"对象打开时,不允许操作",问题分析及解决办法
- Android ExpandableListViewAdapter 的构建
- 报错java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start c
- Request获取url信息的各种方法比较
- Git远程连接GitHub添加远程库