通过建立一个导航栏了解盒子模型
在一个机构工作意味着我的工作大部分都是基于项目的。意味着每隔几个月(或更少,如果你明白我的意思)就会开始一个新的设计。有趣的是,一段时间后,我发现了每个设计师的风格和喜好。一个例子就是连续做过的三个项目中,导航UI的设计都有类似的风格。这种特殊的元素对我来说十分显眼,不仅因为我之前见过两次,而且我发现它涉及了盒子模型的各个方面。
在一个机构工作意味着我的工作大部分都是基于项目的。意味着每隔几个月(或更少,如果你明白我的意思)就会开始一个新的设计。有趣的是,一段时间后,我发现了每个设计师的风格和喜好。一个例子就是连续做过的三个项目中,导航UI的设计都有类似的风格。这种特殊的元素对我来说十分显眼,不仅因为我之前见过两次,而且我发现它涉及了盒子模型的各个方面。
object-fit
和object-position
是我最近最喜欢的两个CSS属性。他们使开发人员可以操作img
或video
中的内容,类似于我们可以用background-position
和background-size
操作背景内容一样。
如果你使用过SVG,你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。
requestAnimationFrame()
使得浏览器可以在下一帧执行之前,请求一个动作。但是每一中动画技术都不是完美的,各自有各自的问题。
给HTML中的内容添加动画的三种方法之一是,CSS animation【另外两种方法是:CSS transitions及JavaScript】。CSS动画相对简单。它允许你使用元素的CSS属性来添加动画。它可以让你创造出很多非常酷的效果,如移动、淡入淡出、改变颜色,等等。
现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。对 Web App 进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个 Web App 需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化 Web App 的性能。在接下来的小节中,我们将逐步介绍相关的细节。
**background-size
属性用于指定背景图像的大小。**背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover
关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain
关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。
**您使用 flexbox吗?**上周我在 twitter 上,问了这个问题,很惊讶地发现,不少于 50%的人回答是。之所以感到惊讶是因为,直到最近,我并不在我的任何项目中使用 flexbox ,我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是,经过一些调查研究之后,我的担忧得到明显的减弱,我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。
在实现Web项目的图标系统时,SVG是一个不错的选择。虽然使用SVG创建图标系统有多种方式。在这篇文章中,我们只看其中一种:SVG symbols。这项技术基于两个元素的使用:<symbol>
和<use>
。
如果你正在筹划新的前端项目或者重构现有项目,那么你需要认识到现在的前端开发环境已经今非昔比,这其中有太多的选择了:React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow…… 它们的本意是将开发简单化,却无形中提高了学习成本,也给未来项目的维护带来了不确定性。好在这一现象正在退热,优胜劣汰,优秀的项目慢慢沉淀下来,开发方式也越来越清晰。有些开发者正在尝试使用基于上述技术的框架进行开发,也在一定程度上减少了学习成本。
你如何在 CSS 中设置box-shadow
属性实现动画效果,既不会导致重新绘制每一帧,又不会严重影响你页面的性能?回答是:你并不能实现。因为box-shadow
的动画变化会损害性能。这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制,应该创建一个伪元素并对其opacity
元素进行动画处理,使其以每秒60帧的动画模仿运动物体相同的效果。