现代 CSS

译文

使用CSS transition和animation改变渐变状态

到目前为止,CSS的渐变属性linear-gradientradial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradientconic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了,它们可以帮助我们绘图创建图片占位符制作环形进度条等等。另外还可以通过transitionanimation让渐变动起来。

实战Vue组件和Mixins

这篇文章主要帮助我们深入的学习Vue的组件和mixins,它们帮助你扩展基本的HTML元素,用来封装可重用的代码。在较高的层次上,组件是定制的元素,Vue的编译器附加了行为,而mixins为你提供了一个保持代码可重用性的方式,从而使你的代码保持干净和易于维护。

使用事件总线共享组件之间的Props

默认情况下,Vue组件之间的通讯是通过Props来完成的。Props是从父组件向子组件传递属性。Props总是从父组件向子组件传递。随着应用程序复杂度的增加,你会慢慢遇到所谓的Prop Drilling,这里有一篇文章介绍了这方面的东西,虽然是React方面的,但也适用于Vue。Prop Drilling是将props向下、向下、向下传递给子组件的想法 —— 正如你想象的那样,这通常是一个乏味的过程。因此,繁琐的Prop Drilling可能是一个复杂的潜在问题。另一个与不相关的组件之间的通讯有关。我们可以通过使用事件总线来解决这些问题。什么是事件总线?这个名字本身就是一个总结。这是一个组件将props从一个组件传递到另一个组件的一种运输方式,无论这些组件伴于树的哪个位置。

CSS border-radius 能做什么?

在CSS中,使用border-radius指定八个半径值时,可以创建不同的形状。先来看一个为该特性制定的工具@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后,她提到了一个在我脑海中挥之不去的CSS 属性:通过border-radius可以使图像有良好的形状效果。听完这个演讲之后,我认为你肯定可以创造出更多的圆圈,并开始深入挖掘使用border-radius可以做什么?

Vue中的状态管理

Vue中管理应用程序的状态有多种不同的方法,了解状态管理也是学习Vue知识的基础部分,也是很重要的一部分。从这篇文章开始,我们来开始学习Vue应用程序中的状态管理。在这篇文章中会先简单的介绍Vue应用程序中状态管理的大多数方法。希望对Vue的学习者有所帮助。

使用Intersection Observer API构建无限滚动组件

在开发过程中,经常会遇到要处理大量数据的情况,比如列表、搜索记录等,因此你需要一种方法让用户以块状显示这些数据,以便保持应用程序性能和数据的有序性。你可能会使用分页组件来处理,它可以轻松跳转,甚至一次跳转几个页面。当然,元素滚动是分页组件的另一种替代方案,它可以提供更好的用户体验,特别是在移动端和可触摸设备上。当用记在页面上滚动时,它提供了一个透明的分页,给人一种没有结尾列表的感觉。自从Intersection Observer API出现之后,构建无限滚动组件变得更简单。让我们看看如何通过这个API来构建无限滚动组件。

Vue中的异步组件

随着应用程序越来越大,你开始考虑优化应用程序,使其变得更快。在此过程中,你可能使用了拆分代码和延迟加载这两种方法,它们通过将代码块的加截推迟到需要的时候加载,从而使应用程序的初始包变得更小。延迟加载对于应用程序路由有很大的意义,并且有很大的影响,因为每个路由都是应用程序的不同部分。延迟加载有意义的另一种情况是组件延迟渲染。这些组件可以是tooltipspopovermodal等,当然这些组件也可以使用异步组件。让我们来看看如何在Vue中构建延迟加载异步组件。

重用Vue组件中的逻辑

当你开始使用Vue创建应用程序时,你可以开始先创建组件,来构建应用程序的不同部分。你应该可以感受到Vue和Web组件结构体系的良好开发体验。随着项目的进行,你开始以某种方式构造应用程序组件,可能是按页面和组件。但随着项目的不断发展,你开始要在多个组件之间执行重复的逻辑。我们常常说不要做重复的事情(DRY)和让一切保持它的简单。这两个原则利于我们编写和维护应用程序。也许你已经知道一些有助于遵循这些原则的模式、库和技术。Vuex将帮助你从组件中提取状态逻辑,Vue路由器将对路由逻辑做同样的工作,但是组件呢?我们经常遇到这样的情况,需要重用属于组件的一些UI功能。例如,除了被锚定和定位到元素之外,弹出窗(Popover)和提示框(Tooltip)都可以在某个事件触发时共享打开和关闭的功能。

视窗单位在移动端上的使用技巧

视窗单位一直都存在争议,部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法,这样就让本来简单的事情变得更加复杂化。一个典型的示例是:vw的计算是否要包含浏览器的滚动条?那么网站的导航或页面控件呢?这些应该算在计算中吗?还有一些设备本身的物理属性(比如iPhone X的刘海)是不容忽视的。

CSS Paint API

CSS Paint API是一个令人非常兴奋的东西,也是令人激动人心的时刻,它将开启CSS新的旅程。接下来让我们一起来看看它是什么,为什么会有它以及如何开始使用它。

页面

返回顶部