JavaScript中的CSS: CSSX
想像一下,一个Web组件都在一个.js
文件中,这个文件包含了一切:HTML结构、CSS样式和一些逻辑。仍然会有基本的样式表,但动态的CSS将使用JavaScript来处理。现在这样做是能做的,并实现它的一个方法称为CSSX。CSSX是我用了近一个月的业余时间写的一个项目,它是具有挑战性的、有趣的,而且在这个项目中我学到很多新东西。它的最终结果就是变成一个工具,允许你在JavaScript中写CSS。

想像一下,一个Web组件都在一个.js
文件中,这个文件包含了一切:HTML结构、CSS样式和一些逻辑。仍然会有基本的样式表,但动态的CSS将使用JavaScript来处理。现在这样做是能做的,并实现它的一个方法称为CSSX。CSSX是我用了近一个月的业余时间写的一个项目,它是具有挑战性的、有趣的,而且在这个项目中我学到很多新东西。它的最终结果就是变成一个工具,允许你在JavaScript中写CSS。
数据类型几乎在所有编程语言当中都有,在Sass中也不例外。数据类型是根据不同的用途分的类。例如2
是一个数值(number
),而SitePoint
是一个字符串(string
)。在这篇文章中,将涵盖Sass中所有的数据类型(共有七种数据类型),并且通过一些简单的例子来阐述这些数据类型在Sass中如何使用。
HTML没有给我们提供大量的标签去使用。其可选择的数量就像是街边的小商店而不是沃尔玛。我们有段落,列表和标题,但是我们不具有事件,新闻故事,或者说是配方。HTML提供给我们一个元素用于字符串的缩写标记,但是没有提供我们一个元素用于数字的价格标记。显然,从各种各样惊人的网站就可以看出,这一限制并没有得到很好的解决。虽然HTML并没有提供我们一个明确的元素用于内容价格的标记,但是他现在也已经变得十分灵活以至于“足够好”。这里套用Winston Churchill经常说的一句话,HTML是尝试过的标记形式中最糟糕的一种。
在JavaScript中随机性经常都会使用到,但随机性也有许多种不同的类型,以及需要根据不同的应用程序选择不同的随机性。今天尝试了一下,在JavaScript中数值的处理也是多种多样,非常的有意思,而且有些处理让人不解。只能暂作记录,慢慢考究。
在过去几年,CSS 的发展是很多 Web 设计者和开发人员未能想到的。CSS3 引入了新的功能,如 border-radius
, box-shadow
, text-shadow
, text-overflow
, multiple-background
, transition
, flexbox
、animation
以及媒体查询等。
figure
和figcaption
是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧。
在JavaScript中可以通过内置的Math.max()
的最大值,但是要从多重数组中取出最大值,还是有一定的难度。假设你有一个数组,而且这个数组中包含了数字的子数组,而我们要做的是从数组中的每个子数组中返回其最大的那个最大数。这篇文章介绍了如何实现在二维数组和多维数组中取出最大值的几种方案。
几年前,当CSS动画刚出来的时候是多么的令人兴奋,那时Chris Coyier问我,有没有什么方式使用CSS让元素绕一个圆形的路径运动。当时,它只是一个有趣的想法,但我在无意中发现有很多这方面的用例。例如,Google+添加新成员就使用了这样一个动画。当时我和Chris都没有想出一个合理的方式来解决这个问题。我们可以想出的最好方法是通过多个关键帧绘制近似一个圆形的路径,显然这不是一个好的主意,也没有任何方式能定义出来这样的圆形路径。那么我们必须得想出一个更好的方法,对吗?
动画并不总是页面加载的时候就开始。往往,我们都想通过用户的操作来触发动画,比如鼠标的悬浮(:hover
)或者鼠标按下时(:active
)。在这种情况之下,我们可能没办法控制动画播放的实妹次数,用户可能会迫使动画停止。例如,用户有通过悬浮(:hover
)触发动画:鼠标移出元素之前动画结束。在这样的例子中会发生什么呢?如果你的回答是“动画应该会呆其当前状态”或者“动画会顺利的过渡到前置状态”。默认情况下,动画就会停下来,突然跳到最初始状态。有时候可能会接受这种非常微妙的动画。但在大多数情况下它直接影响用户的体验。那么我们可以改变这种行为吗?
有时候我们想要模拟文本输入的动画效果,就是文本一个一个的出现。这种动画效果特别在科技网站上流行。使用的正确,让你的网站效果直接提到另一个档次上。通常要实现这样的效果都需要复杂的JavaScript脚本。尽管这只是纯粹的演示,使用CSS实现这样的效果那简直就是白日做梦。怎么可能呢?实现这个动画思路是包含文本的元素宽度从0
慢慢过渡(一个字符一个字符)元素内容宽度。你可能意识到这种方法的局限性是什么:它不能在多行文本中运行。值得庆幸的是,大多数时候,只是单行文本上使用这种动画效果,比如说标题。