這些地方你不必使用 JavaScript
在前端開發的時候,我經常會使用 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:https://codepen.io/cristina-silva/pen/XXOpga
2. 下拉選單
如果你想實現一個簡單的下拉選單,你可以通過 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:https://codepen.io/cristina-silva/pen/NNOodj/
3. 可見性切換
轉向 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:http://codepen.io/cristina-silva/pen/pyXQrj?editors=1100
最後
總之,在你的專案中使用 CSS 代替 JavaScript 有以下好處:
- 輕量級,不需要安裝外掛或者新增一個 .js 檔案
- 清楚的展示樣式和轉換髮生了什麼
- 使一切變得更加簡單,搭建更快
相關文章
- 程式設計師面試IT公司,這些地方你要注意!程式設計師面試
- 剛接觸一個 Laravel 專案,你可以從這些地方入手Laravel
- 玩轉JavaScript,這些技巧值得你擁有!JavaScript
- 這些javascript面試題,你做對了幾道?JavaScript面試題
- 這些 JavaScript函式讓你的工作更加 So Easy!JavaScript函式
- [譯]這些Javascript方法幾分鐘內提升你的技能JavaScript
- 你們眼中網路奇差的印度網際網路,將在這些地方超越中國
- 收藏!這些 IDE 使用技巧,你都知道嗎IDE
- 颱風暴雨天這些地方容易出現漏電觸電事件事件
- 程式設計師求職跳槽全攻略:有些苦你本不必吃,有些坑你也不必跳程式設計師求職
- javascript中的一些核心知識點以及需要注意的地方JavaScript
- 這些開源CMS,你敢用嗎?
- Web直播,你需要先知道這些Web
- Python——你應該知道這些Python
- 這些符號你會讀麼?符號
- 這些都不會,你說你會寫程式碼?
- 用Java這麼多年,這些祕密你知道嗎?Java
- 軟體測試這些你知道嗎?
- 這些Python騷操作,你知道嗎?Python
- 初學Java,這些框架你要掌握!Java框架
- 想用好Docker,你不能錯過這些Docker
- 介面中這些細節你知道嗎?
- 關於DNS,你應該知道這些DNS
- 運維 + AI,你得先搞懂這些運維AI
- 【譯】避免這些常見的JavaScript錯誤JavaScript
- (譯)你不必擔心Dart的垃圾回收器Dart
- 寫了這麼多年 JavaScript ,竟然還不知道這些技巧?JavaScript
- 不知道這些,你以為你還能devops?dev
- SSD固態硬碟使用的五個誤區,這些你都知道嗎?硬碟
- 學習Python,這些你必須搞懂!Python
- 高效工作,這些習慣你值得擁有!
- 小程式的這些坑你踩過嗎?
- 這些併發模型你真的懂了嗎?未必模型
- 這些 SpringBoot 面試題你會嗎?Spring Boot面試題
- 這些辦公技巧值得你來學習
- 這些CSS提效技巧,你需要知道!CSS
- 關於MySQL引數,這些你要知道MySql
- 浮點數的這些坑,你未必知道