CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。
比方说最近经常提到的黑暗模式,深色主题:
@media (prefers-color-scheme: dark) {
/* 黑暗模式,深色主题 */
}
@media (prefers-color-scheme: light) {
/* 浅色主题 */
}
CSS可以自动检测,但是有时候,在JS中,我们也需要根据不同的系统主题,然后实现不同的交互逻辑,或者渲染出不一样的内容。
怎么办?似乎一时间也找不到现成的JS api来检测系统模式,只能借助于CSS中传参了。这就是一个典型的场景,类似的场景还有很多。
例如:
我们在做响应式布局的时候,经常会需要设定一个临界宽度值,例如当设备的宽度小于640像素的时候,我们就认为是进入了移动端;或者是宽度小于480的像素的时候,就使用移动端布局等。
此时,JavaScript代码也需要根据这个临界宽度实现不同的交互效果,大于多少的时候是PC的交互,小于多少的时候是移动端布局下的交互。
很多人在实际开发的时候就CSS代码和JS代码约定一下,例如:
@media screen and (max-width: 480px) {
/* 小屏幕宽度下的响应式布局 */
}
if (screen.width < 480) {
/* 小屏幕宽度下的交互行为 */
}
要是这种约定会有一个问题,等项目过了一段时间之后,发现这个临界宽度有问题,比方说手机横屏的时候,它的宽度是大于 480px 的,也应该是移动端的布局方式,于是开发就改成了 640px 。
@media screen and (max-width: 640px) {
/* 小屏幕宽度下的响应式布局 */
}
结果忘记JS代码中也有这一茬判断,结果就会出现bug。
如果原先实现的时候,我们的JavaScript代码中的屏幕判断是基于CSS传参的话,那就不会有这样子的维护问题出现。
我们会开发一些ui组件,希望在桌面端和移动端,以及物联网设备上通用。
有些组件在桌面当我们使用 mouseenter 或者 mouseover 事件来实现体验还是很不错的,非常便捷。但是如果这些东西用在移动端以及其他一些触屏设备上,则这个世界就有问题啊,因为没有这种hover的说法。
好在CSS代码中是有关于浏览器是否支持:hover伪类交互媒体查询判断(此查询有专门文章介绍,点击这里):
@media (any-hover: none) {
/* 设备不支持hover事件 */
}
可惜JS中并没有这样的API直接判断。很多人应该是通过判断浏览器是否支持 touchstart 之类的事件来进行判断的。不过可惜这种判断方法是不准确的。因为很多触摸设备也是可以连接鼠标设备的,此时hover事件也应该被良好支持。
因此,最后的方法还是通过CSS媒体查询判断,然后把这个判断结果以参数形式传递给js。
好啦,下面问题来了,上面举了这三个案例,我们如何通过CSS把我们的参数传递给JS代码呢?
通常借助CSS向JS传参,我都是使用下面这两种方法。
例如:
@media (any-hover: none) {
body::before {
content: 'hoverNone';
display: none;
}
}
此时就可以通过JS代码获取body伪元素传递的信息是什么了:
var strContent = getComputedStyle(document.body, '::before').content;
// strContent结果是'none'则表示支持hover
// strContent结果是'"hoverNone"'则表示不支持hover经过,需要换成click事件
本文就预埋了上面这样的CSS代码,因此,Chrome浏览器下,打开控制台,进入移动端预览模式,输入JS测试下,可以看到我们CSS传递的字符串信息被JS获取到了。
此时,我们就可以根据 ::before , ::after 伪元素配合 content 属性,获知CSS中传递的信息了。
这种传参方式的优点在于兼容性相对较好,但是不足却也很明显,那就是我们传递的参数值的数量是有限的,如果我们想一次性传多个值,就有些捉襟见肘,此时可以试试下面这种方法,借助CSS自定义属性。
直接上代码,有了 CSS自定义属性(CSS变量) ,黑暗模式和浅色模式的开发和维护工作就变得相对容易很多,除此之外,这个CSS自定义属性我们还可以用来给JS做模式识别。
:root {
--mode: 'unknown';
}
@media (prefers-color-scheme: dark) {
/* 黑暗模式 */
:root {
--mode: 'dark';
--colorLink: #bfdbff;
--colorMark: #cc0000;
--colorText: #ffffff;
--colorLight: #777777;
}
}
@media (prefers-color-scheme: light) {
/* 浅色主题 */
:root {
--mode: 'light';
--colorLink: #34538b;
--colorMark: #cc0000;
--colorText: #000000;
--colorLight: #cccccc;
}
}
JS检测代码:
var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// mode结果是'"dark"'则表示黑夜主题,深色模式,黑暗风格,护眼模式。
// mode结果是其他表示默认模式
例如在我这个电脑上运行的结果是下图这个:
在Mac OS X或者移动端设备上应该会显示其他的值,欢迎帮忙测试截个图发我,我更新到文章中。
使用CSS自定义属性传统的好处是非常灵活,我们可以定义很多很多的变量都可以。而且其实我们也没有任何必要担心兼容性的问题。为什么呢?因为凡是支持黑夜模式的设备浏览器,一定支持CSS自定义属性。
因此,综合来看,使用CSS自定义属性传参在黑暗模式这个场景中是最佳的实现。但是,如果是基于设备宽度传参响应式布局这场场景,还是使用CSS content 属性传参为佳。
本文来源: https://www.zhangxinxu.com/wordpress/?p=9263
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。
word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。
满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!
我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。
定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。
css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性
编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!