现在的位置:首页>网站SEO>正文

一些需要使用JavaScript实现的功能可以用CSS来代替

2016年07月18日 ⁄ 共 5077字 暂无评论

部落之前介绍过很多过纯CSS的功能,比如之前的纯CSS不用JS制作wordpress网站二级下拉菜单,可能有部分朋友目前正在使用了,当然,还有更多的功能,我们可以通过CSS来代替JavaScript实现,从而优化网站的加载速度.而且相当多的高手,基本网站中,用到的JS文件也是越来越少了.这样做的好处,还是很明显的.毕竟就连搜索引擎,现在对JavaScript的支持还不是太好,像google,百度,虽说官方都提出现在基本能识别一些js,但国内其它的搜索引擎,估计要识别的话,还需要一定的时间.

当我们做前端开发的时候,经常会使用 CSS 来代替 JavaScript 做一些交互.

Tooltips

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

效果如下图:

使用JavaScript实现的功能可以用CSS来代替

我们可以使用伪元素来拉取信息,并在 :hover 时显示它(你可以使用 HTML 的 title 属性来实现完成的解决方案,但是不能自定义喜欢的样式).

HTML代码:

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

CSS代码:

  1. .tooltip-toggle {
  2.   cursor: pointer;
  3.   position: relative;
  4. }
  5. .tooltip-toggle svg {
  6.   height: 18px;
  7.   width: 18px;
  8.   padding-right: 0.5rem;
  9. }
  10. .tooltip-toggle::before {
  11.   position: absolute;
  12.   top: -80px;
  13.   left: -80px;
  14.   background-color: #2B222A;
  15.   border-radius: 5px;
  16.   color: #fff;
  17.   content: attr(data-tooltip);
  18.   padding: 1rem;
  19.   text-transform: none;
  20.   -webkit-transition: all 0.5s ease;
  21.   transition: all 0.5s ease;
  22.   width: 160px;
  23. }
  24. .tooltip-toggle::after {
  25.   position: absolute;
  26.   top: -12px;
  27.   left: 9px;
  28.   border-left: 5px solid transparent;
  29.   border-right: 5px solid transparent;
  30.   border-top: 5px solid #2B222A;
  31.   content: " ";
  32.   font-size: 0;
  33.   line-height: 0;
  34.   margin-left: -5px;
  35.   width: 0;
  36. }
  37. .tooltip-toggle::before, .tooltip-toggle::after {
  38.   color: #efefef;
  39.   font-family: monospace;
  40.   font-size: 16px;
  41.   opacity: 0;
  42.   pointer-events: none;
  43.   text-align: center;
  44. }
  45. .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
  46.   opacity: 1;
  47.   -webkit-transition: all 0.75s ease;
  48.   transition: all 0.75s ease;
  49. }

下拉菜单

这个部落之前介绍过一次,再来看一下这次的例子,当然,这里是简单的二维菜单.如果你想实现一个简单的下拉菜单,你可以通过 CSS 的 :hover 简单的触发菜单的隐藏.

HTML代码:

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

对应的CSS代码如下:

  1. .nav-container {
  2.   background-color: #fff;
  3.   border-radius: 4px;
  4.   box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35);
  5.   padding: 1em;
  6.   border: 1px solid #eee;
  7.   display: block;
  8.   max-width: 400px;
  9.   margin: 0 auto;
  10.   text-align: center;
  11. }
  12. ul,
  13. li {
  14.   list-style: none;
  15.   -webkit-padding-start: 0;
  16. }
  17. a {
  18.   text-decoration: none;
  19.   color: #ED3E44;
  20. }
  21. .nav-item {
  22.   padding: 1em;
  23.   display: inline;
  24. }
  25. .nav-item-dropdown {
  26.   position: relative;
  27. }
  28. .nav-item-dropdown:hover > .dropdown-menu {
  29.   display: block;
  30.   opacity: 1;
  31. }
  32. .dropdown-trigger {
  33.   position: relative;
  34. }
  35. .dropdown-trigger:focus + .dropdown-menu {
  36.   display: block;
  37.   opacity: 1;
  38. }
  39. .dropdown-trigger::after {
  40.   content: "›";
  41.   position: absolute;
  42.   color: #ED3E44;
  43.   font-size: 24px;
  44.   font-weight: bold;
  45.   -webkit-transform: rotate(90deg);
  46.           transform: rotate(90deg);
  47.   top: -5px;
  48.   right: -15px;
  49. }
  50. .dropdown-menu {
  51.   background-color: #ED3E44;
  52.   display: inline-block;
  53.   text-align: right;
  54.   position: absolute;
  55.   top: 2.5rem;
  56.   right: -10px;
  57.   display: none;
  58.   opacity: 0;
  59.   -webkit-transition: opacity 0.5s ease;
  60.   transition: opacity 0.5s ease;
  61.   width: 160px;
  62. }
  63. .dropdown-menu a {
  64.   color: #fff;
  65. }
  66. .dropdown-menu-item {
  67.   cursor: pointer;
  68.   padding: 1em;
  69.   text-align: center;
  70. }
  71. .dropdown-menu-item:hover {
  72.   background-color: #eb272d;
  73. }

效果如下图所示:

使用JavaScript实现的功能可以用CSS来代替

可见性切换

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

HTML代码:

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

CSS代码内容如下:

  1. .toggle {
  2.   margin: 0 auto;
  3.   max-width: 400px;
  4. }
  5. .toggle-label {
  6.   font-size: 16px;
  7.   background: #fff;
  8.   padding: 1em;
  9.   cursor: pointer;
  10.   display: block;
  11.   margin: 0 auto 1em;
  12.   box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35);
  13.   border-radius: 4px;
  14. }
  15. .toggle-label:after {
  16.   color: #ED3E44;
  17.   content: "+";
  18.   float: right;
  19.   font-weight: bold;
  20. }
  21. .toggle-content {
  22.   color: #B0B3C2;
  23.   font-family: monospace;
  24.   font-size: 16px;
  25.   margin-bottom: 1.5em;
  26.   padding: 1em;
  27. }
  28. .toggle-input {
  29.   display: none;
  30. }
  31. .toggle-input:not(checked) ~ .toggle-content {
  32.   display: none;
  33. }
  34. .toggle-input:checked ~ .toggle-content {
  35.   display: block;
  36. }
  37. .toggle-input:checked ~ .toggle-label:after {
  38.   content: "-";
  39. }

效果如下图:

使用JavaScript实现的功能可以用CSS来代替

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

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

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

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

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

 

 

小结

文章内容来源自thoughtbot这个国外的网站,用得上的朋友可以参考一下.

现在的话,CSS的功能确实也越来越强大了,像什么做一个圆角的功能什么的,都是可以实现的,完全没有必要再去加载一个多余的js文件了.

给我留言