HTML&CSS - SKILL.NULL

env(safe-area-inset-bottom) 兼容写法

先看下兼容性：

可以看到 @supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。

例：

1

2

3

4

5

6

7

8

9

10

11

12

13

@supports (padding-bottom: env(safe-area-inset-bottom)) or

(padding-bottom: constant(safe-area-inset-bottom)) {

.your-dom {

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

@supports not (padding-bottom: env(safe-area-inset-bottom)) {

.you-dom {

padding-bottom: 20px; /* 根据实际情况设定兜底距离 */

}

2025-01-07by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(272)评论(0)

ios滚动列表白屏问题

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。

看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。

1

2

3

4

5

this.$nextTick(() => {

window.scrollTo(0, 1);

window.scrollTo(0, 0);

})

[cr[……]

2023-07-12by SKILLNULL Browser Compatibility, HTML&CSS, JavaScript, Vue, 前端阅读(3066)评论(0)

移动端100vh的问题与解决方案

之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。

经过多方参考，实测有效的方案如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

:root {

--vh: 1vh;

}

</style>

!(function (n, e) {

function setViewHeight() {

var windowVH = e.innerHeight / 100;

n.documentElement.style.setProperty('--vh', windowVH + 'px');

}

var i = 'orientationchange' in window ? 'orientationchange' : 'resize';

n.addEventListener('DOMContentLoaded', setViewHeight);

e.addEventListener(i, setViewHeight);

})(document, window)

</script>

使用：
[crayon-67b77f8d0be7018347821[……]

2023-03-30by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(6876)评论(0)

iframe在ios上不能滚动问题解决方法

同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

1

2

3

</div>

[c[……]

2019-08-20by SKILLNULL Browser Compatibility, HTML&CSS 阅读(14039)评论(0)

Mac去除select圆角

1

2

3

4

5

6

7

.border-radius-0 {

border-radius: 0;

-webkit-border-radius: 0;

-moz-border-radius: 0;

-khtml-border-radius: 0;

-webkit-appearance: button;

}

2019-04-26by SKILLNULL HTML&CSS 阅读(4873)评论(0)

H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

</div>

</template>

export default {

data() {

return {

playFlag: true,

playImg: require('../../static/play.png'),

pauseImg: require('../../static/pause.png'),

clickMusicBtn: false

}

},

mounted() {

this.audioAutoPlay('bgMusic');

document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q

if (this.clickMusicBtn) { // 点击了关闭音乐按钮

if (this.playFlag) {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else {

this.audioPause('bgMusic');

this.playFlag = false;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

} else { // 网页被呼起

this.audioPause('bgMusic');

this.playFlag = false;

}

} else { // 未点击关闭音乐按钮

if (this.playFlag) {

this.audioPause('bgMusic');

this.playFlag = false;

} else {

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

text.innerHTML = e.hidden;

if (e.hidden) { // 网页被挂起

this.audioPause('bgMusic');

this.playFlag = false;

} else { // 网页被呼起

this.audioAutoPlay('bgMusic');

this.playFlag = true;

}

});

},

methods: {

bgMusicPlayOrPause(id) {

this.clickMusicBtn = !this.clickMusicBtn;

if (this.playFlag) {

this.audioPause(id);

this.playFlag = false;

} else {

this.audioAutoPlay(id);

this.playFlag = true;

}

},

audioPause(id) {

var audio = document.getElementById(id);

audio.pause();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.pause();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.pause();

}, false);

},

audioAutoPlay(id) {

var audio = document.getElementById(id);

audio.play();

document.addEventListener("WeixinJSBridgeReady", function () {

audio.play();

}, false);

document.addEventListener('YixinJSBridgeReady', function () {

audio.play();

}, false);

}

2018-12-03by SKILLNULL HTML&CSS, Vue, 微信阅读(9142)评论(0)

文本行的斑马条纹

周知，表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了：

1

2

3

4

5

tr:nth-child(even){

　　background-color: rgba(0,0,0,.2);

}

但是把这种效果运用在文本行的时候就有点力不从心了，尽管js可以实现这种功能，但是这在理论上有违纯粹原则（javascri[……]

2017-07-20by SKILLNULL HTML&CSS 阅读(7430)评论(0)

自定义优雅的文本下划线

废话不多说：

1

2

3

4

5

.underline {

background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;

background-size: .2em 2px;

background-position: 0 1.4em;

}

1	<div class="underline">原来你是这样的毛玻璃</div>

效果：

2017-07-20by SKILLNULL HTML&CSS 阅读(7382)评论(0)

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖，看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!DOCTYPE html>

<html>

<head>

<title>原来你是这样的毛玻璃</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

body, main:before {

background: url("demoImages/1.jpg") 0 /cover fixed;

}

main {

position: relative;

background: hsla(0, 0%, 100%, .3);

overflow: hidden;

display: block;

margin: 200px auto;

width: 1000px;

height: 500px;

}

main:before {

content: '';

position: absolute;

top: 0%;

right: 0%;

left: 0%;

bottom: 0%;

filter: blur(10px);

margin: -30px;

}

.demoBox {

border: .5em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

.demo {

position: relative;

z-index: 999;

font-size: 5em;

text-align: center;

line-height: 5;

font-weight: 100;

}

</style>

<body>

<div class="demo">原来你是这样的毛玻璃</div>

</main>

</body>

</html>

效果图：

2018-12-03by SKILLNULL HTML&CSS 阅读(8370)评论(0)

CSS3边框会动的信封

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

<head>

<title>酷炫的CSS3</title>

</head>

<style>

@keyframes ants {

to {

background-position: 100%;

}

.demo {

display: block;

margin: 200px auto;

width: 300px;

height: 200px;

border: 1em solid transparent;

background: linear-gradient(white, white) padding-box,

repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

animation: ants 12s linear infinite;

}

</style>

<body>

</body>

</html>

静态效果图：

2017-07-20by SKILLNULL HTML&CSS 阅读(8455)评论(0)

2025年二月
一	二	三	四	五	六	日
« 1月
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28