這些地方不需要使用Javascript，用css就可以實現
需要關於前端的學習資料請加群：532018971
當我做前端開發的時候，經常會使用 CSS 來代替 JavaScript 做一些交互。下面是我僅僅使用幾行 CSS 創建的一些組件。
1. Tooltips
Tooltips 對於展示一些信息非常有用，並且不需要什麼用戶體驗。目前有很多 JavaScript 插件實現了這個功能，但是如果你不想使網站更加的笨重，那我們可以使用普通的 CSS 來實現它。
我們可以使用偽元素來拉取信息，並在 :hover 時顯示它（你可以使用 HTML 的 title 屬性來實現完成的解決方案，但是不能自定義喜歡的樣式）。
HTML
<span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
Label for your tooltip
</span>
CSS
.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;
}
DEMO
css-tooltips
需要關於前端的學習資料請加群：532018971
2. 可見性切換
轉向 JavaScript 最常見的原因是切換元素的可見性，我最近才知道可以使用 CSS 的偽類 :checked 來實現。
HTML
<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
.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: "-";
}
DEMO
css-visibility
3. 下拉菜單
需要關於前端的學習資料請加群：532018971
如果你想實現一個簡單的下拉菜單，你可以通過 CSS 的 :hover 簡單的觸發菜單的隱藏。
HTML
<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
.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;
}
DEMO
css-dropdown-menu
總的來說，下面是在項目中使用 CSS 代替 JavaScript 的一些利處：
輕量級，不需要安裝插件或者添加一個 .js 文件，清楚的展示樣式和旋轉發生了什麼，使一切變得更加簡單，搭建更快。
每個項目都有不同的目標，所以請確保你的選擇能夠滿足你的需求。沒有任何一個解決方案能夠滿足所有的項目。同時我們可以看到 CSS 本身可以實現什麼樣的功能。
相關推薦
