这些地方你不需要使用JavaScript

2017年3月22日 建站技术 浏览 3,794 抢沙发 A+

这些地方你不需要使用JavaScript

当我做前端开发的时候，经常会使用CSS来代替JavaScript做一些交互。下面是仅仅使用几行CSS创建的一些组件用来实现JavaScript的部分功能。

1. Tooltips

Tooltips对于展示一些信息非常有用，并且不需要什么用户体验。目前有很多JavaScript插件实现了这个功能，但是如果你不想使网站更加的笨重，那我们可以使用普通的CSS来实现它。

我们可以使用伪元素来拉取信息，并在 :hover 时显示它（你可以使用HTML的 title ;属性来实现，但是不能自定义喜欢的样式）。

HTML

1
2
3
<span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
  Label for your tooltip
</span>

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
.tooltip-toggle{
cursor: pointer;
position: relative;
}
.tooltip-toggle svg{
height: 18px;
width: 18px;
padding-right: 0.5rem;
}
.tooltip-toggle::before{
position: absolute;
top: -80px;
left: -80px;
background-color: #2B222A;
border-radius: 5px;
color: #fff;
content: attr(data-tooltip);
padding: 1rem;
text-transform: none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
width: 160px;
}
.tooltip-toggle::after{
position: absolute;
top: -12px;
left: 9px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2B222A;
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
}
.tooltip-toggle::before, .tooltip-toggle::after{
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
.tooltip-toggle:hover::before, .tooltip-toggle:hover::after{
opacity: 1;
-webkit-transition: all 0.75s ease;
transition: all 0.75s ease;
}

ViEW DEMO

利用CSS的hover和title属性实现Tooltips功能

2. 下拉菜单

如果你想实现一个简单的下拉菜单，你可以通过CSS的 :hover简单的触发菜单的隐藏。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
<!-- Dropdown menu -->
<li class="nav-item nav-item-dropdown">
<a class="dropdown-trigger" href="#">Settings</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 1</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 2</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>

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
64
65
66
67
68
69
70
71
72
.nav-container{
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35);
padding: 1em;
border: 1px solid #eee;
display: block;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
ul,li{
list-style: none;
-webkit-padding-start: 0;
}
a{
text-decoration: none;
color: #ED3E44;
}
.nav-item{
padding: 1em;
display: inline;
}
.nav-item-dropdown{
position: relative;
}
.nav-item-dropdown:hover > .dropdown-menu{
display: block;
opacity: 1;
}
.dropdown-trigger {
position: relative;
}
.dropdown-trigger:focus + .dropdown-menu{
display: block;
opacity: 1;
}
.dropdown-trigger::after{
content: "›";
position: absolute;
color: #ED3E44;
font-size: 24px;
font-weight: bold;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: -5px;
right: -15px;
}
.dropdown-menu{
background-color: #ED3E44;
display: inline-block;
text-align: right;
position: absolute;
top: 2.5rem;
right: -10px;
display: none;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
width: 160px;
}
.dropdown-menu a{
color: #fff;
}
.dropdown-menu-item{
cursor: pointer;
padding: 1em;
text-align: center;
}
.dropdown-menu-item:hover{
background-color: #eb272d;
}

VIEW DEMO

用CSS的hover属性实现下拉菜单功能

3. 可见性切换

转向 JavaScript 最常见的原因是切换元素的可见性，我最近才知道可以使用CSS的伪类 :checked 来实现。

HTML

1
2
3
4
5
6
7
8
9
<div class="toggle">
<!-- Checkbox toggle -->
<input type="checkbox" value="selected" id="beethoven-joke" class="toggle-input">
<label for="beethoven-joke" class="toggle-label">What was Beethoven's favorite fruit?</label>
<!-- Content to toggle -->
<div role="toggle" class="toggle-content">
    BA-NA-NA-NA!
</div>
</div>

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
.toggle{
margin: 0 auto;
max-width: 400px;
}
.toggle-label{
font-size: 16px;
background: #fff;
padding: 1em;
cursor: pointer;
display: block;
margin: 0 auto 1em;
box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35);
border-radius: 4px;
}
.toggle-label:after{
color: #ED3E44;
content: "+";
float: right;
font-weight: bold;
}
.toggle-content{
color: #B0B3C2;
font-family: monospace;
font-size: 16px;
margin-bottom: 1.5em;
padding: 1em;
}
.toggle-input{
display: none;
}
.toggle-input:not(checked) ~ .toggle-content{
display: none;
}
.toggle-input:checked ~ .toggle-content{
display: block;
}
.toggle-input:checked ~ .toggle-label:after{
content: "-";
}

VIEW DEMO

用CSS的checked属性代替JavaScript实现可见性切换

写在最后

总的来说，下面是在项目中使用CSS代替JavaScript 的一些利处：

  • 轻量级，不需要安装插件或者添加一个.js 文件

  • 清楚的展示样式和旋转发生了什么

  • 使一切变得更加简单，搭建更快

每个项目都有不同的目标，所以请确保你的选择能够满足你的需求。没有任何一个解决方案能够满足所有的项目。同时我们可以看到 CSS 本身可以实现什么样的功能。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

滑动解锁才能提交