背景
在h5页面新开窗口,我们经常用window.open('haorooms.com','_blank'),但是这个方法在某些app内嵌h5中,或者某些浏览器中会阻止这个方法,那么有什么办法判断我们的open是否被阻止了呢?阻止之后我们有什么办法解决呢?今天聊聊解决方案。
解决
其实window.open有个返回值的,在打不开或者被禁用的情况下面,window.open会返回null,利用这个特性,我们可以判断这个页面目前是都可以用window.open。
例如判断如下:
在h5页面新开窗口,我们经常用window.open('haorooms.com','_blank'),但是这个方法在某些app内嵌h5中,或者某些浏览器中会阻止这个方法,那么有什么办法判断我们的open是否被阻止了呢?阻止之后我们有什么办法解决呢?今天聊聊解决方案。
其实window.open有个返回值的,在打不开或者被禁用的情况下面,window.open会返回null,利用这个特性,我们可以判断这个页面目前是都可以用window.open。
例如判断如下:
之前写过一篇文章css实现模糊镜效果及渐变字体和text-shadow冲突解决方案,介绍了文字渐变和阴影冲突的解决方案,但是假如文字渐变和阴影又遇到外描边怎么办呢? 我们知道外描边一般使用阴影来实现的,假如用阴影实现,那么和阴影就有冲突了,只能用别的方式来实现外描边。
text-stroke描边是居中描边,不是外描边,要实现外描边一般又两种解决方案:
一:通过阴影实现
text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;
二、通过伪元素before或者after来实现,包一层,或者before、after的text-stroke: 0;,外层设置描边的2倍,都可以,下面举例一种。
例如:
本文主要介绍一下css噪点效果及简单假进度条记录,最近阅读了张鑫旭的文章,发现了这两点,这两点真的让我自己实现确实需要查阅资料,本文简单的参考一下张大神的文章,同时也作为自己的积累。文章最后会放上参考文章地址,感兴趣的也可以去原文阅读。
实现噪点的原理主要是应用了
background: repeating-conic-gradient
在径向角度比较小的时候,中间区域的图形由于像素点不足,扭曲在了一起,背景区域就会出现随机点,主要是利用了这个特性。
那么实现黑白随机噪点主要运用了如下代码
.dot {
width: 200px; height: 200px;
background: repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px,
repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/2000px 3000px;
background-blend-mode: difference;
}
今天在移动端开发的时候,遇到一个块级文本省略ios手机无效的问题,这种问题形成的原因是什么呢?chrome里面是正常的,为啥ios里面不行?解决方案又是什么呢?
我很早很早之前的文章介绍了文本省略的方式,其中有一行和多行,请看:https://www.haorooms.com/post/css_common
文章的第十二条。
但是单行文本省略在如下结构里面,特别是在ios手机里面
两个emoji表情可以拼接成一个emoji,这就给我们处理和截取字符串增加了难度,之前我有文章,截取emoji表情,具体可以看一下。
拼接规则如下:
👩 + ✈️ → 👩✈️
👨 + 💻 → 👨💻
👰 + ♂️ → 👰♂️
🐻 + ❄️ → 🐻❄️
🏴 + ☠️ → 🏴☠️
🏳️ + 🌈 → 🏳️🌈
👨 + 🦰 → 👨🦰 (有意思的是:发色是通过 ZWJ 组合基础 emoji 实现,而肤色则是用肤色修饰符实现)
👨🏻 + 🤝 + 👨🏼 → 👨🏻🤝👨🏼
👨 + ❤️ + 👨 → 👨❤️👨
👨 + ❤️ + 💋 + 👨 → 👨❤️💋👨
👨 + 👨 + 👧 → 👨👨👧
👨 + 👨 + 👧 + 👧 → 👨👨👧👧